Published on <a href="http://ift.tt/2oS0MV6">| Prototyping: From UX to Front End &mdash; Medium</a> Designlab <img alt="" src="http://ift.tt/2p3sFW4">Text and Illustrations: Patrick Multani
Whether you’re a novice or an old hand, how to use color is one of the most contentious and elusive questions in design.
Colors have myriad cultural, social, and emotional meanings, and the complexity of choosing a palette isn’t made any simpler by the fact that a designer’s options are practically infinite.
In this week’s article, our in-house design guru, Patrick Multani, shares his tips for how to build great color palettes. Let us know what you think in the comments — and feel free to share any other tips that you use in your work!
<img alt="" src="http://ift.tt/2oS3ha0">
Before starting to pick colors, I often think of <a href="http://ift.tt/1N8bzf7">Dustin Senos’ short article about design principles</a>. He explains that, at Medium, they use principles like “direction over choice,” “appropriate over consistent”, and “evolving over finalized”. I think this way of forming principles also works for colors: white over gray; harmony over disconnect; cool over warm. I try to keep these ideas in mind as I work. They serve as a kind of sense-check — a bit like how a user persona guides UX designers.
<img alt="" src="http://ift.tt/2oSf4VC">
When choosing colors, I try to stay on a straight line, either diagonally or from left to right. This gives any palette an immediate sense of relationship and progression. The resulting set of colors could be used to indicate active and inactive buttons, borders, or backgrounds. We can also leave the dot in the same place on the color selector, but cycle through colors using the hue slider. This can produce exciting, harmonious palettes, like the one illustrated (above, center).
<img alt="" src="http://ift.tt/2p3iWPS">
What I experience over and over again is how fragile color palettes are: a slight adjustment can make a huge difference to a color scheme’s overall effect. So I find it’s important to be sensitive, and make changes in small steps. For example, choosing a cool or warm gray can dramatically increase the harmony of a design. We can become more sensitive to the subtleties of color by picking a lot of them, truly looking at them, and iterating repeatedly.
<img alt="" src="http://ift.tt/2oSl4hp">
I use blending modes to help create exciting color palettes. By simply creating two overlapping shapes, and selecting the “Multiply” blending mode, we get a third, matching color. On a white background, we can also experiment with the opacity setting to quickly adjust lightness. I always find it’s worth trying the opposites as well: a black background, in combination with the “Screen” blending mode. Blending modes offer a new way of interacting with color, and they are often used extensively by experienced designers.
<img alt="" src="http://ift.tt/2p3nLbO">
On the <a href="https://framer.com/">Framer website</a> recently, I spotted an example prototype of four rotating squares, with different hues and opacity levels. It was beautiful, so I immediately fired up Framer to create some color palettes using a simple for loop. Set a starting backgroundColor, and use hueRotate together with opacity to generate colors. The hueRotate ranges between 0 and 360, the opacity ranges from 0 to 1 (decimals work too), and depending on these numbers we get different palettes. I’ve found this so valuable that I now use Sketch in conjunction with Framer, to see what certain colors looks like in a loop. To pick colors from Framer to use in my designs, I take a screenshot of the Framer canvas, paste it into Sketch, and then use the color picker.
<img alt="" src="http://ift.tt/2oRZJ7r">
Picking great colors is one thing — using them effectively in a visual design is another. Colors can look great out of context, but once they’re applied to a particular design project, the palette can fall apart. Using as few colors as possible in close proximity can calm down a design. For example, using different kinds of blue for text, icons, and borders can work nicely. This approach leaves us the option of using a different hue to highlight something when we really need it to stand out.
<img alt="" src="http://ift.tt/2p3p4HG">
I remember working on a project which required a scalable color system. I picked tons of nuanced colors, and it was getting difficult to distinguish between them. So I made a copy of the colors, and added a dark background to find another perspective. This helped me to make better decisions.
<img alt="" src="http://ift.tt/2oSb4EQ">
Choosing from the top-right corner of the color picker can be a safe way to find appealing color combinations for visual design. In nature, dust and dirt add grey and black to colors. Although adding grey or black to colors can add weight to a design, using too many heavy shades can subconsciously convey dirtiness. I try to create designs with clean and bright color schemes.
<img alt="" src="http://ift.tt/2p2LQ2E">
Imagine a white sheet of semi-transparent paper. Think how it would “lighten” any colors we put underneath it. We can mimic this in Sketch by creating what I think of as “filter” shapes. Using opacity, blending modes, or a combination of the two, we can lighten and darken colors with white and black filter shapes. Sometimes, when working on UI projects, I use this technique to temporarily lighten or darken whole areas of an interface. This is quicker and easier than changing colors individually, and it maintains the harmony and relationships between colors.
The illustration above shows:
<ul>
<li>Black layer, Overlay blending mode, opacity 50% (increases saturation)</li>
<li>White layer, Normal blending mode, opacity 50% (lightens)</li>
<li>Black layer, Normal blending mode, opacity 50% (darkens)</li>
</ul>
<img alt="" src="http://ift.tt/2oS6ndV">
When deciding on background colors, as a first step I like to take the foreground color and lighten or darken it. Rather than choosing a neutral gray (i.e. lying between white and black), choose a slightly warm or cool gray to give objects a human or mechanical feel.
<img alt="" src="http://ift.tt/2p3kyJk">
Finally, remember the effect that light and dark have on our perception of visual depth. Against a dark background, lighter colors will appear to come to the front; while against a light background, it’s darker colors that are foregrounded. I often think of this in terms of sunlight: in the illustration above, we can imagine the sun directly illuminating the circle on the top left, and the circle on the bottom right being backlit by the sun and forming a silhouette.
<h3>More Sketch Tips</h3>
<ul>
<li><a href="http://ift.tt/2nX56gH">Sketch Tips Part 1: Objects, Layers, and Artboards</a></li>
<li><a href="http://ift.tt/2nfjmV0">Sketch Tips Part 2: Editing and Exporting</a></li>
<li><a href="http://ift.tt/2nWYj75">Sketch Tips Part 3: Composition, Light and Shadow</a></li>
<li><a href="http://ift.tt/2nfnBjH">Sketch Tips Part 4: Symbols</a></li>
</ul>
If you’d like to learn the fundamentals of contemporary design, Designlab offers a Design 101 course that combines online lectures, curated resources, hands-on exercises and expert mentor support. <a href="http://ift.tt/1mANenh">Find out more about Design 101.</a>
As a Designlab student, you can also get 50% off the price of a Sketch license. <a href="http://ift.tt/2nX3aoG">Find out more about student perks.</a>
Originally published at <a href="http://ift.tt/2pPkS2u">trydesignlab.com</a>.
<iframe src="http://ift.tt/2kZ4o5P" width="800" height="400" frameborder="0"><a href="http://ift.tt/2pIip9S">http://ift.tt/2pIip9S</a></iframe><img src="http://ift.tt/2oSq1GP" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2p380BE">11 Tips For Building Great Color Palettes</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

11 Tips For Building Great Color Palettes

Top Stories