Navigation

Flat design sites that work

By Elle-Rose Williams | How To, Web Design | Apr 26, 2013

Whilst the term “flat design” might not be a phrase you’re yet familiar with, you will definitely have noticed the concept and the design features whilst browsing the internet.

For those of you that have noticed an increase in the “drop shadow” trend in web design, the easiest way to describe flat design is to say it’s the opposite of that. Flat design is designing a website that has left behind the drop shadow and the 3D effects, and that is by all intents and purposes flat.

Flat design looks modern, fun, fresh and refreshingly simple compared to it’s 3D counterpart. Flat design is embracing the use of solid colors, sharp, well-defined typography and bold shapes. It takes away any faff and fussiness from the design making it so much easier to digest and to navigate. It’s modern and is without a doubt going to be a huge design trend this coming year.

 

How can you use flat design? 

For me, the top selling point of flat design is the simplicity and minimalism of it. That’s not to say you need to have a simple product or minimalist brand to use this trend to your advantage. I actually like the way this trend could modernize a relatively complex or old-fashioned niche, making the information on your site easier for readers to take in and understand.

Of course, the simplicity of flat design makes it so much easier to optimize for different devices too which is another point in its favor.

We all know that mobile browsing is on the rise, and responsive design has already addressed this rise. Flat design makes web design more scalable in a similar way, because when you design with solid colors, rather than a more image based aproach, you’re using less detail and so the information based footprint of your website becomes much smaller. This means it’s quicker to load and communicates faster with whatever platform your reader is using to view it on.

 

Where have you seen it before? 

Flat design isn’t exactly new. You’ll actually notice that brands such as Microsoft had already embraced the trend a few years back, while other big brands such as Apple were too busy perfecting other techniques.

Looking back to 2007, a quick glance at the Microsoft Zune – and you can already see that clean, typography based interface taking shape. At the time it went relatively unnoticed, being overshadowed by bigger industry developments, but in 2013 it is definitely at the forefront of design trends.

 

Have you embraced flat design? Is flat design being over-used? Let us know your thoughts in the comments.

