Build a Confident Hero on Your Website

It’s said that a user only takes three clicks on your website before they navigate away. But 3 seconds is all it takes for a good or bad first impression.

In this article, we will be discussing how to imagine and design your website’s hero banner.

Who’s the Hero? Rather—what is the hero?

A hero image is a website design term that describes the topmost section of the website below the navigation. The large banner image and text offer users a snapshot of your business and create your company’s first impression.

Read the corresponding blog post here.


Keep it short and sweet

With only 3 seconds, you need to convince your visitor that you are worth the read.

  1. Narrow in on your target market and their problem and show the solution.
  2. Keep the header to 1 sentence (3 lines maximum depending on the text block size) and the subheader or introduction text to 3 sentences max. If your paragraph start to look like a block of text, it’s already too long.

Important information upfront

Your audience isn’t actually reading your carefully crafted sentences. Instead, they are scanning for specific keywords.

Having an SEO expert or experienced website content writer is vital to engaging both readers and scanners.

They will be able to capture the search of your ideal client and make sure your hero reinforces that they’ve come to the right place.

No fluff here. Harford Design’s hero keeps it simple.

Visual Graphics & Photography

Exploit Your Uniqueness: Avoid Stock Photography whenever possible.

Don’t go cheap on me, Dodgson. – My Jurassic Park fans will get this one.

If you have a kick-ass office space, an amazing team environment, awesome product or top-notch service, hire someone to come out and take a few photographs.

If you are starting out and have a limited budget, consider posting a job for photography majors at the local college or university. It’s a portfolio-building opportunity for them and a business advantage for you.

Use Mockups

If your service is strictly virtual, download a mockup (or hire a graphic designer) to showcase your achievements and client success stories.

For example, if you build websites, use a computer mockup. Design promotional materials or create marketing plans? Use a flyer, poster, or product image.

Consider how it will look on mobile

Making a desktop hero can seem pretty easy as most seem to follow a consistent layout.

Mobile, however, is a different story.

With so many people searching from the convenience of their sofa, build a mobile hero that works for them. This could mean building 2 or even 3 different versions of the hero and hiding/turning off visibility of the versions depending on their screens.

Reinforce your brand

Don’t forget that you are building a reliable and consistent business. Don’t neglect your brand or change your brand to fit a “really cool design”.

Stick to your company color palette and apply company fonts.

Hire a professional

If you are struggling with visual builders in Wix, Squarespace, Shopify, or WordPress, contact us at Harford Designs. We build websites for growing small business.

Blogs, Articles, Ramblings

Website Design Best Practices, Advice, Case Studies, and Everything Design

Perfectionism, Copy, and Content

Perfectionism, Copy, and Content

Within each of us is that little perfectionist who is never quite content with the way things are written on our websites and in business documents. Do I sound convincing? Do I sound like an expert? Do I sound genuine? Am I explaining too much or too little?If we...

read more
Summer 2021 Interns

Summer 2021 Interns

Spring is done and the summer has arrived! And with the new arrival comes new interns! Lets meet the Summer 2021 interns!Summer InternHello! My name is AJ and I am a rising junior graphic design student at Stevenson University. While attending at Stevenson University,...

read more
Black Oak Title—Stand Out Brand & Website Success

Black Oak Title—Stand Out Brand & Website Success

For many small businesses, the first year is a rocky and often challenging start. Black Oak Title, however, crushed the competition right out of the gate in early 2018.Original LogoLogo created by Harford DesignsHarford Designs was honored to design both their logo...

read more