USER INTERFACE 101

HI, I’M JOHANNA

UX/UI Designer
at Block Zero

I did some school

BTS in Visual Design
DSAA in Interactive Design
Master in Interaction Design

I like
Drawing • 3D • Food
PROCESS
Identity Sketches
Opportunities
& Values & Wireframes

Workshop Oh God Product

User Architecture UI Guidelines

Journeys & User Flows & Mockups
10 VISUAL TIPS
BRAINS ARE
PREDICTABLE
Western individuals scan content in
an F pattern, and have an established
mental model of how an interface is

==> Put most important info in the top

third/middle of screen, and design
according to normal reading patterns
BRAINS LOVE
PATTERNS
They think that things that are close
together belong together.

==> Use grouping and white space

to create patterns and help users
make sense of your interface.
BRAINS LIKE
VISUAL CUES
Brains expect familiar shapes to
behave a certain way, and are
thrown off when they are not

==> Think about the affordance of

your cue to make it more likely for
your users to take action
BRAINS NEED
CONTRAST
Content is not read, it is quickly
scanned through.

==> Introduce hierarchy within your

content by varying sizes, shapes,
behaviors and colors, to make it
easier to parse
BRAINS INFER
MEANING TO COLOR
Colors are as much a way to dress
your interface as they are a strong
signifyer of underlying meaning

==> Choose colors carefully by taking

into account the meaning they may
invoke within categories of users
SHOUT SPARINGLY
AT BRAINS
Capital letters can be powerful to
transmit a message, but they also
make people feel shout at.

==> Save capital letters for headlines,

important information or actions
EYES DON’T
READ TINY
It puts a strain on users (young and
old alike) when the font is not adapt-
ed for comfortable reading.

==> Choose a point size that is large

enough. This will also help cull content
overload and line length.
BRAINS ARE
FORGETFUL
People only remember 4 items
at once.

==> Help reduce cognitive load by

limiting information, options and
actions your offer to users at a time,
and be obvious with your descriptions
BRAINS EAT
BITE SIZED INFO
Disclosing too much information at
once will overload your user, who can
only process a small amount at a time

==> Use progressive disclosure,

giving what’s needed when it’s need-
ed (more clicks, less thinking)
BRAINS THRIVE
ON STORIES
Information is best processed and
retained in story form.

==> Story-telling will make your

information understandable, relatable,
interesting and memorable.

Save the whale

Taste the wine
CORE UI TOOLS
GRID
The grid layout is divided into
columns and rows. Each interface
has different needs grid-wise, and can
contain 12,6,4 columns...

Rythm
Vertical and horizontal rhythms create
a harmonious feeling. Their foundation
is the baseline of your text, that you
use as an incremental measure (8px).
STYLES
Styles are sustainable, and will gain
you time in the long run.

Text Styles
Try to define your text styles as closely
to the developers’ terminology.

Layer Styles
For colors and special effects
(shadows, blur, etc).
ASSETS
Components that are created only
once (like buttons, cards, etc). Any
modification on a symbol will be repli-
cated across all the symbol’s children.

Furthermore, symbols can be partly

overriden, without breaking the con-
nection to the parent symbol. You can
override text, images, styles and sizes.
SIZING
We follow a few rules of thumb and
common practices for sizes when it
comes to designing UIs:

- Min. font size for is 16px for legibility

- Min. size for buttons is 40px
- Min. size for icons is 16px
- Desktop size: 1284*850
- Mobile size: 360*640
ELEMENTS
Atoms
Smallest single item of your interface,
like a text label, an icon, a color, etc

Components
Atoms combined together form com-
ponents: a button, a text field, etc

Modules
Largest repeatable items: carrousels...
STATES
States of an element are used to give
feedback to the user.

Default state: not interacted with

Active state: when it is triggered
Focused state: brought into focus
through the keyboard
Used state: when it has been used
Disabled state: not interactable
LET’S DO IT!