Navigation

15+ innovative flat design websites

By Kendra Gaines | Web Design | May 6, 2013

I first took notice of flat color web design when Google started to redesign their sites. This was during a time when gradients and drop shadows were all the rage. In using what was then Google Docs and my Google Calendar, I always realized there was something better and more user friendly about these sites but I never could put my finger on what it was. I just continued to enjoy and use the services as needed.

Eventually, I think I was just messing around with the apps when I finally noticed the buttons had no gradients and the icons didn’t either. There were no drop shadows and really nothing but flat colors and lines to separate the content. I loved it and I took to Twitter to share my findings.

Quickly, I was met with a few people who just didn’t like it. They didn’t understand it, said it was completely boring and said it would never catch on. Thank goodness they were wrong.

Of course Google isn’t the first brand to use flat color in their designs. But of major importance is how they used it, not just why they used it. It created a fresh user interface. There were little to no distractions and the aesthetics were still there. It felt like common sense when it was done, but beforehand, we loved our buttons and color schemes with gradients and shadows and textures and so much more.

This flat color web design is a trend right now not just because it looks good but because it makes sense. It promotes a clean user interface that’s easy to use and understand. Today, we’ll be looking at a couple of web sites that utilize this principle of flat color design. Let’s jump right in.

 

Microsoft Windows

Microsoft has always had their issues with being a bit behind the times, especially with a competitor like Apple. Windows 8 is the development many people attribute the success of flat design to. It seems as if Microsoft got hip to what people really wanted and how they really worked and came up with the user interface design they currently have. If they didn’t get anything else right, Microsoft definitely got the design right.

 

Wistia

Wistia is professional video hosting that specializes in hosting for businesses. It’s a nice for those of us who want a different look than a YouTube embedded player and also desire the ability to use Flash and/or HTML5 to view video. They’ve taken flat design to new heights by using it entirely in their web design alongside some really good illustrations.

 

David Hellman

David is an art director and web developer who has quite the portfolio. Many times we see white backgrounds that feature these flat colored elements in a variety of color schemes. Hellmann switched his up a bit by offering flat color in his backgrounds and not only his other graphical elements.

 

Standbuy

It’s always refreshing to see great web designs on sites and brands that stand for a great cause. Standbuy focuses on easing the financial burdens of dealing with cancer with this web site. They use flat design in a relatively regular way, but they pair it with great typography and images to really make their site pop.

 

Minimal Monkey

The name of this site, Minimal Monkey, is obviously spot on for the design here. By the naked eye, this is just another plain website that uses minimalist theories to create the site and look desired. The wonderful thing here is how you can interact with the site and how it transitions. This is an amazingly smooth iteration of flat web design.

 

Neue Yorke

Most of our favorite flat color sites have these extravagant color palettes that feature at least 4 or 5 different colors. Neue York took a different approach by creating a very simple color palette. Much like the Minimal Monkey website, the interaction with this site is to be spotlighted alongside the wonder flat color design.

 

Split Secnd

You’re probably wondering why this site is on this list. As you can see, the first couple of buttons actually have very subtle gradients. But as you move down, you’ll find that lots of flat color is used. This is a wonderful example of how you can get both flat color and other techniques to live together.

 

Symbolset

Flat web design paired with big typography is one of the greatest trends we have going today. Symbolset utilizes these two techniques to show off their set of icons that can be used in web design or whatever design. I really like this site because the header is flat color that transitions the spectrum of colors. It’s really neat!

 

Geckoboard

This service offers a way for business owners and entrepreneurs to check all their statistics in real time, in one place. They’ve decided to subtly use flat color design in their buttons and other elements. Of interest, is the way these designers have added a bit of tasteful design to flat color elements as well.

 

Portraits

Portraits is a cute little offering from AOL. They use flat color web design as a way to fill in their white space and create different sections of content. What I like about this site, again, is the interaction you have with the content and how it appears and transitions.

 

Palace

Palace has borrowed a great deal from the folks over at Microsoft. Not only do they use the flat color technique, but they also put in a grid much like all of Windows 8. It’s not your typical color scheme and that makes things a bit more interesting as well. 

 

Boat Studio

