Plus UI Design · Practical guides

Design a hero background with an editable pattern

Use a restrained pattern to support a headline without making the page harder to read.

Build the hierarchy first

Create the hero’s headline, description and action before adding decoration. Establish a quiet area behind the text. Then place a pattern where it reinforces the composition, such as the opposite edge or a secondary panel.

Limit the visual variables

Try one pattern, two related colors and a clear contrast difference between foreground and background. Reduce the pattern’s emphasis before reducing the text’s contrast. Compare a sparse and a dense version using the same headline.

Check the crop

Review the composition at wide and narrow aspect ratios. A pleasing desktop crop can put a distracting shape behind the headline on mobile. Keep the editable Figma version and export a small test before preparing the final asset.