The Anatomy of a Homepage That Converts
A homepage has about eight seconds to answer three questions. Most spend those seconds on a hero image. Here is the section-by-section structure that actually works.
A homepage is not a place to describe your business. It is a sequence of decisions you are asking a stranger to make, in order, without you in the room.
Most homepages fail because they were designed as a container for information rather than as a path. The sections exist because every site has those sections. Nobody asked what each one is for.
Here is the structure I build, and why each piece is where it is.
The first screen answers three questions
Before a visitor scrolls, they are answering three questions, fast:
- What is this?
- Is it for me?
- What do I do next?
If your first screen does not answer all three, the visitor is not confused — they are gone. They do not scroll to find out. They go back to the search results, which is one click away and costs them nothing.
That means the first screen needs, at minimum:
A headline that says what you do, not how you feel about it. "Digital Builder. Web Developer." tells someone what they are looking at. "Crafting experiences that inspire" does not. Aspirational headlines are for brands people already know.
One sentence of qualification. Who this is for and what problem it solves. This is where "for businesses that need their site to produce revenue" earns its place — it tells the wrong visitor to leave, which is a feature.
One primary action, visually dominant. Not three equal buttons. One button that is obviously the button, and at most two quieter options beside it.
A proof element. A number, a client name, a status. Something that is checkable. "5+ live projects" is worth more than "trusted by many" because it is specific enough to be falsifiable.
The mistake I see most: a beautiful hero with a headline that could belong to any company in any industry. If you could paste a competitor's logo onto your homepage and it would still make sense, the headline is not doing its job.
The second section handles the objection you have not heard yet
Right after the hero, before anything else, address the doubt the visitor is already having.
For a solo developer, that doubt is usually "can one person actually handle all of this?" So the section right below the hero should establish scope of capability — not with adjectives, but with evidence. Projects shipped. Things owned end to end. Range of work.
For an agency, the doubt is "will I be handed off to a junior?" For a product, it is "how long until this works?" You know what your objection is. It is the thing prospects say on the third call, every time.
Handle it early, in a section that exists for no other reason.
Then proof, and proof means specifics
Case studies are where most homepages get lazy. A logo grid is not proof. A testimonial saying "great to work with" is not proof.
Proof is: here was the situation, here is what I built, here is what changed. Ideally with a number attached. If you do not have numbers, you still have the before and after, and that is far better than an adjective.
Two or three deep examples beat eight shallow ones. Someone deciding whether to hire you is looking for a project that resembles theirs. They will read one relevant case study carefully and skim past seven irrelevant ones.
Capability comes after proof, not before
There is a strong instinct to list your services early. Resist it.
A list of services is only meaningful once someone believes you can execute. Before that, it is a list of claims. After proof, the same list reads as a menu.
Order matters more than content here. The same section, moved above the case studies, converts worse — because it is answering a question the visitor has not asked yet.
Put a call to action in the middle
The single most common structural failure: the only way to contact you is at the very bottom.
A visitor who is convinced at 60% of the page has to keep scrolling past three sections they no longer need in order to act. Some of them do. Many of them get distracted on the way.
A mid-page CTA band — after the proof and capability sections, before the deeper detail — catches the people who have decided. It should restate the offer in one line, give the primary action, and get out of the way.
This is not about being pushy. It is about not making a decided person work to act on their decision.
The bottom half is for the people who need more
Everything after the mid-page CTA is for a specific kind of visitor: the one who is interested but not yet convinced, and who reads everything.
This is where the deeper material belongs. Technical foundation. Philosophy and approach. The full breadth of what you have built. Your writing.
These sections do not need to convert. They need to reward the reader who is still going, and give them the last thing they needed. Cutting them because "nobody scrolls that far" is a mistake — the people who scroll that far are the highest-intent visitors on the site.
The contact section is a form, not a link
By the time someone reaches the bottom, they have decided. Do not send them to another page to act.
Put the actual form there. Ask for enough to be able to reply usefully — what kind of project, rough budget, rough timeline — with those fields optional so nobody bounces off them.
And put the direct contact details next to the form. Some people will never use a form. Give them an email address and a phone number and let them contact you the way they prefer.
Formatting rules that apply to every section
Beyond structure, a handful of details decide whether a homepage reads as considered or assembled:
One vertical rhythm. Every section uses the same top and bottom spacing. Inconsistent section padding is the single most common thing that makes a site feel amateur, and almost nobody consciously notices it — they just feel it.
A visible section index. Numbering sections gives a long page a sense of place. It tells the visitor how far in they are and implies the page was designed rather than accumulated.
One accent colour, used sparingly. The accent marks the primary action and nothing else. When four things on screen are accent-coloured, none of them is.
Anchor offsets that account for a fixed header. If your navigation is fixed and your anchors have no scroll margin, every jump link lands with the heading hidden behind the nav. It is a two-line fix that most sites never make.
Real focus states. Tab through your own homepage. If you cannot see where you are, keyboard users cannot either.
The test
Open your homepage. Read only the headlines — the h1 and each h2, in order, nothing else.
Does that sequence tell a coherent story? Does it move from what this is, through why you should believe it, to what to do about it?
If the headlines alone make the argument, the page works. Most visitors read little else.