Flat Design - A Primer


Published on

The world is, once again, flat. What is flat design? Learn about the 'less is more' aesthetic popularized by Apple, Microsoft and Google.

Published in: Technology, Business
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Flat Design - A Primer

  1. 1. APRIMER
  2. 2. The world is,once again, flat.What is flat design?Flat design style embraces visual minimalism,forgoing textures, drop shadows and lightingeffects for simple shapes and flat colors.Flat design has actually been around for quitea long time. Its roots go back to Swiss design(also called International Style or InternationalTypographic Style), dating from the 1940s-1950s.Prominent in poster design. Often we creativesrefer to this as the “Less is More” principal.
  3. 3. Why do designers like it?Why do we want to startimplementing it?It’s trend aware.Fresh design direction, moving awayfrom skeuomorphic styles that have beenprevalent for years now.Simple, elegant style that is focused onstylized pictographs, solid color, no texturesor gradients, and is heavily typography-driven. Many elements that marry withmodern (as a style) graphic design practices.
  4. 4. How is this different fromskeuomorphic or realism as adesign style? What the heck isskeuomorphic anyway????Skeuomorphic elements are graphics/interfacesthat mimic real-world textures, or designed tolook like something from the physical world.Leather, wood, metal, glass etc. Apple hasbeen a champion of this design style and foryears now, and many web, mobile and digitalinterfaces have incorporated these methods intotheir visual aesthetic.
  5. 5. Why are we seeing thistrending in UI?Two huge influences:Microsoft’s Metro UI/Windows 8, and the hotlyanticipated and much rumored iOS 7 redesign.
  6. 6. Where else is flat design used?Flat design has always been a strong principlein environmental design. Wayfinding signage(terminal maps, outdoor city directory maps),public informational signage, billboards, busshelter advertising, and museum exhibit signageare examples of the application of this principle.This move to flat design makes sense insome respects. We are seeing an increasingconnection between the digital spaces wecreate, and the physical objects already in placethat help people navigate their physical world. It’sa similar process that involves strategizing thevisualization of information in ways that providehighly functional, yet easily digestible, content.
  7. 7. Is this really just a designer’sdesire to do something differentor follow a trend?That is certainly be part of it. Seriously, it’s ourjob to be trend-aware. However, the Apple skeuomodel has been around for a while now, and it’sstarting to feel a tad outdated. Change is good!
  8. 8. Ok, Ok, so designers like flatdesign. How do developersfeel about it?There may always be a place, depending on theproject or overall objective, where another designstyle will work better than flat design. This is oneof the decisions that are important to strategizeand discuss as we begin each new project.That said, though, flat design is particularly usefulin a responsive environment. It does alleviatesome challenges (headaches!) that more richlyrendered interfaces can present. Moving fromtexture-heavy realism towards the more flexibleand lighter-weight flat style has benefits.
  9. 9. Less loading, can do most with CSS rather thanimages and looks classy.Flat design forces us to really care abouttypography and layout, two areas where webdesign has traditionally lagged behind its moreestablished print disciplines.In mobile UI, flat design can make it easier tofocus on animation and interaction design, asapps like Google Now and Clear demonstrate.
  10. 10. What are the downsidesof flat design?The better question here is:What do we as UX/UI designershave to understand BEFOREimplementing any design style,flat or not?Interface users have come to rely on a lot ofsubtle clues to make their way through aninterface: buttons have slight gradients androunded corners, form fields have a soft innershadow, and navigation bars “float” over therest of the content. If ywe remove all theseclues, and we end up with a world where every
  11. 11. element is suddenly placed at the same level,we potentially lead to confusion: a user may askthemself, is this a button, or simply a banner?That’s something we always have to think of.In order to achieve the flat design aesthetic,we designers must focus on what things do,rather than what they will look like. Ornamentalelements can sometimes be a distraction fromthe user experience.What non-designers need to appreciate – orat least be open to appreciating – is that flatdesign does not mean overly simplistic orboring. The goal is create simple visuals thatconvey messages and actions more quicklythan more detailed illustrations, all to serve usercomprehension. Which, by the way, is a hugepart of our job as UX/UI designers.
  12. 12. The big takeaway from all this:Flat design is awesome!But… no amount of beautifulflat design will mask a reallybad UX/UI strategy.good flat design!bad UX/UI:(
  13. 13. Some examples of flat design:Facebook’s new flat “F”Google Nowhttp://www.google.com/landing/now/Microsoft Windows 8http://www.microsoft.com/en-gb/default.aspxBuilt By Buffalohttp://builtbybuffalo.com/Svpplyhttps://svpply.com/Apple’s WWDC appClear apphttps://itunes.apple.com/us/app/clear/id493136154?mt=8
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.