Sometimes all you need is a pop of color to make things interesting. Boat studio has built a website with images that are displayed mainly in grayscale. As you begin and end the scroll on each page, you’re introduced to a semi-transparent area that contains some text. It’s a wonderful iteration of flat color and making it creative for your brand.

 

Koken

Koken uses a variety of feels to create an extremely solid web site. We start off with a light colored header then transition to a dark body of the page. Eventually, we end up with a brightly, flat-colored footer. This goes to show that a whole site doesn’t have to be flat in color, but can use simple elements to create that technique.

 

Mud

This site does a good job of taking the flat color technique and making it theirs. They didn’t use a gradient or other elements to enhance, but they chose a color scheme and put two different colors side to side to create a nice background. In addition, they kept their scheme very consistent throughout the site–it wasn’t about lots of colors but perfecting the ones they had.

 

The Clocksmiths

Again, this is a site that uses a very simple color palette, one that’s not exceptionally bright and random but rather monotonous. It works for them, because they have so many other unorthodox elements that add to their design. This site helps show how the trend can still work while taking a backseat to other creative elements.

 

Hatch Inc.

Hatch uses white space and wonderful illustrations to help create and support the flat color trend. They’ve got a very simple site that they’ve added some character to with different techniques and elements.

 

EARS

What’s extremely popular in flat color web design and in design period is the use of straight lines, regular boxes and circles. It’s very rare to see different shapes introduced online. EARS is changing that rhetoric by involving a different type of line separator that’s very similar to an EKG line. And I love it. Notice how they used a muted color palette for their trendiness as well.

 

Conclusion

It’s tough to call flat color web design a trend because it’s just a common sense iteration of creating a cleaner user interface. However, as you can see, there are many different ways to do it. Again, it’s extremely important the flat color design isn’t just a nice new look for you, but a means for you to keep your design consistent and user friendly throughout your website.

What are some of your favorite websites that use flat color? Have you created a design that uses flat color? Share with us in the comments section.

 

