Examples of ‘Flat’ in 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 design bandwagon, today we have put together 20 awesome examples (plus some Dribbble shots) that illustrate beautifully the concept of ‘flat’ in web design.

Microsoft

Flat Design Inspiration - Microsoft

SpellTower

Flat Design Inspiration - SpellTower

Supereight Studio

Flat Design Inspiration - Supereight Studio

Hundreds

Flat Design Inspiration - Hundreds

Women and Tech

Flat Design Inspiration - Women and Tech

Etch

Flat Design Inspiration - Etch

Build 2012

Flat Design Inspiration - Build 2012

LayerVault

Flat Design Inspiration - LayerVault

Squarespace

Flat Design Inspiration - Squarespace

FHOKE

Flat Design Inspiration - FHOKE

Combadi

Flat Design Inspiration - Combadi

Buffalo

Flat Design Inspiration - Buffalo

2012 Year on Twitter

Flat Design Inspiration - 2012 Year on Twitter

Voice and Tone

Flat Design Inspiration - Voice and Tone

The Next Web

Flat Design Inspiration - The Next Web

…some ‘Flat’ Dribbble shots…

Flat Dashboard

Flat Design Inspiration - Flat Dashboard

Subnav Ideas

Flat Design Inspiration - Subnav Ideas

Jobs Page

Flat Design Inspiration - Jobs Page

Podcasts

Flat Design Inspiration - Podcasts

Flat Colours

Flat Design Inspiration - Flat Colours

Instawidget

Flat Design Inspiration - Instawidget

Sidebar

Flat Design Inspiration - Sidebar

Minimal Dashboard

Flat Design Inspiration - Minimal Dashboard

For some more Dribbble examples click here: Flat Design on Dribbble.
Or, you could check out ‘Flat Design’ on PatternTap.

More on Flat Design…

What Skeuomorphism Is (And Isn’t)
Skeuomorph on Wikipedia
The Flat Design Era
On the “flat design” aesthetic
Is “Flat” UI design better?
The Flat Design Era – Discussion on Hacker News
The Flat Design Aesthetic on Hacker News

You might also like…

Review of Popular Web Design Trends from 2012
The Dark Side of User Experience Design
The Flat Design Aesthetic: A Discussion
Design Patterns for Creating Exceptional User Interfaces on the Web
User-Centric Website Design
Responsive Image Techniques & Resources


Speckyboy Design Magazine

Leave a Comment