Your homepage is the page everyone in the business has an opinion about, and often not the page most customers arrive on. Good homepage design starts from both facts: serve the people who do land there, quickly, and leave the depth to the pages behind it.
Visitors arrive with four questions. A homepage that answers them in plain words beats a beautiful one that makes people work the answers out.
The short answer
A homepage should tell a first-time visitor what you do, who it’s for, why you and what to do next within the first screen or two, then route them to the page they need. Most business homepages do that with these sections, in roughly this order:
- Header: where can I go?
- Hero: am I in the right place, and what should I do?
- Proof: can I trust you?
- Routes: where’s the part for someone like me?
- How it works: what happens if I get in touch?
- Featured work: have you done this for someone like me?
- Objections: what’s the catch?
- Closing call to action: what now?
- Footer: where are the practical details?
Drop any section your visitors don’t need, but keep the rough order: it follows the order in which their questions come up.
The four jobs of a homepage
A homepage is a crossroads, not a destination: it greets several audiences and sends each to the right page. Its four jobs:
| Job | The visitor’s question | Where it’s answered |
|---|---|---|
| Say what you do | “Am I in the right place?” | Hero headline |
| Say who it’s for | “Is this for someone like me?” | Hero supporting line, routes |
| Show why you | “Why you and not the next result?” | Proof, process, featured work |
| Make the next step obvious | “What do I do now?” | Hero action, closing call to action |
Most weak homepages fail the first two: the layout is fine, the words are vague. So before any design work, write the four answers in one sentence each. If you can’t, the problem is strategy, not design. The homepage is also where every ingredient of what makes a good website shows at once.
Many visitors will never see your homepage
Search engines send people to the page that best matches their search, often a service page, article or project, and well-run ad campaigns use dedicated landing pages.
Check it yourself. In Google Search Console, open the Performance report and switch to the Pages tab. In Google Analytics, open the Landing page report. Often the homepage is one entry point among several, which changes the plan:
- It often serves people who already know your name, arriving from a brand search, a referral or a business card to check you’re credible and find your contact details.
- Every inner page must cover the basics too: who you are and what to do next. Landing page vs homepage vs service page explains which page does which job.
Homepage design, section by section
1. Header: “Where can I go?”
Your logo linked to the homepage, a short menu labelled in your customers’ words, and one header action styled as a button, such as “Get a quote”. If customers prefer to call or message, add a tappable phone number or messaging link. Website navigation design covers how to structure and label the menu.
On a multilingual site the language switcher belongs here, labelled with each language’s own name (“Español”, not “Spanish”) rather than a flag, since flags stand for countries. On phones, keep a sticky header slim so it doesn’t eat the screen.
2. Hero section: “Am I in the right place?”
The hero is the only part of the homepage almost every visitor sees. It needs:
- A headline that says what you do, in the words a customer would use.
- A supporting line saying who it’s for and what makes you different.
- One primary action, plus at most one quieter secondary option.
- A visual of the real thing: your product, projects, people or premises, not a stock handshake.
The headline is where most homepages go wrong:
| Business | Vague headline | Specific headline |
|---|---|---|
| Construction firm | Building excellence, together | Factories and warehouses, designed and built to handover |
| Accounting practice | Solutions that grow with you | Bookkeeping, tax and payroll for growing companies |
| Clinic | Care you can trust | A dermatology clinic for skin, hair and nail conditions |
Match the primary action to how ready visitors are: a property buyer may not be ready to “Contact sales” but will gladly tap “See floor plans”. Visual hierarchy in web design shows how to make that action stand out, and a five-second test to check it.
Build it properly. The hero image is often the page’s Largest Contentful Paint (LCP), which Google rates as good at 2.5 seconds or less for at least 75% of page visits (Core Web Vitals explained). Don’t lazy-load it, and think twice about background video. Keep the headline as real text, not words in an image, with at least WCAG’s 4.5:1 contrast against what sits behind it (3:1 for large text). Over a photo, that usually means a darkened panel.
3. Proof: “Can I trust you?”
Put proof directly under the hero, where the visitor has just read your claim. Make it specific and checkable:
- Client logos, used with permission, from the sectors you want more of.
- A short testimonial about a specific outcome, with a full name and role.
- A specific result with a timeframe, linked to the case study that explains it.
- Certifications, memberships or independent reviews, linked to the source.
Skip superlatives like “trusted by leading brands”: one inflated claim casts doubt on every true one near it. Website credibility explains how visitors decide whom to trust.
4. Routes: “Where’s the part for me?”
Next, three to six cards, each with a label, one sentence and a link to the detail. Split them:
- By service, when customers know what they need (“Kitchen design”, “Bathroom renovation”).
- By audience, when the same service means different things to different buyers (“For clinics”, “For hotels”).
- By task, when many visitors are existing customers (“Book a viewing”, “Track an order”).
Use link text that makes sense on its own (“Explore bathroom renovations”, not “Read more”). The pages behind the cards must then earn the click, which is the job of a well-written service page.
5. How it works: “What happens if I get in touch?”
Uncertainty about the process quietly stops enquiries. Three to five steps remove it: what the visitor does, what you do, what they get. “Tell us about your project, get a written quote, agree a start date” is useful. “Discover, Design, Deliver” is a slogan. Add timings only if you can keep them.
6. Featured work: “Have you done this for someone like me?”
Show two or three projects matched to your main audiences, not a grid of twelve unlabelled thumbnails. Give each the client type, the problem, what you did and the outcome, then link to the case study. One project from the visitor’s own sector usually persuades more than ten from others. Website storytelling shows how to write case studies people read to the end.
7. Objections: “What’s the catch?”
Ask whoever handles enquiries which questions come up in every first call: price, timing, coverage, contract length, ownership. Answer them briefly and link to the detail.
A short FAQ block works well. Write it for people, not for a search feature: Google limited FAQ rich results to a few government and health sites in 2023, and stopped showing them altogether in May 2026.
8. Closing call to action: “OK, what now?”
Anyone who reaches the end is interested. Repeat the primary action with a reason to act, say who replies, how and how soon, and offer one lower-commitment option, such as a guide or price list, for people who aren’t ready. See call to action best practices for wording and placement.
9. Footer: “Where are the practical details?”
Returning visitors often jump straight here. Include contact details, your address and opening hours if you have premises, key links, your privacy policy and any legal details your market requires. If you have a Google Business Profile, keep your name, address and phone number identical to it.
Three homepage myths to drop
“Everything important must be above the fold”
There is no single fold: the visible area changes with every device, window size and zoom level. And people do scroll. Nielsen Norman Group’s eye-tracking research finds attention concentrated near the top of the page but not confined to it: people keep scrolling when what they see first gives them a reason to.
The first screen needs the essentials, not everything. Avoid a false floor, a full-height hero that looks complete so visitors assume there is nothing more: let the next section peek in, and check the homepage layout at phone width (around 360 to 390 pixels).
“A carousel lets us feature everything”
A carousel usually signals an undecided priority: every department wanted the top spot, so everyone got a slide. Slides often change before they can be read, and later slides go unseen by anyone who scrolls on. Auto-rotating ones need a way to pause them to meet WCAG’s Pause, Stop, Hide criterion, and they often load several large images for a visitor who sees one.
Pick one message for the hero and give the others their own sections or route cards.
“The homepage should explain everything”
A long homepage is fine if every section answers a question. What hurts is detail in the wrong place: full service descriptions and company history on the homepage, with thin pages behind it. Summarise here; explain on the pages you link to. Our list of website design mistakes covers other habits that quietly cost enquiries.
How a homepage differs from a campaign landing page
Sending ad traffic to the homepage is tempting, but the two pages do different jobs:
| Aspect | Homepage | Campaign landing page |
|---|---|---|
| Visitors | Many audiences, often people who know your name | One audience, from one campaign |
| Job | Orient, reassure and route | Win one action |
| Navigation | Full menu | Minimal or none |
| Content | Summaries that link to depth | Everything needed to decide on one offer |
If you run paid campaigns, give them a dedicated landing page that matches the ad’s promise.
The homepage checklist
Use this list to plan a homepage or review a design you’ve been sent:
What to do next
A strong homepage is rarely a design problem alone. It takes strategy, words written before the layout, a design that puts one message first and a fast build. So plan the service pages first, write the homepage that summarises them, and wireframe with real words at phone width.
Our website design and development projects work this way: a strategy session and sitemap settle who visits, what they need to hear and what they should do next before design begins, and the site is built on WordPress so your team can keep the homepage current. Already have a site? A free website audit shows how it performs today, homepage included.