flat design for a non flat world

Flat Design in a non-flat WorldGregory Raiz, CEO

@graiz

The Plan

•What is flat design?

• Design is fashion

• Designing for humans

• Examples of flat design

• Affordances vs. Skeumorphism

• 5 ways to design with depth

What is flat design?

Font Color Image Depth

Fonts are thin.

Colors are bright

Shadow and gradients optional

New tools for depth

White is the new Black

Flat Design is Fashion.

iOS7 is Fashion.

It’s harder to hide bad design with flashy art

Bad Design?

Legibility Readability Usability

Bad Design?

!

!

!

!Readability

Legibility

UsabilityClick to get

started

The UX is familiar

% of people not freaking out

Handheld devices history

BlackBerry 6710

Nokia 1100 Palm Pilot

Flat design fashion

Classic Flat Design

Mobile Flat Design

Examples

Great design has affordances

Affordances Provide Natural Cues to

Interactions

Skeuomorphism

Skeuomorphism

This doesn’t work

Affordances clarify intended interactions

Yes

Be careful with borderless buttons

OK

InteractionsSwipeTap

Pinch Scroll

Lessons in non flat thinking

5

Your hands are not flat

1

Design for dexterity

Your posture is not flat

2

How do you use your device?

• Vertical vs Horizontal

• Sitting, Standing, Lying down

• Holding something in the other hand

One Hand Free No Hands Free

Your senses are not one dimensional

3

• Camera

• Accelerometer

•Microphone

• Proximity Sensor

•Magnetometer

Some of the sensors

Your location is not flat

4

Our lives are not one dimensional

5

•Work vs. Play

• Family vs. Job

• Entertainment vs. Productivity

• Young vs. Old

Life dimensions

Everything should be made as simple as possible, but not simpler.  - Albert Einstein

Answer the question, WHY?

@graizGregory Raiz, CEO