Someone sent me a question about imagery in website hero sections, so here's some thoughts/ideas/inspiration, with examples.
1. The standard approach is to have text content (headings, text, buttons) and imagery (photos, illustrations) side-by-side.
Anthony Hobday
16.1K posts
Product designer. Blog and paid feedback on my website.
- Replying to @nealagarwalMust be stronger than the previous sign-upโs password
- The @stripe sessions website goes hard. It demonstrates the lengths Stripe is willing to go to when it comes to web design. Here are the details that catch my eye. I'll get the small details out of the way first, before I spend far too long on colour, which is the star here.
- After years of sightings in memes, I finally faced the ultimate interface design challenge: a dialogue that asks you if you're sure that you want to cancel something. I think I threaded this needle quite well.
- I read this book early in my career because it comes up often. Itโs hard to unpick where my design knowledge comes from, but I donโt think I learned much from it. I genuinely assume some books are recommended often because their covers look good.designers, read this rn
- Putting content in containers makes the structure of the layout easier to understand, which is usually a good thing. Here are some good examples, for inspiration. Honk, Apple, Alfread, Mailchimp.
- How have I never noticed that macOS' menu bar "shares" space between menu items for the hover state? I don't think I've ever seen this before. Normally I'd expect each item to have its own reserved space for the hover state.
00:00 - I think macOS has lost its way, so I've switched to @posthog's new OS as my daily driver. When an operating system doesn't have something as basic as Godzilla window management, you know it's time to switch.
00:00 - I've updated my list of visual design rules you can safely follow every time to add rules about nested corners and hard dividers. Up to 25 rules now. I've also tweaked the explanations to make it clearer why they're good rules to follow. anthonyhobday.com/sideprojects/sโฆ
- People have noticed @bolt's new logo, but don't miss the on-brand motifs through their website. Excellent attention to detail. All of these echo the bolt logo. 1) These tabs at the top of the website have angled sides.
- Here are some of my favourite hero sections, with no explanation about why. Enjoy. iA Writer, Github, Nicheless, Coco.
- Over the years I've landed on some design theories that I believe, and that I've not yet disproved. Here they are.
- Here are 12 of my favourite light websites, in alphabetical order. 1) @attio's website is full of fine detail and interesting touches. They use colour only when they have to. Nowhere to hide, and they pulled it off.
- I think fewer colours is better, but one of my favourite uses of many colours is when websites "theme" areas of what they do with colour. Here are some examples. 1) Heftwerk uses a colour for each of its business areas.






















