Philip Westfall, January 8, 2019
When it comes to your website, first impressions are everything.
Research shows that you only have about 5 seconds to convince your site visitors that they should stick around to see what you have to offer.
Because most first-time site visitors land on your homepage, this is where improvements will have the most impact on your overall performance.
In this article, our expert team of designers and marketers share some of the most beautiful homepage designs online today while discussing the 10 most important elements you need to consider when building your own:
If you’ve ever flipped through a magazine, you will know what we’re talking about.
When you come across a truly eye-catching page, your thumb seems to involuntarily stop the scan so you can investigate further.
Surfing the web is no different.
Several things can be used to grab a visitor’s attention: pictures, headlines, fonts, colors, layout…
This is the easiest way for them to pass the magazine thumb test and engage visitors to learn more.
Pro tip: If your product or service is visual and simple to explain, make the image the main focus. More complex or abstract products and services (like Honey, that provides coupons when shopping online) tend to rely on copy, colors and text to grab a user’s attention.
Pro tip: For pictures, avoid generic-looking stock images. Pexels and Unsplash can provide stunning images for free while premium sites like Shutterstock give you access to over 200 million license-free images.
Now that you have your user’s attention, let’s move on to telling them about what you have to offer.
This might sound silly at first, but many website owners that start user testing are surprised when the people testing their site can’t explain what the site is about after a minute on the page.
Regardless of your audience’s knowledge level, it’s important to avoid technical jargon or complex descriptions that only people within your organization can understand.
Here are the questions your homepage needs to answer fast:
Who are you?
Include your logo, brand name, brand colors, etc.
What do you do?
Always be clear and to the point. This is why your headline is so important.
Always be clear and to the point. This is why your headline is so important.
ActiveCampaign’s homepage is a great example of how to simplify the description of a complex product. Although their target audience (marketers) will understand everything right out of the gates, the business owners making the buying decision may not.
If you scroll down just below the fold, ActiveCampaign tells us exactly what they do, and why we should care.
Pro tip: The easiest way to convert a feature into a benefit is to ask yourself the question: so what? The better you answer that question, the better the chance you have of engaging your website visitors.
Now that your website visitors know what you do, it’s time for them to take action!
Whether your website sells a product or not, your homepage should always be designed with a specific goal in mind. Here are a few example goals:
The goal you choose should always be aligned with your business or organization’s goal.
Baremetrics’s main goal is clear: start a free trial. The high-contrast buttons are a clear giveaway.
However, Baremetrics offers a secondary call-to-action for those who aren’t ready to give away their contact info. A live demo gives visitors the option to see how the product looks without having to sign up. A large banner on this secondary page reminds people that they should start a trial.
Pro tip: The more complex or expensive your product or service, the more likely you’ll need a secondary option for your site visitors. If you require two call-to-actions, make them look different and distinct, as people tend to do nothing when options are too similar. The main goal should always be more prominent.
Without a properly-designed layout, even the most stunning images and powerful copy can result in an ugly or under performing homepage.
The easiest and most affordable way to ensure a good layout is to use a professionally-designed website template.
On the other hand, if you’re hiring a designer, or building the page yourself, you will want to focus on the keys to a great web design:
Just like many of the examples in this article, Bitrise’s homepage is a design masterpiece. The colors, fonts, spacing and visuals work together to offer a very simple yet eye-catching design that is oriented towards their main goal of signing a user up.
Pro tip: In many cases, less is more. Overly-designed pages are not only costly to produce and update, but often don’t perform as well as their simplified competitors. Take a look at some of the sites on Awwards. Although these award winning website designs are stunning to look at, in practice they are often confusing user experiences that do not convert.
For your homepage to really stand out, the copy needs to be on point.
If you’re not a professional writer, there is no need to panic.
Sometimes, changing just a few words can make all the difference.
Here are a few tips to help improve your homepage copy:
Pro tip: A great way to write better copy is to interview some of your customers to understand what their pain points are, how your product or service can help them, what terms they are familiar with, etc.
Everything Grammarly does is about “you”, not them.
Also, did you notice how encouraging their messages sound?
Grammarly understands that a lot of people struggle to be confident while writing. This is why they attack this pain point with positive messaging to empower users. Check out a few of their titles:
But sometimes, even great copy isn’t enough...
Imagine what a real estate or travel website would look like without images...
Pretty boring if you ask me.
Even with the most amazing copy, the website would still fall flat.
As we mentioned before, the more visual your product or service, the more you will need to rely on images for it to stand out.
No need for any descriptive text on AirBnB’s homepage - just a beautiful image and a little encouragement to start searching does the trick.
Unfortunately, it’s not always that easy.
Sometimes, to really showcase a point, it’s easiest to combine both text and visuals.
Many sites, like MailTag.io use a two column grid for this reason.
Pro tip: Adding icon(s) can help quickly communicate important messages to your site visitors. Notice how MailTag included several clocks within this section to highlight the scheduling feature? Google’s Material Design and The Noun Project are great resources for free icons.
Trust is the key component to any new online relationship.
People visiting your website for the first time need to feel secure and confident that they are making the right decision by engaging with your brand.
The easiest way to build and reinforce an honest, trusting relationship is through social proof.
The Shopify Plus homepage is essentially nothing but social proof. Without bragging, Shopify has a clear objective of creating trust with enterprise customers looking for an all-in-one e-commerce platform.
Social Proof can be done in many ways:
Pro tip: Make sure your website is always delivered over a secure network (https). This creates trust with your site visitors by letting them know their information is always encrypted. You can redirect the http version of your website to https through your domain registrar.
There is no better way to create stickiness with your site visitors than to have them interact with you directly through your website.
These interactions can be done in many ways, such as:
Pro tip: Typically, you don’t want to allow access to your entire product or service without having a visitor enter their contact information. Make sure to follow step #3.
Your website can be viewed from a variety of devices, locations and browsers.
Ensuring your website looks great in all these conditions can be the difference between the success and failure of your work.
Here are a few helpful tests you can run to make sure everything is look good.
Pro tip: Quality website builders and platforms like PageCloud have mobile layout builders and cross-browser compatibility built in. Using one can help you avoid a lot of issues and cost down the road.
Your homepage doesn’t have to look identical on desktop and mobile to work great.
In some cases, stripping out some unnecessary information for smaller devices can be beneficial. Notice how Stripe removed the large image from their mobile version?
Now that you have an amazing-looking homepage that’s accessible from everywhere, will anybody find it?
Want some good news?
If you followed the steps in this guide, you will already be well on your way to an optimized homepage:
Fast loading pages, clear statements about what you do, engaging images…
Basically everything mentioned above plays a role in your search rankings, especially since Google’s Rank Brain update.
However, you still need to cover the other basics related to on-page SEO. These include:
Your Title TagMeta DescriptionYour Heading Tags (H1 to H6)Internal linksOutbound linksAnd more
On top of being an excellent tool for keyword research and everything related to SEO, Ahrefs’s homepage is great example of how an SEO-optimized page can still look great. There is no keyword stuffing or black hat SEO tactics here - just a clean design that checks every box on this list.
Pro tip: Looking for a quick boost in rankings? Update your Page Title and Meta Description every couple weeks and see how it affects your rankings. Over time, you’ll notice how an improved click-through-rate helps improve your rankings. You can visualize these changes using Google Search Console.
Get started for free with PageCloud’s custom website builder.
Check out some of the best app landing page designs.