website-design（网站设计）

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