Here are 12 Critical Elements Every Website Homepage Must Have.

The design and content in your homepage navigation could mean the difference between a website conversion and a bounce.

The home page of any website is like the “hub” of the site.  It needs to give the visitor a clear understanding of how you are going to solve their problem, plus provide a clear path to the pages they need right from the homepage.

As web designers, we find that content creation is the biggest hurdle for most businesses.  That’s why we provide tools and guidance to help alleviate the overwhelm and keep projects moving forward.  

No one knows your website better than those who helped design it, so be sure to conduct user tests to make sure it’s simple and intuitive for visitors to find what they’re looking for on your site. Include a search box if you can.

And now, without further ado, here are the 12 critical elements every homepage must have.  We’ve actually included 13 here, but the last one is optional depending on your target audience.

Download a copy of the Homepage Elements Worksheet here.

12 Critical Elements Every Homepage Must Have

Credit for graphic: http://blog.hubspot.com

1. Headline

Within three seconds, a website needs to tell visitors what the business has to offer. That’s where your headline comes in. It may only be a few words, but it’s one of the most important pieces of copy on your website.

Many types of people might visit your website, and you’ll be hard-pressed to find a few words that hit home for everyone. Instead, write your headline to target a third of those people who are most likely to be happy with your product.

Keep the headline itself clear and simple. Dropbox‘s headline is a great example: “Everything you need for work, all in one place.” It’s simple, yet powerful — no need to decode jargon to figure out what Dropbox really does.

Dropbox website homepage

2. Sub-headline

Your sub-headline should supplement the headline by offering a brief description of what you do or what you offer. This can be done effectively by zeroing in on a common pain point that your product or service solves.

Here’s an example of a great sub-headline from Mirror: “Hiding in plain sight.” It hones in on the primary selling point of the mirror gym: It’s a full at-home gym, personal trainer, and workout plan all in the comfort of your home without taking up precious square footage with equipment.Mirror website homepage subheadline that reads hiding in plain sight

To optimize your headlines for mobile, use larger fonts to give visitors a better experience. Small fonts could force mobile visitors to pinch and zoom in order to read and interact with the content on your site. Our advice? Use the heading options in your page editor. H1 headings are perfect for page titles — there should only be one H1 on a page. Subheadings should follow the order of the hierarchy, H2, H3 … H6, and so on. You can have several of these headings, just make sure they’re in order. For example, you won’t want to jump from an H1 to an H3 — choose an H2 instead.

3. Primary Calls-to-Action

The goal of your homepage is to compel visitors to dig deeper into your website and move them down the funnel. Include two to three calls-to-action above the fold that direct people to different stages of the buying cycle — and place them in spots that are easy to find.

These CTAs should be visually striking, ideally in a color that contrasts with the color scheme of your homepage while still fitting in with the overall design. Keep the copy brief — no more than five words — and action-oriented, so it compels visitors to click whatever you’re offering. Examples of CTA copy are “Sign up,” “Make an appointment,” or “Try it for free.”

Afterschool HQ’s website features two CTAs above the fold, both geared toward program directors who are interested in promoting their after-school programs to families on the site. The note below the longer CTA “Create Your Free Profile” gives visitors the nudge they need to create an account — the first step to becoming an Afterschool HQ provider.

4. Supporting Image

Most people are visual. Make sure to use an image (or even a short video) that clearly indicates what you offer. Use images that capture emotion, drive action, and visually tell the story you’re writing about.

To optimize your images for mobile users, use high-quality images that have a reduced file size. (HubSpot customers don’t need to worry about this, as images uploaded to HubSpot’s software are automatically compressed. Otherwise, tools like TinyPNG will do the trick.) Also, always add alt text to your images to make them more accessible to visitors who use screen readers and to take your SEO efforts up a notch.

The 4 Rivers Smokehouse homepage is a great example of emotional imagery: It features a series of short, high definition, and mouthwatering videos that play on a loop behind a simple headline, sub-headline, and primary CTA:

4 rivers smokehouse website homepage featured image with a cheese burger

5. Benefits

It’s not only important to describe what you do, but why what you do matters. Prospects want to know about the benefits of buying from you because that’s what will compel them to stick around.

Keep the copy lightweight and easy to read, and speak the language of your customers. Evernote does a great job of listing benefits on their homepage in a way that’s compelling, visually pleasing, and easy to understand:

Evernote website homepage benefits

6. Social Proof

Social proof is a powerful indicator of trust. Your product or service could be the best in the world, and it’s okay to lay that claim — it’s just that people may not believe you unless they hear it from other people, too. And that’s exactly what social proof does.

Include just a few of your best (short) quotes on the homepage, and link to case studies if applicable. Adding a name and photo gives these testimonials more credibility. Lessonly nails this on their homepage with glowing testimonials from actual clients.

Lessonly website homepage testimonials and reviews

7. Navigation

The design and content in your homepage navigation could mean the difference between a website conversion and a bounce. To decrease bounce rate, give your visitors a clear path to the pages they need right from the homepage. Make the navigation menu visible at the top of the page, and organize the links in a hierarchical structure.

No one knows your website better than those who helped design it, so be sure to conduct user tests to make sure it’s simple and intuitive for visitors to find what they’re looking for on your site. Include a search box if you can. (Read this blog post for more helpful website navigation tips.)

Here’s an example of a clear, well-structured navigation design from Slim & Husky’s Pizza Beeria homepage:

Slim and huskys website homepage navigation

8. Content Offer

