Design Principles: Contrast

Contrast is one of the basics principles of design.

In short, contrast is used to create visual sensations and emphasis. Colours, textures, sizes, shapes, values, directions and movements can all cause contrast.


Definition: refers to the arrangement of opposite elements (light vs. dark colours, rough vs. smooth textures, large vs. small shapes, etc.) in a piece so as to create visual interest, excitement and drama.
— Google, Principles of Design

Focal Point

Contrast is being used by artists and designers to create visual balance and an important focal point in their work. It helps to organise visual and textual information, by setting a hierarchy. This involves enhancing the most important part, whilst still leaving space for details. Then, the message is clear and catches the viewer’s attention

The focal point is the centre of attention. Artists and designers use this to their advantage, so the viewer’s interest should be centred on what and where it is desired.

Colour Contrast

cody-davis-5E5N49RWtbA-unsplash.jpg

Colour contrast is the most common use of contrast as it’s so effective at interesting us.

Are you familiar with the colour wheel? If not, check out the Colour Theory edition of our Design Principles series. You can look at the colour wheel to find complementary colours pairs: the opposite ones are having the high contrast, while the ones beside each other are harmonious colours and are having low contrast.

Balance is the key — too strong contrast may be overwhelming, while too weak can be monotone.

Size Contrast

All is written in the same font (Helvetica bold) just in different sizes.  Image by Kasia of Buttercrumble

All is written in the same font (Helvetica bold) just in different sizes.

Image by Kasia of Buttercrumble

Size contrast can be useful when you are working with a limited colour palette or with a lot of text. Larger elements draw attention first. This is super useful when designing posters on which you need to provide a lot of information, yet you want to make it clear and readable.

Textural Contrast

olivier-villard-smkXa6KpF0M-unsplash.jpg

Textures are playing a large role, especially in printed materials. You can choose a lightly textured paper and add a smooth letterpress or foil.

When placing a logo over a photo, you can introduce a blur to the picture, so then the attention won’t be drawn away from the smooth vectors.

Shape Contrast

Image by Kasia of Buttercrumble

Image by Kasia of Buttercrumble

To boost your design’s creativity, try using contrasting shapes. If your design is mostly circular try adding a square element or bold type. The opposite can also work — when everything is squared, just add a circle!

Type Contrast

nick-belanger-BJPmtma9sgY-unsplash.jpg

There are a few options on how you can contrast the type to increase the design’s interest and to mark the focal point. You can use the same typeface, but change its weight, size colour or write in capitals.

Pair serif and sans serif, or block typeface with a script.

Alignment

paul-kramer-QyfWgbNg9Cc-unsplash.jpg

Misalignment creates the movement — try to have some fun with placement. Some things may become unattractive, so be subtle.


Did you enjoy this post? Please let us know in the comments below! Alternatively, sign up to the Buttercrumble grapevine and always stay up-to-date.