Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 53 Anzeige

Flat Design

Herunterladen, um offline zu lesen

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.

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.

Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Andere mochten auch (18)

Anzeige

Ähnlich wie Flat Design (20)

Anzeige

Flat Design

  1. 1. Flat Design Why would anybody want to be flat? Tomáš Muchka
  2. 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. 3. Flat design = design that is flat
  4. 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. 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. 6. Windows 95 find dialog
  7. 7. Windows 7 dialogs
  8. 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. 9. Korg - a Japanese electronic musical instruments manufacturer
  10. 10. An iOS e-book reader
  11. 11. Microsoft Bob (1995-1996) Skeuomorphism gone wrong
  12. 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. 13. A pizzeria website that looks like a table
  14. 14. Cabane dans un arbre en Correzy - an exploration site
  15. 15. Flat Design Attributes
  16. 16. Flat design is authentically digital
  17. 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. 18. Select Time on iOS 6, Windows Phone 7, and Android
  19. 19. Flat design allows to focus on the content
  20. 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. 21. No rich elements, just bold colors, white space and content
  22. 22. No decoration, just big numbers and as few actions as possible
  23. 23. Origins of Flat Design
  24. 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. 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. 26. Flat Design Adopters
  27. 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. 28. Zune Media Player and Windows Phone 7
  29. 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. 30. Flat design is not perfect
  31. 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. 32. Signifiers in Flat Design
  33. 33. Which elements are clickable?
  34. 34. How good was your guess?
  35. 35. Which elements are clickable in this example?
  36. 36. How good was your guess this time?
  37. 37. Hidden Features Hidden navigation Cryptic icons Gesture based actions
  38. 38. Fattening Flat Design: Flat 2.0
  39. 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. 40. Flat 2.0 gone wrong Long Shadows
  41. 41. Material Design
  42. 42. Layers of material (Material Design)
  43. 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. 44. Main Flat Design Ideas Just to recapitulate
  45. 45. Flat design = design that is flat
  46. 46. Flat design is authentically digital
  47. 47. Flat design allows to focus on the content
  48. 48. Flat design is not perfect
  49. 49. Flat 2.0 provides an opportunity for compromise
  50. 50. Thank you
  51. 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

×