Tips for doing flat design right

Alex Bigman

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

Screen Shot 2013-07-12 at 4.18.46 PM

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

Screen Shot 2013-07-12 at 4.24.33 PM

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

Screen Shot 2013-07-12 at 4.25.13 PM

Designer Lorenzo Verzini’s website wins you over with quirky illustrated elements and big, bright fields of color.

5. Samuel Bednár

6319e47b9e595779b5052128c3d7e5a9

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

Screen Shot 2013-07-12 at 4.32.37 PM

Built By Buffalo‘s geometric patterning is a common complement to its clean and regular flat design aesthetic.

7. Combadi

Screen Shot 2013-07-12 at 4.33.37 PM

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

preview-everything

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

apple compass

iOS7’s compass app. Legible and clean, it’s hard to find flaw with this flat ambassador.

10. Jens Lehmann

c2cf914f8d7b63c97cb11a29a874424f

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

Screen Shot 2013-07-12 at 4.44.34 PM

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)

best western

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

Screen Shot 2013-07-12 at 5.07.20 PM

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

843e446b1b4afada516c9a3dc8d1f7e4

Astronaut Design‘s logos are always completely flat, and they are displayed here in monochrome to emphasize it.

15. Facebook

fb icons

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

Screen Shot 2013-07-12 at 4.47.34 PM

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

Screen Shot 2013-07-12 at 4.55.59 PM

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

Screen Shot 2013-07-12 at 5.02.29 PM

Yellow! Profound Grid uses a color shock to jolt the viewer’s interest.

19. Coloured Lines

Screen Shot 2013-07-12 at 5.07.01 PM

No shadows, layers or even texture. Color does all the work on Coloured Lines‘ simple, effective site.

Have you seen any noteworthy examples of flat design lately? Share in the comments!

Related articles

22 beautiful real estate logos that close the deal

22 beautiful real estate logos that close the deal

Have you ever seen a house like the one below before? Of course you have—not in reality but in logo design. The world of real estate logos is littered with sloping roofs and square windows, suspended in abstract space or agglomerated onto one another in physically baffling clusters. They’re ubiquitous, they’re boring and they make…

9 hot logo design trends for 2017

9 hot logo design trends for 2017

What logo and branding trends are going to define 2017? Today, we’re gazing into the future at nine popular logo trends. From simplification to unique typography to animation, these are what we’re predicting will be hot in the new year. 1. Broken letters — Stencils? Spray paint? Not quite. In 2017 we can expect designers to be taking broken…

Current Design Contests

Designers, check out these contests so you can start building your career.
0%