An comprehensive introduction to Flat Design. Comparision of Flat Design with other digital design styles. Flat Design attributes, origins, adopters and issues. Also a mention about Flat 2.0.

1. Flat Design
Why would anybody want to be flat?
Tomáš Muchka

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

3. Flat design =
design that is flat

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

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

6. Windows 95 find dialog

7. Windows 7 dialogs

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

9. Korg - a Japanese electronic musical instruments manufacturer

10. An iOS e-book reader

11. Microsoft Bob (1995-1996)
Skeuomorphism
gone wrong

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

13. A pizzeria website that looks like a table

14. Cabane dans un arbre en Correzy - an exploration site

15. Flat Design Attributes

16. Flat design is
authentically
digital

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

18. Select Time on iOS 6, Windows Phone 7, and Android

19. Flat design
allows to focus
on the content

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

21. No rich elements, just bold colors, white space and content

22. No decoration, just big numbers and as few actions as possible

23. Origins of Flat Design

24. Swiss Style
1940-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?

25. Minimalist Design
1960-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

26. Flat Design Adopters

27. Metro / Windows 8
2011 - 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.

28. Zune Media Player and Windows Phone 7

29. Apple Design
2013
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

30. Flat design is not
perfect

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

32. Signifiers in Flat Design

33. Which elements are clickable?

34. How good was your guess?

35. Which elements are clickable in this example?

36. How good was your guess this time?

37. Hidden Features
Hidden navigation Cryptic icons Gesture based actions

38. Fattening Flat Design:
Flat 2.0

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

40. Flat 2.0
gone wrong
Long Shadows

41. Material Design

42. Layers of material (Material Design)

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

44. Main Flat Design Ideas
Just to recapitulate

45. Flat design =
design that is flat

46. Flat design is
authentically
digital

47. Flat design
allows to focus
on the content

48. Flat design is not
perfect

49. Flat 2.0 provides
an opportunity for
compromise

50. Thank you

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