Share this post
Comments (no login required)
  • http://about.me/evanjacobs Evan Jacobs

    5 examples? This article feels a bit anemic…

    • http://www.facebook.com/skyblueoceanmedia Sky Blue

      Feel free to contribute to the Web Design Depot also Evan … your ideas are more than welcome

  • http://twitter.com/josephnicklo Joe Nicklo

    “Flat design” works great in particular instances but sadly, it will become the new trend and hordes of mindless designers will whore it out until they all get sick of it to the point that someone comes along and creates a new trend.

    • http://twitter.com/studiosnapsize Denis Leblanc

      Amen.

    • http://tipigraphics.com/ Tzvi Perlow

      As in every trend :(

  • http://www.facebook.com/emosewamai Andrew Hersh

    Two of the three examples here make heavy use of photographs.

    Explain to me how that is, in any way, “flat.”

    If ANYTHING, web design seems to be headed in the direction of using more photographs for content, as opposed to purely computer-generated graphics at all.

    Having a good photographer is going to be a much better asset moving forward than being good at not using drop shadows.

    • http://tipigraphics.com/ Tzvi Perlow

      In my opinion, it’s two trends going alongside.

      One trend would be Flat Design: Using color and shape with little detail to creatively define a website.

      The other would be Photography Design: Using photographs alongside a minimal amount of graphics to bring the effect of the website. (A photograph that is well defined doesn’t need the text or graphics, and therefore uses the Flat Design concept for what it does need, which makes Flat Design the sidekick of the Photography design)

  • designcouch

    Definitely embraced it. I typically go for stuff that is as simple and straight forward as possible. My personal site is a pretty decent example of this.

    • http://dexteradams.me/ Dexter Adams

      What is your site?

  • David Warner

    “Keep it short and simple”. This mantra should be used in web designs. It really works. The simpler the landing page of site is the more it attracts traffic.

  • http://www.facebook.com/jacob.wadsworth.961 Jacob Wadsworth

    Simplicity can go a long way, in my own opinion. When others are looking for ways to have the most complicated and best design out there, being simple can sometimes make people think that it is interesting. What’s important though is the content. – http://www.defiancemarketing.com/

  • http://twitter.com/studiosnapsize Denis Leblanc

    What a cheap post! What’s with all the hype anyways? Flat design has been around forever, find something else to exploit.

    • Smum Dax

      Forever like “since the Big Bang” ? Or forever as in “I’m using the word forever even if by definition it doesn’t really go here” ?

  • http://www.trendybiz.com/ Ricky

    I think flat designs can be very rewarding, bringing a new focus on content. I particularly prefer and have built our website on flat design methods, it just simply allows surfers to find and extract content faster. :)

  • http://www.facebook.com/skyblueoceanmedia Sky Blue

    The Flat Design’s is still alive would you believe.. maybe we should re-phrase the term to “3D Flat Design” or “Flat Shadow Designs”

  • http://stephenwayne.com/ Stephen Wayne

    I’ve been wondering what to call this design style! “Flat” design is really clean and simple. I dig it. Thanks :)

  • jselengia

    I think the move towards Flat Design, is a welcomed one. My aesthetic has always been minimal, which Flat Design encompasses. I do agree with @MyPostcardFrom that it will be poorly used and saturated. It should be used when really needed, for the right purpose.

  • orange county web designer

    Pretty nice selection. I personally like the flat-design trend…it makes things look a lot cleaner. Thanks for sharing.

  • designcouch

    A few things.

    First, to the typography: both Museo-sans (my display typeface) and Calluna (my body typeface) are tried and true on the web, and are used in many places.

    Second, to the implication that I am not familiar with as simple a concept as typography: dude, you’ve now got my hackles up. Some kid with a totally incomplete, amateur BLOGSPOT-based website with three subpar photos is preaching to a 15 year veteran of both the print and web design world about typography? I don’t mean to come off as condescending here, but please take this as wholly to heart as you possibly can: Helvetica, Arial and Verdana are for complete amateurs who can’t choose a typeface to save their life. They’re EASY choices. They have their place, but are on average the most overused (and poorly implemented) choices out there. This doesn’t even begin to cover the fact that Arial is simply a cheap imitation of Helvetica to begin with, so you basically suggested the same typeface twice.

    Third, if you’re having a hard time reading the text on my site, then perhaps a pair of glasses are in order; one of my main concerns with my site design was legibility, and in all of the reviews of it thus far, I have heard nothing but good things in this regard.

    Lastly, I want to ask you a question since you implied that I don’t know much about typography. Why, if you are in the position to give me advice, are you giving such BAD advice?

    I am a firm believer in the value of critique. As a matter of fact, I’m currently writing an article about it. However, critique needs to be valid in order to be considered, and yours, my friend, is not—as made evident by your “tips”. Have a wonderful day.

    • http://tipigraphics.com/ Tzvi Perlow

      Sorry mate for coming off as an idiot, maybe I should have just put it like this: The text on your site is not readable to me.

      And yes, an idiot like me ‘Some kid with a totally incomplete, amateur BLOGSPOT-based website with three subpar photos’ is permitted to act stupid and say stupid stuff of course, but also give an opinion as a regular dude who has no idea about design.

      • designcouch

        Idiocy is totally forgivable (see my rant above—you haven’t got the market cornered at all). Sorry, but your comment caught me on a bad day.

        Doing some research on alternative typefaces for my body copy, just for the sake of making sure legibility is as good as it can be.

  • http://dexteradams.me/ Dexter Adams

    I hadn’t realized the this conversation had gotten so heated. LOL. designcouch.. Good work nonetheless. Tzvi. Keep learning brother. I think the site is legit and I’m a super picky ‘selfish even’ designer.

  • designcouch

    Have found a few possible candidates; the leading one right now is Adobe Jenson Pro. Also, my previously mentioned article about accepting critique is up too :)

    http://www.designcouch.com/home/why/2013/06/25/accepting-design-critique/

    Interestingly enough, the last paragraph was kind of inspired by my poor conduct in this thread.

    • http://tipigraphics.com/ Tzvi Perlow

      Maybe it’s just the width between the letters? Check that out.

      “From the most foolish of my students I have learned more than from anybody else” – Jewish Proverbs :P

  • http://logoswithsoul.com/ Logos With Soul

    I love this. I am a flatter. my work is at http://specialmoderndesign.com and I have another site I am starting for designers at http://logoswithsoul.com- ebook for download there. (Am I sounding like an infomercial?)