Brand Website Design

Create world-class modern brand websites for coaches, authors, speakers, consultants, or software companies. Build sites that reflect excellence in design, UX, messaging clarity, conversion readiness, and brand authority.

Core Objectives

• Instantly communicate credibility, clarity, and personality

• Connect with target audience emotionally and professionally

• Build trust and authority

• Convert visitors into leads, fans, or customers

• Serve as foundation for future growth

Website Page Structure

1. Homepage (The Flagship)

Purpose: Instant clarity, brand promise, conversion options

Hero Section:

• Bold headline (transformational promise)

• Subheadline with audience qualifier and benefit

• Primary CTA: Book call, get started, watch video

• [Hero Image or Video Background]

Brand Positioning:

• 2-3 sentence positioning statement

• Trusted media/client logos

Core Benefits:

• 3-5 value proposition bullets

• Benefit-focused headlines with supporting copy

Testimonials:

• Rotating video or quote carousel

• Headshots and credentials

Authority Section:

• Author bio, media appearances, keynote clips

Services Overview:

• Visual cards with CTAs

Lead Magnet/Opt-In:

• Irresistible offer for contact info

Repeated CTAs:

• Scroll-based anchors

• Sticky CTA option

2. About Page (Trust Builder)

Purpose: Build empathy, expertise, relatability

Personal Story:

• Hero image with warm introduction

• Vulnerability and transformation arc

Professional Bio:

• Background and credentials

• Results and recognition

• Photos and media appearances

Vision & Values:

• Core mission

• Values statement

• Bigger why

CTA Block:

• Connect, follow, or schedule invitation

3. Services/Products Page

Purpose: Present offers with persuasive clarity

• Headline: Specific outcomes

• Tiered offerings (if applicable)

• Benefits per offer

• Related testimonials

• Pricing (optional/gated)

• FAQs for objections

• CTAs at scroll points

4. Case Studies/Results Page

Purpose: Showcase proof, inspire belief

• Story-driven testimonials

• Before & after snapshots

• Video interviews

• Specific metrics and results

5. Contact Page

Purpose: Reduce friction to connect

• Simple contact form

• Booking calendar integration

• Social icons

• Location or virtual service note

6. Blog/Resources

Purpose: Thought leadership and SEO

• Articles and interviews

• Behind-the-scenes content

• Lead magnet placements

Design Principles

Visual Design:

• Modern and clean

• Generous white space

• Bold typography

• Consistent spacing

Mobile-First:

• Responsive design

• Thumb-friendly buttons

• Readable on all devices

Brand Consistency:

• Colors reflecting authority and approachability

• Consistent photography style

• Unified icon library

Copywriting Guidelines

• Clear over clever

• Empathy-driven messaging

• Second-person voice ("you")

• Emphasize transformation

• Scannable formatting

• Action-driven CTAs

Integration Requirements

• CRM/Email platform connection

• Booking system integration

• Analytics and heatmaps

• Accessibility compliance

• Cookie/privacy policies

Optional Pages

• Events/Speaking

• Media/Press Kit

• Podcast/Video Library

• Affiliate Program

• Client Portal

Examples

Homepage Hero Section

<section class="hero" style="background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); color: white; padding: 100px 20px;"> <div style="max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;">

<!-- Left Column - Copy -->
<div>
  <p style="color: #9F7AEA; font-size: 14px; letter-spacing: 2px; margin-bottom: 15px;">
    BUSINESS COACH & CONSULTANT
  </p>
  
  <h1 style="font-size: 52px; line-height: 1.1; margin-bottom: 20px;">
    Build a Business That Works—Even When You Don't
  </h1>
  
  <p style="font-size: 20px; opacity: 0.9; margin-bottom: 30px;">
    I help ambitious entrepreneurs scale from 6 to 7 figures without sacrificing their health, relationships, or sanity.
  </p>
  
  <div style="display: flex; gap: 15px; margin-bottom: 40px;">
    <button style="background: #9F7AEA; color: white; padding: 16px 32px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer;">
      Book a Free Strategy Call
    </button>
    <button style="background: transparent; color: white; padding: 16px 32px; border: 2px solid white; border-radius: 8px; font-size: 16px; cursor: pointer;">
      Watch My Story
    </button>
  </div>
  
  <div style="display: flex; gap: 30px;">
    <div>
      <p style="font-size: 32px; font-weight: bold; margin: 0;">500+</p>
      <p style="font-size: 14px; opacity: 0.7; margin: 0;">Clients Served</p>
    </div>
    <div>
      <p style="font-size: 32px; font-weight: bold; margin: 0;">$127M+</p>
      <p style="font-size: 14px; opacity: 0.7; margin: 0;">Client Revenue Generated</p>
    </div>
    <div>
      <p style="font-size: 32px; font-weight: bold; margin: 0;">4.9★</p>
      <p style="font-size: 14px; opacity: 0.7; margin: 0;">Average Rating</p>
    </div>
  </div>
