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 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 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 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.
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.
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.
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.
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.
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!
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 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 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.
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 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.
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.
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 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.
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.
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.