Examples of Flat Web Design

A couple of weeks back, we talked about the flat design aesthetic. Just in case you missed it, here is how we described flat design, “Flat design means designing without the usual gradients, pixel perfect shadows, and skeuomorphism that’s been rampant in recent years to achieve what appears to be a ‘flat’ interface.”

And yes, just in case you haven’t yet jumped onto the flat web design bandwagon, today we have put together 25 awesome examples (including Dribbble shots) that illustrate beautifully the concept of ‘flat’ in web design.

For some up to date examples of flat web design, take a look at this post: 50 Perfect Examples of Flat Web Design.


Microsoft as an example of flat web design


SpellTower as an example of flat web design

Supereight Studio

Supereight Studio as an example of as an example of flat design


examples web design flat Hundreds

Women and Tech

examples web design flat Women and Tech


examples web design flat Etch

Build 2012

examples web design flat Build 2012


LayerVault as an example of flat web design


Squarespace as an example of as an example of flat design


examples web design flat FHOKE


examples web design flat Combadi


examples web design flat Buffalo

2012 Year on Twitter

examples web design flat 2012 Year on Twitter

Voice and Tone

Voice and Tone as an example of flat web design

The Next Web

examples web design flat The Next Web

‘Flat’ Dribbble shots…

Flat Dashboard

Flat Dashboard

Subnav Ideas

Subnav Ideas as an example of as an example of flat design

Jobs Page

Jobs Page as an example of flat web design


Podcasts as an example of flat web design

Flat Colours

Flat Colours as an example of as an example of flat design


examples web design flat Instawidget


Sidebar as an example of flat web design

Minimal Dashboard

Minimal Dashboard as an example of flat web design

More on Flat Design…


  • Bredonian Gray

    Considering that every single one of them sucks (except maybe the thenextweb), I wonder what is the point of showcasing such sites. It seems that “Flat design” concept is increasingly being used as an excuse by incompetent designers to bypass the dedication and commitment required to come up with elegant and sophisticated designs.

  • Walter

    Bredonian i have to disagree w/ you. Buffalo and Combadi have beautiful sites. I think the rationale for designing a “Flat” Website is to do something different than what’s being showcased today in the world of the web. Though “Flat” Design will become the norm, It’s initial purpose is to be different and beautiful

  • Have you visited at the sites or just looked at the screens in this blogpost?
    I don’t think that flat design is a indicator for incompetent designers… quite the opposite! it’s a good sign because the designer is/was (hopefully) able the remove distracting elements on the page which means more focus on the content. designelements should be supporting your journey through the page. helping you to understand fast and uncomplicated…

    And imho most of the pages above show this in a brilliant way… Voice and Tone, Hundreds, Women&Tech are not may favorite designs, but the work well …

  • less is more! good point of view!

  • gianmarc

    I totally disagree, and I think that’s a pretentious statement. I think you’re being an elitist when you condescend other designer’s abilities. The simplicity and/or minimalistic design is irregardless of dedication nor commitment.

  • I never know this design style is called “flat” design although I’ve been using it for long time (yes, I use it on most of my projects)

  • Jordan Walker

    Awesome blog!

  • also: thegadgetflow.com

  • Sajib Srs

    Very clean and inspiring.Note that speckyboy is an example itself ;). Thanks

  • amazing flat design, like forever flat.

  • Shake Time

    That’s true, our site is essential of flat. As we see iOS7 become candy-flat this is a big change in industry and we think that change will be awesome and interesting.

  • Tarian

    This is a catalogue of all that is wrong with flat or slab design – enforced scrolling and uncertain navigation.

    Depth provides visual clues, whether it is about hierarchy of pages or to highlight tabs, buttons or other active links.
    Multi- or gradient colouring provides additional visual clues.
    Too many web re-designs have thrown out these visual clues (Why? To prove the designer is “on trend” perhaps? What next? Full beards?)
    The result is menu bars with a row of text, often identical to passive content nearby. Even a border between menu itmes would help.
    Worse are the pages dominated by large, monotone slabs (dull and infantile), usually with very few words.
    But the worst are the sites where the visitor is greeted by a screen-filling photo.

    LIke others, this site now has over-large text, leaving very little in one view. This User has to use the browser’s zoom to view more info.

    The net result of these design features is to force the User into unnecessary or excessive scrolling.

    And while we’re on making life harder for Users.. what’s wrong with black text?
    Grey lacks contrast and with acres of glaring white space is uncomfortable.