Making it Work: Flat Design and Color Trends

We’ve talked a lot here about the flat design trend here at Designmodo.

We’ve raved about it, showed you plenty of cool examples and even developed a free user interface kit for you to download and use for projects.

But what if you want to do it yourself? One of the most important parts of the trend is color.

Flat Design Refresher

Wistia

Roy Barber

Squidee

Are you looking for WordPress Theme?

Get Startup Framework for WordPress now!

Solo

Flat design is a technique that uses simple effects – or lack thereof – to create a design scheme that does not include three-dimensional attributes. Effects such as drop shadows, bevels, embossing and gradients are not used in flat design projects.

Some call the look of flat design simple, although it can be quite complex. The look itself is simple, direct and user-friendly, making it an increasingly popular option for mobile user interfaces as well as trendy web design.

Learn more about the flat design trend in a previous Designmodo article.

Defining a Color Palette

When it comes to color, flat design works with a variety of colors, but most commonly designers are choosing to go bold and bright.

The other thing that makes flat design different in terms of color? Designers are expanding palettes from just a shade or two to three, four or more colors. Most of these choices are bright, fully saturated hues that are sometimes countered with grays or blacks.

When it comes to color and flat design, many of the traditional rules about color pairing and matching are thrown out of the window in favor of palettes that span the rainbow with lots of pop.

What we are seeing more of with flat design and color though is the matching of tone and saturation. While designers may choose to use quite a few shades, they will often mirror each other in how deep the color is, whether it is a more primary or secondary color combination or from another part of the color wheel and whether colors contain more black or white mixes.

When it comes to color, flat design schemes often trend as super-saturated and bright, more retro or monotone. That’s not to say these are the only options, but as the trend has evolved they are the most popular.

Bright Colors

Flat UI Colors

Weather App

Weather Widget

Bright color is often a characteristic associated with flat design because it creates a distinct feel. Bright colors typically work well against both light and dark backgrounds, creating contrast and engaging users. It is the most popular color trend out there in relation to flat design.

So where do you start?

FlatUIColors.com has a great starter list of some of the most popular hues in flat design. From bright blues and greens to yellows and oranges, these colors epitomize what we are seeing in terms of color and trend. The site is a great starting point because you can choose a color and download the color values at no charge. (Personally, I am a fan of the gray tones for something a little different.)

Designmodo has taken this bright design outline a step further in the recently released Flat UI Free kit, with these same bright hues as the outlines for a great and easy-to-use interface kit. The flat-designed, stylish icons work in a variety of projects and come with the color swatches included (a great option if you are new to mixing color).

One thing you don’t see often with bright flat design color palettes is the use of strictly primary colors – pure red, blue and yellow are often overlooked in favor of richer, mixed colors.

If you want to pair your own bright colors in a flat design scheme, opt for simplicity. Choose colors that have similar color tones and saturation.  Plus we’ve given you a few color swatches with values to get started.

Brights

Bright swatches: Try these color combinations together or mixed in groups to create a great flat color palette. Each of these colors will pop against a white or black background for maximum impact.

Popular colors: Blues, greens and purples

Retro Colors

Invoisse

My drinks by Jakub Antalík

Gecko board

Pattern sun

Retro color schemes are also a popular choice when working with flat design projects.

These less saturated, but hues build on the idea of bright colors but with the addition of white to make them more muted. The look is not that of a pastel but distinctly old-school. Retro color schemes often contain a lot of orange and yellow and sometimes red or blue.

It is more common to see primary and secondary colors used in retro color schemes when working with flat design, because of the toning down of the color.

Retro

Retro swatches: Retro colors work best when they stand along as a dominant color element. Pair them with images or muted colors for the best results.

Popular colors: Oranges, peach or plum tones and dark blues

Monotone Colors

Flat List

Foundation

Morning

Monotone color schemes paired with flat design techniques are gaining popularity at a rapid pace. These color palettes rely on a single color with black and white to create a bright, but distinct palette.