</div>

<!-- Right Column - Image -->
<div style="text-align: center;">
  <img src="hero-image.jpg" alt="Professional headshot" style="max-width: 100%; border-radius: 20px; box-shadow: 0 40px 80px rgba(0,0,0,0.3);" />
</div>

</div> </section>

About Page Personal Story Section

<section style="padding: 80px 20px; background: #F7FAFC;"> <div style="max-width: 800px; margin: 0 auto;">

<h2 style="font-size: 36px; color: #1A202C; text-align: center; margin-bottom: 40px;">
  My Story
</h2>

<div style="display: flex; gap: 40px; align-items: start; margin-bottom: 40px;">
  <img src="personal-photo.jpg" alt="Personal photo" style="width: 300px; border-radius: 12px;" />
  
  <div>
    <p style="font-size: 18px; color: #4A5568; line-height: 1.8;">
      In 2017, I was a burnt-out corporate consultant pulling 70-hour weeks, missing my kids' soccer games, and wondering if there was more to life than climbing someone else's ladder.
    </p>
    
    <p style="font-size: 18px; color: #4A5568; line-height: 1.8;">
      I quit with nothing but a laptop and a vision.
    </p>
    
    <p style="font-size: 18px; color: #4A5568; line-height: 1.8;">
      Three years later, I'd built a 7-figure coaching business that runs without me working more than 25 hours a week. I'm home for dinner every night. I never miss a school event.
    </p>
    
    <p style="font-size: 18px; color: #4A5568; line-height: 1.8;">
      Now I help other entrepreneurs do the same—build businesses that serve their lives, not consume them.
    </p>
  </div>
</div>

<!-- Credentials -->
<div style="background: white; border-radius: 12px; padding: 30px; text-align: center;">
  <h3 style="color: #1A202C; margin-bottom: 20px;">Featured In</h3>
  <div style="display: flex; justify-content: center; gap: 40px; align-items: center; flex-wrap: wrap;">
    <img src="forbes-logo.png" alt="Forbes" style="height: 30px; opacity: 0.6;" />
    <img src="inc-logo.png" alt="Inc" style="height: 30px; opacity: 0.6;" />
    <img src="entrepreneur-logo.png" alt="Entrepreneur" style="height: 30px; opacity: 0.6;" />
    <img src="fast-company-logo.png" alt="Fast Company" style="height: 30px; opacity: 0.6;" />
  </div>
</div>

</div> </section>

Services Page Card Layout

<section style="padding: 80px 20px;"> <div style="max-width: 1200px; margin: 0 auto;">

<div style="text-align: center; margin-bottom: 60px;">
  <h2 style="font-size: 42px; color: #1A202C; margin-bottom: 15px;">
    How I Can Help You
  </h2>
  <p style="font-size: 18px; color: #718096; max-width: 600px; margin: 0 auto;">
    Choose the level of support that fits where you are in your journey
  </p>
