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.

Over 1,200 Pixel Perfect Hand Crafted High-Quality Icons – $27!

Putting broadcast signals within LTE mobile network technology could open up bandwidth and disrupt business models.

If you want to watch video on your phone or tablet, you’ll find that many networks can’t always serve up the data fast enough. So your choices are either to find a Wi-Fi hotspot, take your chances on congestion and high data charges on a cellular network, or plug in a special dongle that picks up TV broadcasts (see “Broadcast TV Aims for Your Smartphone”).

Advertise here with BSA

Last month, we had a giveaway of interactive HTML5 world map licenses from Simplemaps.com. Each license, which lasts a lifetime, is worth $199. In this post, you’ll find out who the five lucky winners are.

The Winners

Here are the five Six Revisions readers who’ve won a license from Simplemaps.com.

• Rommel RB
• Riyadh Al Nur
• George
• Avenirer
• Heru

Congratulations to all the winners! The winners should have already gotten an email from me containing information about their prize.

SQL query showing the 5 winners that were selected at random. Email addresses were removed from the screenshot above for privacy.

About Simplemaps.com

Simplemaps provides interactive map software for websites. These maps are typically used to visualize data or improve website navigation. These maps include latitude and longitude markers, zoomable regions and descriptive pop-ups upon hover. Maps can be customized and installed without any programming knowledge.

The company’s most popular products are its HTML5/JavaScript interactive maps of the United States and World.

Related Content

• How Web Designers Can Adopt a Global Mindset
• 10 Useful Infographics about HTML5
• 40 Useful and Creative Infographics
• Related categories: Web Development and User Interface

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.