Lessons
Go back to module homepage

Color for visual importance

Incomplete

Color refers to the combination of hex codes, hue, saturation, and lightness, or other mechanism for telling the computer what type of light to beam onto your computer screen. It can make a design jump off the page, because it is literally coming out of the screen at your eye as a ray of light. Like too much of any good thing you can quickly overdo it and clutter your page though. A little color goes a long way.

Color
Less Color
Balanced
More Color

One option if you decide that the heart button is really where you want your users to be engaging with your app is to highlight it with color. A solid fill button will really draw attention to itself on a white background.

Cozy Studio

Wifi · Free parking · Air conditioning

$98 / night

Cozy Studio

Wifi · Free parking · Air conditioning

$98 / night

However, in this scenario when the listing card will likely be repeated many times over, coloring the button can be a risky idea, as you run the risk of a dozen solid buttons jumping out of the page at you. In the spirit of dialing down visual importance, too many bright buttons is not going to be your friend.

It might make sense in a case like this to outline the buttons in an accent color, and leave the fill white so the color doesn't start to dominate too much of the UI.

Another alternative to coloring the button is adding color with an adornment element like a badge. Consider marking some items as "featured" or "new" if you'd like to draw special attention to something or give it a little visual flair.

Cozy Studio

Wifi · Free parking · Air conditioning

$98 / night

Featured
  • Plain whites and grays can risk looking sterile and plain.
  • A little color draws the eye and marks a card (particularly in a repeated list) as important
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