Share this post
Comments (no login required)
  • http://www.facebook.com/people/William-Smith/724265971 William Smith

    Nice roundup guys. Also, gorgeous blog :)

  • http://www.facebook.com/emosewamai Andrew Hersh

    I really, really, really don’t understand why everyone has gotten infected with flatphylia all of a sudden.

    It isn’t especially attractive and it certainly isn’t new OR modern. All I see when I look at examples of sites that are actually employing a flat design (many of these examples aren’t…) is echoes of 1999. Everyone and their mother wanted a website without paying for it. So they went to their cousin/brother/nephew, who had pirated Flash, and had him make something. Since he didn’t know how to code, he did the entire friggin’ website in Flash and those sites, inexorably came out looking Exactly. Like. These. Examples.

    So, in 1999, it was the people who didn’t know how to code (or use Flash very well) that riddled the internet with flat design. NOW… it’s the people who don’t know how to design that are riddling the internet with flat design.

    As for the examples shown here as flat that aren’t really flat at all, they show the ACTUAL direction in which good designers are going; which is in the direction of using photography and/or “hyperrealism” to engage users.

    Calling a design “flat” when it uses photography is silly. Designing a website (or any electronic application) and using zero depth or realism is also silly. Hopefully, the “trend” is as short-lived as 100% Flash sites proved to be…

    • toifel_de

      Back in 1999, Javascript was almost a no-go because everyone had it disabled and stuff like webfonts didn’t even exist or were only supported by a few browsers.
      I think it’s legit to bring back flatdesign in combination with the new, modern techniques we are able to use today. I would agree that it’s a little overhyped though – when has microsoft become a trendsetter in design anyway?!

    • aardvarked

      so edgy

  • http://www.redstarcreative.co.uk/ Andy Kinsey

    I am so glad to see us moving past the fake 3d effects – idealised by previous iphones – it was just horrible – long live flat

  • orange county web designer

    Beautiful and inspiring showcase. Great post for inspiration. Thanks for sharing.

  • https://twitter.com/ Rohit Sharma

    Awesome ! loved the exampleswhich you have used.
    ‘meetgeckoboard’ the best.

  • http://twitter.com/zioneyemedia zioneyemedia

    I understand that some people may be turned off by the “(re)emergence” of flat design, but I think that just to see how flat design can be used in the modern world is still engaging in its own right. As evidenced by the above examples, some sites can definitely pull it off :)

    Great roundup!

  • http://twitter.com/zioneyemedia zioneyemedia

    I understand that some people may be turned off by the “(re)emergence” of flat design, but I think that just to see how flat design can be used in the modern world is still engaging in its own right. As evidenced by the above examples, some sites can definitely pull it off :)

    Great roundup!

  • http://tipigraphics.com/ Tzvi Perlow

    great list!

  • http://www.facebook.com/pavel.antolik Pavel TwoNine Antolík

    Oh, give it a break. Web would be boring if there were only gradients and shadows :)

    • http://www.facebook.com/emosewamai Andrew Hersh

      I agree! Don’t you think it may -also- get a little bit boring if all of those things disappeared, and you were left with nothing but colored boxes and outlines?

  • http://www.logix7.com/ abkimmortal

    Wow ! Great Collection !

    • linda

      Good information provided thanks

  • http://www.mrgeek.me/ Ali Gajani

    Great list. I have a top 10 list of the responsive sites you should see here on Mr. Geek.

    http://www.mrgeek.me/technology/tutorials/web-design/10-responsive-websites-you-should-see/

  • rajendra ray

    Some designs are very cool !!! thanks for publishing.

  • Will Paige

    Nice blog post… love flat design!! Just re-done my site based on flat design http://willpaige.co.uk

  • http://www.facebook.com/profile.php?id=100004321110721 Adriano Laurentiu

    An interesting interactive flat design webpage – http://designmodo.com/flat/ with animation of icons and interesting effects.

  • http://www.facebook.com/emosewamai Andrew Hersh

    I absolutely agree. But that something else will only come along as a result of someone completely ignoring the trend. What I am trying to say, is that following the trend is counterproductive.

    Your observation is proof of it.

  • http://www.facebook.com/cathy.burgess.714 Cathy Burgess

    Nice article! I really find these ideas amazing. These website designs are indeed so cool and well crafted. So inpsiring and very much impressive. Great help for my latest project. Thanks for sharing this nice post!

    -JulieandCompany.com

  • Zoli Sipos

    great collection, thanks

  • T.desclain

    Nice examples !!

    We would like to suggest you to visit our flat landing website for our flat upcoming application http://who-wanna.com

    All flat design lovers should appreciate !

    Keep the good work !

  • pinoystop

    I love flat designs! Check mine out, I just finished it :) http://www.twelveskip.com/

  • Mohit Kumar

    Nice List… “Mud” design really impressed me a lot. It is so much pleasant to the eyes…

  • thetotobox

    I redesigned my site to flat and still on the process. I’m really enjoying how flat designs fit and look well on PC monitors and mobile devices. You might want to check out my site http://www.thetotobox.com. Thanks

  • john smith

    what font is used in this website??

  • Philip

    Most of these are so dry and business boring. Flat design doesn’t need to be this way. What makes something interesting to look at is that there is variation, texture, or noise within a surface.

  • Liz Atlas

    Love this article. Like how you are naming this direction in webdesign. Great examples!

  • John

    holly!

  • http://www.webcanvasdesign.co.uk/blog Andy Cresswell

    Nice round up, I love Palace colour theme!

    I am a self taught front end web designer and developer, I have just made over my website using the flat design trend and would love to hear everyones feedback!

    http://www.webcanvasdesign.co.uk

  • opraz17

    Nice List , Many Inspiration For Me :)
    Just done my website with flat style :)
    http://www.suavedigital.com

  • ALC

    This stuff is some of the most boring piles of crap design ever. The current trend of minimalism is not really a new trend at all. Everybody these days goes for the most boring designs anyone could ever pick out. Everyone also just uses wordpress today and if you look at most of the themes out there…they are almost all the same. The free ones are all the same and the Premium ones you can buy out there are just a version of a free one that gives you a few more customization.

    I do understand it. Simple, sleek, and ease of use for the visitor makes these trends what they are, but that doesn’t mean we all have to say they are so “modern” or “great.” I certainly wouldn’t want to go back to the opposite direction of the old bulky year 2000 sites, I’m just saying that there has to be some kind of creativity out there somewhere.For what I see coming out of webdesign today its almost as if people think the wheel was re-invented because someone used a different font. That’s not saying much since as you fall asleep picking one out you find most of them have such small differences it doesn’t matter anyway