30+ Best Flat Web Design Examples

Everybody believes that we are seeing flat web designs all around us thanks to the design language Microsoft created.
Metro design language was created by Microsoft for Windows 8. It is true that Microsoft is responsible for making it such a big trend, but actually Google is the pioneer of flat color designing. If you remember, most of Google’s tools’ homepage consisted of flat web designs. Google Calendar, Reader, Docs and so on. They all contained flat web designs long before Microsoft developed this language.

Despite the popular opinion that flat web designs are not “cool” the trend is growing rapidly among designers. Designers believe that anyone can play with shadows, effects and gradients but only true designers are able to create good designs using only flat colors and line. An addition to this is that flat web designs load very quickly and they are very friendly with responsive web designing.
On the other hand, there’s another opinion; some designers say that routine clients never get satisfied with flat color designs, they need wowing effects so gradients and shadows and stuff is completely necessary and there’s nothing wrong with using these effects.

Flat Web Designs

At first it was considered that this trend would never pick up. Even Windows 8 received loads of negative reviews because of their use of flat colors all around.
But today we see that it has become quite a successful trend and proved most of the people wrong who were making predictions in the beginning of this year.

Actually flat color designs are fresher. They don’t put much load on the eyes but they carry all the designing aesthetics.

Skeuomorph was believed to be the next big thing in the end of last year, but as ever, internet surprised again and made flat colors a trend.

I’ve prepared a showcase of 30 creatively and effectively designed flat color web designs. Let’s check them out.

Microsoft Windows

Being the creator of Metro design language, Microsoft’s official windows page tops this chart.

Microsoft Windows Homepage is an example of flat web design.

List Verse

This is a very famous internet magazine. They recently went through a redesign and this is what they finalized as their new look.

List Verse: The famous internet magazine now comes with a flat design.

Layer Vault

This is a design studio that works with clients from all over the globe. They had to make a website that impresses professionals.

Layer Vault is a design studio focusing on flat designs.


Wistia is a video sharing solution for business users. This video sharing site takes flat design to new heights.

Wistia is a video sharing site that contains flat web design.

David Hellman

David Hellman is a web developer from Germany. His art direction also polishes his portfolio. And he shows how flat designing is done.

David Hellman is a web developer from germany. He designed a cool flat design using yellow background.

Friends of the Web

This is a team of four web designers and developers based in Baltimore. Rather than designing something flashy, they designed this extremely simple web page.

Friends of the Web

It’s a Sharp Christmas

This is a UK based advent calendar. Until 31st December 2013, this is closed but the flat design stays open.

Its a sharp christmas uses flat web design.

Minimal Monkey

On the first look it might look a little mediocre but when you scroll your mouse over the page and check out the transitions, not bad!

Minimal Monkey has excellent transitions and flat web design.

Neue Yorke

A designer and illustrator from New York shows off his flat design skills.

Neue Yorke is a journal by a designer from New York.

Built by Buffalo

Brighton (UK) based design house is going highly successful. Is their impressive flat web design making a difference?

Built by Buffalo


Symbolset uses font magic to change words into icons. Made with love for computers and people.
I just kept watching the video they’ve made. ūüėõ

Symbolset is a new type of font being developed.


This is a designing and development company. You open their website, you see their work and you take a bow. At least that’s what I did.

Oak.is is a app development company with a marvelous flat web design.

Spell Tower

This is a word game for iOS, Android and Mac. But we are not interested for the game but their web page design. Gorgeous.

ears geckoboard Palace Spell Tower is a word game for mobile.


Meet Geckoboard

This is a business monitoring tool for business owners. The web design uses flat colors (apart from the background image in the header).

Geckoboard is a monitoring tool for businesses.

Palace Design Studio

They are a glamorous design studio. Since their material/content was highly eye-catching, it required a simple, in fact dull looking background. They went with flat designing.

Palace design studio


An Indonesian website dedicated to music.



An independent design studio’s homepage. Personally I feel their selection of colors is not as perfect as it should be. Cyan-like light blue for background and white text on top is something I didn’t like that much. But again, maybe its just me.

Hatch is a british design house.

Crafting Type

They are kind of a training college for learning to develop fonts.

Learn how to make fonts and typfaces.


The design and animation house brings a very out-of-the-box flat web design.

Out of the ordinary flat web design.

Metro Twit

The twitter based app for PC and Win 8 makes a new homepage. All blue flat web design.

Metro Twit is a twitter app for PC and windows 8.

Coloured Lines

Telephony service in Australia uses such refreshing colors, such as the Aussie character.

Coloured Lines


A marketplace for designers create an extremely simple layout for themselves.

OnSite is a marketplace for designers.

Profound Grid

A responsive grid system for fixed and fluid layouts. Built in SCSS, it gives you flexibility and full control.

A grid system for web developers.

We Are Hanno

Interactive agency based in London proves that Europeans are better at flat designing.

Hanno: a web design agency from UK has flat designed homepage.


Another UK based web design agency does flat design beautifully.



A multi-purpose app for desktop has a brilliantly designed flat color homepage.

App homepage uses flat web design.

The Ecology Center

Even social NGOs and NPOs are using flat web designs.

The Ecology Center


This is a cool free tool if you have more than one email address. The design is also impressive. Even their character/mascot is made using flat color design.

Inky is a free email app for desktop.

The Gently Mad

This is an interview show by the designers, for the designers. Of course, the homepage is also designed nicely.

The Gently Mad

Ending Notes

A few things you should keep in mind while designing flat color designs is that use large objects everywhere. That’s not just for mobile devices but also for creating color contrasts.
Even before creating the layout, you should finalize your color scheme. Speaking from personal experience, if you draw the layout first and then try to find suitable colors, it is like finding a needle in haystack. You won’t find suitable colors.

And in the end, I’d say that in my opinion, I don’t think this flat color hype will continue for a long time. Right now it is an obsession but I believe that by the end of the year, things will be pretty calm. That’s because working with flat colors creates a lot of limitations… and designers don’t like limitations!