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.