🎉 We Won #1 Best Place To Work By Glassdoor 2022 🎉

Landing Page Hero Shots: 18 Insightful Examples To Help Guide Yours [2022]

Evan Oliver
Evan Oliver
Director of Marketing
Klientboost Logo
+
You
=
Get Your Free Marketing Plan,
Custom Tailored For Your Industry
GET YOUR FREE MARKETING PLAN

In 1911, the Syracuse Advertising Men's Club held a banquet to discuss journalism and publicity. One of its members (Arthur Brisbane) was quoted in the paper saying, “Use a picture. It’s worth a thousand words.” 

Not Confusious, King Solomon, Einstein, or Aristotle, but an advertising man. (Tell that to your parents.)

Fast forward 100+ years and Arthur’s proverbial words still ring true—especially when it comes to landing pages

Enter: the landing page hero shot. 

If your headline and subheading communicate your value proposition, your landing page hero shot brings it to life in a way only an image can. This is why a strong hero shot is a mainstay of landing page design

Get it wrong, and watch your conversion rates plummet. 

Get it right (like Arthur knew from experience), and watch your conversion rates skyrocket

In the name of getting it right, we’re going to make Arthur proud by exploring the different types of hero images, the steps required to create your own, and examples of good, bad, and bogus ones. 

Let’s go.

What is a landing page hero shot?

Your landing page hero shot refers to the primary image or video used to communicate the value of your offer, and it’s the first image your visitors will encounter upon arriving. 

For example, notice how Divvy’s hero image features a credit card and a mobile app, both of which add context to their headline that states: “The credit & software your business needs to thrive.”

Divvy hero shot
Divvy hero shot

Is a hero image going to seduce someone into buying? 

Not by itself. 

But together with your headline, subheading, offer, and call-to-action (CTA), your hero shot can provide the context, emotion, and clarity needed to push your visitors across the finish line. 

That means a high-quality hero shot doesn’t just fill space; it brings your offer to life in a way that words alone never could, and it creates an indelible first impression

Hero shot vs. hero section 

Don’t confuse a hero shot with a hero section.

The hero section of your landing page refers to the “above-the-fold” section, or the section of the landing page your visitors first encounter before they start scrolling down. 

Your hero section includes your hero shot, headline, subheading, and CTA (at a minimum), but the hero shot and hero section refer to two separate elements of your entire landing page. 

Hero shot vs. hero section
Hero shot vs. hero section

Types of landing page hero images

Whether animated, custom photography, a video, or some other style, landing page hero shots fall into five main categories: 

  1. product-focused 
  2. metaphor
  3. “promised land” 
  4. process-focused
  5. abstract 

Let’s explore examples from each. 

1. Product-focused landing page hero shots

Product-focused landing pages spotlight the product in action. Surprise, surprise.

For a new or complicated product, a product-focused hero shot can help demystify your offer by making the abstract feel concrete. 

For example, Editor X’s hero shot features their actual visual editor interface:

Editor X (Wix) landing page hero shot
Editor X (Wix) landing page hero shot

2. Metaphoric landing page hero shots

Metaphoric hero shots use images that represent or symbolize the value of the offer, just not in a literal sense. 

For example, the hero shot on our free marketing plan landing page features our brand emojis in the form of dollar bills and smiling brains:

KlientBoost landing page hero shot
KlientBoost landing page hero shot

3. “Promised land” landing page hero shot

Promised land hero shots portray the desired outcome of using your product or service, either by spotlighting a successful customer or a desirable future state. 

For example, Keeps subscription hair loss medicine showcases a satisfied and smiling customer, presumably after using their hair loss medicine:

Keeps eCommerce hero shot
Keeps eCommerce hero shot

4. Process-focused landing page hero shot

You typically see process-focused hero shots for services or software where illustrating the product might not be possible. Instead, you visualize the process that’s responsible for the service's value or effectiveness. 

For example, GatherContent uses a custom graphic to illustrate its software’s content management process: 

GatherContent Landing page that provides context
GatherContent landing page hero shot