Most monotone color schemes use a base color and two or three tints for effect. The most popular color choice seems to be blue, but many designers are opting for a monotone color scheme based on black (grays as well) with a pop of color such as red for buttons or calls to action.

Another option is to create a monotone effect using slight variances in color. If you start with blue, for example, add tints of green to create a scheme of blue-green color.

Monotone color techniques are especially popular for mobile and app design.

Monotone

Monotone swatches: Just like with other color palettes, monotone schemes also need to include contrast. Mix tints to that each different “color” is distinct from the parent color. Start with a full color (100 percent) and tints of 50 percent, 20 percent and 8 percent.

Popular colors: Blues, grays and greens

Conclusion

One thing that really makes the flat design trend work is that it is new and fun. Your projects should reflect that.

Create a color palette that matches the tone of your project, instructs users how to use your site and is visually interesting and fun. Think beyond some traditional color matching rules and step outside of your comfort level when creating a flat color scheme.

And feel free to download Flat UI Free as a starting point or use some of our color swatch suggestions.

Carrie Cousins has more than 10 years experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with her on Twitter @carriecousins and Google+.

Newsletter

27 Comments
  1. Hasitha Apr 26, 2:07 pm

    Big thanks!
    Really inspirational post.

    Reply
    +28
  2. dorrellwilson Apr 26, 2:21 pm

    Oh hell yes! Man I’m so glad I found this site.

    Reply
    +10
  3. Stuart Apr 26, 5:10 pm

    The designs presented fail to establish a visual hierarchy, the only visual clue to the user is the size of typography between different elements. Particularly the example with monotone colors.

    Don’t get me wrong, it looks very pretty, but even slight skeuomorphism would improve the usability tenfold. Having watched my mother struggle with the new flat-UI of Hotmail, such design doesn’t communicate what parts are “buttons” or perform actions until you try clicking on two identical looking text elements.

    Reply
    +36
    • Michael Clay Apr 27, 2:49 am

      Normally without the use of depth (flat design), one would use color, size and shape to convey meaning and function (words on a flat bar should change color ,etc.) The only problem with that is that mobile browsers sometimes don’t do well with Javascript and HTML5, while spreading, is not always in the browser that someone uses. So, sometimes you get instances like this. I think a little more consideration from designers about these issues might alleviate some of this…

      Reply
      0
    • Joe Apr 29, 9:53 am

      Apparently Microsoft has proven how Flat Design isn’t as simple as it looks like. Many things can get wrong if you don’t have the proper designers who knows what to do. If you want a good example of an e-mail-service which has done everything right take a look at the new gmail. See the difference?

      Reply
      +4
      • Ivan Nikitin Nov 24, 7:54 pm

        Not everything – Mail list is cluttered on desktop. Looks much better on mobile.

        Reply
        0
    • Cay Arcena Jun 3, 8:55 pm

      Agreed. One of codrops’ article was about UI is invisible. What makes a great UI is using it with easy navigation. You guys should check the article.

      Reply
      +1
  4. Jonathan Jaeger Apr 26, 6:43 pm

    Great tips, I like how you covered the different color scheme strategies. Flat design icons and overall design is new and fresh. A lot of the newer consumer and B2B apps are getting a little stale with the same friendly rounded buttons and similar typography. Flat design like this is new and fresh but who knows, maybe in a couple years we’ll say it’s beaten to death. Until then..!

    Reply
    +2
  5. Anon Apr 26, 11:59 pm

    Hidden due to low comment rating. Click here to see.

    Reply
    -26
  6. Pasquale Apr 27, 4:02 am

    This is one of the most obnoxious things about design that I’ve read. Based on nothing.

    Reply
    +7
  7. john Apr 27, 4:49 am

    Right on. 3D is a cheap trick, your brain knows it and it eats excessive patter-recognition cycles. Flat is sleek and goes down ez. Looks way better too.

    Reply
    +1
  8. Someone Apr 28, 11:05 am

    Hidden due to low comment rating. Click here to see.

    Reply
    -6
  9. TimMH May 1, 11:17 am

    This seems to have become a very popular trend over the recenet year, especially since tha latest launch of Windows 8 (Metro) and The New Nokia windows phones.

    Reply
    +2
  10. igen May 5, 9:24 am

    I’m loving the flat design thread. It’s simple and beautiful. If I will make a flat design, I think I will be using monochrome colors.

    Reply
    +2
  11. Chris May 6, 7:55 pm

    I was passed the link to this article and another from SmashingHub this morning. After reading both, I have found the SmashingHub article to be one of those oft-spoken of plagiaristic articles plaguing the interwebs with unnecessary, and in this case, inane, filler content that no one should ever waste their time on. I’m almost sorry I did.

    The reason I’m only almost sorry? Because I laughed out loud when I realized that it seems to be (at least large chunks of it) an almost paragraph by paragraph (including images) rewrite of this DesignModo article.

    In his passionate rewriting, however, the re-author also adds some horrible, sometimes completely wrong, blanket statements, shows a true ignorance of color terminology and use, and makes a spine-grating conclusion.

    The DesignModo version is pretty good, tho. You’ll likely get some good tips and perspective out of it.

    Hmmm… Considering that DesignModo released this article yesterday, either SmashingHub is really quick on the rewrites, or DesignModo is a REALLY good re-author. In which case they should keep it up.

    http://smashinghub.com/flat-designs-color-trends.htm

    Reply
    +2
    • Adrian May 6, 8:04 pm

      We not publish re-writes, only self-written articles, I’ll try to contact author of this website.
      Thank you.

      Reply
      +1
  12. Cody May 7, 5:45 pm

    I shuttered a little when I read this statement!

    “One thing that really makes the flat design trend work is that it is new and fun. Your projects should reflect that.”

    Though flat design is currently a popular trend, it is by no means new. Secondly, you’re basically telling everyone to just copy whats trendy.

    Reply
    +6
  13. abeedo May 7, 10:22 pm

    Thank you for this useful article , would love to see more about the new emerging retro trends in design

    Reply
    0
  14. Arnel Guanlao May 15, 5:40 am

    Flat Design is definitely a trend now. I do hope that Apple will use flat UI designs on the coming iOS 7.

    Reply
    +1
  15. Geoff McMahen May 16, 12:38 am

    Very nice stuff! Flat design looks simple but thats the trick!

    Reply
    +2
  16. Cay Arcena Jun 3, 9:00 pm

    Despite having a really good UI, think about the users, visitors, easy navigation. What makes a good UI look fantastic is its ease of use. Skeumorphic and Flat (even Almost Flat) are no need to be argued about because all of them are fantastic.

    Reply
    +3
  17. Bridie Schmidt Jun 26, 12:03 pm

    I can see the value of flat design. Easy-to-design, and once the general user population get used to it, easy-to-navigate. I think any design trend will require some settling in time. However, regarding your comment about FlatUIDesign: any site that doesn’t allow you to “choose a color and download the color values at no charge” is unethical, as easy it is to print screen and grab the colours in photoshop.

    Reply
    +1
  18. Mindy Jun 26, 8:24 pm

    I agree that flat design looks great if done right. It’s also easy on the eyes and is a very easy design to navigate through on the website and on your phone. Also, the more effects there are, the high mb the file will be. So, in other words, it’s an advantage to designing flat design with less MB to load websites faster.

    Sometimes I do like designing flat design on print pieces if it suits the brand of that company. I like gradients and drop shadows lightly added. I’m not much on very heavily designed pieces that has too much effects. The simple it is, the well-presented the piece it is to the audience to convey the message.

    Reply
    +1
  19. Selen Gora Oct 25, 5:05 pm

    Thank you for the inspirational post. Clear and helpfull.

    Reply
    +2
  20. Hilda Nov 12, 10:17 pm

    The “Monotone Colors” section should be titled “Monochromatic Colors” (monotone refers to a sound)

    Reply
    +3

Leave a Reply

*
* Minimum length: 20 characters