Refactoring UI

8. Finishing Touches (p. 192)

Don't always add new elements, there are ways to liven up a page.

Supercharge the defaults

  • in a bulleted list, try replacing the bullets with icons
  • use padlock icon for security-related features
  • in quotes, replace with visual elements by increasing size & changing color
  • with links, change the color and font weight, or thick & colorful custom underline
  • with a form, use custom checkboxes & radio buttons Use one of your brand color for selected states.

Add color with acccent borders

Add colorful accent borders to parts of the interface:

  • top of a card
  • active navigation items
  • along the side of an alert message
  • short accent underneath a headline
  • across the top of the entire layout

Decorate your backgrounds

Change the background color

  • emphasizing an individual panel
  • add some distiction between entire page sections
  • use a slight gradient (use 2 hues no more than 30° apart)

Use a repeating pattern

Add a subtle pattern:

  • a hero pattern
  • a pattern along a single edge

Add a simple shape or illustration

  • simple geometric shape
  • small chunks of a repeatable pattern
  • simplified world map

Keep the contrast low with the background.

Don't overlook empty states

Empty state should be a priority:

  • incorporate an image or illustration
  • emphasizing the call-to-action
  • hide stuff that would be empty
  • use empty states as an opportunity to be interesting and exciting

Use fewer borders

Use a box shadow

Works best when the element is not the same color as the background

Use two different background colors

Add extra spacing

Think outside the box

Example with a dropdown list:

  • break it into sections
  • use multiple columns
  • add supporting text or colorful icons

Example with a table:

  • combine columns to introduce some hierarchy
  • add images
  • introduce some color to enrich existing data

Example with radio buttons:

  • try something like selectable cards

Don't let your existing beliefs hold back your designs; constraints are powerful but sometimes a bit of freedom is just what you need to take an interface to the next level.