Did you know it’s about 50:50 whether users stay on your website or leave without visiting another page?
With billions of websites and scrolling often done on the go, you have to make a strong first impression because the chances for a once-over are slim.
Get inspired from examples and learn how to design magnetically-appealing homepages from this guide.
5 effective homepage examples to inspire
Intercom
Intercom is an excellent example of a product-focused SaaS homepage. Let’s start at the top with the page’s crisp, clear copy. Even if you’ve never heard of Intercom, you know exactly what service they provide and how it helps your business.
It follows this up with two calls to action designed for buyers at different stages of the funnel – free trial (decision stage) or view demo (consideration).
Intercom follows up their messaging with interactive screenshots that show exactly how their product works — there are no vague cartoon graphics here!
Finally, case studies and social proof round off this homepage, giving the reader even more confidence to check out Intercom’s product.
Box
Box is another product-focused homepage that makes it easy for users to learn more about its growing service offering. The homepage leads off with a benefit-focused description of its service.
The flow of the website is second to none. If users scroll down from the main header, they are hit with several product features, detailed descriptions about how they benefit customers and calls to action that let readers learn more.
The use of trust signals is also excellent. The second thing users see when they land on the site are customer logos. These are followed up by multiple testimonial quotes further down the page.
Chewy
If you want an example of an excellent e-commerce home page that isn’t Amazon, look at Chewy.
The online pet store sells multiple products, but that doesn’t mean the site is hard to navigate. It’s incredibly easy to quickly find the category you want using the navigation menu at the top of the page or the many waypoints when you scroll down.
It also does a great job of describing exactly why you should shop with Chewy over competitors. Key selling points like free delivery, easy returns and 24/7 support are listed above the fold, meaning users can’t miss them.
Duolingo
Duolingo is a well-known language-learning tool whose homepage focuses on getting you to download the app. There are two big CTA buttons directly below the homepage’s header. One is to log in if you already have an account, and another, in green, to sign up if you don’t.
If you scroll instead, Duolingo has four benefit-focused subheadings that show exactly why you should learn a language using the app. The green “Get Started” CTA remains visible as you scroll, and there are two further CTAs at the bottom — one to go to the App Store, the other to visit Google Play.
Bench
Let’s end this roundup by looking at the homepage of a business offering a service rather than a product. Bench is an accounting and bookkeeping service provider whose website features a beautiful clean design, lots of trust signals and great CTAs.
The page starts with two uncommon CTAs — one to try Bench for free, the other to book a call with a sales rep. These make it easy for people interested in Bench to start the sales process.
If users choose to scroll instead, they are greeted with a social-proof-focused subheading showing that 25,000 American small business owners use Bench. Three testimonials from real users back this up.
If users still aren’t convinced, a series of CTAs and subheadings follow, inviting users to learn more about the platform.
What should a homepage design achieve?
There should be several goals you aim to achieve with your homepage’s design.
First, it should explain the purpose of your website and make it clear to first-time users who your company is and what you do. This is essential if you want them to carry on using your site for more than just a few seconds. A tagline or summary near the top of your homepage paired with relevant images is a great way to nail this.
Your homepage should also boost brand awareness and credibility. First impressions count, right? So, think about how much your website design says about your brand. A messy, poorly designed website doesn’t reflect your services. But a carefully crafted website can speak volumes.
That goes for the usability of your website, too. If your homepage is confusing or complicated, visitors probably won’t want to try purchasing it. But the better the user experience it offers, the less likely visitors will be to leave.
Part of improving the user experience is making it easy to navigate around the website. Your homepage design should include clear signposts for other pages, whether that’s product category pages on an e-commerce website or service pages on a B2B website.
Finally, your homepage has a role to play in conversion optimization. It might not pull the same weight as landing pages, but you can bet that customers will have second thoughts about purchasing if your website doesn’t look professional or secure. Relevant calls to action (CTAs) that encourage users to enter the top of your funnel should also be included. An email subscription banner is a great choice, for instance.
6 must-know website homepage design best practices
Behind every winning homepage design stands a detailed customer journey map.
A customer journey is a schematic representation of how site visitors will move around your website to accomplish various goals.
A good customer journey map lists different actions a user will take after landing on your website (e.g., browse product pages, save items to a wishlist, register an account, etc.) — and it does so for different audience segments.
Your homepage design should help users move from the first step on their journey (e.g., learning about your website) to the final one (e.g., converting to a paid customer). At the same time, your homepage should serve the needs of both new and returning visitors — prospects who may be at a different stage of their journey (e.g., consideration).
With the above in mind, let’s take a look at several website homepage design ideas and the reasons why they work.
1. Use familiar design elements
Whether you’re designing a new website or refreshing an old one, it’s always tempting to go “out of the box” — use horizontal scrolling, skip header navigation or include arty animations.
Bold design choices work for some brands, mainly those who aren’t using their website as a primary sales channel (e.g., luxury brands).
However, unfamiliar designs and layouts can cause issues. Research finds that 38% of users look at a page’s layout and navigation links when visiting a website for the first time, and 42% would leave a site because of poor functionality.
So why make the job harder for them? As UX consultant Peter Ramsey rightfully notes:
“…overly-stylised designs tend to be harder to use. And it’s okay to lean on what feels familiar, and works well.”
Therefore, analyse other homepage layout designs in your industry. Pay attention to the number and type of homepage screens and approaches to designing header/footer navigation.
Take some of those ideas as your “base.” Then, make your homepage design on-brand with unique typography, icons, visuals and other graphic design elements.
Take a cue from ICAM — a steel manufacturing company. Their niche isn’t typically exciting. Yet, their homepage design stops you and tinkers your curiosity to discover more (even if you aren’t shopping for metalware).
The interesting part is that ICAM uses a rather standard homepage layout. You have a hero image in the first screen, followed by a multi-column layout of their industry expertise and an overview of manufacturers.
But this homepage design feels fresh because the company uses plenty of white space, bold typography and vibrant visuals. Also, they delay the creative twist (horizontal scrolling area) to the bottom of the homepage, meaning that it’s less likely to intimidate less confident web users.
2. Decide on the optimal homepage layout
In web design, a homepage layout is your approach to visually organising different information on the screen.
Observant folks will notice that good homepage designs often have the same layout. For example, include a split-view “hero” screen with a call to action on the left and visuals (photo or video) on the left.
The reason for using similar layouts for website homepage design isn’t a lack of creativity. On the contrary, some layouts have become the “best practice” because they:
- Offer a great user experience (UX) and don’t confuse first-time visitors
- Feel familiar and create a pleasurable sense of deja-vu among users
- Have proven to drive higher conversion rates through benchmarks and tests
Popular types of website homepage layouts:
- Single column – a classic option of presenting main content in a single, vertical column. Good choice for blogs, personal websites and simple corporate sites.
- Split screen layout divides the page in two equal areas with different information present. Works best for Ecommerce homepages (e.g., to separate different types of garments) or SaaS websites, offering two product types (e.g., a free personal product version and a business edition).
- Asymmetrical layout assumes dividing your homepage into areas of different size and styles. Asymmetry helps create specific focal points for users to draw their attention to the most prominent information.
- Grid of cards layout helps present a lot of information in a more digestible manner by breaking down bigger bulks of text into smaller cards — a graphic element, featuring an image and some texts. By tapping a card, users can then access extra content.
- Boxes are visually similar to cards, but can be of varying shape. For example, you can have a bigger header-width box area, followed by four smaller boxes within it. Both of these website layouts work well for Ecommerce.
- Featured image layout gives visuals (photos and videos) the most prominent placement on the homepage, with texts and other graphic design elements serving a secondary purpose.
- F-pattern layout is based on the standard eye movement most people have when reading content on the website. Eye tracking studies found that we usually pay the most attention to information atop of the page (header area), then scan horizontally before dripping down to the next vertical line until we find content that captures our attention.
User behaviour analytics (UBA) tools are the best way to determine what type of layout will work for your homepage.
For example, you can use Matomo Heatmaps and Session Recording to observe how users navigate your homepage, which areas or links they click and what blockers they face during navigation.
Matomo can capture accurate behavioural insights because we track relative positions to elements within your websites. This approach allows us to provide accurate data for users with different browsers, operating systems, zoom-in levels and fonts.
The best part? You can collect behavioural data from up to 100 different user segments to understand how different audience cohorts engage with your product.
Try Matomo for Free
Get the web insights you need, without compromising data accuracy.
3. Include a one-sentence tagline
A tagline is a one-line summary of what your company does and what its unique sales proposition (USP) is. It should be short, catchy and distinguish you from competitors.
A modern homepage design practice is to include a call to action in the first screen. Why? Because you then instantly communicate or remind of your value proposition to every user — and provide them with an easy way to convert whenever they are ready to do business with you.
Here’s how three companies with a similar product, a project management app, differentiate themselves through homepage taglines.
Monday.com positions itself as an operating system (OS) for work.
Basecamp emphasises its product simplicity and openly says that they are different from other overly-complex software.
Asana, in turn, addresses a familiar user pain point (siloed communication) that it attempts to fix with its product.
Coming up with the perfect homepage tagline is a big task. You may have plenty of ideas, but little confidence in what version will stick.
The best approach? Interview your users or survey your ideal customers. Then run a series of A/B tests decide. You can test a roaster of homepage slogans on a rotating bi-weekly/monthly schedule and track how copy changes affect conversion rates.
With Matomo A/B test feature, you can create, track and manage all experiments straight from your web analytics app — and get consolidated reports on total page visitors and conversion rates per each tested variation.
Beyond slogans, you can also run A/B tests to validate submission form placements, button texts or the entire page layout.
For instance, you can benchmark how your new homepage design performs compared to the old version with a subset of users before making it publicly available.
Try Matomo for Free
Get the web insights you need, without compromising data accuracy.
4. Highlight the main tasks for the user
Though casual browsing is a thing, most of us head to specific websites with a clear agenda — find information, compare prices, obtain services, etc.
Thus, your homepage should provide clear starting points for users’ main tasks (those you’ve also identified as conversion goals on your customer journey maps!).
These tasks can include:
- Account registration
- Product demo request
- Newsletter sign-up
The best website homepage designs organically guide users through a set number of common tasks, one screen at a time.
Let’s analyse Sable homepage design. The company offers a no-fee bank account and a credit card product for soon-to-be US transplants. The main task a user has: Decide if they want to try Sable and hopefully open an account with them.
This mono-purpose page focuses on persuading a prospect that Sable is right for them.
The first screen hosts the main CTA with an animated drop-down arrow to keep scrolling. This is likely aimed at first-time visitors that just landed on the page from an online ad or social media post.
The second screen serves the main pitch — no-fee, no-hassle access to a US banking account that also helps you build your credit score.
The third screen encourages users to learn more about Sable Credit — the flagship product. For the sceptics, the fourth screen offers several more reasons to sign up for the credit product.
Then Sable moves on to pitching its second offering — a no-fee debit card with a cashback. Once again, the follow-up screen sweetens the deal by bringing up other perks (higher cashback for popular services like Amazon) and overcoming objections (no SSN required and multi-language support available).
The sequence ends with side-by-side product comparison and some extra social proof.
In Sable’s case, each homepage screen has a clear purpose and is designed to facilitate one specific user action — account opening.
For multi-product companies, the above strategy works great for designing individual landing pages.
5. Design proper navigation paths
All websites have two areas reserved for navigation:
- Header menu
- Footer menu
Designing an effective header menu is more important since it’s the primary tool visitors will use to discover other pages.
Your header menu can be:
- Sticky — always visible as the person keeps scrolling.
- Static — e.g., a hidden drop-down menu.
If you go for a static header and have a longer homepage layout (e.g., 5+ screens), you also need to add extra navigation elements somewhere mid-page. Or else users might not figure out where to go next and merely bounce off.
You can do this by:
- Promoting other areas of your website (e.g., sub-category pages) by linking out to them
- Adding a carousel of “recent posts”, “recommended reads” and “latest products”
- Using buttons and CTAs to direct users towards specific actions (e.g., account registration) or assets (free eBook)
For instance, cosmetics brand Typology doesn’t have a sticky header on the homepage. Instead, they prompt discovery by promoting different product categories (best sellers, bundles, latest arrivals) and their free skin diagnostic quiz — a great engagement mechanism to retain first time users.
Once the user scrolls down to the bottom of the page, they should have an extra set of navigational options — aka footer links.
Again, this helps steer the visitor towards discovering more content without scrolling back up to the top of your homepage.
It also gives visitors a sense of consistency and helps them stay on a page they may otherwise close, says Simon Keating at Jetpack.
“Even site visitors who carefully read a page’s full content might reach the end of an article and close the page. To keep this from happening, you can offer a way for readers to discover more attractive content at the bottom of the page.”
Nielsen Norman Group says that people mostly use footers as:
- A second chance to be convinced — after reading the entire homepage, the user is ready to give your product a go.
- The last resort for hard-to-find content that’s not displayed in global header navigation (e.g., Terms and Conditions or shipping information pages).
As a rule of thumb, you should designate the following information to the footer:
- Utility links (Contact page, Terms & Conditions, Privacy Policy, etc.)
- Secondary-task links (e.g., Career page, Investor Details, Media contacts, etc.)
- Brands within the organisation (if you operate several)
- Customer engagement link (email newsletters and social media buttons)
The key is to keep the area compact — not more than one standard user screen resolution of 1280×720.
6. Show users what’s clickable (or not)
A homepage invites your site visitors on a journey. But if they don’t know which elements to click, they aren’t going to get anywhere.
Good homepage design makes it obvious which page elements are clickable, i.e., can take the user to a new page or another segment of the homepage.
Here are several must-know homepage design tips for better on-page navigation:
- Use colour and underline or bold to highlight clickable words. Alternatively, you can change the browser cursor from a standard arrow into another element (e.g., a larger dot or a pointy finger) to indicate when the cursor hovers over a clickable website area.
- Make descriptive button texts that imply what will happen when a user clicks the page. Instead of using abstract and generic button texts like “see more” or “learn more”, try a more vibrant language like “dive in” for clicking through to a spa page.
- Use a unified hover area to show how different homepage design elements represent a single path or multiple navigation paths. When multiple items are encapsulated in one visual element (e.g., a box), users may be reluctant to click the image because they aren’t sure if it’s one large hit area leading to a single page or if there are multiple hit areas, leading to different pages.
Homepage of BEAUSiTE — a whimsical hotel in the Swiss Alps – embodies all of the above design principles. They change the cursor style whenever you scroll into a hit area, use emotive and creative micro-copy for all button texts and clearly distinguish between different homepage elements.
7. Optimise your homepage for mobile users
Did you know mobile accounted for 64.95% of all web traffic in September 2023? Yep, chances are most of your users are looking at your website’s homepage on a smartphone.
So, if you don’t have a separate mobile website or app, your homepage design better be optimised for mobile users. That means having a clear hierarchy, introducing mobile-focused design features like a new menu bar, and ensuring your CTAs are tappable and clickable.
It doesn’t just need to look great on a smartphone; your homepage should load quickly, too. Optimise your homepage for speed by minimising image file sizes and using a CDN to ensure content loads faster.
How to make your homepage design even more impactful?
Website homepage design is roughly 20% of pure design work and 80% of behind-the-scenes research.
To design a high-performing homepage you need to have data-backed answers to the following questions:
- Who are your primary and secondary target audiences?
- Which tasks (1 to 4) you’d want to help them solve through your homepage?
You can get the answers to both questions from your web analytics data by using audience segmentation and page transition (behaviour flow) reports in Matomo.
Based on these, you can determine common user journeys and tasks people look to accomplish when visiting your website. Next, you can collect even more data with UBA tools like heatmaps and user session recordings. Then translated the observed patterns into working homepage design ideas.
Improve your homepage design and conversion rates with Matomo. Start your free 21-day trial now!
Try Matomo for Free
21 day free trial. No credit card required.
