How to design a website homepage

August 11th, 2021
HomePage Wireframe Title Image

Your homepage is like a window display. It’s perfect for catching the attention of your potential customers who come across your website.

Read our tips on how to design a wonderful homepage that makes passers-by look inside and search for more.

Some visitors know your business already. When they enter your site they know exactly where to click to find news and their favorites. They take time to browse and dig deep for the new stuff.

Others just come from general search results. They quickly scan your homepage for headlines and distinctive clickable buttons. They’re on a mission, they don’t have time for figuring out how your website works. Or even reading the copy texts and longer headlines.

Instead of reading, they scan. Therefore, if you won’t provide them with the answers they’re looking for, they’re gone within a few seconds.

This might sound a bit scary, but it’s not. This is when the fun begins! You will only benefit from your website once you design the homepage thoughtfully. Let’s check out how!

The benefits of a great homepage design

1. A well designed homepage tells your customers who you are and how you can help them.

Welcome your visitors by clearly telling them who you are, what you can do for them, and your superhero power.

Surely you’ve already heard of a unique selling proposition (USP), in other words, the thing that makes your business better than your competition. Make crystal clear why you are superior to others right away.

The more clear your homepage is, the better your visitors will understand you and, consequently, the higher your chances to convert them will be.

2. A well designed homepage lets you build your brand.

A homepage has an important impact on your business. That’s why you should make it look professional. Keep your brand identity strong so your visitors instantly recognize you the second they land on your homepage.

Chances are you already have your logo, tagline, brand colors, and visuals ready. If you don’t have them yet, now is the time. Use them on your website so your visitors can instantly connect the website with your offline presence.

3. A well designed homepage puts visitors on the path to conversion.

A clear homepage successfully engages visitors with the right bits of information, strategically placed CTAs, and other navigation options.

It leads the visitor deeper into the page, leaving a memorable experience or directly converting them into your new customers.

Consider your customer’s journey

The customer’s journey describes the path of steps that your customer goes through from landing on your homepage to making the purchase, and beyond.

Knowing this journey will help you to design your homepage and, consequently, all your other pages better.

Try to imagine your average customer

  • Who are they?
  • What is their goal?
  • What do they need when they enter your page?
  • How can you fulfill their needs?

And how can you fulfill those needs without making the customer work hard for the solution when they have no time for that?

Once you have a specific persona in your mind, you are ready for designing. Give them a name and avatar to make it feel even more personal.

Example of a User Persona

Now, try to imagine your webpage visitor’s journey as your homepage is a real store.

Accompany them from the entrance until the check out.

Address all their questions.

Make the homepage big enough to satisfy all their queries. (But don’t overdo it. You can still use a “read more” button and send the visitor to another page.)

In short, make it a pleasant experience so they will come back.

Pro tip: Use the chatbox to imitate a real sales process. This way, instead of chatting with your customer face-to-face, you will communicate with them in real-time via live chat.

Learn how to install a live chat window here.

What is an effective homepage layout?

The average homepage is divided into two sections – above the fold and below the fold.

These terms were coined in the newspaper industry, where the most important stories were placed on the top half of the first page. Therefore, everyone who passed a newsstand would see the top stories. This practice is still efficient, so it’s used in web design as well.

The Fold Scheme

The Fold Scheme

Homepage design elements to keep above the fold

One of the most important parts of your homepage is undeniably the content that appears on the top half of the front page – or, put differently, above the fold. So what elements should be placed here?

Clear navigation

Be as efficient as possible while creating the navigation. Remember, the more clicks away from the goal, the more time spent on the way to conversion.

Include only the most necessary pages in your main navigation and put the rest, like Terms & Conditions or Privacy Policy, into the footer.

Don’t hide all your services or product categories under a bland label – name it directly, if possible.

Also, don’t overload your visitors with too many options.

Consider these examples: Imagine you are now looking for some cacti for your collection. Which navigation makes it quicker and easier to find the cacti offer for you?

Example of a not-that-clear navigation

An Examle of a not-that-clear navigation

An Example of a clearer navigation

An Example of a clearer navigation

Hero section with strong visuals

Another well approved feature is called the hero section. Usually, it’s an oversized banner image at the top of a website.

