Upload
future-insights
View
386
Download
2
Embed Size (px)
DESCRIPTION
Donna Lichaw's talk from Future Insights Live 2014 in Las Vegas: "Learn how and why flatness arose as a solution to what is now a century-old problem of visual representation in the age of technological reproduction and how to best utilize flatness to create innovative, communicative, and forward-thinking interfaces." Miss her talk? Join us at a future show: www.futureofmobile.com. Sign up for our newsletter at futureinsights.com and get 15% off your next conference.
Citation preview
FLAT, FLAT WORLD DEPTH, MEANING, AND COMMUNICATION IN THE MODERN MOBILE UI
DONNA LICHAW | @DLICHAW | GREATNORTHELECTRIC.COM
2FLAT, FLAT WORLD | @DLICHAW
ATTACK OF THE SKEUMORPHS A BRIEF HISTORY OF THE IOS
JANUARY 9, 2007 APPLE ANNOUNCES THE FIRST IPHONE
NOKIA 1600 TOP SELLING PHONE IN 2006 150 MILLION SOLD
FLAT, FLAT WORLD | @DLICHAW
FLAT, FLAT WORLD | @DLICHAW
http://mobile-review.com/articles/2010/iphone-history1-en.shtml
Patents 20070152979 20070155369 20070155434 !July 24, 2006
FLAT, FLAT WORLD | @DLICHAW
FLAT, FLAT WORLD | @DLICHAW
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
SKEUMORPHISM
1986 Chrysler LeBaron Town & Country Station Wagon
London Omnibus, 1898
1940 Pontiac Special Series 25 Woodie
“ 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
http://www.flickr.com/photos/askpang/3057495131
iOS 1 iOS 6
IOS 7
APPLE'S IOS 7 BRINGS JACK TO TEARS
http://www.youtube.com/watch?v=JTpXVv-DaBQ
FLAT, FLAT WORLD A BRIEF HISTORY OF MODERN ART
Georges Braque, The Clarinet, 1913
THE ACADEMY
FLAT, FLAT WORLD | @DLICHAW
PHOTOGRAPHYEADWEARD MUYBRIDGE, 1880s
FLAT, FLAT WORLD | @DLICHAW
MONT SAINTE-VICTOIRE PAUL CÉZANNE, 1906
NUDE DESCENDING A STAIRCASE MARCEL DUCHAMP, 1912
THE CLARINET GEORGES BRAQUE, 1913
CUBISM
GEOMETRICITY SIMULTANEITY PASSAGE
Georges Braque, The Clarinet, 1913
PAINTERLY REALISM OF A FOOTBALL PLAYER — COLOR MASSES IN THE 4TH DIMENSION
KAZIMIR MALEVICH, 1915
SUPREMATISM
INTERNATIONAL STYLEFLAT, FLAT WORLD | @DLICHAW
METRO
TYPOGRAPHY MOTION CONTENT NOT CHROME HONESTY
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 CHROME
@lukew!http://www.youtube.com/watch?v=EUeNCzRhhDE
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 CHROME
TYPOGRAPHY
PAWAN SINHA: HOW BRAINS LEARN TO SEE
Pawan Sinha on how brains learn to see
@lukew!http://www.youtube.com/watch?v=EUeNCzRhhDE
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
http://www.flickr.com/photos/askpang/3057495131
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
ME, TOO!
FLAT, FLAT WORLD | @DLICHAW
DEFER TO CONTENT PROVIDE CLARITY USE DEPTH TO COMMUNICATE
DEFER TO CONTENT PROVIDE CLARITY USE DEPTH TO COMMUNICATE
DEFER TO CONTENT PROVIDE CLARITY USE DEPTH TO COMMUNICATE
“ USE PLENTY OF WHITESPACE.
DEFER TO CONTENT PROVIDE CLARITY USE DEPTH TO COMMUNICATE
FLAT, FLAT WORLD | @DLICHAW
PASTICHE
“DESIGN IS NOT JUST WHAT IT LOOKS LIKE AND FEELS LIKE. DESIGN IS HOW IT WORKS.
!
– STEVE JOBS
http://www.businessinsider.com/facebook-paper-2014-1 FLAT, FLAT WORLD | @DLICHAW
usertesting.com/blog/2014/02/07/six-ux-lessons-learned-from-the-new-facebook-app-paper/
http://www.youtube.com/watch?v=PmxYFtL6z0U
FLAT, FLAT WORLD | @DLICHAW
GEOMETRICITY SIMULTANEITY PASSAGE TYPOGRAPHY MOTION CONTENT NOT CHROME HONESTY
EASY TO USE ELEGANT DELIGHTFUL AUTHENTICALLY DIGITAL}
FLAT, FLAT WORLD | @DLICHAW
DONNA LICHAW @DLICHAW GREATNORTHELECTRIC.COM
THANK YOU.