How to Create a Great Hero: Part 1

© Copyright 2021 Logical Methods, LLC
January 2021

The Hero is the term commonly used to describe the image and text you see above the fold on a landing page.

The hero is widely regarded as the most critical element of the page. 

If you're wondering how the image at the top of this page is related to hero images on landing pages - then the image has succeeded. It has you engaged. 

If you don't capture a visitor's attention immediately, they will close their browser tab and move on (the dreaded bounce).  

If you are paying for the traffic to your page and it's all bouncing—that's money down the drain. 

This is Part 1 of my tips for creating a great hero that will keep your traffic engaged and hopefully converting your traffic into sales.

  • Headline

  • Sub-Headline

  • Tagline

  • Problem

  • Solution

  • Features

  • Benefits

  • Contact Form

  • Logo

Rule #1: Basic Structure

The hero typically consists of a headline and additional copy on top of a background. The copy elements may include: 

The temptation is to cram as much information as possible into the Hero. 

That's a mistake. 

Your goal is to communicate the essentials and keep the visitor engaged. You don't need to tell the entire story of your product or service above the fold. Every item in the bullet list may not be necessary. 

If they ARE necessary - make it short and sweet. 

The hero image and the text need to support and relate to each other. The image could depict a person experiencing a problem or a solution. Or, it may feature a product or service in action or just a great image. 

Here's an example from my work that depicts a person experiencing a problem. The headline and sub-head reinforce the nature of the problem. Additional copy talks about the solution and benefits.

You may have noticed there's no logo in this example. 

Many clients insist on their logo appearing in the hero image - even if it's a poorly designed logo or is only available in a color scheme that clashes with the page.

If your logo has good name recognition as a quality brand, try to include it.

You should also include the logo if it enhances the layout and design of the hero. 

Otherwise, including the logo doesn't provide much benefit at this stage.

Finally, there is a very simple contact form and a note about pricing.

A lot of information is communicated but the Hero doesn't feel cluttered or too busy.

In general, having people in your hero is a good idea. 

Here's another example from my own work. The client originally had an all text hero and wanted to see how an image hero might improve their results.

When you see a page for the first time, it should make a good impression.

