Flat Web Design: Beautiful Examples of Websites

Flat Design is a new trend labeled by the community as an interface striking similar to Microsoft’s Metro UI because it leaves drop shadows, embossing, subtle textures and gradients behind, while favoring clean layouts, sharp typography and solid colors. The new Google design and Microsoft’s come-up with Windows 8 is actually based on an older trend called Flat Design, which was not extremely popular back then, but was very easy to design, therefore people used it.

In this article we would like to show what in our opinion are great examples of Flat Design websites.

Examples of Flat Designs in Web Design

SpellTower

SpellTower

SpellTower is a single-page website for an Android puzzle game which uses several color backgrounds throughout the layout, as well as some buttons for their simple, clean menu. Big images are not missing from their design either.

Kickfolio

Kickfolio

Kickfolio is an interactive app for the iPhone and their modern, slick website uses different solid color and buttons with slick, modern effects.

Lorenzo Verzini

Lorenzo Verzini

Lorenzo is an Italian art director and designer from London who embraced the Flat Design style extremely well. He has great, big graphics and images and interactive elements all over the site.

Oak.is

Oak.is

Oak.is creates fonts and other graphic solution for what they call to be productive people. It seems Flat Design was perfect for these guys and their website which is fantastic and is also responsive – and all of us like a responsive site I assume.

Etchapps

Etchapps

Etchapps is a team of designers and developers who “help brands with big ideas”. They do interface design and application development and their website is fully responsive and designer with Flat Design. Their website is very similar to the Windows 8 interface, which is itself built on the Flat Design style.

Microsoft

Microsoft

Microsoft’s webpage is the most popular Flat Design out there. Some might argue that this is not Flat Design, but Metro UI, however keep in mind that Metro UI was built on a Flat Design framework, therefore the striking similarities. Microsoft uses the same approach, with big images, large text and makes use of the whole browser width, including when the browser is resized.

Build Windows

Build Windows

Build Windows is another Microsoft page, so it’s quite normal that it is designer in the same way as its parent organization’s website. This is a single-page website featuring an even from November 2012 held by Microsoft in Redmomd, Washington. The site works great in full size and on mobile, although I feel like they miss some styling details here and there on portable devices.

It’s a shape Christmas

It’s a shape Christmas

This is an interactive online calendar built on Flat Design framework and features the same large images, only this one has some kind of interaction between users featured into it. Although the design is beautiful, the page does not feature a responsive grid.

Invoisse

Invoisse

Invoisse is the landing page of a web app that has not been released yet. The site is a single-page with possibility to scroll down. What is unique about it is the fact that during scrolling the background colors change. Very nice touch to an otherwise simple, clean and modern website.

Built By Buffalo

Built By Buffalo

This is a creative agency from Brighton, UK, with a very modern Flat Design website. It features several pages, it is responsive (and looks good both on desktop and mobile) and features very good information architecture. Their page is amazing and I simply love it!

Square

Square

The page where we present a great set of beautiful components based on the Flat Design trend is another cool page designed with this framework.

Plover

Plover

Plover is a website featuring a web application where users can create photo galleries, sell prints and even save their images in a cloud. The page is not responsive, although it works with images (and that’s bad), but nevertheless the design is a simple, Flat UI worthy to look at.

Rdio

Rdio

Rdio is a great web library of songs that can be listened online. Their website is very, very nice and I am especially in love with the section above the fold on the home page, which you can see in the screenshot below. Just like at how amazing this home page is. And another good feature is the responsiveness of the grid.

Vine

Vine

Vine’s webpage is designed on a Flat framework and is extremely simple and clean, although I feel like they should have more information on their own page instead of sending users to Twitter. But this has more with information architecture to do than with design, which is flawless. The truth is that it is difficult to do something wrong when you keep it so simple.

Lowdi

Lowdi

Although not as simple as the other pages showcased here, Lowdi’s webpage is unique and comes with a nice feeling. Navigation has a natural flow to it and it is a pleasure to browse around.

Osborn Barr

Osborn Barr

Osborn Barr’s website features huge pictures and easy-to-read text, which everybody appreciates today. And when the website is responsive too, then it’s clear they don’t come much better than this one.

All these were websites which are currently up and running, but we have three more examples of Dribble projects that are not yet created, however their designs deserve to be mentioned here.

Student Guide

Student Guide

The home page looks very nice, featuring a big header image and showing all kinds of important information right above the fold.

CottagePages

CottagePages

CottagePages is another Dribble design which could as well be a real website, because it looks really good. It features a huge background image which gives a specific feeling while not stealing the focus from important content.

CreativeStatus

