• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Flat, Flat World: Depth, Meaning, and Communication 
in the Modern Mobile UI
 

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

on

  • 1,289 views

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 ...

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.

Statistics

Views

Total Views
1,289
Views on SlideShare
939
Embed Views
350

Actions

Likes
8
Downloads
26
Comments
0

5 Embeds 350

http://www.greatnorthelectric.com 166
https://twitter.com 122
https://donna-lichaw-5yo3.squarespace.com 56
http://lanyrd.com 5
https://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • FLAT, FLAT WORLD DEPTH, MEANING, AND COMMUNICATION 
 IN THE MODERN MOBILE UI DONNA LICHAW | @DLICHAW | GREATNORTHELECTRIC.COM
    • 2 FLAT, 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,
    • 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, PAINTERLY REALISM OF A FOOTBALL PLAYER — COLOR MASSES IN THE 4TH DIMENSION KAZIMIR MALEVICH, 1915 SUPREMATISM
    • INTERNATIONAL STYLE FLAT, 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
    • @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 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.