Confused by flat design? So is Apple. Since the announcement of iOS 7, "flatness" in mobile user interfaces has been a hot topic of conversation. Conversations have spanned from usability to aesthetics, from praise to skepticism. The problem is that since flatness is not and never was just an aesthetic innovation, we are having the wrong conversation. In other words, yes, Apple got it all wrong. In this talk, we'll learn about the evolution of the modern mobile OS, why and how flatness arose as a solution to what is now a century-old problem of visual representation in the age of technological reproduction. Through this journey, you will learn how and why to design interfaces for touch that are easy to use, elegant, and delightful.

1. FLAT, FLAT WORLD
DEPTH, MEANING, AND COMMUNICATION
IN THE MODERN MOBILE UI
DONNA LICHAW | @DLICHAW | GREATNORTHELECTRIC.COM

2. 2
FLAT, FLAT WORLD | @DLICHAW

3. ATTACK OF THE
SKEUMORPHS
A BRIEF HISTORY OF THE IOS

4. JANUARY 9, 2007
APPLE ANNOUNCES THE FIRST IPHONE

5. NOKIA 1600
TOP SELLING PHONE IN 2006
150 MILLION SOLD
FLAT, FLAT WORLD | @DLICHAW

6. FLAT, FLAT WORLD | @DLICHAW

7. http://mobile-review.com/articles/2010/iphone-history1-en.shtml
Patents
20070152979
20070155369
20070155434
!
July 24, 2006
FLAT, FLAT WORLD | @DLICHAW

8. FLAT, FLAT WORLD | @DLICHAW

9. Consider Adding
Physicality and Realism
Sometimes, the more true to life
your app looks and behaves, the
easier it is for people to
understand how it works and the
more they enjoy using it.
– Apple Human Interface Guidelines
FLAT, FLAT WORLD | @DLICHAW

10. SKEUMORPHISM

11. 1986 Chrysler LeBaron Town & Country Station Wagon
London Omnibus, 1898
1940 Pontiac Special Series 25 Woodie

12. “I assumed that the iPhone's touch screen would
be harder to use, and simply be "better" only
because it offered more screen real estate. I
was wrong; its touch screen is far easier and
more comfortable to type on than the tiny
physical keys of the Treo.
!
– PC MAG
IPHONE REVIEW SERIES: IPHONE VS. PALM TREO 650

13. http://www.flickr.com/photos/askpang/3057495131

14. iOS 1 iOS 6

15. IOS 7

16. APPLE'S IOS 7
BRINGS JACK
TO TEARS
http://www.youtube.com/watch?v=JTpXVv-DaBQ

17. FLAT, FLAT WORLD
A BRIEF HISTORY OF MODERN ART
Georges Braque, The Clarinet,

18. THE ACADEMY
FLAT, FLAT WORLD | @DLICHAW

19. PHOTOGRAPHYEADWEARD MUYBRIDGE, 1880s
FLAT, FLAT WORLD | @DLICHAW

20. MONT SAINTE-VICTOIRE
PAUL CÉZANNE, 1906
NUDE DESCENDING A STAIRCASE
MARCEL DUCHAMP, 1912
THE CLARINET
GEORGES BRAQUE, 1913
CUBISM

21. GEOMETRICITY
SIMULTANEITY
PASSAGE

22. Georges Braque, The Clarinet,
PAINTERLY REALISM OF A FOOTBALL PLAYER
— COLOR MASSES IN THE 4TH DIMENSION
KAZIMIR MALEVICH, 1915
SUPREMATISM

23. INTERNATIONAL STYLE FLAT, FLAT WORLD | @DLICHAW

24. METRO

26. TYPOGRAPHY
MOTION
CONTENT NOT CHROME
HONESTY

27. TYPOGRAPHY
“Type is beautiful. Not only is it attractive to the eye, but it can also be
functional. The right balance of weight and positioning can create a
visual hierarchy. Additionally, well placed type can help lead you to
more content.”
MOTION
CONTENT NOT

28. @lukew!
http://www.youtube.com/watch?v=EUeNCzRhhDE

29. MOTION
“is what brings the interface to life. Transitions are just as important as
graphical design. By developing a consistent set of motions or
animations, a system is created that provides context for usability,
extra dimension and depth and improves the perceived performance of
the whole interface.”
CONTENT OVER
TYPOGRAPHY

30. PAWAN SINHA:
HOW BRAINS LEARN TO SEE

31. Pawan Sinha on how brains learn to see

32. @lukew!
http://www.youtube.com/watch?v=EUeNCzRhhDE

33. CONTENT NOT CHROME
“By removing all notions of extra chrome in the UI, the content becomes
the main focus. This is especially relevant due to the smaller screen size
and gesture-based interactions.”
HONESTY
MOTION

34. http://www.flickr.com/photos/askpang/3057495131

35. HONESTY
“Design explicitly for the form factor of a hand held device using touch,
a high resolution screen and simplified and expedited forms of
interaction. In other words, be ‘authentically digital’.”
CONTENT NOT CHROME

36. 36
ME, TOO!
FLAT, FLAT WORLD | @DLICHAW

37. DEFER TO CONTENT
PROVIDE CLARITY
USE DEPTH TO
COMMUNICATE

38. DEFER TO CONTENT
PROVIDE CLARITY
USE DEPTH TO
COMMUNICATE

40. DEFER TO CONTENT
PROVIDE CLARITY
USE DEPTH TO
COMMUNICATE

41. “USE PLENTY OF
WHITESPACE.

43. DEFER TO CONTENT
PROVIDE CLARITY
USE DEPTH TO
COMMUNICATE

44. FLAT, FLAT WORLD | @DLICHAW

47. PASTICHE

48. “DESIGN IS NOT JUST WHAT IT
LOOKS LIKE AND FEELS LIKE.
DESIGN IS HOW IT WORKS.
!
– STEVE JOBS

49. http://www.businessinsider.com/facebook-paper-2014-1 FLAT, FLAT WORLD | @DLICHAW

50. usertesting.com/blog/2014/02/07/six-ux-lessons-learned-from-the-new-facebook-app-paper/

51. http://www.youtube.com/watch?v=PmxYFtL6z0U

52. FLAT, FLAT WORLD | @DLICHAW

53. GEOMETRICITY
SIMULTANEITY
PASSAGE
TYPOGRAPHY
MOTION
CONTENT NOT CHROME
HONESTY
EASY TO USE
ELEGANT
DELIGHTFUL
AUTHENTICALLY DIGITAL}
FLAT, FLAT WORLD | @DLICHAW

54. DONNA LICHAW
@DLICHAW
GREATNORTHELECTRIC.COM
THANK YOU.