good impression is a much easier judgment when the page is not your own  (a page that you're creating for your own personal or business use). 

If it's your own page, you're too familiar with the business to be objective and you fall in love with your layout.  You can't see it through the eyes of a first-time visitor. Build the page, then put it aside for a week or two and look at the page with fresh eyes.

After the break, you may be horrified—what you were thinking when you had 7 different font colors and weights. 

You can always ask friends, family, or co-workers for their opinions, but it's hard to avoid becoming defensive when they make suggestions. Or worse, they simply say it's great a great page to make you feel better. 

This rule is also very subjective. What is a good impression? It doesn't necessarily require images of attractive models, new cars, or vacation resorts. (Although, these do make the job easier).

Perhaps a better word would be "engaging" or "interesting" vs "good". In some way, the image and copy should create an emotional response. 

You want the visitor to stay on the page, read the copy, and scroll down. If the first impression is boring, confusing, or off-putting, none of that will happen.

Let's look at some examples.

Rule #2: First Impression

Since mobile viewing is over 50% of the traffic in most markets, that layout must also be optimized independently.

In most cases, simply shrinking the images and text into the mobile screen has disastrous results - such as text that is so small it's unreadable. 

Mobile requires a different layout strategy. 

I typically start with the desktop version since it's easier to stay in a creative mindset so I can lay out all of the essential elements without fighting the constraints of the mobile screen.

Then, I manipulate those elements, rearrange, and organize them into the mobile format. This often requires going back into Photoshop to create another optimized hero image.

The mobile layout typically adds about 30% overhead to the work.

I'll be creating a standalone article on some of the approaches that have worked for me on mobile layouts.

The hero image often has a light or dark overlay with 60% - 80% opacity, so the image is slightly obscured to allow the text to stand out and provide good contrast.

Otherwise, the text needs to be positioned over a portion of the background that is unobtrusive. You don't want a keyword in your headline falling on top of someone's face. 

Creating a layout that optimizes all of the above can be very time-consuming. In my experience, 90% of my images need to be manipulated in photoshop in order to meet the requirements.

Desktop vs Mobile

Style Tips

Granted—this example does resort to the attractive model. 

But, it's a natural fit for this business. 

It's not as if you have an attractive model in a page promoting the advantages of annuities as an investment strategy.

Effective First Impression

The page below doesn't engage me, at least not in a good way.

The message implies I need to read a book in order to lose weight.

That may be true, but it's not what I want to hear at this stage of a funnel.

Bad First Impression

Original Text Hero

Updated Hero with a Photo

Results

The pink line represents the Hero with the image. It clearly outperforms the all-text hero represented by the blue line.

What Doesn't Work?

Wordy

This headline is too wordy . It makes me feel like I'm reading. Visitors want to skim, not read , at least in the beginning. The extreme weight of the font isn't helping either. The manner the product is displayed (white product on white background) isn't helping.

I have no idea what the product does (it's not explained) and I don't want to make the effort to find out.

Here are a couple of examples of pages that don't make a good impression and why.

Exceptions

A Clear Message

This page doesn't have an image of a person —but if it's the result of a search for cheap internet, then it a great fit. I'm not sure an image of a person would improve the results.

The layout isn't much to brag about either. It's all about the message.

Of course, there are exceptions to any rule. 

A Clear Message and  Good Layout

This example doesn't have any people either. The message is simple and clear and the layout is good :  black, white, green, very clean and balanced. It just feels right

Color

The following page has an interesting color choice for the overlay. I want to get off the page ASAP. It looks like a nuke has landed nearby and everyone is within the blast radius.

Perspective

As mentioned earlier, what makes a good impression for one person isn't universal. It's subjective. 

The perspective that matters is your visitor's. 

Adopt their mindset. 

  • Who are they?

  • What do they want?

  • What brought them to the page?

Review the Ad copy or other link that brought them to your page. What did that link suggest?

What are they hoping to find?

Don't make the visitor search the page to get answers.

Why Do We Need a Set of Rules?

I decided to create a set of rules for a couple of reasons. 

First, I like to create processes for any work that I do repetitively. When I decided to become a landing page freelancer, I needed a process to become more efficient. As I gained insights from my own work or the work of others, I documented it.

Second, I wanted to be able to share what I had learned. Eventually, I'll create a complete guide. For now ,  a series of articles is a way to get started.

I use these rules when I am hired to fix a landing page that isn't getting conversions. I also use the rules when I'm hired to create a page from scratch.


It's a lot easier to critique a page vs creating one from scratch. When you're creating a page, you're too close to the work to be objective.


That's when having a set of rules comes in handy. After you finish the page that you think is perfect (maybe even good enough to submit to the landing page hall of fame), you can critique your own work with a checklist and realize it's not quite the work of art you imagined.


Another gotcha when it comes to critiquing your own work: you're influenced by the difficulty level of the work.


Yes, this image really needs to have an ocean for a background vs trees and I need a gradient fade-out into a white background, but I don't want to spend any more time on the damn thing - I'm already over budget.

WHAT ARE YOU OFFERING?

HOW DO THEY BENEFIT?

HOW DO THEY GET THE OFFER

Special Offer on New Unbounce Accounts

Unbounce has been my favorite platform for years. Its ease of use is unparalleled. 

Use my affiliate link (above) to get a discount on your account. 

PLUS

When you sign-up I'll give you a complimentary 1-hour consultation. 

You pick the topic.

  • How to use the platform
  • How to pick hero images
  • How to write headlines
  • How to define your USP
  • Any other related topics

Let me know when you're ready to start.  ed@landingpagefixer.com