large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="http://ift.tt/2snei4X">Springboard &#8211; Medium</a> | Nick Babich <img alt="" src="http://ift.tt/2sY4WeB"></p>
<h4>Eight rules about color palettes that everyone should know</h4>
<p>Human-computer interactions are heavily based graphical UI elements and color plays a critical role in this. As <a href="http://ift.tt/1mo8Wyv">Pierre Bonnard</a> once said:</p>
<blockquote><p>Color does not add a pleasant quality to design — it reinforces it.</p></blockquote>
<p>When designing a new product, it’s often difficult to decide on the color scheme because of the infinite number of possible color combinations. In this article, we’ll cover eight basic rules that can help you select the right color palette.</p>
<h3>1. Limit the Number of Colors</h3>
<p>Applying color to a design project has a lot to do with balance. The more colors you use, the harder it is to achieve that balance. You will get better results if you stick to a <em>maximum of 3 primary colors</em> in your color scheme. According to a <a href="http://ift.tt/1wJSmrC">University of Toronto study</a> on how people used <a href="http://ift.tt/1vOPJGg">Adobe Color CC</a>, most people said they preferred simple color combinations that rely on only two or three colors.</p>
<p>If you need additional colors beyond those you’ve defined in your palette, make use of shades and tints.</p>
<h4>How to Create a Scheme</h4>
<p>So how do you choose those two or three colors? The color wheel can help.</p>
<p><img alt="" src="http://ift.tt/2ssVM6s."><em>The 12 color wheel is an important tool for creating color schemes</em></p>
<p>There are a number of predefined color scheme standards that make creating new schemes easier, especially for beginners:</p>
<ul>
<li><strong>Monochromatic</strong><em>. </em>Monochromatic schemes are the simplest ones to create, as they’re all taken from the same color, but include variations in tints, shades, and tones. Monochromatic colors go well together, producing a soothing effect.</li>
</ul>
<p><img alt="" src="http://ift.tt/2sXt0hM."><em>The monochromatic scheme is very easy on the eyes (especially blue or green hues). As you can see in this Facebook example, the scheme looks clean and elegant.</em></p>
<ul>
<li><strong>Analogous</strong>. Analogous color schemes are created from related colors; one color is used as a dominant color while others are used to enrich the scheme. While this is relatively easy to pull off, the trick is in deciding the vibrancy of the colors you’re using, as the entire scheme will be exaggerated by it. For example, <a href="http://ift.tt/1XKribC">Clear</a>, a gesture-driven to-do app, uses the striking analogous colors to visually prioritize your current set of tasks. While <a href="http://www.calm.com/">Calm</a>, a meditation app, uses the analogous colors blue and green to help users feel relaxed and peaceful.</li>
</ul>
<p><img alt="" src="http://ift.tt/2sXE5PL."><em>Analogous schemes are created by using three colors that are next to each other on the 12-spoke color wheel. Clear, a gesture-driven to-do app, uses striking energetic analogous colors to visually prioritize a current set of tasks.</em><img alt="" src="http://ift.tt/2ssVNaw">Calm uses analogous colors to establish an overall mood.</p>
<ul>
<li><strong>Complementary.</strong> In their most basic form, these schemes consist of only two colors that contrast strongly. This scheme is used to attract the viewer’s attention. When using a complementary scheme, it is important to choose a dominant color and use its complementary color for accents. For example, when the human eye sees an object full of different kinds of greens, a bit of red is going to stand out very well.</li>
</ul>
<p><img alt="" src="http://ift.tt/2sXLn5Z."><em>Using complementary colors is the easiest way to get something to stand out.</em></p>
<ul>
<li><strong>Custom.</strong> Creating a custom color scheme isn’t as complicated as many people think. There is a simple trick you can employ to create great color palette: Simply add a bright accent color into an otherwise neutral palette (e.g. a traditional monochromatic scheme). The newly-created scheme will be one that’s very visually striking.</li>
</ul>
<p><img alt="" src="http://ift.tt/2st1pkI."><em>Adding one color to a grayscale design draws the eye simply and effectively. A layout with a combination of white and grey splashed with accents of blue in Dropbox color scheme.</em></p>
<h3>2. Be Inspired by Nature</h3>
<p>The best color combinations come from nature. Why? Because those schemes seem natural to the eye. To get inspired, we only need to look around us. If you see a particularly beautiful or striking color in your daily life, try creating a scheme around it. Simply take a picture of a beautiful moment and create your color scheme from it.</p>
<p><img alt="" src="http://ift.tt/2sXML8F."><em>The best color combinations come from nature. You can create a color scheme from the shot.</em></p>
<h3>3. Try to Follow 60–30–10 Rule</h3>
<p>This is a timeless decorating rule that can help you put a color scheme together easily. The 60% + 30% + 10% proportion is meant to give balance to the colors used in any space.</p>
<p>This concept is incredibly simple to use: 60% is your dominant hue, 30% is the secondary color and 10% is the accent color. The idea is that the secondary color supports the main color, but is different enough to set them apart. Your 10% is your accent color. It can be a color for the CTA or another element that you want to spotlight.</p>
<p><img alt="" src="http://ift.tt/2ssVNHy."><em>60% is your dominant hue, 30% is secondary color and 10% is for accent color. This technique allows the eye to move comfortably from one focal point to other.</em></p>
<h3>4. Design in Grayscale First</h3>
<p>Playing with color is fun. That’s why choosing a color scheme is one of the first things we do in new projects. It’s really tempting to lead with a color scheme but I recommend instead forcing yourself to design in grayscale first. Build a prototype of your app in a grayscale gradient and use that as your baseline. Designing in grayscale before adding color forces you to focus on spacing and laying out elements.</p>
<p>Add color last, and even then, only with a purpose.</p>
<p><img alt="" src="http://ift.tt/2sXpS5g."><em>Adding one color to a grayscale layout draws the eye simply and effectively.</em></p>
<h3>5. Avoid Using the Color Black</h3>
<p>In real life, pure black almost never exists. All of the “black” objects around us have some amount of light bouncing off of them, which means they aren’t truly black, they’re dark grey. Roads aren’t black. Shadows aren’t black.</p>
<p><img alt="" src="http://ift.tt/2st1qoM."><em>The color of this dog is dark grey, not black.</em></p>
<p>When you place pure black next to a set of meticulously picked colors, the black overpowers everything else. It stands out <em>because</em> it’s not natural. Lots of the apps we use on a daily basis have blacks that aren’t really blacks, but dark greys instead. For example, the darkest color on Asos top bar isn’t <em>#000000</em>, it’s <em>#242424</em>. So remember to always add a bit of saturation to your color.</p>
<p><img alt="" src="http://ift.tt/2sXJkz5."><em>The darkest color on </em><a href="http://www.asos.com/"><em>ASOS</em></a><em> isn’t black</em></p>
<h3>6. Set Importance Using Color Contrast</h3>
<p>Сolor is a tool that can help guide the eye. The more you want something to stand out, the more you should rely on contrasting colors. Generally, high contrast is the best choice for important content or key elements. If you want users to see or click something, make it stand out!</p>
<p><img alt="" src="http://ift.tt/2st3rkT"><em>Contrast makes the area look different than the rest of the screen. the more you want something to stand out, the more you should rely on contrasting colors.</em></p>
<h3>7. Use Color to Impact Users’ Emotions</h3>
<p>It’s a well-known fact that colors have inherent meanings and can provoke emotions. These meanings will have a direct impact on the way your users perceive your product.</p>
<p>When you’re choosing a color palette for your app/site, you can’t just be thinking about how things look — you have to think about how they <em>feel</em> too. The colors you choose can either work <em>for </em>or <em>against </em>the brand identity you’re trying to create. To get you started, I’ve compiled a quick reference guide that covers the basic associations with each color (in the western world).</p>
<h4>Red, Orange, Yellow</h4>
<ul>
<li><strong>Red </strong>(Passionate, Powerful, Dangerous, Important): Red is an extremely stimulating color. It gives the impression of speed and power. It’s known as the color of energy. It has proven physiological effects of increasing <a href="http://ift.tt/qDDFTo">blood circulation and raising metabolism</a>. That’s why when people see red, they read stronger and faster. Using red is a way to grab users’ attention or highlight an individual element that requires attention.</li>
<li><strong>Orange </strong>(Playful, Energetic, Attractive, Cheap): Orange is a warm and vibrant color. It has an energetic aura and is able to create a warm welcoming feeling for your users. Some researchers find that orange <a href="http://ift.tt/1OBuqmC">denotes cheapness</a>.</li>
<li><strong>Yellow </strong>(Cheerful, Friendly, Stimulative, Attention-seeking): Yellow is an extremely versatile color depending on the which shade you choose. Light yellow is associated with the sun and hence communicates positivity and warmth. Dark shades of yellow (like gold) give the impression of antiquity and age. These darker shades are often related to the timelessness and wisdom.</li>
</ul>
<p><img alt="" src="http://ift.tt/2sXJQwZ."></p>
<h4>Green, Blue, Purple</h4>
<ul>
<li><strong>Green </strong>(Natural, Safe, Fresh): Green reflects a sense of environmentalism and closeness to nature. It also signifies growth, and that’s why it’s often associated with business. Green signifies a sense of right or wrong.</li>
<li><strong>Blue </strong>(Calming, Responsible, Trustworthy, Reliable): The color blue is often associated with calm and relaxing emotions. It’s also associated with strength and reliability, giving a sense of trust and professionalism. Blue emits feelings of inner security. That’s why you may see banks and technology businesses using the color. Social media giants such as Facebook, Twitter, and LinkedIn all utilize the color blue on their networks.</li>
<li><strong>Purple </strong>(Luxurious, Mysterious, Romantic, Spirituality): Historically linked to royalty, purple insinuates that a product is high-end.</li>
</ul>
<p><img alt="" src="http://ift.tt/2st4Fgl."></p>
<h4>Pink, Black, White, Gray</h4>
<ul>
<li><strong>Pink</strong> (Feminine, Innocence, Youth): Pink is most known for its associations with femininity.</li>
<li><strong>Black</strong> (Powerful, Sophisticated, Mysterious, Edgy): Black attracts attention faster than other colors, including red. That’s why it’s most commonly used only for text and accents.</li>
<li><strong>White</strong> (Purity, Health, Cleanliness, Innocent): White accents other colors around it, making it a popular choice for a secondary color.</li>
<li><strong>Gray</strong> (Neutral, Formal, Sophistication, Sterility): Gray represents neutrality, it can take on the characteristics of either black or white. When used as a primary color, it gives the impression of formality.</li>
</ul>
<p><img alt="" src="http://ift.tt/2sXYww8."></p>
<p>It’s important to mention that the meaning of colors can vary depending on culture and circumstances. For more on that, check out the article <a href="http://ift.tt/2qlrcLc">Symbolism Of Colors And Color Meanings Around The World</a>.</p>
<h3>8. Make Your Design Accessible</h3>
<p>Accessibility is a key consideration when designing with color. Today’s products must be accessible for everyone — regardless of a person’s abilities.</p>
<h4>Avoid Using Color Alone As an Indicator</h4>
<p><a href="http://ift.tt/1sSkgl0">Approximately 8% of men and 0.5% of women</a> are affected by some form of color blindness. That’s 1 in 12 men and 1 in 200 women. While there are multiple forms of the condition, red/green color blindness is the most common. A person suffering from this form of color blindness will generally have trouble seeing variations of both red and green.</p>
<p><img alt="" src="http://ift.tt/2ssWd0k."><em>Colors as seen with normal vision and same colors as seen with red-green color deficiency (Deuteranopia and Protanopia).</em></p>
<p>Since colorblindness takes different forms (including red-green, blue-yellow, and monochromatic), it’s important to use multiple visual cues to communicate important states in your product. In addition to color, use elements such as strokes, indicators, patterns, texture, or text to describe actions and content.</p>
<p><img alt="" src="http://ift.tt/2sXFHcc."><em>Avoid using red and green colors alone to convey information because this can be an extremely frustrating experience for people who can’t see the red characters.</em></p>
<h4>Avoid Low Contrast For Text</h4>
<p>Color contrast is one area where color theory is crucial to the usability of a design. When you’re using colors in text, be aware that placing two colors with low value contrast next to each other can make your copy very difficult to read.</p>
<p><img alt="" src="http://ift.tt/2stho2l"><em>Low contrast text is something that can potentially break the usability of many apps.</em></p>
<p>Check contrasts to ensure that background and foreground colors appear with enough contrast to a color-blind person, or someone with low vision. It’s really not that hard — all you need to do is to check contrast ratio. Contrast ratios represent how different a color is from another color (commonly written as 1:1 or 21:1). The higher the difference between the two numbers in the ratio, the greater the difference in relative luminance between the colors. The <a href="http://ift.tt/1fbNgzM">W3C recommends</a> the following contrast ratios for body text and image text:</p>
<ul>
<li>Small text should have a contrast ratio of at least 4.5:1 against its background.</li>
<li>Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.</li>
</ul>
<p>Good news, you don’t have to check it manually. Using the tool <a href="http://ift.tt/RtjACE">Color Contrast Checker</a> you can check your color combinations in just a few clicks.</p>
<p><img alt="" src="http://ift.tt/2sXTFL2."><a href="http://ift.tt/RtjACE"><em>Webaim</em></a><em> color contrast checker</em></p>
<h3>Bonus: Essential Tools for UX Designer</h3>
<p>To make things easier, I’ll also provide some of the best tools for choosing color palettes.</p>
<h4><a href="http://ift.tt/1sAm5ks">Adobe Color CC</a></h4>
<p>Adobe Color CC (previously known as Kuler) is a great tool for finding, modifying, and creating color schemes. Every color on the palette can be individually modified, or chosen as the base color, with a few simple clicks. Palettes can be saved and added to a library, and there are a number of great color schemes created by community available on the site:</p>
<p><img alt="" src="http://ift.tt/2sXLNJM."><em>Adobe Color CC is an awesome tool that can speed up exploring various color scheme options.</em></p>
<h4><a href="http://ift.tt/2stsbcY">Dribbble Search-by-color</a></h4>
<p>When you want to do visual research on the use of a particular color by other designers, go to <a href="http://ift.tt/1UI45Hn">dribbble.com/colors</a> and select the desired color.</p>
<p><img alt="" src="http://ift.tt/2strgJk.">You can also specify minimum percent of shot containing color (e.g. shot is 30% blue).<img alt="" src="http://ift.tt/2sXpSlM."><em>Specify minimum percent of shot containing color</em></p>
<h4><a href="http://ift.tt/2hXYlbB">Material Design</a></h4>
<p>Material design guidelines provide a fantastic color palette that can be used for illustration or to develop your brand colors. All colors in this palette are designed to work harmoniously with each other.</p>
<p><img alt="" src="http://ift.tt/2sXkP4U."></p>
<h4><a href="http://ift.tt/IR3Ouh">Colorzilla</a></h4>
<p>ColorZilla is an extension available for Google Chrome and Mozilla Firefox that includes a raft of color-related tools including a color picker, an eye-dropper, a CSS gradient generator, and a palette browser.</p>
<p><img alt="" src="http://ift.tt/2sXGppY."></p>
<h4><a href="https://coolors.co/">Coolors.co</a></h4>
<p>Coolors is a powerful tool to create multicolored schemes. You can simply lock the selected color and press spacebar to generate new palette. The cool thing about this tool is that you aren’t limited to only one outcome — it’s possible to receive a few color schemes simply by modifying the reference point.</p>
<p><img alt="" src="http://ift.tt/2st3rBp."></p>
<p>One of my personal favorite ways to create a color scheme is to use a photograph. This tool makes it possible to upload an image and make a color palette from it.</p>
<p><img alt="" src="http://ift.tt/2sXLnmv."><em>Coolors gives you the ability to upload an image and make a color palette from it.</em></p>
<h4>Colour Blindness Simulation in Adobe Photoshop</h4>
<p>With Photoshop, you can test the accessibility of your design. Simply go to <em>View </em>&gt; <em>Proof Setup</em>, and then you can choose between two types (Protanopia-type or Deuteranopia-type).</p>
<p><img alt="" src="http://ift.tt/2st4TUr."></p>
<h4><a href="http://ift.tt/2b77zkZ">NoCoffee Vision Simulator for Chrome</a></h4>
<p>To prevent accessibility issues in design, it’s good idea to experience color blindness yourself while designing. NoCoffee Vision Simulator can be used to simulate color-vision deficiencies and low-vision conditions on any pager. For example, using the “Color Deficiency” setting “Deuteranopia,” you can view web pages in grayscale. This will help you make your design accessible for users with visual impairments.</p>
<p><img alt="" src="http://ift.tt/2st9V3m."></p>
<p>Color is one of the most powerful tools in a designer’s toolkit. But at the same time, it’s a tricky tool to master. I hope the rules mentioned above set a good foundation for upcoming designers. Now it’s time to move to practice — because the best way to become great at color schemes is to actually create them.</p>
<p><em>Are color schemes your jam? Do you geek out over usability testing and user research? Enroll into Springboard’s </em><a href="http://ift.tt/2sXIQJj"><em>Introduction to UX Design</em></a><em> course. Thousands of students have used it to launch themselves into successful design careers.</em></p>
<p><img src="http://ift.tt/2st4FwR" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2trceIh">Red, White, and Blue</a> was originally published in <a href="http://ift.tt/2pEjW0q">Springboard</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Red, White, and Blue

Red, White, and Blue

Eight rules about color palettes that everyone should know

Top Stories