Contrast

The goal is to identify where contrast is used, its levels, and how to use it within art and design. 

The principle of contrast refers to using different visual elements, such as colour, shape, texture, size, or value, to create visual interest and distinguish one element from another. For example, contrast can emphasise certain elements, create a focal point, or organise information in a hierarchy.

Contrast can be achieved in many ways, such as using opposite colours on the colour wheel, combining different shapes or textures, or varying the size or value of elements. For example, using large and small fonts or light and dark colours can contrast text and background. For example, combining geometric and organic shapes can create contrast between different design elements.

Contrast is an essential design principle because it helps create visual interest and impact, draw the viewer's attention to critical elements, and effectively communicate important information. When used effectively, contrast can make a design more dynamic and engaging and help convey a message or story more effectively.

 

How do we create contrast? 
Contrast can be created using the following methods below.

Colour and tone
Designers and artists often use colour to create emphasis and visual interest in a design. For example, black and white or complementary colours (opposite colours on the colour wheel, such as red and green) can create a strong contrast and make certain elements stand out. Using a bright and saturated colour against a neutral or muted background can also create contrast and draw attention to essential elements.

 

Typography

In typography, contrast can be achieved using different font styles, sizes, weights, and colours.

Effective designs usually feature one or two fonts with different weights. For example, using a bold and large headline font with a light and small body text font can create a clear hierarchy (dividing what is most and least important), increase readability and make the headline stand out. 

Similarly, using a serif font for headings and a sans-serif font for body text can create contrast between different text parts and make the design more visually appealing.

 

Thick and thin lines
Using thick and thin lines can increase legibility within a design, whether it's light or bold lettering or thin or thick lines on an outlined inked drawing.

 

Shape and size
Contrast can be created using different shapes and sizes in a design. For example, combining geometric and organic shapes can create an exciting contrast and add visual interest. Similarly, using different shapes with varying sizes can create a sense of movement and depth in a design.

 

Layout
Contrast can also be used in layout design to create visual interest and hierarchy. For example, a large and bold image on one side of the layout with a smaller block of text on the other can create a clear contrast and draw the viewer's attention to the image. Similarly, using white space (or negative space) to create contrast between different elements can make the design more visually appealing and easier to read.

 

Texture
Texture contrast can be achieved using different textures or patterns in a design. For example, combining a smooth and glossy texture with a rough and matte texture can create an interesting contrast and add depth to a design. Different patterns, such as stripes or polka dots, can create a sense of contrast and make the design more visually appealing.

ES Design Principle Texture
 

THE WHY
So why does contrast even matter, you ask? If you have ever heard your client or creative director say to you. ‘We need the design to pop more; they are discussing contrast. 

Overall, the principle of contrast can be applied in many different design contexts and can help to create visual interest, hierarchy, and emphasis. So as designers, we can create engaging, effective, and visually appealing designs by using other visual elements deliberately and thoughtfully.

I hope you enjoyed this one and found it helpful. Next up, Typography.

Previous
Previous

Typography Anatomy and Glyph Construction

Next
Next

Design Foundations