An overlay is a layer placed above existing content. In visual design, it can make text readable over an image; in mobile interfaces, it can hide secondary content until users request it. section 9.5 section 6.5.1
Use an overlay when the underlying content should remain available but should not compete with the user’s immediate task:
- Add an opaque or suitably light treatment behind text on a background image so the words remain legible. section 9.5
- Place extensive mobile navigation behind a menu button instead of displaying every link at once. section 6.5.1
- Show only essential information first, then reveal additional details through an interactive interface when users need them. section 6.5.1
Travel website landing page
A landing page can use a background image to make its header prominent, but text may become unreadable without an opaque treatment. A mobile hotel list can instead show the name, price, rating, and location while placing more details behind an interactive reveal. section 9.5 section 6.5.1
Figure 9.22 If no opaque treatment is added to the background image, the text is rendered unreadable.
Compare an untreated background image with an opaque treatment to see how layering affects text readability. section 9.5
