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

50 %
50 %
Information about Flat, Flat World: Depth, Meaning, and Communication 
in the Modern...
Technology

Published on March 14, 2014

Author: dlichaw

Source: slideshare.net

Description

Confused by flat design? So is
Apple. Learn what "flat" design
really is and why it's a common
solution to the woes of modern
design.

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

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

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

Add a comment

Related presentations

Related pages

Flat, Flat World Depth, Meaning, and Communications in the ...

Level, FLAT WORLD DEPTH, MEANING, AND COMMUNICATION ? IN THE MODERN MOBILE UI DONNA LICHAW | @dlichaw | Greatnorthelectric.com 2 FLAT, FLAT ...
Read more

Flat - definition of flat by The Free Dictionary

... English dictionary definition of flat. adj ... to this meaning of flat is ... surface in relation to depth or thickness; "flat computer ...
Read more

Modern Art UI - YouTube

... Modern Art UI of the online course: "Programming Mobile Applications for Android Handheld ... Modern Art UI of the online ...
Read more

Flat Design: An In-Depth Look - Awwwards - Website Awards ...

Flat Design or Flat UI has been one of the most talked about trends in web and user ... Flat Design: An In-Depth Look. ... Mobile Design Trends 2015 ...
Read more

When Flat Design Falls Flat - Six Revisions - Web Design ...

Window’s flat Modern UI ... over the Modern UI option. Though flat design is ... meaning driven solutions. The world is populated with ...
Read more

What is communication? definition and meaning

... ideas and feelings but also create and share meaning. ... Definition of communication: ... Global System for Mobile Communications (GSM) word of mouth ...
Read more

Getting Started with Flat UI Design - SitePoint – Learn ...

... and now we’re designing still very much with the user at the forefront of our minds with flat UI ... If the world was flat, ... meaning than flat ...
Read more