At design college my lecturer used a mnemonic to teach the important design principles — CRAP:
He was quoting Robin Patricia Williams from the book The Non-Designers Design Book and CRAP has stuck with me all these years ;)
In this series of articles I’ll explore how these principles apply to UX/UI design and how they relate to other design principles that you may (or may not be) familiar with.
The idea behind contrast is to avoid elements on the page that are merely similar. If the elements (type, colour, size, line thickness, shape, space, etc.) are not the same, then make them very different. Contrast is often the most important visual attraction on a page — it’s what makes a reader look at the page in the first place. It also clarifies the communication.
Ok, so that’s the intro on contrast from the book, and it’s reasonably descriptive and helpful, but I think we can take it a bit further.
People perceive visual elements as either figures (objects of focus) or ground (background).
If we look back to Gestalt psychology we can see the early thinking that informs the statement above.
Firstly, the Gestalt psychologists embraced the work of Edgar Rubin whose research of the figure ground was referenced in the Gestalt Principle of the Figure Ground.
Contrast is one feature that can separate the figure from the ground, as designers we can control the amount of contrast to create focal points.
Another principle from Gestalt psychology is principle of focal points.
contrasting elements stand out and draw attention
Compare Option 1 and Option 2. Do you see how Option 2 helps the user quickly establish their place in the product?
In Option 2 the focal point is the ghost. Here contrast is used to indicate the current screen or page, it helps the user with way-finding and understanding where they currently are in the product.
As designers we can use contrast of colour, shape, and line to direct the viewer’s eye to focal points and perceptual layers of our designs.
The same contrast rules apply to typography and can be utilised to communicate information hierarchy.
What do you notice about the designs above? Which one communicates structure clearly?
Contrast in size and shade of type establishes information hierarchy and makes visual scanning of the screen easier.
Not only does contrast help us to differentiate important elements and parse information structure it assists vision impaired people to access your product. A critical aspect of accessibility (and possibly the most widely known) is colour contrast ratio - an essential consideration for product design which I’ll write about in another article.
Now, if we take the UI design one step further, towards a complete screen, we can see how contrast really does impact the User Experience.
Squint at the image above, where do your eyes go first?
Your eyes will naturally fall on the most saturated parts of the design, in this case it is the Call to Action buttons, followed by the ghost menu item, then the tile headings.
Once we understand how contrast pulls the eye, we can really start to apply some logic to the perceptual layers of our design.
Hold on, what are perceptual layers?
Perceptual layers refer to how users visually process and understand the interface elements.
To establish your perceptual layers — think about the data being presented, what is most important? You might want to take an inventory of your data and interface elements, assigning each item to a layer. The most important information should be promoted to Perceptual Layer 1, secondary information to Perceptual Layer 2 and so on…
Now that we have mapped out our perceptual layers, lets play with the design a bit more…
In the example below notice how the contrast of the repeated pattern promotes the top right slot? The slot could be used for sponsored content on a website or an important task that needs to be completed in a SaaS product.
I’ve used colour in the example above to illustrate how we can progressively transition from greyscale to colour. Remember to revisit the perceptual layers of your design as you add in colour. It is important to keep context in mind as you design a UI, every additional item on the screen competes for attention.
The world of colour theory is vast, we’ll only touch the tip of the iceberg here.
In relation to contrast there a couple of key colour concepts that are important to grasp.
Firstly the colour wheel is you friend!
Even though the colour wheel is not a feature in Figma, it is still an important tool for understanding colour relationships and selecting colour palettes.
I tend to work in HSL or HSB as it makes selection of hues easy and translates nicely in CSS. I also like the ability to algorithmically adjust hue, as you can see in the wheel below that is divided 30 degree segments.
Now, the reason why the colour wheel is a helpful tool is that it assists in the selection of complementary colours, as well as analogous, triadic and split complementary etc.
Example of a HSB colour wheel
Are colours that sit opposite each other on the colour wheel.
To find a complementary the hue value just needs to be adjusted by 180 degrees.
When complementaries are placed next to each other they create high contrast combinations as you can see below.
Now, these particular combinations are probably a bit hard on the en masse, due the fact that they are 100% saturated and 100% Brightness, but with a bit of tweaking of saturation and brightness we can find some sweet combos.
The human eye is very sensitive to green hues, as a result we generally perceive green before we perceive other colours. Green is followed by yellow and red.
The order of perception is an important consideration for UX designers, particularly for the design of data rich screens such as dashboards.
Keep these considerations in mind when planning perceptual layers.
Use contrast as a way of guiding the user to next actions, reducing cognitive load and facilitating information parsing.
Stay tuned for Part 2 : Repetition