flat design for a non flat world

60
Flat Design in a non-flat World Gregory Raiz, CEO @graiz

Upload: greg-raiz

Post on 27-Jan-2015

125 views

Category:

Technology


2 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Flat design for a non flat world

Flat Design in a non-flat WorldGregory Raiz, CEO

@graiz

Page 2: Flat design for a non flat world

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

Page 3: Flat design for a non flat world

What is flat design?

Page 4: Flat design for a non flat world

Font Color Image Depth

Page 5: Flat design for a non flat world

Fonts are thin.

Page 6: Flat design for a non flat world

Colors are bright

Page 7: Flat design for a non flat world

Shadow and gradients optional

Page 8: Flat design for a non flat world

New tools for depth

Page 9: Flat design for a non flat world

White is the new Black

Page 10: Flat design for a non flat world

Flat Design is Fashion.

Page 11: Flat design for a non flat world

iOS7 is Fashion.

Page 12: Flat design for a non flat world

It’s harder to hide bad design with flashy art

Page 13: Flat design for a non flat world

Bad Design?

Legibility Readability Usability

Page 14: Flat design for a non flat world

Bad Design?

!

!

!

!Readability

Legibility

UsabilityClick to get

started

Page 15: Flat design for a non flat world

The UX is familiar

Page 16: Flat design for a non flat world

% of people not freaking out

Page 17: Flat design for a non flat world

Handheld devices history

Page 18: Flat design for a non flat world

BlackBerry 6710

Nokia 1100 Palm Pilot

Flat design fashion

Page 19: Flat design for a non flat world

Classic Flat Design

Page 20: Flat design for a non flat world

Mobile Flat Design

Page 21: Flat design for a non flat world

Examples

Page 22: Flat design for a non flat world
Page 23: Flat design for a non flat world
Page 24: Flat design for a non flat world
Page 25: Flat design for a non flat world
Page 26: Flat design for a non flat world
Page 27: Flat design for a non flat world
Page 28: Flat design for a non flat world
Page 29: Flat design for a non flat world
Page 30: Flat design for a non flat world
Page 31: Flat design for a non flat world
Page 32: Flat design for a non flat world
Page 33: Flat design for a non flat world

Great design has affordances

Page 34: Flat design for a non flat world

Affordances Provide Natural Cues to

Interactions

Page 35: Flat design for a non flat world

Skeuomorphism

Page 36: Flat design for a non flat world
Page 37: Flat design for a non flat world
Page 38: Flat design for a non flat world

Skeuomorphism

Page 39: Flat design for a non flat world

This doesn’t work

Page 40: Flat design for a non flat world

Affordances clarify intended interactions

Yes

Page 41: Flat design for a non flat world

Be careful with borderless buttons

OK

Page 42: Flat design for a non flat world

InteractionsSwipeTap

Pinch Scroll

Page 43: Flat design for a non flat world

Lessons in non flat thinking

5

Page 44: Flat design for a non flat world

Your hands are not flat

1

Page 45: Flat design for a non flat world
Page 46: Flat design for a non flat world

Design for dexterity

Page 47: Flat design for a non flat world

Your posture is not flat

2

Page 48: Flat design for a non flat world
Page 49: Flat design for a non flat world

How do you use your device?

• Vertical vs Horizontal

• Sitting, Standing, Lying down

• Holding something in the other hand

Page 50: Flat design for a non flat world

One Hand Free No Hands Free

Page 51: Flat design for a non flat world

Your senses are not one dimensional

3

Page 52: Flat design for a non flat world
Page 53: Flat design for a non flat world

• Camera

• Accelerometer

•Microphone

• Proximity Sensor

•Magnetometer

Some of the sensors

Page 54: Flat design for a non flat world

Your location is not flat

4

Page 55: Flat design for a non flat world
Page 56: Flat design for a non flat world

Our lives are not one dimensional

5

Page 57: Flat design for a non flat world

•Work vs. Play

• Family vs. Job

• Entertainment vs. Productivity

• Young vs. Old

Life dimensions

Page 58: Flat design for a non flat world

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

Page 59: Flat design for a non flat world

Answer the question, WHY?

Page 60: Flat design for a non flat world

@graizGregory Raiz, CEO