If you take a close look at the homepages of some of your favorite websites, you’ll notice a lot of them look relatively similar. At least as far as the elements they tend to include, which isn’t a coincidence. After all, website homepage design is essential to a site’s success, and this means including all of the key elements from the get-go.
It may seem ‘cookie-cutter,’ but essential aspects such as your logo and branding information, as well as your mission statement are important to include and get right. However, these are just some quick examples, and a great homepage involves many more elements in play.
In this article, we’ll introduce you to eleven of the most common elements in website homepage design, why you should include them, and how to do it the right way. Let’s talk homepages!
📚 Table of contents:
- Logo and branding elements
- A hero section including your mission statement and tagline
- A tempting call to action (CTA)
- Clear navigation menus
- Responsive tile layout
- An eye-catching color scheme
- On-brand images
- Highly-readable and engaging typography
- Social proof elements (wall of love)
- Information about your products, services, or team
- Contact information
1. Logo and branding elements
Almost every website you visit has a logo. In fact, you can probably recognize many of them through their logos alone, which tells you something about the power of branding.
Logos usually tend to show up on the top left side of your homepage since that’s where the user’s eyes are first drawn to. However, you can also center your logo within your navigation bar or the first section of the page.
Keep in mind, though – wherever you place your logo, it needs to be easy to spot, and large enough that visitors can recognize it. It also shouldn’t be overly complex in terms of design, because you’ll want to use it as a browser tab favicon as well.
If you don’t already have a logo, you can use a logo maker tool.
2. A hero section including your mission statement and tagline
A hero section is usually made up of a large image or slideshow, and it comes right below the navigation bar. The idea for the hero section is to quickly give visitors an idea of what to expect from the rest of your website.
One mistake a lot of homepages make is they only use hero sections for aesthetic purposes. In a nutshell, if you’re wasting this much screen real estate without giving any information, such as your mission statement and tagline, you’re doing something wrong.
3. A tempting call to action (CTA)
Ultimately, every website has a goal, which usually involves conversions. This can mean getting users to purchase something from you, give you their email, and plenty more.
The easiest way to get visitors to do something is by asking them, which is where CTAs come in. This can be a button or just plain text, but whichever approach you take, it needs to stand out from the rest of the elements within your homepage.
One easy way to do this is by using contrasting colors. As you can see in the example above, the CTA buttons use a dark-ish blue color scheme, set against an off-white background. The color of the CTAs also happens to match the color of the logo, which is a nice added touch for branding consistency.
As a final point on this, be mindful of your choice of words. You don’t have a lot of space in that tiny window. So, you need to do your best to think about what will be more likely to elicit a “click” response from the reader.
4. Clear navigation menus
Unless you’re working on a one-page design, visitors need menus to move around your website. A menu should be the first thing they see on your homepage and it should be both highly readable and easy to use. Menus also often house your logo and other elements, which makes them one of the more important homepage web design elements.
For ecommerce stores with lots of product pages or content heavy sites with tons of posts, you need to get a bit more creative. One option is to use a double menu and/or mega menu. In the example above, we can see both of them in action. The menu on the top left is an example of a mega menu. There are only three choices. But when you hover over any one of them, they each open up a drop down menu of their own.
Then the second menu, the one underneath the main banner image, is organized by product categories. If you’re selling different kinds of products, then this is an excellent way to quickly align your visitor’s search intent with what you have to offer.
For simpler websites with less pages, you don’t need to be this sophisticated. Just make sure that visitors can see the menu right away and that it’s organized and labeled well.
5. Responsive tile layout
Another very trendy homepage design element making the rounds this year, is the use of highly responsive tiles that effortlessly adjust to any screen size and manage to look great on all of them. The globally famous Swedish furniture company IKEA makes perfect use of this tile layout on their homepage.
You can see for yourself in the mockup image above that users on mobile screens don’t need to awkwardly scroll from side-to-side, in order to see what’s on the adjacent tile. Once the screen size reaches a certain threshold, the adjacent tile automatically moves below.
The tiles themselves also create an easy, almost toddler-like form of organization, where the reader can easily shift their focus from one topic to another without feeling like the screen is too busy.
6. An eye-catching color scheme
One key aspect of website homepage design is the colors you use. Colors aren’t just about style – they can help guide the eye, making for a more pleasant experience, and will influence people’s thoughts about your brand. For example, Rihanna’s homepage uses an interactive color scheme where the default color of everything is black and white, but then as you scroll from image to image, whichever image your mouse cursor is on, turns from black and white to full color.
While Rihanna’s website is quite creative, usually we recommend just picking out a few colors that work well together and using them throughout your website. For some elements, such as CTAs and menus, you’ll want to make sure to use colors that pop, so they stand out even more.
7. On-brand images
Images make up a considerable portion of most website’s designs, including homepages. The images you choose should never be filler – they need to give visitors an idea of what you’re offering them and what your brand stands for.
This means avoiding cookie-cutter stock images unless they’re necessary. For example, if your website represents a restaurant, then show images of the actual dishes that you make. You want to set an accurate expectation for potential new customers, but also trigger foodie nostalgia in the minds’ of your previous customers if they visit your site. They’ll be more likely to place an order for that delicious-whatever-they-had if they see it, than if you just put some generic photo of the same type of food.
Overall, regardless of your industry, it’s about being authentic with your audience. If it makes sense for your site, take plenty of pictures and try to feature them throughout your entire homepage, using galleries if you prefer. Your hero section, for example, is the perfect place to start.
While using images is great, you’ll also want to optimize them to make sure they don’t slow down your site. If you’re using WordPress, a tool like Optimole can automatically handle image optimization for you.
8. Highly-readable and engaging typography
You might not think your choice of font matters all too much, but it’s more important than most people imagine. The right fonts can make your website more accessible by virtue of being easier to read. Plus, there’s always the matter of style as you can use fonts as a visual element.
The fonts you use is a matter of personal style. However, we recommend you stick to classic designs that are easy to read, and save the funkier styles for your logo and other branding elements. Keep in mind – whichever fonts you use on your homepage will re-appear throughout your site, so pick them carefully!
9. Social proof elements (“wall of love”)
Ideally, your homepage should inspire trust in your visitors, particularly if you’re running a business. A really effective way to achieve this, is to show users that you’ve gotten good recommendations from past customers.
In practice, homepages incorporate this element via various forms of social proof, such as testimonials and reviews. One method in particular that’s really trending right now – which you can see above – is called the “wall of love.”
If you want to incorporate social proof on your homepage and you have more than one or two testimonials, then we recommend trying this “wall of love” approach. Otherwise, for newer businesses that do only have a few testimonials, it might be better to go with a more classic “featured testimonial(s)” section, where you highlight the positive experience of one or two particular customer(s).
10. Information about your products, services, or team
Whether you’re selling physical products, digital products, or some kind of services, it’s always a great idea to help visitors know what it is that you can offer them. The best place to include a bit of information about that is on your homepage, so no one misses it.
You can also add a dedicated Products or Services page with more information, but providing at least an overview directly on your homepage is always a nice touch. Plus, it can make your homepage look very professional as in the example you see above.
If you’re using your website to sell specific kinds of services, such as personal training or different kinds of consulting, then having an About section might be a better approach. You can still squeeze in a mention of your services, but this way your audience will be able to see who it is they’ll be working with.
11. Contact information
Whatever type of website you’re running, there’s one thing your homepage can’t forget, and that’s contact information. For businesses, you can go as far as including a phone number and address alongside email. Some homepages add all this information on the main navigation bar, to make it easier to find.
If you’re not running a business site, a contact form is probably the best approach. With it, visitors will be able to contact you quickly, which may help you land more conversions. As for where to add it, you can usually find contact forms at the end of your homepage or on their own pages.
Create a better website homepage design today 🚀
A lot of homepages share similar designs, although there’s a logical reason for it. In short, it’s important to include all key homepage elements within your own designs. After seeing your homepage, users should know precisely what the purpose of your site is and how it can help them.
Some elements of excellent website homepage design include your logo, branding information, social proof, and an intro to your team and products. However, there’s much more you can – and should – cover if you want an amazing homepage.
Do you have any questions about best practices for website homepage design? Let’s talk about them in the comments section below!
Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!