Homepage Design Tips

Homepage Design: How to Make your Homepage a Success

For many, the homepage is the sanctuary of a website. It should fulfil numerous purposes and serve different target groups. And preferably at the same time. What do a good address and a target-oriented homepage design look like? Here is an overview of the most important tips.

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.

"*" indicates required fields

Consent*
This field is for validation and should not be changed.

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 did your visitors come from?

In most cases, users come to your website via Google, your marketing activities (e.g. a business card) or the social media profiles on your homepage. These visitors may not really know what your business does. But they are obviously looking for a company that offers your services or information. Otherwise, they wouldn't bother to visit your homepage.

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 company do at all?

Sadly, this is actually often forgotten. The first thing a homepage has to answer to the visitors is: "Am I even right here?". Because they come from somewhere, land on your WordPress website - and don't know anything yet. They need confirmation right at the beginning that they have landed on the right site . It's 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 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 headwind: You first have to get people emotionally involved so that they stay. It's 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 don't work. Many have already written about this. The website Should I use a carousel? is a good start. The statement "that's important, we'll put it in the sidebar!" is unfortunately no longer possible, because the sidebar is simply no longer up-to-date - and is not compatible with responsive web design.

Emotional appeal

I give a resounding "yes" to addressing the target group on an emotional level. This not only engages 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 emotional level be added?

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 a website very differently. This means that you don't know how they find something on your website. For example, they first use the menu, the search, then scan the headings or the links on your WordPress website. However, the most common first anchor point they fix is the first text on the website that gives you information. Numerous studies have shown this. You can "shape" this text very differently with the help of the address and the 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 this can be conveyed in milliseconds with one or more beautiful images. But to do that, the images have to be authentic. Because what you show of yourself and your team has to be genuine these days. Otherwise, people won't feel taken seriously. No one wants to see a stock photo of a blonde telephone operator. Just as little as a strange meeting room filled with smiling, but "fake" people.

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 we have the attention of the visitors. These now know: "I am right here, I feel comfortable." What follows now is a strategic decision: Now you can deepen the information that you are, here only briefly touched upon. Now you can pursue - in addition to the first impression - your second goal.

At this point, it makes sense to think about what this goal actually is. See also the associated content strategy. Because if the visitors aren't fixated on your menu or information search, they'll start scrolling. So what do you offer them next?

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 now hundreds of ways to further design the homepage. And there is certainly no standard recipe for leading your customers to the desired conclusion. You have to try it out. However, keep in mind that your start page or landing page does not get infinite attention. Hardly anyone scrolls 27 metres - and still absorbs 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. That is, you sort the contents of the start page into simple rectangles with grey frames. Without real content, without design. You can do this on a piece of paper or with programmes like Adobe XD, Sketch, Photoshop, InDesign or in PowerPoint. As I said, leave the design out of it 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 soon enough?
Mockup Wireframes Adobe XD
Wireframes in Adobe XD

Get to the point!

Now that you have set your secondary goal and given the users all the information you can fit into the limited space, you should clarify your goal. This is best done at the end of site. As I said, you can highlight the most important information there, place the call to action or use your picture - next to your contact details - to invite users to contact you. Whatever your second target of site is: now you can place it before your footer. Your start page is - as mentioned before - a landing page.

The footer can also function as a secondary navigation, for example if you want to offer additional information there. Many people also like to look at your imprint to see if you are a reputable provider. But be careful! Too many elements in your footer can distract from your actual goal. For example, if there is a registration for the newsletter, but you only write a newsletter once a year, then this may be less effective.

"*" indicates required fields

Consent*
This field is for validation and should not be changed.

Conclusion on homepage design

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. Guide visitors there. If possible, use analytics and A/B testing to see if it works. And what might work even better. In my opinion, you can't make a home page much more perfect than that.

As you can see from the pages I created (see screenshots) in this post, even my advice didn't always lead to the result I wanted. I'm happy to hear new insights from you, in the comments, for that very reason! Maybe you have found the perfect formula for your homepage?

Your questions about article

Do you have questions for Phillip? Or a tip for the design of the homepage? We look forward to your comment. You want to be informed about new postsaround WordPress and web design? Then follow Raidboxes on Twitter, Facebook, LinkedIn or via our newsletter.

Did you like the article?

Your rating helps us improve our future content.

Post a comment

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