23 Examples of Flat Web Design

By / May 6, 2013 / Inspiration

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

  • http://www.isharearena.com/creative/freebies/5-free-business-card-templates-psd/ M.Aswad Mehtab

    beautiful examples , flat design is getting famous fast

  • http://www.les-internets.fr/ les internets

    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 )

  • http://who-wanna.com B. Berger

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

    http://who-wanna.com

    Keep going your great articles !

    • Heya Basu

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

    • Xavier

      Hello B. Berger,

      I like your project.
      When do you launch it ?
      And are you french ? ๐Ÿ˜‰

      Xavier

      • http://who-wanna.com B. Berger

        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.

  • http://www.cleanpagedesign.co.uk/web-design-Oldham Dom Wint

    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.

  • http://www.avika.in yogesh

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

  • http://www.vtcreative.fr Vtcreative

    Great article, thanks for the quote Gisele.

  • http://Www.newincite.com Jennifer Beever

    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.

  • http://Www.webvoudig.nl Stefan

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

    • http://www.bulvadesign.com Aleลก

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

  • http://www.speckygeek.com Pritam @ SpeckyGeek.com

    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.

  • Paul

    I think people will get bored with flat design soon.

  • http://www.pragmaticdesign.co.uk Web Design Wolverhampton

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

  • http://twcdigital.co.uk/ Aaron

    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.

  • http://www.kareer.me Matt

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

  • http://www.idealcustomsoftware.com liza

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

  • http://www.ikf.co.in/web-design.html Steve

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

  • http://www.dezignmatterz.com Gavin

    Flat and beautiful, specially colored Lines.

  • http://www.leadgenix.com Noah Parks

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

  • http://yopdesign.com Yofie Setiawan

    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.

  • http://www.designturnpike.com Design Turnpike

    So many great designs – thanks as always.

  • Aaron Bazzone

    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!