Contrast in design – why it is important
We’re going to have a closer look at what contrast is, the types of contrast in design, how we can use it to create remarkable designs and what happens if we don’t have enough contrast in our work.
What is contrast?
Contrast is the state of being different from something else and can be achieved when two opposite elements are placed together, to create visual interest and emphasise important elements. Contrast is considered to be the golden rule of art.
Types of contrast in design
There are various types of contrast that designers can utilise to achieve visual interest, hierarchy, and emphasis:
- Size
- Colour
- Negative space
- Form
- Weight
- Orientation
- Texture
- Typography
Contrast of size in design
Size contrast is a design principle used to establish hierarchy and create visual interest within a composition. When two elements of the same visual weight and colour are placed together, the one with the larger size will become the most visible, grabbing viewer’s attention. It is worth mentioning the fact that a larger element will not always be the most visible part of a composition.
If a smaller object has a higher contrast, then the size of the elements will not be the deciding factor for determining the most important element of a design, as dominance will always precede the size, as shown on the image above.
Using the contrast of size properly will improve the readability of a design, helping viewers to quickly identify the hierarchy of information; such as headings,subheadings and body copy.
Contrast of colour in design
Colour contrast is another fundamental design principle that can help designers establish visual hierarchy, create emphasise and visual interest within a composition. For text, using a high contrast between the background colour and the text element will improve readability and ensure the text is easily legible.
There are various tools online to test if the contrast between the background colour and the text element is high enough – for web design, we use WebAim to ensure that the websites we design are accessible for all users.
Contrast of negative space in design
Negative space (or white space) contrast is a design principle that offers the power of utilising the empty space around elements to create balance, visual hierarchy and tension. A design element with negative space will have greater clarity and readability, whereas elements that don’t have enough space around them may generate the feeling of visual clutter.
Having too much negative space between elements will confuse the viewer, while a lack of white space within a design will impact the visual hierarchy and the relationship between elements. Finding the perfect balance of negative space is essential for effective design.
Contrast of form in design
Form contrast is a powerful design principle that involves using different shapes for an element (or multiple elements), in order to make it stand out and create visual interest within a composition. Using a circle in a grid of squares will draw attention to it and emphasise its importance. Contrast of form is used to emphasise key elements and establish the focal point and hierarchy of a design.
Contrast of weight in design
Weight contrast in design represents the thickness or heaviness of visual elements - the weight of components can create visual interest, hierarchy, and emphasis. Examples of different weights in design are solid vs outline, mixing different font weights for typography, or different styling for digital buttons (normal, hover, focus, active).
Contrast of orientation in design
Contrast of orientation in design refers to the alignment, rotation or direction of different elements within a composition. This type of contrast creates dynamism and energy within a design and adds an extra layer of visual interest for the viewer. In web design, having elements that change their directions as the user interacts with a web page enhances the user experience, as the user gets involved in the building phase of the web page – without their scrolling interaction, the element can’t change direction.
Contrast of texture in design
Contrast of texture in design involves using different surface quality, feel, or visual texture to establish hierarchy, focal point and emphasis. Utilising different textures within a design contributes to its level of complexity, creating dynamism and enrichment.
Contrast of typography in design
Typography contrast is an extremely powerful tool used to establish the hierarchy within a composition, create visual interest and tension, but also emphasis within a text. Typography contrast can be achieved by using any of the following principles: size, colour, form, weight,structure, direction and texture.
In summary, this exploration has considered the types of contrast in design and how it can be used to create a focal point within a composition that offers the viewer not only access to information in a clear and easy to understand way, but also creates dynamism and energy. By applying this knowledge skilfully within a design, it is possible to create additional visual engagement for the viewer.
