Your SlideShare is downloading. ×
0
Flat Design - A Primer
Flat Design - A Primer
Flat Design - A Primer
Flat Design - A Primer
Flat Design - A Primer
Flat Design - A Primer
Flat Design - A Primer
Flat Design - A Primer
Flat Design - A Primer
Flat Design - A Primer
Flat Design - A Primer
Flat Design - A Primer
Flat Design - A Primer
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Flat Design - A Primer

5,537

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.

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
2 Comments
15 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,537
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
532
Comments
2
Likes
15
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. APRIMER
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×