selecting colors in visual design
Years ago, I dabbled in design, primarily with music cover arts and WordPress website development, and I struggled with selecting the right colors. Even in my everyday life, when it comes to clothing colors, I usually go for the safest bet — black or grey. Luckily for me, attending Joseph Brendan’s Product Design boot camp improved my understanding of colors and moved me closer to becoming a Product Designer.
Colors play an important role in our daily lives, from the color of our skin to the color of our clothes, to the color of our food. Color has been shown to subconsciously and consciously correlate to both negative and positive reactions, emotions, feelings, memories, and even actions without the use of words.
As a designer, it is critical to understand color psychology, knowing how and when to use color to achieve specific desired effects. For example, the color red can represent passion, love, and danger; the color green can represent nature, growth, and money; and the color purple can represent mystery, royalty, and luxury.
While brand values should be considered when choosing colors for visual design, colors can be used in any case to improve brand recognition and convey a brand’s personality. Color can also be used to indicate interaction on user interface buttons or to define a website’s text hierarchy.
However, you may be wondering how to begin selecting colors for a visual design project (in this case, a website), especially if you haven’t been given a color to work with.
As seen below, Joseph Brendan described the process of selecting colors for a website design in one of his extra classes.
- The first step is to identify and define the industry in which the brand for which you are creating a website operates.
- According to Jakob’s law, because users spend time on other sites and prefer that your site looks like other sites in the defined industry, it is only best to conduct research on ten websites in the defined industry.
- Identify two commonly used colors in the defined industry while conducting research.
- Choose a dominant color to go with the two most commonly used colors. If the two most commonly used colors are yellow and purple, your dominant color can be any color between yellow and purple.
- Choose a second dominant color to complement the dominant. This can be a lighter shade of the dominant color you have chosen.
- Next, you chose a less dominant color; coolors.co is a tool that can help you choose a less dominant color.
- Next, select a neutral color, which can be a shade of white or black. It should be noted that the neutral color may not be required in the overall website design, but it is useful to have just in case you need to create an off-design.
- Next, create color shades and tints for each selected color.
- Finally, put the selected colors, color shades, and tints to the test — with marketing cards, on other designers, and with text elements like body text, headings, and so on.
Furthermore, CTA elements or buttons should have the dominant color in their default state. CTAs should also be a lighter or darker shade of the dominant color at the hover state. Marketing copy should use the dominant color’s actual shade, a dark shade, or a contrasting shade. Background colors in a marketing section can be any light shade of the dominant color, while general copy can always be contrasted using lighter and darker shades.
Joseph Brendan inspired this article. His Product Design boot camp has been enjoyable and mostly eye-opening for me, as it has helped me gain confidence as a designer. I’m glad to say I had no idea it was exactly what I needed at this point in my life and career.