5. Abstract landing page hero shot

Our least favorite hero shot: abstract hero images (or hero images composed of visual elements like shapes or patterns).

Why are they our least favorite? Because they just fill space. Not much else. 

For example, Semrush features two abstract shapes as their primary visual element, nothing else. Missed opportunity. 

Semrush abstract hero shot
Semrush abstract hero shot

How to create a landing page hero shot and increase conversions

A high-quality hero shot doesn’t just fill space; it adds context, communicates relevance, evokes emotion, and enriches the user experience. And it does so using a combination of 

  • concreteness
  • relevance
  • context
  • emotion
  • customization
  • alignment

Let’s explore each. 

1. Prioritize clarity and concreteness 

Abstract hero shots do two things well: 1) absolutely nothing, and 2) increase cognitive load (the time it takes for visitors to comprehend your offer).

That’s it. 

High-quality landing page hero shots should portray your product, service, desired outcome, or value proposition in action, in the real world, or as close to reality as possible. Simple. 

Don’t make your visitors think too hard. Avoid art for the sake of art. And keep your visuals concrete. 

For example, Dollar Shave Club uses their hero image to illustrate the products included in their $5 Razor Starter Set. Simple yet effective. 

Dollar Shave Club eCommerce hero shot
Dollar Shave Club concrete eCommerce hero shot

2. Make it relevant for some, irrelevant for others

A high-quality landing page hero shot should resonate immediately with your target audience while simultaneously signaling “This is not for me” to anyone else. 

Your visitors make split-second decisions mainly influenced by their unconscious minds. If your hero shot doesn’t immediately bring clarity to who it’s for and who it’s not for, try again. 

That also means matching your landing page hero shot with the messaging and creative that sent people there (i.e., message match). 

For example, when you look at Allure’s Beauty Box hero shot, is there any question that it’s for people specifically interested in beauty?

Allure’s landing page hero shot
Allure’s landing page hero shot

3. Use it to add context 

Your landing page hero shot lives to support your headline and subheading. Period. 

Better yet, think of it as the visual representation of your value proposition

That means your hero shot needs to bring to life the promise you make in your headline, not some promise you make elsewhere on the page. 

For example, Canva adds context to their “creativity and productivity” headline with a product-focused hero shot that illustrates collaboration, templates, and design on the go (mobile app): 

Canva hero shot
Canva knows how to add context with their hero images

4. Imbue it with emotion 

When we say emotional, we don’t mean moving someone to tears; we mean creating a positive feeling about your brand and offer. 

A lot of it boils down to the quality of your graphic design—quality web design builds trust and establishes credibility

But you can evoke positive feelings like trust, safety, happiness, and confidence directly from your hero shot by using choice imagery. 

For example, Namogoo features a variety of happy-go-lucky “buyers,” as if to say, “This is what your customers will feel like after you start using Namogoo.” 

By mirroring positive emotions associated with their value proposition’s “promised land,” Namogoo elicits positive emotions from its potential customers. 

Namogoo landing page hero shot
Namogoo landing page hero shot

Or you can feature social proof, like customer testimonials, star ratings, or awards, directly within your hero shot to evoke feelings of trust and confidence. 

ClickUp social proof landing page hero shot
ClickUp social proof landing page hero shot

5. Customize it to your brand

No. Stock. Photography. 

Keep your landing page hero shots custom to your brand. 

If you need help from stock photography due to resources, at the very least, work stock photography into a custom graphic so that it fits the style and feel of your brand. 

For example, Monday.com uses various stock photographs of people, but they edit them into their landing page hero shot in a way that feels original and unique. 

monday.com hero shot
If you’re going to use stock photos, use them as accents, not focal points

6. Don’t let it get in the way of your copy 

Lastly, the best landing page hero images don’t distract from the copy; they tastefully align themselves around headlines and CTAs in a way that draws attention to (not away from) them. 

For example, notice how Apostrophe features a dermatologist looking toward the headline and CTA?

Apostrophe landing page hero shot
Apostrophe landing page hero shot

