How to Add Contrast to Your Designs
01. Contrast with Dark and Light Colors
Value
is just a term that refers to the lightness or darkness of a color,
with pure black and pure white being the ultimate contrasting values.
But you certainly don’t have to have to stick to a black-and-white color
palette to create a high-contrast design. Playing lighter and darker
colors off of each other is one of the easiest ways to add contrast and
make certain parts of your design more visible.
As a simple example, think of dark text on a light background—or vice-versa, as with this design. While it might otherwise be difficult to read small type on a photo, the contrast in values here (bright white typography over dark shades of purple and blue) makes it work.
As a simple example, think of dark text on a light background—or vice-versa, as with this design. While it might otherwise be difficult to read small type on a photo, the contrast in values here (bright white typography over dark shades of purple and blue) makes it work.
02. Contrast with Color Hue
Hue
is an artist’s term for a specific color, traditionally one of the 12
found on the color wheel. But color theory can come in handy for graphic
and web designers, too. We can pull a number of classic palettes from
the color wheel that painters have been using for centuries to
create high-contrast compositions. Some options include:
• Complementary: opposites on the color wheel, such as red/green or blue/orange; complementary colors are high-contrast and high-intensity.
This badge uses a simple, complementary color scheme that’s both visually striking and practical, in that it separates and organizes various parts of the design into sections.
• Complementary: opposites on the color wheel, such as red/green or blue/orange; complementary colors are high-contrast and high-intensity.
This badge uses a simple, complementary color scheme that’s both visually striking and practical, in that it separates and organizes various parts of the design into sections.
•
Split-Complementary: any color on the color wheel plus the two that
flank its complement; this scheme still has strong visual contrast, but
is less dramatic than a complementary color combination.
• Triadic: any three colors that are evenly spaced on the color wheel.
Keep in mind that you don’t have to use these hues in their purest, brightest forms (like those seen in the color wheel chart above, which can sometimes clash). Making your colors lighter, darker, or muted may be more practical for real-life design contexts, but can still lend some nice contrast to your design.
• Triadic: any three colors that are evenly spaced on the color wheel.
Keep in mind that you don’t have to use these hues in their purest, brightest forms (like those seen in the color wheel chart above, which can sometimes clash). Making your colors lighter, darker, or muted may be more practical for real-life design contexts, but can still lend some nice contrast to your design.
03. Contrast with Color Temperature
All
colors can be separated into groups based on their temperature: warm,
cool, or neutral. Reds, oranges, and yellows are considered to be warm,
while blues and greens are cool. Black, white, and gray are neutrals
(beiges and browns can also fall into this category depending on how
they’re used). Mixing color temperatures in a design—particularly warm
and cool—can create dramatic contrast.
For example, this webpage layout features contrasting color temperatures with bright shades of blue and yellow. This helps both the call-to-action button and the main image stand out particularly well. Plus, because both of the colors lean in a cooler direction (with a greenish tinge), the combination has a cohesive look even though it’s very high-contrast.
For example, this webpage layout features contrasting color temperatures with bright shades of blue and yellow. This helps both the call-to-action button and the main image stand out particularly well. Plus, because both of the colors lean in a cooler direction (with a greenish tinge), the combination has a cohesive look even though it’s very high-contrast.
04. Contrast with Color Intensity
The
intensity of a color is also known as saturation. A color in its
purest, brightest form is 100% saturated; the closer it approaches to
gray, the more desaturated it is. Using bright or muted colors (either
by themselves or together) can be a strategic way to create places of
high or low contrast in a design. Bright colors always attract
attention, especially against black. Use them sparingly to highlight
important parts of your design.
This website design does just that, placing saturated, orangey-red lettering against muted forest green. Not only is this a complementary color scheme (which is already eye-catching), but it also uses contrasting levels of saturation to enhance the drama.
05. Contrast with Shape: Organic vs. Geometric
This website design does just that, placing saturated, orangey-red lettering against muted forest green. Not only is this a complementary color scheme (which is already eye-catching), but it also uses contrasting levels of saturation to enhance the drama.
05. Contrast with Shape: Organic vs. Geometric
Most
shapes can be categorized as either geometric (rectangles, triangles,
circles, etc.) or organic (fluid, natureinspired). The angular
uniformity of geometric shapes can contrast nicely with the often
curving, asymmetrical qualities of organic shapes.
Here, a label design incorporates organic, almost abstract shapes that complement and enhance the straight, clean lines of the typographic choices.
Here, a label design incorporates organic, almost abstract shapes that complement and enhance the straight, clean lines of the typographic choices.
06. Contrast with Shape: Edges & Corners
One more way you can subtly use shape in your design is on the edges and corners of your design elements, whether typography, boxes or buttons, or other features. More rounded shapes often have a softer, casual, or friendly appearance, while sharper shapes look more ordered and crisp. You can contrast these qualities against each other, as the design below does in a very literal way with its typography.
07. Contrast with Texture
Like
shape, textures can play off of each other to create contrast when
their characteristics are very different from each other: rough vs.
smooth, hard vs. soft, raised vs. flat. Unless you’re using a special
printing effect or other physical technique, any texture you apply will
be purely visual—and between the capabilities offered by various design
programs and the free textures and resources you can find online, the
possibilities are plentiful.
Here, some gritty texture gives an otherwise clean-lined logo some vintage character. Textures or distressing are great methods for making a design look a little worn or adding some rustic or vintage/retro qualities.
Here, some gritty texture gives an otherwise clean-lined logo some vintage character. Textures or distressing are great methods for making a design look a little worn or adding some rustic or vintage/retro qualities.
08. Contrast with Scale & Size
Besides adding visual interest to your design, contrast also helps create relationships between and prioritize different design elements. If every object in your design is roughly the same size, there won’t be much of a hierarchy. How will viewers tell what to look at first, or what’s most important? Effectively using scale is not only important from a practical standpoint, but is also one of the easiest ways to create a dynamic, interesting layout and add drama to a design.
This
magazine cover has a huge photo to emphasize the theme of the issue, but
it doesn’t overpower the other design elements. In fact, the size,
shape, and color of the typography enhance the photographic focal point.
09. Contrast with Visual Weight
Like
scale, visual weight is another way to point at a piece of your design
and say, “This part is important!” Visual weight simply refers to the
way an element stands out in comparison to the rest of the design—in
other words, it’s high-contrast. The part of your design that has the
most visual weight (most likely the focal point) doesn’t necessarily
have to be the biggest thing on the page. You can also make something
“weighty” or more visible with color, texture, shape or any other
characteristic that sets it apart and attracts the eye.
As an example, take a look at this series of postcards to promote the city of Cincinnati’s cultural venues. The architectural illustrations are certainly the biggest element on each card, but the “Enjoy More” tagline draws your eye because it’s the darkest thing on the page.
As an example, take a look at this series of postcards to promote the city of Cincinnati’s cultural venues. The architectural illustrations are certainly the biggest element on each card, but the “Enjoy More” tagline draws your eye because it’s the darkest thing on the page.
10. Contrast with Spacing & White Space
While
it may be tempting to fill a design with as much information as you
can, white (a.k.a. blank or negative) space plays an important role in
separating and organizing design elements for a balanced layout. When
working with a busy or complex layout, surrounding important
elements with some extra blank space (it doesn’t actually have to be
white) will draw attention to those places and help them contrast more
effectively with the rest of the design.
Notice how effectively this webpage mockup employs a combination of white space and thin dividing lines to organize information. Both columns on the left- and right-hand sides of the page are surrounded by a generous amount of space; the product photo even more so to make it the center of attention and attract buyers.
Notice how effectively this webpage mockup employs a combination of white space and thin dividing lines to organize information. Both columns on the left- and right-hand sides of the page are surrounded by a generous amount of space; the product photo even more so to make it the center of attention and attract buyers.
11. Contrast with Compositional Choices
To
some extent, every design must juggle the concepts of balance and
tension—how do you make your design balanced, but not boring; dynamic,
but not chaotic? One way to toe the line between the two (and in the
process, achieve some good contrast in your design) is to make good
compositional choices. To get a grasp on how to do this, it can help to
learn about classic composition techniques used by artists and
photographers. Some of these include:
• The Rule of Thirds: Imagine dividing your layout into thirds, both vertically and horizontally. Place your focal point on one of the four points where those imaginary lines would intersect. This is about achieving a dynamic layout; there’s no quicker way to a boring design then placing everything smack dab in the middle of the page.
In the first header image of the following website design, both the rose and the headline are centered approximately where the upper two intersections of a rule-of-thirds grid would be, making for a balanced, engaging composition. Groups of three (another common compositional technique) also appear throughout the page.
• The Rule of Thirds: Imagine dividing your layout into thirds, both vertically and horizontally. Place your focal point on one of the four points where those imaginary lines would intersect. This is about achieving a dynamic layout; there’s no quicker way to a boring design then placing everything smack dab in the middle of the page.
In the first header image of the following website design, both the rose and the headline are centered approximately where the upper two intersections of a rule-of-thirds grid would be, making for a balanced, engaging composition. Groups of three (another common compositional technique) also appear throughout the page.
•
Diagonals: A diagonal or S-shaped layout can lend some movement to
your design, helping direct viewers’ eyes across the page. It’s often
more visually interesting than a traditional grid-based design that uses
only horizontal and vertical orientation.
12. Contrast with Something Unexpected
The
compositional techniques above are effective in part because they’re
unexpected. They’re not straight, or not centered—not typical. This
element of surprise can be a great way to create contrast in a design.
Adding something unexpected—for instance, a bright pop of color in
a neutral design—breaks up the sameness or uniformity and keeps viewers
interested.
The way the typography interacts with the photography on this landing page is out of the ordinary and gives an otherwise simple, straightforward design a little extra ingredient.
The way the typography interacts with the photography on this landing page is out of the ordinary and gives an otherwise simple, straightforward design a little extra ingredient.
13. Contrast with Repetition & Patterns
Strategically
applying repeating design elements or patterns can create focus or
visual interest in a way that’s similar to the compositional techniques
just mentioned. Or repeating a visual theme can help give it greater
impact in a design.
This graphic designer’s business card design uses a pattern to balance out and frame the typography, which is the focal point. As a nice touch, the pattern reflects the shape of the designer’s personal logo to tie in that branding.
This graphic designer’s business card design uses a pattern to balance out and frame the typography, which is the focal point. As a nice touch, the pattern reflects the shape of the designer’s personal logo to tie in that branding.
14. Contrast with Position & Orientation
Every
design needs some kind of organizational structure: text is aligned in
certain ways, elements are assigned to certain positions in the layout,
spacing is set. While consistency is key for an orderly design, mixing
things up in a purposeful, limited way can add some
interesting contrast.
The logo below uses a slanted orientation to help its key piece of typography stand out against the straight, orderly text that surrounds it. Extra contrast is achieved with the pairing of script and sans serif type styles.
The logo below uses a slanted orientation to help its key piece of typography stand out against the straight, orderly text that surrounds it. Extra contrast is achieved with the pairing of script and sans serif type styles.
15. Contrast with Proximity & Separation
Intentionally
grouping objects can show that they’re related and help organize your
design in a way that makes it easy to navigate. Likewise, separating
objects can help divide a design into distinct sections. Contrast can
also be achieved with quantity: a single object among groups of multiple
objects (or vice-versa) will certainly stand out.
For a text-heavy design like a resume, good structure is key. Here, proximity, alignment, and color all combine to make an information-packed page easy to navigate.
For a text-heavy design like a resume, good structure is key. Here, proximity, alignment, and color all combine to make an information-packed page easy to navigate.
16. Contrast with Visual Cues
Studies have shown that people remember 80%
of what they see, which is one of the reasons why design can be such a
powerful tool. But attention spans can be short, and sometimes viewers
need a little nudge in the right direction to know where to focus in
your design. That’s where visual cues can come in handy. You might
literally point out a design element with an arrow or highlight it by
surrounding it with a circle or other shape. Or in blocks of text, that
might come in the form of underlining, bullet points, or icons that
visualize the concepts being discussed (as below).
17. Contrast with Complex & Simple Features
Designs
can mix simple and complex styles or individual features to ramp up
contrast. This is another example of using opposites to enhance each
other. This idea is used to good effect in the following set of
stickers, where ornate floral patterns set off clean and
simple typography—the fact that the typography and its surroundings are
so different only makes the overall result more dramatic and engaging.
18. Contrast with Font Combinations
Typography
is an essential part of most designs, and provides unique opportunities
to add contrast. While basically all the methods of adding contrast
we’ve already covered here can be applied to typography, there are also
some special considerations to be aware of when choosing and applying
fonts or creating custom typography for your designs.
Let’s look at some of those with our last three points; first, combining fonts. If you’re using more than one font for a design, making sure your choices contrast sufficiently will be key to a successful design. Fonts need to be visually distinguishable from each other—different enough that you can assign distinct “jobs” to them in your design. One typeface might be for a headline or title, with another for text. But choosing fonts that are too similar can look confusing or like a mistake.
A basic rule of thumb is to choose one serif and one sans serif font. This is often a combination that is complementary, but also has nice contrast.
The typographic logo below pairs a sans serif with a slab serif font (plus a script) for a perfectly balanced design that depends on its type choices for contrast.
Let’s look at some of those with our last three points; first, combining fonts. If you’re using more than one font for a design, making sure your choices contrast sufficiently will be key to a successful design. Fonts need to be visually distinguishable from each other—different enough that you can assign distinct “jobs” to them in your design. One typeface might be for a headline or title, with another for text. But choosing fonts that are too similar can look confusing or like a mistake.
A basic rule of thumb is to choose one serif and one sans serif font. This is often a combination that is complementary, but also has nice contrast.
The typographic logo below pairs a sans serif with a slab serif font (plus a script) for a perfectly balanced design that depends on its type choices for contrast.
19. Be Cautious When Contrasting with Typography
When
combining fonts, you do want contrast, but you don’t want conflict. Two
font choices that are wildly different from each other might
clash—which, other than if you’re after an intentional style, usually
doesn’t look good. Whether typefaces work together or not often comes
down to a gut feeling or instinct rather than clear-cut rules; trust
your judgment, take mental note of font combinations you see that work
well, and keep practicing—before you know it, combining fonts will seem
like second nature.
The infographic below features several different fonts for a fun, eclectic look (which is appropriate for its humorous tone) but none of them are so “loud” that they clash; in fact, they work together nicely for the purposes of this design.
The infographic below features several different fonts for a fun, eclectic look (which is appropriate for its humorous tone) but none of them are so “loud” that they clash; in fact, they work together nicely for the purposes of this design.
20. Contrasting with Typography Style & Weight
Many
fonts come with a variety of options, like light, bold, italic,
condensed, extended, or small caps versions. This makes your job a
little easier—even if you’re using just one font in your design, these
alternatives can organize your text and create contrast between
different typographic features. Try adding variations in point size or
color for extra contrast.
This design uses light and heavy weights of the same sans serif font for a polished look. A serif font also makes a cameo appearance for extra contrast.
Now that you have some tried-and-true ways for adding contrast to your designs, it’s time to take them for a spin.
Watch this video
This design uses light and heavy weights of the same sans serif font for a polished look. A serif font also makes a cameo appearance for extra contrast.
Now that you have some tried-and-true ways for adding contrast to your designs, it’s time to take them for a spin.
Watch this video
Comments
Post a Comment