flat design
TRANSCRIPT
Flat DesignWhy would anybody want to be flat?
Tomáš Muchka
What will we cover?
● What is Flat Design● Other design styles in digital world● Flat Design attributes● Origins of Flat Design● Flat Design adopters● Flat Design issues● What is Flat 2.0
Flat design = design that is flat
What Is Flat Design?
Flat design is a reactionary movement against three-dimensional, skeumorphic and realist design styles.
Many designers consider it to be an offshoot of Minimalist Design or Swiss Style.
Three-dimensional effect
Three-dimensional effect is there since the early days of GUI.
● Some elements that appear raised look like they could be pressed down.● Other elements apper sunken or hollow look like the could be filled.
Often too much aggressive, overdone, and visually distracting.
Windows 95 find dialog
Windows 7 dialogs
Skeuomorphism
● Objects have unnecessary design features that mimic a real-world precedent.
● Skeumorphic design is intended to help users understand how to use an interface by allowing them to apply some prior knowledge about its precedent.
Korg - a Japanese electronic musical instruments manufacturer
An iOS e-book reader
Microsoft Bob (1995-1996)
Skeuomorphismgone wrong
Realism
● Realism is a design style that mimics physical items or textures for aesthetic reasons.
● There is no metaphor for the user.
Realism if often used together with Skeuomorphism.
A pizzeria website that looks like a table
Cabane dans un arbre en Correzy - an exploration site
Flat Design Attributes
Flat design is authentically digital
Authentically digital?
Skeumorphic Design
● Objects have unnecessary design features that mimic a real-world precedent.
● Skeumorphic design is intended to help users understand how to use an interface by allowing them to apply some prior knowledge about its precedent.
Flat Design
● User’s digital abilities have evolved. They are exposed to digital world on a daily basis.
● There is no need to reproduce the appearance of the physical world.
Select Time on iOS 6, Windows Phone 7, and Android
Flat design allows to focus on the content
Why to Focus on the Content?
● More and more devices with various screen sizes are on the market.● Developers are crafting responsive products to satisfy all customers.● Rich crafted layouts are harder to maintain and update.● Layout is more likely to change over time as a response to actual design
trends.
It is easier to create long-standing products when you focus on the content.
No rich elements, just bold colors, white space and content
No decoration, just big numbers and as few actions as possible
Origins of Flat Design
Swiss Style1940-1950
Also called International Typographic Style.
Focused on grids, sans-serif typography and clean hierarchy of content and layout.
Typography is a major element in Swiss Style. Do you know Helvetica?
Minimalist Design1960-1970
Minimalism characteristics:
● Flat patterns and textures● Limited or monochromatic
colors● Restricted features and
elements● Usage of negative space
Remove everything in a piece, leave just the necessary and needed elements. Yves Klein, 1962: The Blue Epoch
Flat Design Adopters
Metro / Windows 82011 - 2012
Very influential in popularizing flat design.
Flat origins could be tracked back to Windows Phone 7 or even Zune.
Openly inspirated in Swiss Style.
Zune Media Player and Windows Phone 7
Apple Design2013
Apple was famous for its skeumorphism and realism designs.
Huge interface changes towards flat design were introduced in iOS 7.
OS X flattering since 10.9 (Mavericks).
iOS 6 iOS 7
Flat design is not perfect
Flat Design:
Often sacrifices user’s needs for the sake of trendy aesthetics.
● Removes traditional signifiers, thus reduces discoverability.● Hides features.● Creates applications with extraordinarily low information density.
These problems slowly reduce user efficiency.
Signifiers in Flat Design
Which elements are clickable?
How good was your guess?
Which elements are clickable in this example?
How good was your guess this time?
Hidden Features
Hidden navigation Cryptic icons Gesture based actions
Fattening Flat Design:Flat 2.0
Authentically Digital and Usable
Design can be simple, elegant, aesthetic, and usable at the same time.
How to do that?Such a design should be mostly flat, but it makes use of subtle shadows, highlights, and layers to create some depth in the UI.
Flat 2.0 gone wrong
Long Shadows
Material Design
Layers of material (Material Design)
Conclusion
Early pseudo3D GUIs and skeuomorphism often produced heavy, clunky interfaces. Scaling back from those excesses is good for usability. But removing visual distinctions to produce fully flat designs with no signifiers can be an equally bad extreme.
Flat 2.0 provides an opportunity for compromise—visual simplicity without sacrificing signifiers.
Main Flat Design IdeasJust to recapitulate
Flat design = design that is flat
Flat design is authentically digital
Flat design allows to focus on the content
Flat design is not perfect
Flat 2.0 provides an opportunity for compromise
Thank you
Sources
● Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users
● The history of flat design: How efficiency and minimalism turned the digital world flat
● Flat Design: A History, Past, Present and Future
Additional Sources:
● Eternal Material: Wood Textured Website Designs● Microsoft Bob● Misused mobile UX patterns