Here, clearly state your mission – who you are, what you do, how can you help visitors.

Be as clear as possible, never vague.

Keep it short and to the point.

Think of it as a billboard on the highway. You need to get the attention of fast moving drivers and deliver your message clearly within seconds.

Also, use the best images possible to present yourself. People react much sooner to pleasing visuals than to the text.

Don’t repel them with low-quality pictures from some photo bank. Be your best self.

Make your hero section clear and eye-catching

An Overcrowded Hero Section

Clear call-to-action button (CTA) for committed visitors

Committed visitors are those who are likely to react to the call to action as soon as they see it as they are already determined to buy the product.

An Example of not-Clear CTA

An Example of Unclear CTA

An Example of a Clear Call-to-Action button

An Example of a Clear Call-to-Action button

On the other hand, non-committed visitors will need another CTA later on in the page, one that is placed below the right amount of copy.

Again, think of the customer’s journey – place the CTA at the point where they are educated enough about your products or services and encouraged by the accompanying content to convert. This leads us below the fold!

Homepage elements to put below the fold

So you scrolled down and found yourself below the fold. This is the place that doesn’t get read either.

Remember, people don’t read, they scan. How to best deal with this fact?

Design the rest of the page as a launchpad

Make the homepage the launchpad which easily points your visitors to other important pages they might be looking for. Don’t give away everything at once.

Use just snippets of the content published on the other pages and prompt the visitors to click and learn more about your product, services, company, etc. by clicking on a specific button or link. Make them dig deep.

Design Your Homepage As a Launchpad

Design Your Homepage As a Launchpad

Back up with social proof

Collect the testimonials from your satisfied customers or showcase your client’s logo. Were your services featured in prominent magazines? Show it proudly!

Show the testimonials and references from your customers

Show the testimonials and references from your customers

Homepage design best practices

Great sites use conventions because the conventions work.

People want your site to be like the others. That’s why the sites are similar, which is not necessarily a bad thing.

For example, people expect the logo in the top left to lead back to the homepage. Further, they also expect contact information in the top right.

This way they know how to operate the website immediately without too much thinking about its functionality. Which leaves them enough cognitive capacity to think about your product or services instead. Win-win.

An Example of non-conventional homepage layout

An Example of non-conventional homepage layout

Don’t overdo it

Remember Coco Channel: always take off the last accessory you put on. The same goes for all the buttons, copy texts, videos, gifs, memes, and titles you just added.

Show only the important stuff. Leave some content for the other pages.

An Example of over-Crowded Website

An Example of over-crowded Website

Make CTA attractive and clear

Choose contrasting colors for the button against the background, so it stands out. Use short but self-explanatory texts. Don’t leave space for guessing what the button does or the visitor asking themselves: “should I click it at all”.

Less is more

To remind you once again, people don’t read. They scan. Transfer important messages to them in the fewest words possible.

Yes, they are interested in your story, but only if the story is a maximum of two sentences long.

Choose really good pictures or videos

Quality matters. It immediately helps you also to stand out and build your brand. Plus, keep the size of the file in mind.

Preferably stay under 600 kB for the hero image and 250 kB for the other ones.

Use the visual hierarchy properly

There are titles, subtitles, paragraphs, and buttons. Therefore, always use the same type of formatting for equally important content. Don’t confuse your visitors.

The Worst Website Ever.

The World’s Worst Website Ever

Avoid creating false footers

People tend to react to the darker section of the website as if it’s the end. They won’t scroll down as there should be no important content at the very bottom of the page. Again, don’t confuse your visitors with false bottoms.

Beware of false footers

Beware of false footers – the Black Section in the Middle

Key takeaways on how to design the homepage of a website

  • First impressions matter. Be professional. Use quality images and pleasant colors.

  • Visitors on a mission don’t read, they scan. Keep the copy texts as short and concise as possible.

  • Make CTAs attractive and irresistible to click by choosing the right color and on-point words.

  • State clearly who you are and what you do. Use the hero section for this.

  • Convention works. Most sites use the same structure simply because it works and it is expected by visitors. Benefit from it. Don’t confuse your visitors.

  • Don’t overdo it. Show only what’s necessary.

Do you want to design all your pages, not just your homepage? Try the step-by-step guide.