Flat design has been trending big since Apple unveiled iOS7. Unless you’ve been living under a rock, you probably didn’t need us to tell you that.
As with all trends, a lot of the flat design examples we’re seeing on blogs seem pretty superficial: fashionable attempts to exploit a passing craze that will look dated a few seasons hence. Flat may look sleek and elegant now, but so did web 2.0 five years ago.
Flat design also threatens to be sterile or uninviting – an issue to which many of the more minimalist trend adopters succumb.
However, there are some flat-designed web pages, apps, icons and logos that did catch our eye as being a cut above the rest. Just as we were able to pull together a pretty mean roundup of the currently much-maligned skeuomorphic style, here we’ve got 19 examples of flat design done stunningly well, along with brief analyses of what they did right.
1. Hundreds
Hundreds defies the conventional wisdom that smartphone games need to be shiny and colorful to be fun. Using only perfect circles and a few vivid colors, the intellectually stimulating game has become a smash hit.
2. Serving Orphans Worldwide
If there’s one surefire way to humanize flat design, it’s by including lots of big, sympathetic photos. Also note the subtle geometric pattern in the blue section of soworldwide‘s website. No one said that flat design and texture were mutually exclusive.
3. MailChimp
MailChimp‘s website design gives a sense of inviting depth by using a photograph of desk space for a mise en scene. Notice that all the digitally designed elements are flat as can be, though.
4. Lorenzo Verzini
Designer Lorenzo Verzini’s website wins you over with quirky illustrated elements and big, bright fields of color.
5. Samuel Bednár
This alarm clock app is pretty unrelentingly flat and monochrome, but designer Samuel Bednár may be on to something when he says the first thing you see upon waking up should be gentle on the eyes.
6. Built By Buffalo
Built By Buffalo‘s geometric patterning is a common complement to its clean and regular flat design aesthetic.
7. Combadi
The wavy line pattern superimposed upon Combadi‘s mountain image adds texture and a sense of depth, while still serving as an essentially flat screen of sorts.
8. Flaticons.co
Icons are probably the most suitable place for flat design. As demonstrated by Flaticons.co, You want to boil them down to the least amount of visual information necessary so they remain legible at small sizes.
9. iOS7
iOS7’s compass app. Legible and clean, it’s hard to find flaw with this flat ambassador.
10. Jens Lehmann
Again, Jens Lehmann‘s use of photographs draws a viewer to the site’s content. No drop shadows, gradients or bevels of any kind necessary.
11. Fitzroy and Finn
On its website, design firm Fitzroy and Finn presents its creations in black and white on a simple grid, emphasizing the inherent flatness of the work.
12. Best Western (by Julieta Felix)
Just for fun, designer Julieta Felix flat-ified the Best Western logo (left) by emphasizing its emblematic crown, selecting a more elegant typeface and getting rid of the border stripe that suggests beveling.
13. Landor Associates
Landor Associates, one of the oldest and most respected design firms in the world, has a flat website that utilizes grid tiling and vibrant color.
14. Astronaut Design
Astronaut Design‘s logos are always completely flat, and they are displayed here in monochrome to emphasize it.
15. Facebook
Facebook has made a bold leap into flat territory with its new monochromatic icons, which abandon reflections, gradients, shadows and three-dimensionality altogether (via TechCrunch.)
16. Rdio
Rdio uses color to its advantage on its website, and its semi-transparent layering of photographs helps to give a subtle sense of depth to contrast with the otherwise completely flat elements.
17. Windows 8
Microsoft was one of the first to go flat. They endured a lot of flack for their seemingly boring logo re-design, but their sleek, inviting website for Windows 8 testifies to the fact that the company’s designers know what they’re doing. Note the central use of inviting photography and the transparent “Meet Windows 8” drop-down in aquatic blue, which gives a pleasing sense of layered screens.
18. Profound Grid
Yellow! Profound Grid uses a color shock to jolt the viewer’s interest.
19. Coloured Lines
No shadows, layers or even texture. Color does all the work on Coloured Lines‘ simple, effective site.