Directing her body and gaze to the right creates a subtle visual cue that draws the attention of the visitor in the same direction—right toward the headline and CTA. 

Now juxtapose that with VanMoof’s landing page hero shot. It doesn’t make the headline and CTA standout; it buries them. 

Vanmoof hero shot
Can you even make out the font in the subheadline? 

18 Landing page hero shot examples

Now for the fun part: landing page hero shot examples. 

We broke up this section into three distinct categories: 

  1. The Good (10 examples) 
  2. The Bad (4 examples) 
  3. The Bogus (4 examples) 

Why? 

Because not all hero shots are superheroes, and learning what not to do is just as important as learning what to do. 

The Good

Bookmark them. Add them to your swipe file. Tell all your friends. 

  1. Canva Pro 
  2. Doo
  3. Public 
  4. Adobe Creative Cloud
  5. KlientBoost
  6. Squarespace
  7. Spline
  8. SnapCall 
  9. Typeform 
  10. Armadillo 

1. Canva Pro

Canva landing page hero shot
Canva landing page hero shot

What we love: Product-focused hero shot that adds context to the headline, doesn’t distract from the CTA, and evokes positive emotions.  

2. Doo

Doo landing page hero shot
Doo landing page hero shot

What we love: Doo shows real screenshots from their reminder app. Simple, concrete, contextual, custom, effective. 

3. Public

Public landing page hero shot
Public landing page hero shot

What we love: Public features a looping video that showcases screenshots from their app along with real, authentic users. This video marries product-focused with promised land to artfully capture its ease-of-use, target market, and mobile-friendliness. 

public.com slide one
Slide one
public.com slide two
Slide two

4. Adobe Creative Cloud

Adobe Creative Cloud landing page hero shot
Adobe Creative Cloud landing page hero shot

What we love: No better way to demonstrate the power of your design software than by showcasing the actual designs it facilitated. Well, maybe one way: by making your logo the subject of the design. Bravo, Adobe.

5. KlientBoost

KlientBoost landing page hero shot
KlientBoost landing page hero shot

What we love: We LOVE metaphoric landing page hero shots at KlientBoost. Mainly because we’ve grown an entire family of brand mascots that need their 15-minutes of fame, but also because they illustrate our value propositions in a distinct and fun way. Who doesn’t love smiling landing pages and raining money?

6. Squarespace

Squarespace landing page hero shot
Squarespace landing page hero shot

What we love: Squarespace prioritizes design, always. So no surprise that their landing page hero images look more like modern art than most modern art. But like we mentioned earlier, art for the sake of art doesn’t cut it when it comes to landing page hero shots. Not unless you’ve captured your product in real life within that art. And that’s exactly what Squarespace does here. 

7. Spline

Sline landing page hero shot
Sline landing page hero shot

What we love: It’s a bit hard to tell from this image (I suggest you visit their webpage), but Spline’s 3D hero shot moves when you click and drag your mouse over it. Pretty neat, considering that they sell collaborative 3D design tools. 

8. SnapCall

SnapCall landing page hero shot
SnapCall landing page hero shot

What we love: SnapCall uses their hero shot to illustrate a common use case (or pain point) their target market might find valuable (like interacting with your customers remotely). Makes sense, considering their subheading promises to “deliver a groundbreaking customer experience with one-click video calls.” 

9. Typeform

Typeform landing page hero shot
Typeform landing page hero shot

What we love: Talk about product-focused. Typeform uses a real-life embedded Typeform form as their hero image. Visitors can actually click on the “Try me out” button and experience the form for themselves. Brilliant. 

10. Armadillo 

Armadillo landing page hero shot
Armadillo landing page hero shot

What we love: Metaphor alert. An armadillo wrapping its body around a house as if it were protecting it like it was its own baby. Is it even possible to communicate their brand promise and value proposition in a better way? No chance. 

The Bad

We’ve seen worse, but these landing page hero shots still don’t make the cut.  

  1. Semrush 
  2. InVision
  3. MURAL
  4. PocketGuard 

