Homepage Design: How to make your homepage a success

8 Min.
Homepage Design Tips

The home page or homepage is for many the sanctuary of a website. It should serve numerous purposes and serve different target groups. And best of all, at the same time. What do a good address and a target-oriented homepage design look like? Here are the most important tips in an overview.

I'm talking about businesses below, but the principles apply in many parts to a simple blog, your special interestsite or your band's as well. The homepage should:

  • Show the company, the agency or the service from the best site
  • Simultaneously map all areas of business activity
  • Show that the company is up-to-date, through news and connecting Facebook, Instagram, etc.
  • But also the storytelling with the story of the founders should fit
  • The newsletter subscription must be visible at all times

Likewise, you usually want to map new job offers, directions, your address, all phone numbers with contacts. And so on.

optimize images homepage
A homepage according to the motto: A picture says more than a thousand words

You can see where this is going: The home page can't and shouldn't do it all, please. You have to approach the matter conceptually and strategically and think about exactly what should actually be displayed there and why. My approach is certainly not the only one, and may not even be the best one for your business. But I will try to justify any pointers. However, I welcome other opinions and suggestions in the comments as well.

The home page is a landing page

Like all sites of 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've even collected data about your homepage. Where do the people who land on your homepage come from? What do they want to achieve? How can you help them do that? What goal does the landing page actually have for you? What information do you want to convey?

Analysis of your website

Collecting numbers about your homepage and your 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 through Google, through your marketing activities (this could be a business card, for example) or through the social media profiles on your homepage. These visitors may not really know what your business does. However, they are obviously looking for a business that offers your services or information. Otherwise, they wouldn't bother to visit your home page.

In many cases, they might read an article on your website that you shared on Instagram, for example, and then go to the homepage. To see what the 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?

Sadly, this is often forgotten. The first thing a homepage has to answer for its visitors is: "Am I in the right place here? Because these come from somewhere, land on your site - and know nothing yet. They need confirmation right at the beginning that they have landed on the right site . This is like a little 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: Three to four sentences that briefly but accurately 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 at a click.

Homepage Basic Text
The home page of a practice with sober introductory text

This is where I often get the most headwind: 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. So that they can see what a great global company we are.

About the big sliders: They do not work. Many have already written about this. The site Should I use a carousel? is a good start. Also the statement "this is important, we put it in the sidebar!" doesn't work anymore, because the sidebar is simply not up to date - and doesn'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?". How can the level of emotions be brought in as well?

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 possibilities:

  • About the text
  • About the design
  • About pictures or videos

Speech about the text

People use a website very differently. This means that you don't know how they find something on your website. For example, the first thing they use is the menu, search, then scan the headings or links on your site . However, the most common first anchor point they fixate on is the first text on the site that gives you information. Numerous studies have shown this. You can "design" this text very differently with the help of the address and the tonality.

"I'm Phillip Roth, I'm making a website for your business" sounds different than "Hey, I'm a web design influencer optimizing your crazy UX for top rising 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.

Addressing via the design

An appealing design not only conveys professionalism, it also touches emotionally. See our article on the basic principles for harmonious web design. Colours, font selection, 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

Pictures or videos

The image of your company 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 practice? That's what your visitors want to know and see. They want to find out: "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 likeable?".

All this can be conveyed in milliseconds with one or more beautiful images. But for that, the images have to be authentic. Because what you show of yourself and your team has to be real nowadays. Otherwise, people won't feel taken seriously. No one wants to see the stock photo with the strange blonde telephone operator anymore. Just as little as a strange meeting room filled with smiling but "fake" people.

Maybe you even have a good explainer video that sums up your services in 30 seconds. Or maybe you have a video running in the background that shows off your fancy hotel and the beautiful surrounding landscape. Anything that supports your corporate identity and the associated message is good!

Homepage Color Concept
Homepage with appealing photos and uniform colour concept

What next?

So now we have the attention of the visitors. They now know: "I am in the right place, I feel comfortable. What follows now is a strategic decision: Now you can deepen the information that you have only briefly touched on here. Now you can pursue - besides the first impression - your second goal.

It makes sense at this point to think about what this goal actually is. See also the associated content strategy. Because if the visitors are not fixated on your menu or the information search, then they start to scroll. So what do you offer them next?

The possibilities are manifold:

  • Tell a story
  • Deepen the information about your service offer
  • Show great events, engagements or news
  • Offer a tool for booking appointments, then they don't always call you directly
  • I personally sell the most through my newsletter, I offer it in numerous places on the website
  • Refer to your jobsite , if you are looking for new employees.
  • Show great reviews

As you can see, there are now hundreds of ways to further design the home page. And there's certainly no standard recipe for leading your customers to the desired conclusion. You'll have to try it out. However, keep in mind that your home page or landing page doesn't get infinite attention. Very rarely does anyone scroll 27 meters - and still absorb all the information.

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

For this concept I like to use so-called wireframes or mockups. That is, you sort in simple rectangles with gray frames the contents of the home page. Without real content, without design. You can do this on a sheet of paper or with programs like Adobe XD, Sketch, Photoshop, InDesign or even in Powerpoint. As I said, leave the design out of this for now. At this point, you want to know, for example:

  • 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 that you've set your secondary goal and given the User:in all the info you could fit into the limited space, you should clarify your goal. The best place to do this is at the end of site . As I said: There you can highlight the most important information again, place the call to action or invite users to contact you with a picture of yourself - next to your contact details. Whatever your second target of site is: Now you can place it before your footer comes. Your start page is - as mentioned at the beginning - a landing page.

The footer can again function as a secondary navigation, for example if you want to offer more information there. Many also like to look at your imprint, whether you are a serious provider. But be careful! Too many elements in your footer can distract from your actual goal. If, for example, the registration for the newsletter is in there, but you only write a newsletter once a year, then this is perhaps less purposeful.

Final thoughts

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

Define your secondary goal precisely. Lead the visitors there. If possible, check with analytics and A/B tests whether this works. And what works even better. In my opinion, you can't make a homepage much more perfect than that.

As you can see from the sites I created (see screenshots) in this post, even my advice didn't always lead to the result I wanted :-; I'm happy about new insights from you, just for that reason, in the comments! Maybe you have found the perfect formula for your home page?

Your questions about the post

You have questions for Phillip? Or a tip for the design of the homepage? We are looking forward to your comment. You want to be informed about new articles about WordPress and webdesign? Then follow RAIDBOXES on Twitter, Facebook, LinkedIn or via 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 *.