Flat, Flat World: Depth, Meaning, and Communication 
in the Modern Mobile UI

2,720 views
2,444 views

Published on

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.

Published in: Technology, News & Politics

Flat, Flat World: Depth, Meaning, and Communication 
in the Modern Mobile UI

  1. 1. FLAT, FLAT WORLD DEPTH, MEANING, AND COMMUNICATION 
 IN THE MODERN MOBILE UI DONNA LICHAW | @DLICHAW | GREATNORTHELECTRIC.COM
  2. 2. 2 FLAT, FLAT WORLD | @DLICHAW
  3. 3. ATTACK OF THE SKEUMORPHS A BRIEF HISTORY OF THE IOS
  4. 4. JANUARY 9, 2007 APPLE ANNOUNCES THE FIRST IPHONE
  5. 5. NOKIA 1600 TOP SELLING PHONE IN 2006 150 MILLION SOLD FLAT, FLAT WORLD | @DLICHAW
  6. 6. FLAT, FLAT WORLD | @DLICHAW
  7. 7. http://mobile-review.com/articles/2010/iphone-history1-en.shtml Patents 20070152979 20070155369 20070155434 ! July 24, 2006 FLAT, FLAT WORLD | @DLICHAW
  8. 8. FLAT, FLAT WORLD | @DLICHAW
  9. 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. 10. SKEUMORPHISM
  11. 11. 1986 Chrysler LeBaron Town & Country Station Wagon London Omnibus, 1898 1940 Pontiac Special Series 25 Woodie
  12. 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. 13. http://www.flickr.com/photos/askpang/3057495131
  14. 14. iOS 1 iOS 6
  15. 15. IOS 7
  16. 16. APPLE'S IOS 7 BRINGS JACK TO TEARS http://www.youtube.com/watch?v=JTpXVv-DaBQ
  17. 17. FLAT, FLAT WORLD A BRIEF HISTORY OF MODERN ART Georges Braque, The Clarinet,
  18. 18. THE ACADEMY FLAT, FLAT WORLD | @DLICHAW
  19. 19. PHOTOGRAPHYEADWEARD MUYBRIDGE, 1880s FLAT, FLAT WORLD | @DLICHAW
  20. 20. MONT SAINTE-VICTOIRE PAUL CÉZANNE, 1906 NUDE DESCENDING A STAIRCASE MARCEL DUCHAMP, 1912 THE CLARINET GEORGES BRAQUE, 1913 CUBISM
  21. 21. GEOMETRICITY SIMULTANEITY PASSAGE
  22. 22. Georges Braque, The Clarinet, PAINTERLY REALISM OF A FOOTBALL PLAYER — COLOR MASSES IN THE 4TH DIMENSION KAZIMIR MALEVICH, 1915 SUPREMATISM
  23. 23. INTERNATIONAL STYLE FLAT, FLAT WORLD | @DLICHAW
  24. 24. METRO
  25. 25. TYPOGRAPHY MOTION CONTENT NOT CHROME HONESTY
  26. 26. 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
  27. 27. @lukew! http://www.youtube.com/watch?v=EUeNCzRhhDE
  28. 28. 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
  29. 29. PAWAN SINHA: HOW BRAINS LEARN TO SEE
  30. 30. Pawan Sinha on how brains learn to see
  31. 31. @lukew! http://www.youtube.com/watch?v=EUeNCzRhhDE
  32. 32. 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
  33. 33. http://www.flickr.com/photos/askpang/3057495131
  34. 34. 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
  35. 35. 36 ME, TOO! FLAT, FLAT WORLD | @DLICHAW
  36. 36. DEFER TO CONTENT PROVIDE CLARITY USE DEPTH TO 
 COMMUNICATE
  37. 37. DEFER TO CONTENT PROVIDE CLARITY USE DEPTH TO 
 COMMUNICATE
  38. 38. DEFER TO CONTENT PROVIDE CLARITY USE DEPTH TO 
 COMMUNICATE
  39. 39. “USE PLENTY OF WHITESPACE.
  40. 40. DEFER TO CONTENT PROVIDE CLARITY USE DEPTH TO 
 COMMUNICATE
  41. 41. FLAT, FLAT WORLD | @DLICHAW
  42. 42. PASTICHE
  43. 43. “DESIGN IS NOT JUST WHAT IT LOOKS LIKE AND FEELS LIKE. DESIGN IS HOW IT WORKS. ! – STEVE JOBS
  44. 44. http://www.businessinsider.com/facebook-paper-2014-1 FLAT, FLAT WORLD | @DLICHAW
  45. 45. usertesting.com/blog/2014/02/07/six-ux-lessons-learned-from-the-new-facebook-app-paper/
  46. 46. http://www.youtube.com/watch?v=PmxYFtL6z0U
  47. 47. FLAT, FLAT WORLD | @DLICHAW
  48. 48. GEOMETRICITY SIMULTANEITY PASSAGE TYPOGRAPHY MOTION CONTENT NOT CHROME HONESTY EASY TO USE ELEGANT DELIGHTFUL AUTHENTICALLY DIGITAL} FLAT, FLAT WORLD | @DLICHAW
  49. 49. DONNA LICHAW @DLICHAW GREATNORTHELECTRIC.COM THANK YOU.

×