40+ Cool Examples of Flat Web Design

Tuesday 27th, June 2017 / 22:40 Written by
40+ Cool Examples of Flat Web Design
253 Flares Twitter 0 Facebook 0 Google+ 6 LinkedIn 3 StumbleUpon 244 Filament.io 253 Flares ×

For quite some time it was popular to add 3D effects to more or less all design elements in web design. Back in 2010 we collected a list of great looking websites making heavy use of 3D effects, textured surfaces, light effects and gradients.  Characteristics of the this trend was 3D bevelled buttons, Shadows on design edges etc.

Recently however, one of the new trends in interface design, is the return of simple, flat and typographical oriented design. One of the most popular examples of this is Microsofts Metro interface that take this to extreme. Many designers get inspired be the simplicity Metro offers and today it is even possible to find WordPress themes and CSS scripts with a metro-like look and feel.

The trend right now is use of flat and high contrast colour (less gradients), square corners, strait lines. This design approach is also becoming popoular when setting up portfolio websites which is a great niche of web design for finding inspiration. Many modern portfolio website templates also make use of the simple and flat web design approach and may be a great place to look for inspiration and solutions. To get the best flat web designs however, you may want to look out for metro style themes for WordPress. I found a post at WPBreifly.com that I think contain some really cool flat metro themes for WordPress.

To help you get an idea of how this recent trend is used on various websites I have collected more than 40 great examples of flat web design. I hope you find this resource inspirational and that you will share it with your friends and people you work with.

Lorenzo Verzini – MORE INFO




Friends of The Web – MORE INFO

Friends of The Web

Fitzroy And Finn – MORE INFO




Microsoft – MORE INFO


Float Design – MORE INFO

Float Design

Build Windows – MORE INFO

Build Windows

LayerVault – MORE INFO


Etch Apps – MORE INFO

Etch Apps


Io Adv

The Grid System – MORE INFO

The Grid System

Spell Tower – MORE INFO

Spell Tower

Windows Phone – MORE INFO

Windows Phone

Built By Buffalo – MORE INFO

Built By Buffalo

Design Zoom – MORE INFO

Design Zoom

I think I Might – MORE INFO

I think I Might

Simple Scott – MORE INFO

Simple Scott

Crafting Type – MORE INFO

Crafting Type

Blake All En design – MORE INFO

Blake All En design

Matt Bango – MORE INFO

Matt Bango

TheIssland – MORE INFO


Iconwerk – MORE INFO


Its A Shape Christmas – MORE INFO

Its A Shape Christmas

Neue Blanc – MORE INFO

Neue Blanc



Agence Scripto – MORE INFO

Agence Scripto

Proud Creative – MORE INFO

Proud Creative

Kyle Meyer – MORE INFO

Kyle Meyer

Ian Storm Taylor – MORE INFO

Ian Storm Taylor

Negative Labs – MORE INFO

Negative Labs

Concrete Matter – MORE INFO

Concrete Matter

Play Hundreds – MORE INFO

Play Hundreds

Stuart Regan – MORE INFO

Stuart Regan

Brian Danaher – MORE INFO

Brian Danaher

Ah Studio – MORE INFO

Ah Studio

Invoisse – MORE INFO


Mig Reyes – MORE INFO

Mig Reyes



Big Human – MORE INFO

Big Human

Allan Yu – MORE INFO

Allan Yu

253 Flares Twitter 0 Facebook 0 Google+ 6 LinkedIn 3 StumbleUpon 244 Filament.io 253 Flares ×

About the author

Hi I am Pete! I love to work with web design and sometimes dive into some coding. My main focus is WordPress websites.

View all articles by Pete

8 Comments on “40+ Cool Examples of Flat Web Design

Comments are closed.