Homepage Design: How to Make your Homepage a Success

8 Min.
Homepage Design Tips

The home page or start page is for many the sanctuary of a website. It's supposed to fulfill various purposes and serve different target groups. Preferably at the same time. But what does suitable and target-oriented homepage design look like? An overview of the most important tips for your home page.

I mostly talk about businesses in this guide but many principles apply to simple blogs, special interest sites and even band websites. Let's first take a moment to consider what we usually expect a home page to do:

  • show the company, agency or service provider in the best light,
  • represent all areas of the business at once,
  • reflect how up to the minute the company is with a new area and connections to Facebook, Instagram etc.,
  • include a story about the founders' history,
  • and have a newsletter signup option available at all times.

Likewise, you probably want space for new job offers, directions, your address, all contacts and their phone numbers. The list could go on and on.

optimize images homepage
A home page true to the motto: a picture is worth a thousand words

I think you can tell where this is going. A home page really can't, and shouldn't, do everything. You have to tackle your home page with a concept and a strategy and really think about exactly what should be displayed and why. My approach certainly isn't the only one out there and may not even be the best one for your business. But I'll try and give reasons for all the pointers I recommend. And I invite you to share other opinions and suggestions in the comments as well.

The home page is a landing page

Like all sites your website, the home page is a landing page. See our post on how to best design landing pages. Once you realize that, you've already accomplished a lot. Because then you're rethinking.

Ideally, you may even collected data about your home page. Where do the people who land on your home page come from? What do they want to achieve? How can you help them achieve it? What goal does your landing page actually have? What information do you want to convey?

Analysis of your website

Collecting numbers about your home page and other subpages is extremely important. After all, it's the only way to find out if your content and design are working. Read our guides on content KPIs, content hub and content testing.

Where do your visitors come from?

In most cases, users come via Google, either through your marketing activities (e.g. a business card) or your social media profiles from your home page. These visitors may not really yet know exactly what your business does. However, they're obviously looking for a business that offers your services or information. Otherwise, they wouldn't bother visiting your site.

They might read an article on your website that you shared on Instagram, for example, and only then go to the home page. To find out what your company actually does. Now you have to offer something to the users! And the first thing is to answer the question:

What does the website or company do anyway?

Many companies and website owners sadly forget this point. Remember that the first thing a home page has to answer for its visitors is: "am I in the right place here?". The visitors come from somewhere, land on your site - and know nothing. They need confirmation right away that they've landed on the right page. This is like a little bit of candy at the beginning of their user experience (UX):

You've come to the right place. You can breathe easy and relax and get your information!

My suggestion here is to include three to four sentences that briefly, but precisely, explain what you offer. With a link underneath if you want to know more. That's what the internet is for - to get more information with a click.

Homepage Basic Text
The home page of a doctor's office with a clear introductory text

This is where I often get the most pushback. Don't you first have to get people emotionally involved so that they stay. Like, "We'll put a huge picture on the homepage and then let the news roll in via a slider. Then the visitors will see what a great global company we are."

Let's clear up something about the big sliders: they don't work. Many people have written enough about this already. The site Should I use a carousel? is a good start. Also the statement "this is important, we'll put it in the sidebar!" is no longer valid. Because sidebars are simply not up to date - and don't fit well with responsive web design.

Emotional appeal

I give a resounding "yes" to addressing the target group on an emotional level. This not only binds your customers on a factual level, it also appeals to the brain in a completely different way. In my opinion, however, the first message should still be "what do you actually do?". So how can we bring in emotions at this level too?

This is a strategic decision that should be based on your company's corporate identity (CI). Your CI includes how you address your target group. There are basically three ways to appeal to your potential customers:

  • via the text
  • via the design
  • via images or video

Speak to customers through texts

People use websites in very different ways. This means you don't know how they find something on your website. They may, for example, first use the menu, the search function, and then scan the headings or links on your site. However, the most common first anchor point visitors fixate on is the first text on the site that provides information. Numerous studies have shown this. You can "design" this text very differently depending on your customer address and tone.

"I'm Phillip Roth, I can make a website for your business" sounds different than "Hey, I'm a web design influencer optimizing your wild UX for top KPIs!" Take a good look at your target audience and adjust your tone of voice accordingly. It's as much a part of your corporate identity as your design.

Speak to customers through design

An appealing design not only conveys professionalism, it also touches people emotionally. See our article on the basic principles for harmonious web design. Colors, fonts, design elements - all of these can convey confidence, joy, coolness, craziness and many other emotions to visitors. Corporate design is part of the overall message your company wants to convey. Trust-building elements such as certificates can bring further bonus points.

