Table of Contents Hide
The first impression is crucial. It can make or break an opportunity to engage visitors. When it comes to web design, the hero section has a tremendous impact on user experience. A good hero section design can maximize the chances that the users will scroll for more information.
Today I will discuss 6 tips to help you design a better hero section.
Hero section design can vary depending on the nature of a product. For my article, I want to focus on the landing page design for a new product. Note that intentionally focus on functional elements and skip decorative elements.
Imagery is an image or video in the hero section. The imagery should communicate the key message at a glance. Ideally, visitors should check the image and understand what the site is all about.
2. Text block
The text block contains two elements — header and description. Text blocks reinforce the message that you communicate using imagery.
The call-to-action button (or buttons) allows users to take actions you want them to take. Depending on your goal, you might want to use one or two call-to-action buttons in the hero section.
The logo is the company logo you typically place at the top left corner of the page. Apart from communicating the brand, this element also serves purely functional purposes — visitors click on it to navigate the home page.
The menu offers a list of options that allow the user to navigate to different pages or parts of the page (if the landing page is a one-pager).
1. Use relevant imagery
Image or video is typically the first thing that users notice when they land on the page. That is why it is vital to ensure that the image’s meaning is clear to your target audience.
Try to avoid abstract or purely decorative images in this section. They won’t help you to communicate your message and only can confuse your visitors.
2. Write a short and effective text
The text you will use in the hero section tremendously impacts user engagement and conversion rate. Remember that users don’t read; they scan. And it is essential to make your text scannable. Nobody wants to read long passages of text.
- Header. The header should be clear and concise. Aim for 5–7 words.
- Description. The description adds more context to the information in the header. Aim for 20 words max (half the size of one sentence).
You can highlight one or a few words in the header section using distinctive visual styles. Here are a few good examples of text styles that you can design in Figma:
Read the full article here