- A hero image is a large or oversized web banner image that is pinned to the header section of a webpage, usually towards the top of the page. Because of its prominent place in the site’s visual hierarchy, the hero header is often the first thing users see when arriving on a website.
- Read: 10 inspiring hero image websites
- It only takes 50 milliseconds for users to form an opinion about a website.
- Make sure that your site is easy to read, clear and delightful
- Large, oversized images grab the user’s attention as soon as they land on a page.
- Specifics
- Don't let it compete with you main point
- Sizes
- If your image is going to be header/hero background image you'll want to maintain a 16:9 aspect ratio. Something like 1500 px and 469px
- For a full page background image you'll want to maintain a 4:3 aspect ratio. Something like 1500px by 938px
- If your image is going to be header/hero background image you'll want to maintain a 16:9 aspect ratio. Something like 1500 px and 469px
- Don't let it compete with you main point
- Strategies
- Many web designers create hero images using photos of real human faces to personify users.
- Some designers opt for animated hero to draw users in:
- As a gradient or background filler to emphasize the title:
- Graphics and Illustrations - an effective way to communicate more complex ideas in an approachable manner...using the same idea as infographics:
- Striking subject matter:
- Textured background:
- Demo images
Smart Slider overview