This Is How The Hero Section Of Your Website Should Look Like

Swati Tiwari
11 Jan 2022
5 min read

Your customers form an opinion about your brand in just 3 seconds after landing on your website. Exactly why you just have 3 seconds to tell them about your business, what it does, how will it make their lives easy and how will it impact their lives. Let’s see how slack does this effortlessly!

But first let’s checkout what goes into a high impact Hero Section

1. Hero Heading - Why should I pay attention?

What can you do for them?

I know it can be tempting to be cleaver and savage on your hero heading but trust me, you really need to avoid it. Your customers don’t understand your slang - only your team members and competitors do and I’m sure you’re not building your website for them. You are building it for you customers, so sound and feel like it.

Source: marketingexamples.com
Source: marketingexamples.com

All you need to do is talk about their lives and the pressing pain point in simple relatable terms.

See how Slack does it

Source: Slack Hero Section

See how Figma does it

Source: Figma Hero Section

See how Sunsama does it

Source: Sunsama Hero Section

2. Emotion Provoking Imagery

Images mostly depend upon the kind of product or services you are selling. If it’s a tangible entity, Product Photography works the best. If it’s a non-tangible entity like a software or a service, you can choose between user persona pictures, vector graphics, 3D Illustrations, product demo gifs, etc.

Here are some impactful examples

Source: mailchimp.com

Source: https://hylands.com/

Source: https://genkiinstruments.com/

3. Call To Action

Every business has one goal, it can be to drive sales, hire talent, collect donations, stream video, make people consume content, etc. The list goes on and on.

Your CTA is directly proportional to what your goal is. But you can’t choose to be subtle about it. You have to be direct, bold, and impactful about it. You can achieve this by design and good copywriting. Take some inspiration from the example below. These are some of the highest converting CTAs of all times

Source: https://marketingexamples.com/

Also, There should only be one main call to action, irrespective of the goal. Because too many options paralyses the Brian resulting in no action taken, which obviously you don’t want.

4. Explain Your Process with Authenticity

Use clean design, flow charts, illustrations to make it easy to grasp. The sooner they can figure out how your solution can solve their problems, the easier it will be for them to sign up and click the CTA.

If you’re running a SaaS, user flow and showing your software in action with short demo videos works really well. Although, if you’re selling a physical product, you should rather talk about the sourcing materials, manufacturing processes, and labor fulfilment that delivers and impactful story your customers can relate too.

Source: Mailchimp Product Page

5. Social Proof - Testimonials, Awards, Trust Stats

If in a new city, would you rather eat at a restaurant your friend recommended or would you like to eat anything nearby?

99% of us would go by out friends recommendation because we trust him and his choices.

Why do we trust him?

Because he’s no different than us.

There - That’s how humans operate, they need to be sure that they are taking the right decision before take one, That’s exactly why you should leverage it to your advantage.

A bit of psychology applies here. It’s human nature to assume others know more about the situation or product than you do. “We view a behavior as more correct in a given situation to the degree that we see others performing it,” says Robert Cialdini, Ph.D., who coined the concept of social proof in his  book, Influence: The Psychology of Persuasion.

Source: Webflow.com

Look at webflow’s clients section, if top companies like Dell, Upwork, Petal, Zendesk, use webflow for their marketing websites. You don’t have a reason not too for your website as well right?

Phycology, My Fiend!

Here’s some awesome testimonials

Source: Webflow.com

To Conclude

This is how the hero section of your website should look like:

Source: Marketing Examples

Be the first to know

We have a lot coming!

    What Describes You the Best

    We respect your privacy. Unsubscribe at any time.

    Free Stuff

    Grab Some Great Resources & Templates

    Guide

    Great Move’s Brand Strategy Guide 2024

    Download Now
    Guide

    The Ultimate Guide to Nailing Your ICP

    Download Now
    Brand, Design, & Webflow Template

    OnPeeP - Electric Cars for the future - The all in one Brand Kit

    Get it now
    Brand, Design, & Webflow Template

    Happen - Electric Cars for the future - The all in one Brand Kit

    Get it now
    Brand Identity Template

    Brand Style Guide Template

    Get it now