Lessons
Go back to module homepage

Contrast for visual importance

Incomplete

Contrast
Lighter
Balanced
Darker

Getting the differences in shades right between side-by-side elements is a tricky balance because grays look nice and serve a great purpose in softening importance of elements, but high contrast elements are necessary for an accessible experience that all users can benefit from.

Contrast can be tweaked in 2 specific ways:

  1. adjusting the color of an element, like text or a background
  2. adjusting how large a colored element like a border-width or font-weight is

On our listing card, we'll try bumping up the font-weight of the title to make it stand out even more on the card's background.

We'll also increase the lightness of the descriptive text to make it a closer blend to the background. This is where you need to be careful, as making the text and the background too close together will make the text hard to read for users with poorer eyesight.

Cozy Studio

Wifi · Free parking · Air conditioning

$98 / night

Featured
  • In a repeated list whites and grays don't provide any sort of visual stimulation.
  • Similar to a colored button, draws the eye to the card but doesn't have to be applied to every listing rendered.

With the increased title size, the title stands out even more, in addition to just having it sized up, adding additional contrast with a thicker stroke makes the title an even more visually important element of the card. This is all assuming the title is one of the most important pieces of information we wish to relay to the user.

If price were deemed more important, we should not give so much visual importance to the title, and instead pass it along to the price tag.

Here's what the listing card looks like now:

Cozy Studio

Wifi · Free parking · Air conditioning

$98 / night

Featured

The card has come a long way! Each of the concepts of visual importance helped increase or decrease the prominence of different elements until we have a card where different elements like the heart button, the title, and the price stand out more than secondary information like the description.

Feedback

Get the full course!

UI Foundations avatar
USD$ 24
Yours Forever
Includes 2 modules (+ access to future modules as they are released):
  • Visual Importance
  • Design Systems
  • Colors (in progress)
  • Space & Size (in progress)
  • Data (in progress)
  • Typography
  • Shadows
  • Pro Details
  • Animations