To generate even more leads from your homepage, feature a really great content offer, such as a whitepaper, ebook, or guide. Folks who may not be ready to buy might rather download an offer that gives them more information about a topic they’re interested in. If you need inspiration, here are several different content types to pick from.

9. Secondary Calls-to-Action

Include secondary CTAs on your homepage to offer additional conversion opportunities for prospects who aren’t interested in your primary objective. Think of them like the contingency plan: They offer another path for visitors who are not yet ready for something as high-commitment as you’re asking.

While your primary CTAs should be above the fold, place secondary CTAs below the fold to give visitors things to click on when they scroll down. For example, below the fold on Spanx’s homepage, you’ll find three, clearly labeled calls-to-action that give folks who’ve scrolled that far a few more options to click on. These secondary CTAs are for two different types of conversions: one on the far left for $20 off and another, “shop now” to explore the online catalog.

Spanx website homepage secondary CTAs

10. Features

In addition to benefits, list some of your key features. This gives people more of an understanding of what’s provided by your products and services. Again, keep the copy light and easy to read. Dropbox for Business, for example, doesn’t shy away from showing off a features matrix right on their homepage below the fold.

dropbox for business website homepage features

11. Resources

Again, most visitors to your website won’t be ready to buy … yet. For folks who are looking for more information, offer a link to a resource center where they can browse relevant information. Not only does this keep them on your webpage for longer, but it also helps you establish your credibility as a thought leader in your industry.

Lovesac adds a resources link to the footer below the fold. Notice how each of these secondary CTAs cover multiple stages in the buying cycle: a credit card link to help customers buy their furniture easily, a fabric swatch guide for those who are still looking for the perfect color before making a purchase, and an online catalog for people who are in the market for new furniture but aren’t yet ready to make a purchase.

lovesac website homepage with resources and CTAs in the footer

12. Success Indicators

In addition to customer success stories, both awards and recognition can also help inspire a good first impression. Is your company a critically acclaimed restaurant? Were you voted best new app this year? Let your homepage visitors know of your accomplishments. Like social proof, it’ll give your business more credibility to those who don’t know you.

On Calendly’s homepage, for example, you’ll find the names of famous organizations that have recognized them, like Gartner and Dropbox.

Calendly website homepage

A Homepage Worth Visiting

The homepage of your site is the first introduction each visitor will have to your business. Before they make up their mind to become a customer, they’ll review your homepage to get an idea of what you sell, why that matters to them, and how they can benefit from what you have to offer.

Make a brilliant first impression with a homepage that incorporates the elements outlined above. And for more inspiration, check out stunning examples of homepages by downloading the free lookbook below.

Spread the love
Read Our Reviews

Dynamic Designs NW, LLC is rated 4.92 out of 5.0 stars based on 12 review(s).

---

Thanks Stacie! Can't say enough good things about Dynamic Design Solutions, they helped me put together a logo, website and alot more! Highly recommended!

- Adrian

---

The process was challenging for me, technically. I found Stacie to be patient and enjoyable to work with. In retrospect I feel I could have given her more creative liberty yet I am very satisfied with the results of our collaboration. I am now needing to become an effective manager of my new website.

- Dave Shelman

---

Stacie was so patient working with me and my schedule and many distractions. Her expertise and personality eased me through the challenges of creating an effective website. I have never been busier and the website has definitely driven more business to my shop!

- Mike Nagle

---

Stacie and her team built us the website of our dreams! They fully understood and helped refine our marketing goals, and creatively translated that into a professional website that meets all our needs and then some. Would highly recommend their services to everyone.

- Kiara

---

We went through Dynamic Designs NW for our business logo. They had fast responses, professional, and followed through with everything they promised. We highly recommend them.

- LJ Perez

---

I hired Dynamic Designs to create a branding package for my business. Their team made the process easy and fun. They're always quick to communicate and guided me through the design process. I love my logo and brand design. Highly recommend!

- Carmen Olivo

---

Very professional service throughout the entire project. Highly recommend Dynamic Designs!!

- Choncy Jones

---

For anyone with a small business trying to grow their email list, I would recommend Stacie! We started out without any knowledge of how to increase our fanbase. Stacie helped us grow our list to over 400 subscribers using Facebook ads! She is super smart and has a great team that she works with. I am so grateful that I found her and I would recommend her services.

- Jo Alexis

---

Stacie was very creative and a patient person to work with which I feel is so important to have when working on a very detailed project/website.

- Abbi Rafinski

---

I spent a lot of money trying to work with other web designers. I know I was asking a lot of them. I shared my crazy business plan and vision with them, and all I got in return was a spot on their permanent back burner. It was like flashback to high school and feelings of getting benched to make room for the 'real stars.' Then I met Stacie. She met with me in person, listened to all my crazy ideas, put those crazy ideas into action (so I could see them), and exercised a lot of patience when we had to toss a draft and start again. Now, over a year later, my business is not only up and running...it's rocking (bling, bling)! And Stacie is on the short list of people who helped me make that happen. I can't count how many times my customers smile when we meet and say, 'I love your website...it's so original.'

- Jake Wasson

---

Loved working with Stacie! She communicates well and response very quickly, seemingly always ready to assist. She has wonderfully creative ideas and a great eye for design, I’m looking for ways that I can continue to work with her. Highly recommend

- Samantha Irwin

---

I love working with Stacie! She is charming and a whiz a website building. I feel confident that she can tackle whatever changes I want to make and she makes it all look easy. I've also really enjoyed her network of professionals that she both works with and referred me to. I would recommend her.

- Jo Alexis Bronstein Mishaga