Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Contrast

In this lesson, we will take a look at the role contrast plays in design.

Contrast in Color

Just as larger elements are perceived as more important than smaller elements, bright colors usually draw greater attention than duller hues. For example, if a single sentence in a block of text is highlighted with a bright color, it immediately grabs readers’ attention.

Consider this design. Notice how it grabs far greater attention when the natural tones were highlighted to neon colors? The color scheme is known as a duotone, an increasingly-popular web-design trend. The effect, which layers a pair of contrasting colors over a photo, lends to striking designs that figuratively pop off the page or screen.

Dramatically contrasting colors can also emphasize specific elements than a spectrum on a more gentle scale. Placing a red object against a green or black background will draw more attention than the same red object on an orange or purple background.

The color combinations used in a design, and how they relate to one another, are known as its color scheme. A designer’s choice of color scheme can create unity, harmony, rhythm and balance within a creation, but it can also create contrast and emphasis.

https://visme.co/blog/wp-content/uploads/2017/08/14-Visual-Hierarchy-Principles-Every-Non-Designer-Needs-to-Know-Fonts-organize-design.jpg

A design that uses too many contrasting colors will often appear unorganized and incohesive. The same can sometimes be said of designs that use a color scheme that doesn’t adhere to color theory. But choosing the best palette involves so much more than randomly choosing a monochromatic, complementary or tetradic combination.

Similar colors can be used to group related elements in a design, and color choice can even suggest weight and distance. Warmer colors, such as red and yellow, advance into the foreground of a design with a dark background, while cool colors such as blue or green usually recede into the background. The opposite occurs with a design over a light background: Cool colors such as blue and green appear closer than warm colors. It’s just how the human eye perceives it.

Color choice can truly affect viewers’ ability to identify a figure from the background within a design. Mixing warm and cool colors can create depth, just like perspective.

Effective color combinations rely not only on each hue’s position on the color wheel, but also its warmth and contrast with surrounding colors.

Contrast in Fonts

Think about an outline, a traditional resume or a table of contents. Generally, each is comprised of several sizes of type, with major headings in a larger point size than subsections and smaller details. Using a variety of type sizes not only emphasizes what’s most important, but also organizes the overall design of the document.

Typeface hierarchies can be created with text of various sizes, weights and spacing—or a combination of each element. Even if a single font is used throughout a design, varying its size and weight not only draws attention to more important elements, but creates an overall composition that is easy to read and understand.

Just imagine a resume that uses larger, bolder type for references than for the applicant’s name. It might not only appear sloppy, but it would likely cause a good deal of confusion for those quickly scanning a mountain of applications.

Likewise, a design that features a series of type that is all the same size, font and weight won’t effectively draw focus to much of anything — a challenge that has to be met quickly with so many audiences spending split-seconds gauging the quality of your design.

Contrast in Size and Scale

Size Impacts Visibility

Size is arguably the most effective way to emphasize visual elements. Simply put, larger elements draw greater attention than smaller elements.

It’s the precise reason why newspaper headlines appear in larger fonts, and major stories often have even larger headlines than articles on the rest of the page. In any design, larger elements—whether they be words or images—not only will be most noticeable, but they also will carry the strongest message.

Notice in this example how the largest word is also the most striking and emotive. Readers are much more likely to quickly respond to the word, “cracking” than the second-largest word, the basic “performance.” The design wouldn’t be nearly as effective if the words were the same size or if another word on the page, such as “act” or “time” were even larger.

Scale Creates Balance

Another important principle related to this concept is scale, which is the size of an object in relation to another. A single object, no matter how large or small, has no scale until it is compared to another. It allows us to create balance in a design and focus on dominant elements. The greater the scale, the greater the emphasis.

Scroll to Top