23 Examples of Flat Web Design

By / May 6, 2013 / Inspiration
shares

Flat design is a concept that was pretty popular a couple years ago and it’s back with full strength this year, causing some interesting buzz around the so called “flat design” trend. Flat design is not something new, something we created now as a response to other design movements. It is a concept that was around before, and now it is appearing everywhere. Flat design is pretty straightforward. It is flat. It’s a way of designing without adding three-dimensional attributes – no shadows, no gradients, no bevels, etc. It doesn’t mean flat design has no effects at all, it just means that it doesn’t use effects to create depth and dimension. Flat design focuses a lot on color (solid colors), typography and simpler use of UI elements.

The flat design trend causes a lot of debate and certainly deserves a more in depth article, which we are working on. While we finish our research to show you a complete look at “flat design”, we want to show you some examples of websites adopting the flat concept. Let us know your feelings about them and stay tuned for the next flat design chapter.

Friends of the Web

23 Examples of Flat Websites

Etch

23 Examples of Flat Websites

Crafting Type

23 Examples of Flat Websites

vtcreative

23 Examples of Flat Websites

Flaticons

23 Examples of Flat Websites

Build 2012

23 Examples of Flat Websites

Profound Grid

23 Examples of Flat Websites

Wistia

23 Examples of Flat Websites

Mark Simonson

23 Examples of Flat Websites

William Leeks

23 Examples of Flat Websites

The Ecology Center

23 Examples of Flat Websites

SpellTower

23 Examples of Flat Websites

OnSite

23 Examples of Flat Websites

LayerVault

23 Examples of Flat Websites

It’s a Shape Christmas

23 Examples of Flat Websites

oak.is

23 Examples of Flat Websites

Werkpress

23 Examples of Flat Websites

Happy Studio

23 Examples of Flat Websites

Coloured Lines

23 Examples of Flat Websites

Bob Galmarini

23 Examples of Flat Websites

Foundation

23 Examples of Flat Websites

Lorenzo Verzini

23 Examples of Flat Websites

Sumall

23 Examples of Flat Websites

You can also find a lot of flat design inspiration on Dribbble, Pinterest and Behance.

About the Author

Gisele Muller loves communication, technology, web, design, movies, gastronomy and creativity. Web writer, portuguese/english translator and co founder of @refilmagem & @mentaway Twitter: @gismullr

24 Comments

  1. M.Aswad Mehtab
    May 6, 2013

    beautiful examples , flat design is getting famous fast

    Reply
  2. les internets
    May 6, 2013

    I like this trend of flat design (maybe i’ve seen too much parralax scrolling since 2 years, need something else !)
    And its looks very good in mobile/app
    We try to do some flat design as freelancer ( http://www.les-internets.fr )

    Reply
  3. B. Berger
    May 6, 2013

    Nice collection and examples !
    Check out our all-flat new project coming soon on smartphones :) !

    http://who-wanna.com

    Keep going your great articles !

    Reply
    • Heya Basu
      May 7, 2013

      Wow!!! your website who-wanna is brilliant. Simple, yet effective.

      Reply
    • Xavier
      May 7, 2013

      Hello B. Berger,

      I like your project.
      When do you launch it ?
      And are you french ? ;-)

      Xavier

      Reply
      • B. Berger
        May 8, 2013

        Thanks guys!
        Yes, we are french, we have planned to release the application as soon as possible, probably in a couple of weeks!
        Don’t hesitate to suscribe to the newsletter or the facebook fanpage to be kept in touch!

        Cheers and thanks for the support.

        Reply
  4. Dom Wint
    May 6, 2013

    Love the Coloured Lines site, but then I’m a sucker for rainbows. What is the difference between flat design and simply designing a site that has no third dimension, do you think? I often try to avoid shadows and gradients, and often end up commenting to myself that everything looks a bit “flat”. But not in a good way.

    Reply
  5. yogesh
    May 6, 2013

    Thank you for compiling and presenting these beautiful examples of flat design. Simple yet elegant!

    Reply
  6. Vtcreative
    May 6, 2013

    Great article, thanks for the quote Gisele.

    Reply
  7. Jennifer Beever
    May 6, 2013

    The flat designs are refreshing. Organizations going for what they think is sexy, 3-d, are getting sites that are very busy. The fit depends on the audience, too.

    Reply
  8. Stefan
    May 7, 2013

    Nice collection. I can’t help to think though that theme are some Windows 8 influences @ work here.

    Reply
    • Aleš
      May 24, 2013

      I think the opposite view might be right. Win 8 are influenced by this trend.

      Reply
  9. Pritam @ SpeckyGeek.com
    May 7, 2013

    Flat design, if implemented properly, looks great. Though I don’t find all the examples listed here, exciting, some of them are fantastic. Useful list in all.

    Reply
  10. Paul
    May 7, 2013

    I think people will get bored with flat design soon.

    Reply
  11. Web Design Wolverhampton
    May 7, 2013

    Nice collection, thanks. Flat is definitely the trend for 2013.

    Reply
  12. Aaron
    May 7, 2013

    I am a web designer myself and I love it when I have to create a flat website, with out relying on that needless wizardry to create ‘depth’ and magic. You get more time to think and create new patterns and experiment with various colors. I am glad, it is back in vogue.

    Reply
  13. Matt
    May 8, 2013

    Also check out Kareer.me. We’ve taken the flat design approach throughout our entire product. Worth a look.

    Reply
  14. liza
    May 8, 2013

    Few of them are excellent example of flat design simple but effective.

    Reply
  15. Steve
    May 10, 2013

    I like the Colored Lines most its full of color and freshness.

    Reply
  16. Gavin
    May 10, 2013

    Flat and beautiful, specially colored Lines.

    Reply
  17. Noah Parks
    May 10, 2013

    I really like the look of flat design. It’s simple and yet elegant. Thanks for the article!

    Reply
  18. Yofie Setiawan
    May 12, 2013

    This is great. Actually flat design is kinda answering the needs of many people in global. Not everyone all over the world have a good internet connection. So we need to create a design that use less image files. With flat design, most design elements should be able to just use the css codes, so less load times. And with condition that nowadays many people accessing websites through mobiles, so flat design makes it easier and simpler to apply the responsive web design.

    Reply
  19. Design Turnpike
    May 21, 2013

    So many great designs – thanks as always.

    Reply
  20. Aaron Bazzone
    June 11, 2013

    As a developer, working with a flat design would be a nice respite.
    Spending so much time trying to use CSS for shadows, transparency, gradients etc. to replace images seems such a waste.

    I, like most people, want to spend as little time as possible on sites because I’m just looking for specific content. Clever graphics and animations rarely, if ever, make finding content faster, or persuades me to want to visit a site more often.
    Intuitive navigation and well laid out content have always been key to a great site.

    Let’s get back to the minimalist ;) approach to design!

    Reply

Leave a Reply