website-homepage-design

# Website Homepage Design Use this skill for branded homepages where first impression, positioning, and trust are the main jobs. Goal: make the brand memorable in one screen, explain the offer quickly, and guide visitors into the right next step. ## Homepage model Default sequence: 1. Hero: brand, value proposition, CTA, dominant visual 2. Credibility: proof, customers, metrics, or press 3. Capabilities: what the product or company does best 4. Product or service depth: workflow, differentiators, or featured work 5. Trust block: testimonial, case study, security, or social proof 6. Final CTA: contact, start, book, or explore ## Hero rules - The brand or product name must be unmistakable. - Use one visual anchor only: image, scene, device render, or typographic composition. - Keep headline length short enough to scan in one glance. - CTA should appear as soon as the value proposition lands. - Avoid a dashboard collage unless the product itself is the visual story. ## Section rules - Each section gets one message and one visual idea. - Put proof before detailed explanation when trust is the blocker. - Use featured examples or use cases instead of generic feature grids when possible. - Keep page rhythm varied: full-bleed section, compressed proof band, narrative detail block. - Footer should close with action, orientation, and essential navigation only. ## Navigation and responsive behavior - Global nav should reflect the real information architecture, not every possible link. - Sticky headers must not steal too much viewport from the hero. - On mobile, collapse complexity fast and keep the first CTA reachable. - Do not let decorative media push the headline or CTA below the fold. ## Reject these failures - Hero cards, stat strips, and logo clouds all fighting in the first viewport - Brand buried under oversized headline copy - Generic SaaS sections repeated without narrative progress - Placeholder stock imagery that weakens credibility - Multiple accent colors with no brand logic ## Final checks - Is the brand unmistakable in the first viewport? - Can a first-time visitor explain what the company does after one scroll? - Does the homepage move from promise to proof to action cleanly?