What do you want to improve?

Visually distinguish separate content blocks

Content should be visually separated so users understand what is related and important (and what is not). A sales promotion that sits above a product image may lead users to believe that the product is part of the promotion.

There are a few ways to visually separate content:

  • Whitespace is sometimes referred to as negative space. Essentially, this is the unmarked portion of your website (e.g. margins, spaces, and space between text/images). If you want to be sure something comes across clearly, make sure there is enough whitespace around the text to avoid the risk of distractions and misunderstandings.
  • Minimalist lines, borders, and grids in between can also create boundaries between blocks of content without being too intrusive.
Next The visual hierarchy should follow information hierarchy

Need Help?