Download as PDF, PPTX
Uploaded byTomáš Muchka
Flat Design
The document explores flat design as a reaction against skeuomorphic and realist styles, emphasizing its characteristics and origins rooted in minimalist and Swiss design. It discusses the adoption of flat design by major companies like Microsoft and Apple, noting its focus on content and usability while also acknowledging its shortcomings such as reduced discoverability. The concept of Flat 2.0 is introduced as a solution that retains the aesthetics of flat design while integrating subtle elements to enhance user experience.
More Related Content
Flat Design
- 1. Flat Design Why wouldanybody want to be flat? Tomáš Muchka
- 2. What will wecover? ● 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 = designthat is flat
- 4. What Is Flat Design? Flatdesign 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 effectis 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 finddialog
- 7.
- 8. Skeuomorphism ● Objects haveunnecessary 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 - aJapanese electronic musical instruments manufacturer
- 10. An iOS e-bookreader
- 11.
- 12. Realism ● Realism isa 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 websitethat looks like a table
- 14. Cabane dans unarbre en Correzy - an exploration site
- 15.
- 16.
- 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 oniOS 6, Windows Phone 7, and Android
- 19. Flat design allows tofocus on the content
- 20. Why to Focuson 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, justbig numbers and as few actions as possible
- 23. Origins of FlatDesign
- 24. Swiss Style 1940-1950 Also calledInternational 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.
- 27. Metro / Windows8 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 Playerand Windows Phone 7
- 29. Apple Design 2013 Apple wasfamous 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 isnot perfect
- 31. Flat Design: Often sacrificesuser’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 FlatDesign
- 33. Which elements areclickable?
- 34. How good wasyour guess?
- 35. Which elements areclickable in this example?
- 36. How good wasyour guess this time?
- 37. Hidden Features Hidden navigationCryptic icons Gesture based actions
- 38.
- 39. Authentically Digital andUsable 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 LongShadows
- 41.
- 42. Layers of material(Material Design)
- 43. Conclusion Early pseudo3D GUIsand 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 DesignIdeas Just to recapitulate
- 45. Flat design = designthat is flat
- 46.
- 47. Flat design allows tofocus on the content
- 48. Flat design isnot perfect
- 49. Flat 2.0 provides anopportunity for compromise
- 50.
- 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