How to Create a Great Website Hero Section
10 practical tips for designing a motivating Hero Image that always works
The Hero Image is the first thing people see when they open your page. It’s your unique chance to win them over — or lose them forever.
It takes mere seconds for the user to process the first screen. But behind the scenes, there’s a lot of painstaking work by marketers, designers, and developers. How can you quickly find the right solution and pick the perfect image?
I have compiled the best practices for creating an effective Hero Image to share with you. Let us learn from the best.
10 Principles of Good Web Design
1. Don’t lose sight of Hero Section goals
The goal of a Hero Section is to make the user want to learn more and perform the next action. It serves as an introduction and invites further communication.
At first glance, what users want to see are benefits and problem solutions, not how great the company is or how cool the design looks. :) That stuff stays in the background!
A Hero Image is a visual stimulus. It promises benefits, improvements, and positive changes.
The user will be willing to take a step forward if:
- they intuitively and immediately like the visuals;
- they see a solution to their problem;
- they’re motivated by the image;
- they’re motivated by the heading;
- they understand what to do next.
2. Don’t lose sight of user goals
In an attempt to surprise and keep the viewer on the first screen, some designers unwittingly replace the user’s goal with their own: to make an awesome design. But the user’s goal is not design.
The user’s goal is to get something he or she needs: a thing, a service, or particular information. The design should facilitate this task rather than hamper it.
Smart design doesn’t draw attention to itself, or distract users from their goals, or make them gape in amazement, forgetting why they came. This is especially true for the hero section.
Here’s a typical case. The key points presented to the user are:
- what the company is offering;
- advantages of this offer;
- reasons to trust the company;
- actions to be performed by the user.
The message is obvious: our company is great and the user should hurry up and press that button. Alas, that’s not how it works.
User goals have nothing to do with the goals of website owners, marketers, or designers.
Any info that has no immediate value for the user must be held back. Messages like “We Are the Best,” “Celebrating Ten Years of Success,” “Why People Trust Us,” etc. belong at the bottom of the visual hierarchy.
Hero Section visuals must prioritize user goals.
Show the users what they want to see, and make it look really good. That’s your number one priority. All the rest — reliability, trust, guarantees — only serves to cement the user’s conviction that they’ve come to the right place.
Designing for User Retention That Works
3. Remember: no clutter
The home screen must be crystal clear and easily navigable for the user. This is where you showcase the very essence of your offer. Do your utmost to maximize readability. This includes:
- clean, uncluttered design;
- clear page structure;
- plenty of “air”;
- no distractions;
- hierarchy of highlights;
- motivating, concise heading and subheading;
- hero image that matches the message and copy;
- understandable and predictable navigation panel.
Keep it simple and concise!
4. Turn the user’s goal into a visual magnet
The designer’s task is to visualize the user’s goal, making it look attractive, lively, and catchy. Do a comprehensive study and analysis of your users, product, and competitor sites. This will help you find inspiring images and motivating messages for your audience.
Customers often arrive at the page with a specific image of their goal in mind. It’s important to take this into account and meet their expectations. Predictability is what people expect from you. This applies to both visuals and user experience.
Follow the “one idea, one image” rule. Let your heading resonate with, reinforce, and enhance the image. The image and text must stimulate the user’s desire and willingness to take a step toward gratification.
Caring About Users: A Modern Approach
5. Look for specific triggers
As you work on a Hero Image from concept to final design, remember: you are creating a motivational trigger. Feel free to use any and all marketing, design, and psychology tricks to influence user perception.
Every audience has its own motivation. Get to know your users and find the best way to engage them, both emotionally and rationally. (An emotional reaction is followed by a rational assessment of the information.)
User emotions need to be designed and incorporated into the project at the concept stage.
Specific triggers, such as images and/or text, are especially good for engaging emotions.
To find the best trigger, ask yourself:
- What should the user feel when he/she sees your offer?
- What memories should it evoke?
- What associations should it create?
Finding an emotional trigger often requires a good brainstorming session. Make a list of emotions and their possible visualizations, such as engaging images, illustrations, or videos. Test the best ideas.
This is the key to your future conversions and audience love.
The emotions don’t necessarily have to be positive. Apple once successfully exploited fear by designing a blood-red AIDS awareness website with an invitation to become a blood donor. It looked impressive. I don’t know about donations, but a lot of people bought red iPhones. :)
6. Show explicit or implicit benefits
An effective trigger is always associated with user benefits. The trigger pushes users to perform actions that will let them reap these benefits.
Popular Hero Images are focused on:
- the product;
- action;
- advantages;
- the context;
- the process (behind the scenes);
- the company’s owner.
Any type of the Hero Image must convey benefits.
Explicit benefits: highlighting the apparent advantages of using the product or service.
Implicit benefits: visually and psychologically highlighting the user’s improved status, importance, success, skills, and opportunities.
User analysis will help you decide what should be made explicit or kept implicit on a case-by-case basis. Showcasing an implicit benefit is always a win-win. A website that sells nails, for example, will fare much better if its hero section features an image of a thrifty, smart, and neat worker than if it simply has a photo of a house or a bunch of nails. Customers will enjoy feeling like handy homeowners.
7. Manage the user’s attention
Be clear about where you want the viewer’s eyes to go. What will they see first? What next? Where should their gaze linger? Everything depends on the goals of your website and product. The hierarchy of highlights needs to be planned in advance and then tested to make sure it looks like you need it to.
The user’s gaze is controlled by dominance and focal points. Dominant elements are the largest and most attractive ones. Focal points are icons, buttons, and other elements that the user sees after the dominant element. They are responsible for the user’s interest zones and hold his or her attention. They’re typically located at the edges of the screen.
Lifehack #1: Blur your design layout and show it to an average person (not a designer). What’s the first thing they see? What merits more or less attention? It’s a good way to rectify failed ideas before it’s too late.
Lifehack #2: Use eye-tracking software. Even a simple freeware app will help you check if the highlights are in the right places.
If you find that the user’s gaze doesn’t linger long enough on any given element, get to work. Perhaps it’s worth highlighting this element further by making it larger or brighter, adding animation, increasing the font size, and so on. (Test everything!)
Note: Place the main highlight on the emotional trigger, not the CTA button.
All visual composition tricks and instruments must be hierarchically ordered. Shape, color, shade, contrast, size, balance, movement, typography — everything must follow the principle of priority.
Note: Remove distractions. Everything that’s not a first impression priority must have reduced visibility, hidden, or moved elsewhere.
8. Use relevant images
Images are relevant when they match the website’s purpose, idea, and content. Any mismatch between the idea and its visual representation leads to misunderstanding and mistrust. It’s not just out-of-context imagery. A website dedicated to innovation using outdated designs is also an example of irrelevance. Unnecessary wow effects that distract from the message are likewise irrelevant.
The Hero Image must visually convey the essence of the content.
9. Use a short, powerful tagline
Use a short, powerful tagline to engage the user. Coming up with it isn’t as easy as it seems. It’s a creative process. Again, I recommend brainstorming. You have limited character space, yet you need to succinctly convey your values, explain some benefit or problem solution, or ask a related question that will pique the user’s interest. Brainstorming is a great way to find an original idea.
10. Be subtle with your СТА
You may have a great hero image with a good conversion potential, but it will be worthless without a CTA. However, CTA should be approached with caution.
Never use CTA to exert pressure.
Design your CTA to be friendly and non-aggressive rather than demanding. Do not pressure the user into learning everything at once, making purchases, or subscribing. CTA is a logical step on the user’s path toward their goal. If you failed to pique their interest with your tagline and visualization, no CTA button or text will work.
CTA is an organic continuation of your design and business idea. Your visitors are welcome. That’s the point of a CTA button or message: it invites the user to join the action.
Focus your UI and UX on making the user’s goal attractive.
Only then will your CTA be effective. A button motivates no one. People are motivated by ideas and images of the future.