1. Semrush

Semrush landing page hero shot
Semrush landing page hero shot

What we don’t like: Here’s what happens when metaphors fail. Semrush uses a toolbox, presumably to highlight their “Tools for any SEO challenge” value proposition. Only the toolbox is filled with a ruler, magnifying glass, and cog. Are you selling plumbing tools? Or SEO tools?

2. InVision

InVision landing page hero shot
InVision landing page hero shot

What we don’t like: And this is what happens when the abstract fails. We get it, though, since this landing page promotes InVision’s new “Freehand” software. But why just show a woman “freehanding” on a wall? Yeah, no. Missed opportunity. People want to see the software in real life, especially when it’s a new type of software.

3. MURAL

MURAL landing page hero shot
MURAL landing page hero shot

What we don’t like: It’s overloaded. What do we even focus on? MURAL attempts to use a product-focused hero shot, but they’ve squeezed too much in it, making it hard to discern what each feature does. I can see it now: too many people want too many features represented, so the designer said, “Eff it, we’ll throw them all in there.” 

4. PocketGuard

PocketGuard landing page hero shot
PocketGuard landing page hero shot

What we don’t like: What’s most disturbing about this abstract design is that it looks like a sound wave of sorts. But PocketGuard is a personal finance app. The lesson? Ensure your hero shot doesn’t look like a different service at first glance, even if by accident. 

The Bogus

Yep, we can’t forget about the bogus. These hero shots straight up waste the most valuable piece of landing page real estate. 

  1. Intercom
  2. SurveyMonkey
  3. Act-On
  4. ZoomInfo

1. Intercom 

Intercom landing page hero shot
Intercom landing page hero shot

What we hate: A woman blowing up a balloon? That’s how you’re going to illustrate your “Convert more website visitors into paying customers” value proposition? Swing and a miss. 

2. SurveyMonkey 

SurveyMonkey landing page hero shot
SurveyMonkey landing page hero shot

What we hate: Landing pages don’t always need hero shots to convert. So don’t squeeze them in just because you “need something visual.” Say no to space fillers (ahem, SurveyMonkey). 

3. Act-On

Act-On landing page hero shot
Act-On landing page hero shot

What we hate: It’s a funnel, I suppose. But it looks more like a lightbulb. In a text-heavy landing page that could benefit from a strong visual, Act-On misses the point. Not to mention they don’t even include their logo on this landing page

4. ZoomInfo

ZoomInfo landing page hero shot
ZoomInfo landing page hero shot

What we hate: Is that an Amazon drone delivering my new extension cord? Yikes. Not to mention the placement (top right) pulls your attention away from the CTA at the bottom, not toward it. 

Closing thoughts: the landing page hero shot test

Bottom line?

Though landing page hero shots come in all shapes and types, the best ones incorporate a combination of 

  • concreteness
  • relevance
  • context
  • emotion
  • customization 
  • alignment 

Whether you’re a small business or a global organization, prioritize these elements to nail your landing page hero shot. 

Want to know if your hero shot hits the mark?

Try the hero shot test. 

Find a friend or colleague (preferably someone who has never encountered the product your landing page promotes), load the landing page, and give them five to ten seconds to review the hero shot. 

If they can’t accurately describe your value proposition and the accompanying hero shot in two sentences, it’s time to start A/B testing different variations. 

Now go forth and make Arthur (and us) proud.

Just don’t forget to master your landing page headlines while you’re at it. Read all about how to do that in our next blog here.

Chapter 2:
Building A Landing Page

What You’ll Learn: Get the instructions on how to perfect every single element that needs to be on a landing page in order to optimize for the most conversions possible.

Chapter 3:
Landing Page Types & Examples

What You’ll Learn: There are a gazillion different types of landing pages that all serve a unique purpose. Learn about each type and see the best examples that you’ll want to copy ASAP.

Chapter 4:
Landing Page Tips

What You’ll Learn: There are landing pages that work and then there are landing pages that blow the roof off all your past conversion rates. Follow these tips to get more conversions that you know what to do with.