The Key Elements & Principles of Visual Design
- 1.1k shares
- 5 mths ago
Color theory is the collection of rules and guidelines which designers use to communicate with users through appealing color schemes in visual interfaces. To pick the best colors every time, designers use a color wheel and refer to extensive collected knowledge about human optical ability, psychology, culture and more.
See how to leverage color to resonate with users. © GCFGlobal.org®, Fair-Use (Link)
“Color! What a deep and mysterious language, the language of dreams.”
— Paul Gauguin, Famous post-Impressionist painter
Sir Isaac Newton established color theory when he invented the color wheel in 1666. Newton understood colors as human perceptions—not absolute qualities—of wavelengths of light. By systematically categorizing colors, he defined three groups:
Primary (red, blue, yellow)
Secondary (mixes of primary colors)
Tertiary (or intermediate – mixes of primary and secondary colors)
Following Newton’s findings, the study of color advanced to cover the properties of color in its two forms—i.e., print/paint and screen/light—and in a variety of fields, from art to astronomy. A color’s properties are:
Hue – How it appears (e.g., “is green”).
Chroma – How pure it is: i.e., if it has shades (black added), tints (white added) or tones (grey added).
Lighting – How pale or saturated it appears.
In user experience (UX) design, you need a firm grasp of color theory to craft harmonious, meaningful designs for your users.
Newton’s Color Wheel.
In screen design, designers use the additive color model, where red, green and blue are the primary colors. Just as you need to strategically place images and other elements in visual design, your color choices likewise should optimize your users’ experience in attractive interfaces that have high usability. When starting your design process, you can consider using[DHM3] any of these main color schemes:
Monochromatic – Take one hue and create other elements from different shades and tints of it.
Analogous – Use three colors located beside one another on the color wheel (e.g., orange, yellow-orange and yellow to show sunlight). A variant is to mix white with these to form a “high-key” analogous color scheme (e.g., flames).
Complementary – Use “opposite color” pairs—e.g., blue/yellow—to maximize contrast.
Split-Complementary (or Compound Harmony) – Add colors from either side of your complementary color pair to soften contrast.
Triadic – Take three colors which are equally distant on the color wheel (i.e., 120° apart: e.g., red/blue/yellow). These colors may not be vibrant, but the scheme can be as it maintains harmony and high contrast. It’s easier to make visually appealing designs with this than with a complementary scheme.
Tetradic – Take four colors that are two sets of complementary pairs (e.g., orange/yellow/blue/violet) and choose one dominant color. This allows rich, interesting designs. However, watch the balance between warm and cool colors.
Square – A variant of tetradic; you find four colors evenly spaced on the color wheel (i.e., 90° apart). Unlike tetradic, square schemes can work well if you use all four colors evenly.
Your colors must reflect your design’s goal and brand’s personality. You should also apply color theory to optimize a positive psychological impact on users. So, you should carefully determine how the color temperature (i.e., your use of warm, neutral and cool colors) reflects your message. For example, you can make a neutral color such as grey warm or cool depending on factors such as your organization’s character and the industry.
The right contrast is vital to catching users’ attention in the first place. The vibrancy you choose for your design is likewise crucial to provoking desired emotional responses from users. How they react to color choices depends on factors such as gender, experience, age and culture. In all cases, you should design for accessibility – e.g., regarding red-green color blindness. Through UX research, you can fine-tune color choices to resonate best with specific users. Your users will encounter your design with their own expectations of what a design in a certain industry should look like. That’s why you must also design to meet your market’s expectations geographically. For example, blue—an industry standard for banking in the West—also has positive associations in other cultures. However, some colors can evoke contradictory feelings from certain nationalities (e.g., red: good fortune in China, mourning in South Africa, danger/sexiness in the USA). Overall, you should use usability testing to confirm your color choices.
Take the Interaction Design Foundation courses exploring color theory: https://www.interaction-design.org/courses/the-ultimate-guide-to-visual-perception-and-design and https://www.interaction-design.org/courses/psychology-of-e-commerce-how-to-sell-online
See designer and author Cameron Chapman’s in-depth piece for insights, tips and examples of colour theory at work: https://www.toptal.com/designers/ux/color-in-ux
For more on concepts associated with color theory and color scheme examples, read Tubik Studio’s guide: https://uxplanet.org/color-theory-brief-guide-for-designers-76e11c57eaa
Here’s the entire UX literature on Color Theory by the Interaction Design Foundation, collated in one place:
Take a deep dive into Color Theory with our course The Ultimate Guide to Visual Perception and Design .
Human vision is an amazing ability; we are capable of interpreting our surroundings so as to interact safely and accurately with little conscious effort. However, we are well attuned to nature and things that occur naturally in our environment, which has significant implications for design. Unless man-made products are attuned to, and support, human visual perception, the viewing experience suffers and there is significant potential that users will be unable to use your products quickly, safely, or without error. For this reason, it is essential that we investigate how we see the world and why we see things in the way we do in order to know what we can do to ensure our products provide the best viewing experience possible. This is why we have developed “The Ultimate Guide to Visual Perception and Design,” and why it is such an important topic for designers to master.
For those of us who are blessed with good eyesight, we seldom consider it. That’s why going off to investigate the whys and hows involved is a little like trying to get behind the wind for the sake of finding the exact spot where it comes from. Happily, getting to the bottom of the phenomena involved in visual perception is a lot less laborious, and perhaps infinitely more fascinating. During the course, we will first cover the basic anatomy of the human eye so as to understand how vision is formed. We will then look at lots of different designs, evaluating each one according to specific aspects of the human visual experience. We will also identify how we can improve designs to support human vision better and improve usability as a direct result. Using the knowledge it imparts earlier on, this course will then analyze the design of icons in screen-based interfaces.