Home Page
The most important page for most products. Design homepages that communicate value instantly, establish trust, and drive the primary action.
What is it?
A homepage is the primary entry point of a website or web application. It is typically the most visited page and the one users return to for orientation. For marketing sites, it is the primary conversion page. For applications, it is the return-to-home state. In both cases, it has approximately 3 seconds to communicate value and guide the user to the next action.
Why it matters
The homepage forms the first impression of a product. Users decide whether to stay or leave within seconds. Research consistently shows that users form opinions about websites in as little as 50 milliseconds (Lindgaard et al., 2006). The homepage must communicate: Who is this for? What does it do? Why should I trust it? What should I do next?
Best Practices
- Hero section must answer "what is this and who is it for?" in one headline.
- Hero CTA should be singular, specific, and above the fold.
- Social proof (logos, testimonials, user counts) should appear in the first scroll.
- Avoid autoplay video in the hero — it increases bounce rate and slows load time.
- Features section: benefit-led headlines, not feature names. "Ship faster" not "CI/CD Pipeline."
- Testimonials should include name, role, company, and photo — not anonymous quotes.
- Pricing or "See Pricing" CTA in the main navigation — hiding price erodes trust.
- Mobile-first: the above-the-fold hero must work at 320px viewport width.
- Page load performance directly affects bounce rate — target LCP < 2.5s.
- End with a final CTA section at the page bottom — captures users who read everything.
Common Mistakes
- Hero headline that describes what the product does rather than what the user gets.
- Multiple competing CTAs in the hero section.
- No social proof above the fold.
- Auto-playing hero video that slows load and triggers motion sensitivity.
- Feature section with technical terminology instead of user-benefit language.
- Anonymous testimonials — not credible.
- No pricing indication — forces users to ask sales, which most won't do.
Checklist
Research & Theory
50ms First Impression (Lindgaard et al., 2006)
Research published in Behaviour & Information Technology showed that users form opinions about website appeal within 50 milliseconds of exposure.
Why it's relevant
The visual design of the homepage is a trust signal processed before any content is read. Design quality = product quality in the user's mind.
Above-the-Fold Attention (Nielsen Norman Group)
NN/g research shows users spend 57% of their page-viewing time above the fold. Attention drops significantly below it.
Why it's relevant
Everything critical — value proposition, primary CTA, primary social proof — must be above the fold on the most common viewport size.
Real-World Examples
Linear
Hero: specific headline ("The issue tracker you'll enjoy using"), social proof (logos) immediately below, single CTA. Scroll to feature section with animated demos.
Stripe
Hero communicates the exact value proposition for each user type. Social proof bar with massive company logos. Feature sections with live demos embedded.
Vercel
"Develop. Preview. Ship." — the simplest possible value proposition. Developer-focused social proof. Single CTA. Fast load. The benchmark for developer product homepages.