</div>

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;">
  
  <!-- Service 1 -->
  <div style="background: white; border-radius: 16px; padding: 40px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); border: 1px solid #E2E8F0;">
    <div style="width: 60px; height: 60px; background: #EBF4FF; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
      📚
    </div>
    <h3 style="font-size: 24px; color: #1A202C; margin-bottom: 15px;">
      The Blueprint
    </h3>
    <p style="color: #718096; margin-bottom: 20px;">
      Self-paced courses and resources for entrepreneurs who want to learn at their own speed.
    </p>
    <ul style="list-style: none; padding: 0; margin-bottom: 30px;">
      <li style="color: #4A5568; margin-bottom: 8px;">✓ 6 comprehensive modules</li>
      <li style="color: #4A5568; margin-bottom: 8px;">✓ Templates and swipe files</li>
      <li style="color: #4A5568; margin-bottom: 8px;">✓ Private community access</li>
    </ul>
    <button style="width: 100%; background: #5A67D8; color: white; padding: 14px; border: none; border-radius: 8px; cursor: pointer;">
      Learn More →
    </button>
  </div>
  
  <!-- Service 2 (Featured) -->
  <div style="background: #5A67D8; border-radius: 16px; padding: 40px; box-shadow: 0 8px 30px rgba(90,103,216,0.3); position: relative;">
    <div style="position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #F6E05E; color: #744210; padding: 4px 16px; border-radius: 20px; font-size: 12px; font-weight: bold;">
      MOST POPULAR
    </div>
    <div style="width: 60px; height: 60px; background: rgba(255,255,255,0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
      🎯
    </div>
    <h3 style="font-size: 24px; color: white; margin-bottom: 15px;">
      Group Coaching
    </h3>
    <p style="color: rgba(255,255,255,0.8); margin-bottom: 20px;">
      Weekly group calls, personalized feedback, and a community of driven entrepreneurs.
    </p>
    <ul style="list-style: none; padding: 0; margin-bottom: 30px;">
      <li style="color: white; margin-bottom: 8px;">✓ Weekly live coaching calls</li>
      <li style="color: white; margin-bottom: 8px;">✓ Direct access via Slack</li>
      <li style="color: white; margin-bottom: 8px;">✓ Quarterly strategy reviews</li>
    </ul>
    <button style="width: 100%; background: white; color: #5A67D8; padding: 14px; border: none; border-radius: 8px; cursor: pointer; font-weight: bold;">
      Apply Now →
    </button>
  </div>
  
  <!-- Service 3 -->
  <div style="background: white; border-radius: 16px; padding: 40px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); border: 1px solid #E2E8F0;">
    <div style="width: 60px; height: 60px; background: #FFF5F5; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
      👑
    </div>
    <h3 style="font-size: 24px; color: #1A202C; margin-bottom: 15px;">
      1:1 Coaching
    </h3>
    <p style="color: #718096; margin-bottom: 20px;">
      High-touch, personalized coaching for established entrepreneurs ready to scale fast.
    </p>
    <ul style="list-style: none; padding: 0; margin-bottom: 30px;">
      <li style="color: #4A5568; margin-bottom: 8px;">✓ Bi-weekly 1:1 sessions</li>
      <li style="color: #4A5568; margin-bottom: 8px;">✓ Unlimited Voxer access</li>
      <li style="color: #4A5568; margin-bottom: 8px;">✓ Custom growth roadmap</li>
    </ul>
    <button style="width: 100%; background: #5A67D8; color: white; padding: 14px; border: none; border-radius: 8px; cursor: pointer;">
      Schedule a Call →
    </button>
  </div>
  
</div>

</div> </section>

Guidelines

Avoid Website Pitfalls:

• Never: Use stock photos that look fake

• Never: Bury the CTA below the fold

• Avoid: Jargon that visitors don't understand

• Skip: Auto-playing video or audio

Homepage Best Practices:

• Hero headline should answer: "What do you do and for whom?"

• Include social proof above the fold (or just below)

• Primary CTA should be visible within 5 seconds

• Trust elements: logos, testimonials, stats

Navigation Rules:

• Maximum 5-7 main navigation items

• Most important pages first

• Mobile menu must be thumb-friendly

• Contact/Book should be in header

About Page Essentials:

• Lead with their story, not yours

• Personal photo builds trust

• Include credentials but don't brag

• End with CTA to work together

Copy Principles:

• Headlines: Clear > Clever

• Body copy: Conversational, not corporate

• Use "you" more than "we"

• Every page needs ONE clear CTA

Visual Hierarchy:

• Larger = more important

• Contrast draws attention

• White space creates focus

• Consistency builds trust

Mobile Optimization:

• Test on real phones, not just simulators

• Buttons minimum 44px tap target

• Text minimum 16px on mobile

• Images should be optimized (WebP format)

Speed Matters:

• Homepage should load in under 3 seconds

• Compress images before uploading

• Minimize third-party scripts

• Use lazy loading for below-fold content

Quality Checklist

• Does site communicate credibility instantly?

• Is navigation intuitive?

• Are CTAs clear and compelling?

• Is mobile experience excellent?

• Does this convert visitors effectively?

Additional Resources

Reference Files

• references/website-sections.md
• Page section templates