As I was working through a new website design in Figma this week, I was struggling a bit on the page hero to make it feel a little bit more unique.
Having designed dozens of sites, it can be difficult to continue to make every design unique, but sometimes the brand you’re working on does it for you.
There’s one design technique in particular I resort to when I don’t already have new ideas in mind — an oversized background watermark.
Here’s where I had my page hero design on the new site I’m working on:
Now, as you can see — it’s not bad, overall design and layout feels balanced and clean. But it’s just missing something.
Well, most of the time (surely not all), the business you’re working on the design for has a logo that you can pull some kind of design element from. Whether it’s the logo icon itself, or just an accent, that helps compliment it.
It just so happens, the design I was working on had the perfect logo for this use case — as it had an organic shape/icon design already.
So I grab that icon or shape, blow it up, lower the opacity to only 5-6%, and now have this as a result:
It’s subtle, but you’ll now see the icon shape found in the logo blown up in the background.
Lightened up with enough opacity to not obstruct the readability of the text on top, this design technique can really help elevate the look of your page heroes.
The smallest design touch can help add interest and a new feel to your design overall. It’s usually all of the small things that add up to make a website design really unique, and help it stand out more to your visitors.
In the end, that’s what we all want — a site visitors will remember, talk to others about, and keep them coming back.
Talk soon!