Homepage Images Emotions
Home page with emotional appeal and introductory text

Speak to customers via images or videos

Your company's image is also shaped by the visual language. Are you a global company with 600 employees and cool skyscrapers in Shanghai or a small manufactory with a nice workshop? Are you a coach with beautiful workshop rooms or a doctor with a chic office? That's what your visitors want to know and see. They're asking themselves: "Can I feel comfortable there?", "Does the product appeal to me?", "Is this a company I might apply to?", "Do normal people work there?" "Are they friendly?".

All of this can be conveyed in milliseconds with one or more beautiful images. But the images have to be authentic. What you show of yourself and your team nowadays has to be real. Otherwise, people won't feel taken seriously. No one wants to see that stock photo with the one blonde telephone operator anymore. Or the meeting room full of people with fake smiles on their faces.

You could maybe even produce a good video that sums up your services in 30 seconds. Or have a video running in the background showing off your boutique hotel and the beautiful surrounding landscape. Anything that supports your corporate identity and the associated message is ideal!

Homepage Color Concept
A home page with appealing images and a consistent color scheme

What next?

So, now you've got the attention of your visitors. They know: "I'm in the right place, I feel comfortable". What follows next is a strategic decision where can deepen the information you have only briefly touched on here. Now you can pursue - accompanied by the first impression - your second goal.

It makes sense at this point to think about what this goal actually is. Keep your associated content strategy in mind. If visitors aren't fixated on your menu or search function, they'll start to scroll. So what are you going to offer them now?

You have plenty of options to choose from:

  • Tell a story
  • Provide further information about your services
  • Show great events, engagements or news
  • Offer a tool for booking appointments so your visitors don't need to call
  • Display the newsletter signup form (I personally sell the most through my newsletter so I offer the signup in various place on my website)
  • Refer to your jobs page if you're looking for new employees
  • Show great reviews
  • … and so on

As you can see, there are hundreds of ways to further design the home page. And there's certainly no standard recipe for leading your customers to what you want to achieve. You'll have to try it out. Keep in mind, however, that your home page or landing page doesn't get infinite attention. Very rarely is someone going to scroll 27 times - and still take in all the information.

Homepage Testimonials
A home page with a quote and the services offered

For this concept, I like to use so-called wireframes or mockups where I sort the content of the home page into simple rectangles with gray frames. You can do this on a sheet of paper or with programs like Adobe XD, Sketch, Photoshop, InDesign or even Powerpoint. As I said, don't consider the design for now. At this point, you want to know:

  • What should definitely go on the home page?
  • What doesn't need to go there?
  • Is it all getting to be too much?
  • Can the target be achieved with the available space?
  • Do the visitors see the call to action early enough?
Mockup Wireframes Adobe XD
Wireframes in Adobe XD

Get to the point!

Now you've set your secondary goal and given the users all the info you could fit into the limited space, you should explain your goal. The best place to do this is at the bottom of the page. You can highlight the most important information again, place the call to action or invite users to contact you with an image of yourself next to your contact details. Whatever your second target of your home page is, you can place it here ahead of your footer. Your start page is - as mentioned at the beginning - a landing page.

The footer can again function as a secondary navigation, perhaps if you want to offer more information there. Many visitors will also take a glance at your legal notice to assess whether you're a legitime business. But be careful! Too many elements in your footer can distract from your actual goal. If you include your newsletter registration here, for example, but only send one email a year - is this a worthwhile use of the space?

Final thoughts

Think of your home page as a landing page. Give your visitors the feeling that they've landed on the right page. Reinforce this feeling with a target group-oriented address, chic design and authentic images.

Define your secondary goal precisely. Lead the visitors there. If possible, check with analytics and A/B tests whether your approach works and if you can improve it. I believe that's the perfect way to create a home page.

As you can see from the screenshots of the pages I've created in this guide, following my own advice didn't always lead to the desired result. So I'm really looking forward to you sharing new insights in the comments! Perhaps you've already found the perfect formula for your home page?

Your questions about article

Do you have questions for Phillip? Or some home page design tips? Please leave us a comment. Do you want to hear about the latest articles on WordPress and web design? Follow RAIDBOXES on Twitter, Facebook, LinkedIn or sign up to our newsletter.

Phillip is a freelance designer and has been conceptualizing, designing, creating and maintaining accessible WordPress websites for his clients in Cologne since 2011. For many years he co-organized WordCamp Europe and other local WordCamps. As a communication designer, Phillip also likes to design logos, office stationary and advertising material, including trade fair stands.

Comments on this article

Post a comment

Your email address will not be published. Required fields are marked with *.