Design Pillars - GECO-Project-App/facilitation-app GitHub Wiki

Why we make design decisions is based on our design philosophies. How we make decisions and what we focus our craft on is decided by our design pillars.

People don't read

Shocker, but people don't read. Especially now that most people's media diet is a constant stream of dopamine-delivering short-form video content, people don't read text anymore (the irony of me writing a text document to lay out our design pillars isn't lost on me).

If you look at your joke book/cheat sheet as a facilitator during an exercise, you don't have the time and focus to read half a novel worth of text.

We need to show, not tell, our users what to do in a given situation. We should utilize still graphics or, even better, motion graphics instead of text.

This doesn't mean all text is terrible or we shouldn't use text. But we should always aim to show, then tell.

If we have text, it should be optimized for readability

• Put the most important information first.
• The font should be as large as possible and have great contrast to the BG color
• 50-60 characters per line
• NEVER centered text (always left aligned or block) if text is more than one line

What you see is what there is!

All necessary actions a user can take on a page should be visible within the viewport.

Toilet paper roll concept

Users look at your app through a toilet paper role (in terms of their visual focus)

• The most important element on a given screen should be the biggest element (animation/timer/etc)
• Color shouldn't detract attention from the most important element

Mobile first

We expect most of our users to use the app on mobile or in a split screen/smaller window on a desktop. For "full width" desktop breakpoint, the app should be contained to the center third of the screen.