iOS 7 Flat Design

Keren Nissim Keren.niss@gmail.com

Nov. 2013 1

2

3

4

6

Prototyping

DesignDevelopment

Product

7

CSS

Html

Code

PNG

iPhon 3

iPhon 4

iPhon 5

Retina Display?

Desktop Application?

Android?

Cuts

#%?!**##

Reselotions???

Nexus 4

Nexus 2

SVG

8

CSS Html

:)

Vector SVG

Design by Code

9

Label{ font-family: "Helvetica Neue"; font-size: 34px; color: #000; }

SVGchevron_grey.svg

10

Simplicity

11

Simplicity

12

Simplicity

13

Simplicity

14

Simplicity

15

Simplicity

16

Simplicity

17

Too Simple?

18

What's Next?

19

Back In Time

Layered Design

http://www.pencilscoop.com/

Layered Design

Layered Design

Layered Design

#myDiv { -webkit-filter: blur(20px); -moz-filter: blur(20px); -o-filter: blur(20px); -ms-filter: blur(20px); filter: blur(20px); opacity: 0.4; }

26Spg: starwood hotels & resorts

Layered Design

27Design by Meng

To

Layered Design

28

Using Gesture

29

UsingGesture

30

UsingGesture

31

UsingGesture

32

Summary• The flat design is here to stay

• Milestone in the evolution of technological

design

• Design by code

• Functional Design - Design by content

• Touch screen gestures more then single

Tap

• Layered Design – Floating information and

actions without switching screens

33

Thank You :)

Keren NissimStudio’le UX