CreativeStatus

CreativeStatus features a very simple home page design and integrates social media into it. I believe the layout is not entirely finished yet, however I think it looks very good.

Flat UI Kit

You have probably heard about Bootstrap, the popular front-end framework developed by Twitter employees for their own use. Well, you might have heard about Flat UI too, which is a free HTML user interface kit based on Twitter’s Bootstrap.

There was a clear need of a new framework because although Bootstrap works excellent, it is often left without custom style and it doesn’t look too sparkling, but monotonous and default.

Therefore here at Designmodo we decided to build our own framework/template and people seem to love Flat UI, which packs PSD files of buttons, selects, inputs, checkboxes, tags, progress bars, menus, navigation elements and sliders, but also color swatches and SVG glyphs.

This front-end framework makes your life so much easier, because it helps you with elements that usually you would spend hours on designing. And what is even more amazing is that we offer all these things for free. And it seems we are not the only ones thinking this front-end framework is amazing, but also all designers out there who started using it.

Bottom line

All websites showcased above are beautiful examples of flat design, which seems to be a new trend, especially with the introduction of Metro Style/Modern UI by Microsoft. Although it was a retro style until few years ago, it seems it is on its way back and I wouldn’t be surprised to see even more websites adopting this style in the near future.

Christian Vasile is an enthusiastic Romanian web designer currently living in Denmark. You can follow him on Twitter at @christianvasile or visit his web portfolio at christianvasile.com.

Newsletter

17 Comments
  1. Mikel Apr 2, 4:41 pm

    We would appreciate a tutorial to learn how to make flat design in illustrator. There are none on the internet. Please!

    Reply
    +1
  2. Akash Apr 2, 5:00 pm

    When does the premium version of flat-ui come out? Can I pre-order it?

    Reply
    -4
  3. Mike Moloney Apr 2, 9:55 pm

    Wow I haven’t seen vine yet, their site is amazing! I also love invoisse! Alex Penny is a master of flat design.

    Reply
    +3
  4. Hadi Farnoud Apr 3, 3:51 am

    Some of these websites are just beautiful and not very practical. from UX point of view, I really like BBC website. you forgot this one ;)

    Reply
    +2
  5. Blaz Robar Apr 3, 8:28 am

    Hi mate – nice post – great work. Just heads up the creative status image link is broken – http://dribbble.com/shots/974309-Creative-Status-Single-Page-Site/attachments/112523

    Reply
    +3
  6. joelfilip Apr 3, 12:02 pm

    That’s great a article, thanks.

    Reply
    0
  7. Earl Varona Apr 4, 5:55 am

    Pretty nice collection. I like rdio’s artists image mash-up. That’s pretty inspiring – adding in my inspiration list. Thanks Christian.

    Reply
    +1
  8. Logoswish Apr 6, 10:50 am

    When i first saw this style I was skeptical about it. Now when i see how designers transform this style into a very good final product. I started to love it.

    Reply
    -1
  9. Lukas Apr 6, 3:32 pm

    I really like where is webdesign today. So nice clean sites.

    Reply
    0
  10. excellantly Apr 8, 10:04 am

    Good selection. Love the flat trend. Less is more… Thanks for sharing.

    Reply
    +1
  11. Vitaly Kuznetsov Apr 22, 2:59 am

    It is difficult to understand where I can click and what will be the result. Where web-link, where the button is, and where it is simply text on a color-layout?

    Although the view is very nice and cozy.

    Reply
    +1
  12. maya Apr 27, 10:54 am

    Loved the article. Metro design approach advocates the same.

    I too had a website inspired on the flat UI design that I would have loved to get your comments on. However not sure if I am allowed to post links in comments. Would love to know if someone would be interested in commenting about my website.

    Reply
    +1
  13. Kia Kamgar Jun 6, 10:29 pm

    Really nice examples here. I too went for the flat design a few months back and couldn’t be happier with the result.

    Let me know what you think… http:/www.macjunky.nl

    Reply
    -1
  14. Vlada Milanovic Jun 9, 11:39 am

    Isn’t it boring to see websites have same or simmilar structure, colours, shapes, typefaces, they say the same, they look the same, they work the same way?

    The trends are refreshed every six months or less, certainly that cycle is shortenting rapidly. Does it make sence to make a website based on current trend when in six months or less (depending how quck you are to copy) that very website is going to be obsolete, from a visual and probably structural perspective?

    Reply
    +2
  15. Harish Chouhan
    Harish Chouhan Jul 16, 3:27 am

    Just launched a website http://flattrendz.com inspired by Flat Design & Flat UI PRO.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters