As someone who has spent the past few years to build websites and help companies to promote their digital presence, I saw first -hand how overlooked the homepage can be. However, it is the most visited page on your entire website. The virtual front door, which welcomes (or turns).
Many companies are fighting here because they treat the homepage like a uniform target page. But your homepage has a much bigger task to do. It has to lead visitors with all areas, interests and traffic sources to the next best step.
This means that it has to be designed on purpose, not guessing.
If I work on websites and what I should use specifically on the homepage, I always look at three non-negotable:
- Does it attract visitors and hook quickly?
- Is it clear about who they are and what they offer?
- Does it lead you to take measures (without being intrusive)?
This is the formula for a homepage that occurs. If you are serious that your homepage works harder for you, make sure that the following must-have elements are available.
What you should include in your website -homepage design
1. Headline
On average, users usually scan websites within 15 seconds. This is such a small window to tell visitors what their company has to offer. Therefore, I always decide to place the heading, the Unthehochzeile and a clear CTA directly in the hero department-it is first-class real estate to quickly convey your message. Your heading may be just a few words, but it is one of the most important copies on your website.
When I work on website projects, I have learned that trying to please everyone with a single heading is a lost game. Your homepage attracts a wide range of visitors with different backgrounds, needs and levels of consciousness. But the truth is that their heading only has to resonate with the third of their audience, which most likely love what they offer. These are the people with whom you want to connect immediately.
That’s why I always strive for cleverness.
A heading should be simple, direct and immediately tell the visitors what it is for them. One of my favorite examples is Dropbox’s homepage: “Find everything. Protect everything.” There is no fluff, no jargon. You don’t have to think twice about what Dropbox is doing. This type of clarity keeps people on their website.
Over the years I have seen how too many companies rethink their headlines – tried to sound innovative or courageous – when what really works is clear and human. A well -written heading can provide strong lifting as a whole sales of marketing copy if you concentrate on the needs of the visitor.
Pro tip: One way to simplify this process for me and my customers is the use Drift Kings Media’s free drag-and-drop website.. It is a user -friendly tool with which you can create a homepage that adapts to the requirements of your audience without any code. I like it because I have control over layout and river while I still left space to optimize when traffic behavior changes.
2. Sub headline
In your sub -line you can add a small context to your heading. Consider it as the quick follow-up that explains what you actually do. It is not the right place to be vague or rethink it.
The best way to land it is to call a problem with which your audience has to do and how you can solve it.
A brand that does it well is Loosely. In her heading it says: “Where to work”, which is wide, but your sub-head line becomes specific: “Bring your employees, projects, apps and AI agents together.” In just a few words, they described exactly what they offer and why it is important to busy teams. The video of the slack app that is used also increases the clarity of what your product actually offers and how it works.
When I work on websites, I always recommend using this room to address a real pain point. If you don’t just list a function, explain how it makes life easier for your users. In this way, they transform a heading and a sub-head line into a mighty combination.
3 .. primary calls
The first thing I think about before I immerse yourself in the website should do the user. What measures do I have to take? This is where uncomplicated, easy -to -find calls (CTAs) come into play.
I recommend having at least two to three CTAs over the fold and leading the visitors into different parts of the purchase trip. Personally, I like to put at least one in the header and one in the hero department. Some people may be willing to register today, while others just browse. You should meet your CTAs where you are – and you have to take off.
A good example of this in action is the Afterschool HQ website. Exactly in the head you have a CTA that has geared to program directors to advertise your activities after the school, on the “start” of which is displayed. If you miss the button in the header, you have it in the hero’s section under your lower head line.
Pro tips:
- I always advise the customer to use a contrasting color for CTAs. This simply means selecting a color that dives in front of your homepage background, but still feels in your palette of brands. For example, if your website has a soft, neutral color scheme – think of white and light shades of gray – a bold dark blue or lively coral button, of course, draws the eye. The key is the balance: it should attract attention without getting together.
- Just hold the CTA text. I speak five words or less. Short, action -oriented phrases such as “Get Start”, “Book A Demo” or “Try it for free”, make the trick. Don’t let people think too much about what will happen next.
4. Supporting image
Most people are visual. Make sure you use an image (or even a short video) that clearly indicates what you offer. Use pictures or videos that capture emotions, drive action and visually tell the story about which you write about.
To optimize your images for mobile users, use high -quality images with a reduced file size. (Drift Kings Media customers don’t have to worry about it, because pictures that have been uploaded to the Drift Kings Media software Tinify will do the trick.)
Add your images to make an old text to visitors who use screen readers more accessible, and to take your SEO efforts to take a level.
The Smith & WollenSky homepage is a great example of emotional pictures: it has a number of short, high-resolution and delicious videos that play on a loop behind a simple heading.
5. Advantages
What you do is not enough. I am a big advocate for show What you do too. Your audience will take care of how your product will help you, and that’s what interests you.
Keep your message light, clear and in your language. Evernote Is one of my favorite examples for it. On your homepage you show your advantages in a way that is easy to read and look good.
6. Social evidence
Social proof is a strong indicator of trust. Your product or service could be the best in the world, and it is okay to make this claim – it is only that people don’t believe them if they don’t hear it from other people either. And that is exactly what social evidence does.
Add only some of your best (short) quotes on the homepage and, if necessary, link to case studies. By adding a name and photos there is more credibility to these testimonials.
Optin monster Nail this on your homepage with radiant certificates from actual customers. Most local services and goods live from social evidence. So whether they work on a work Orthodontics -Website -Design Or a local bakery, making sure that testimonials and ratings are included.
7. Navigation
The design and content in your homepage navigation can mean the difference between a website conversion and a springboard. If you want to keep your bounce rate low, you have to give visitors an obvious, easy-to-follow path at the time you must start from your homepage.
So keep your navigation menu visible at the top and put your links out of the most important sides downwards.
You and your team know your website from the inside and outside, not your visitors. For this reason, it is important to carry out user tests to determine whether navigating in your website feels as smoothly and intuitively as for you. If you can, add a search bar to make it even easier for people to find exactly that what they are looking for.
One of my favorite examples for simple navigation is Slim & Huskys Pizza Beeria. Your homepage navigation is clearly structured and keeps visitors in the right direction.
8. Content offers
To generate even more leads from your homepage, you offer a really great offer of content such as a white paper, an E -Book or a guide. People who may not be willing to buy buy can download an offer that gives you more information on a topic that you are interested in.
If you need inspiration, you will find various ingredients from which you can choose from.
9. Secondary calls
Here is the thing: Not everyone who ends up on their homepage will be willing to commit directly to their main offer. That is why it is so important to have secondary CTAs. They are like their security net and give visitors who need a little more time (or an option with lower accommodation), another way to connect with them.
While their primary action requirements should be at the front and with the middle above the fold, these secondary CTAs belong further down on the page.
As people, they continue to scare them to get involved. A good example of this is Spanx ‘homepage. As soon as you overflow the upper section, you will see three clear CTAs that are waiting for you. Regardless of whether it applies 20 US dollars or “Shop Now” to search the catalog, these secondary actions give visitors more ways to convert when they are ready.
10. Features
In addition to the advantages, list some of your most important functions. This gives people more understanding of what their products and services provide. Keep the copy easy and easy to read again.
Dropbox for businessFor example, it is not afraid to show a features matrix directly on your homepage below the fold.
11. Resources
One of my Signature website elements is an imaginative footer. This is because most people will not be ready to buy on site. You are still in research mode and try to find out whether what you offer is correct.
Therefore, it is wise to give them a space in which you can research more and learn more, e.g. B. a resource center or a knowledge center. It not only keeps her longer and on your website, but also positions her as an expert in her room.
Take LovedFor example. You have added a resource link in the footer below the wrinkle, which repeats all of your wonderful offers.
Your secondary CTAs are carefully designed to catch visitors in different phases of your purchase trip. There is a credit card link for people who are ready to make a purchase, a Fabric -Swatch guide for those who still choose colors and an online catalog for buyers who are browsing but are not entirely willing. Everyone gives visitors a reason to stay connected and get closer to a purchase when they are finished.
12. Success indicators
Together with the success stories of customers, awards and recognitions are great to leave a strong first impression. Is your restaurant of criticism? Has your app won the best new product this year? Raise these victories on your homepage. Just like social evidence, presenting success creates trust and adds credibility to visitors who are new to their brand.
To Calendy ‘s Homepage, for example, you will find the names of famous organizations that you have recognized how Gardener And Dropbox.
13. Search bar
If your website is in terms of content, adding a search bar for your users may be extremely helpful, especially if you are an online shop with hundreds of products, a blog library or a resource center.
Visitors who already know what they are looking for do not want to go through layers of navigation menus. A simple, visible search bar gives you a direct abbreviation to find exactly what you need.
Remember: the more content you have, the more difficult it will be that people search categories and filters. A search bar solves this by being able to enter users exactly what they are looking for. It is an underestimated tool that engages visitors and prevents them from bouncing out of frustration. Websites like Amazon and Nike would not be functional without them – and if your website has a large inventory or content library, you would like to follow your lead.
Even on smaller websites, a search bar can give added value if you have several service sites, case studies or blog articles. It is about reducing the friction and ensuring that people don’t have to work hard to find what they came for.
14. Contact us
Your “Contact us” options should not be hidden in a forgotten corner of your website. It deserves a place directly on your homepage. Why? Because if a visitor is ready to reach yourself, you would like to make this next step as smoothly as possible. Regardless of whether you have a question, need a quote or just want to connect, give you a direct line for you in advance to create trust and show that you are accessible. It is also an important touchpoint that can transform occasional browsers into real leads. So why get to dig up for it?
If you now want to work with a minimalist design or do not want to dedicate a full page or section for contact information, without any problems. You can keep your layout clean by using a strategically placed “contact” button that triggers a hidden modal. When clicking, this modal can occur with a simple contact form or contact details to give visitors a distracting way to turn without overfilling the main page.
It is a slim way to keep your design tight and at the same time ensure that people know exactly how to get in touch with them. Take a look at this blog with great examples “Contact us”.
A homepage that is worth visiting
Your homepage is the first impression of her brand – she gives the tone before you even have the chance to make a pitch. Visitors assess what they do, why it is important for them and how their product or service can make their lives easier. This first impression is quick and your homepage has to popular to keep you interested.
Due to the weaving of the elements that we have spoken about, clear headlines, strong headlines, user-friendly navigation and a design that leads visitors along the funnel, build a way to conversion.
Note from the publisher: This post was originally published in January 2012 and was updated for freshness, accuracy and completeness.