Hero

Example

A guide opens with a hero image above its title. On a phone the hero crops, so the title still has to fit. After a redesign, check that the hero still leaves the heading readable.

Why it matters

First glance needs a face. A hero is the big top artwork or banner above the main copy, welcoming, not a tiny icon.

A hero decorates a page. It does not change what the page offers. Social share images (OG images) are related, but they use a different crop.