Design Principle No. 5: How Can Contrast Make My Designs Pop?

This is the fifth post in a series focusing on the basic building blocks of design. With each new post we’ll feature a different principle that will help you understand how designers do what they do. If you’re ever tasked with creating something yourself, these principles can help you make good design decisions too!

Contrast simply means difference. It is the juxtaposition of opposing elements and it allows us to emphasize or highlight key elements in a design. With that in mind, make sure that when you’re designing you clearly indicate elements that are not the same as clearly different, not just slightly different. Contrast is at the root of pretty much everything. Design for the web depends heavily on establishing hierarchies of information. We want to constantly draw people to certain areas of a page and communicate clearly through the design.

Different ways to achieve contrast:

Color Contrast:

Take a look at the color wheel below. Using colors that are very different from each other, like blue and orange, is a good example of high contrast. They are located on opposite sides of the color wheel. Using colors that are more closely related, like yellow and orange, is a good example of low contrast. Notice how these colors are located closer to one another on the color wheel. When designing for the web you want to make sure that your action items stand out and don’t blend into the rest of your design. If you’re struggling to come up with a successful color palette take a look at this free tool from Adobe.

Color Wheel


Size Contrast:

This one may seem fairly obvious, but making something BIG next to something small indicates that the bigger item is more important. The bigger the size difference the more emphasis you’re placing on the larger item. Don’t be afraid to make your call to action items and headlines much larger than your less important elements. Think magazine layout more than novel. Notice on the Sherin and Lodgen website the primary focus is on the black and white image. After you look at that you read the headline to the left of the image.


Shape Contrast:

When using graphic elements like circles, rectangles, lines, and arrows, you’ll need to think about how each shape relates to the others on the page. For example, if everything on the page has straight edges and square corners, adding a circle can help highlight that element. On the Nitsch Engineering website, we made sure that the most important information on the page was in the circle. Notice how the other elements on the page are rectangular. For more subtle contrast, you can include buttons with rounded corners as a call-to-action. Or try mixing things up with different line weights and other shapes.



Typography Matters Too

Pair your fonts strategically. A common rookie mistake is including too many fonts. Take a look at this article for more tips on pairing fonts.

  • Style: Take a look at any font resource site, like Google web fonts, and you’ll see fonts categorized as Blackletter, Monospace, Script, Slab Serif etc. Fonts of different styles will often contrast well.
  • Size: Big font, little font. Say no more.
  • Weight: Varying the weight of fonts (Bold vs. Regular) is a common way to establish visual hierarchy. Hierarchy is achieved by contrast.
  • Form: Consider the proportions of a typeface. The relative length of the descenders, (such as – g, j, y, p, q), height of the ascenders, (such as – d, f, h, k, l, t).
  • Links: Links provide great contrast in text. The color change and the addition of an underline work well to contrast from the surrounding text.

If you have any questions about design principles or the projects mentioned above, shoot us an email and we’ll be happy to help.


Additional resources:

Fully Understanding Contrast in Design by John O’Nolan

Design Principles: Connecting And Separating Elements Through Contrast And Similarity by Steven Bradley

A Beginner’s Guide to Pairing Fonts by Ian Yates

Contrast – Basic Principles of Design by Jennifer Kyrnin

Cool Tool! Web Font Blender by Andreas Weis


Related Articles:

Design Principle Blog Headers-01

Design Principle Blog Headers-02

Design Principle Blog Headers-03

Design Principle Blog Headers-04