website-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

为教练、作家、演说家、顾问或软件公司打造世界级现代品牌网站。所搭建的网站在设计、UX、信息清晰度、转化准备度和品牌权威性方面均体现卓越水准。

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)

1. 首页（核心页面）

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

目的： 即刻传递清晰信息、品牌承诺与转化选项

Hero区域：

醒目标题（传递转型承诺）
包含受众定位与核心价值的副标题
主要CTA：预约咨询、开始使用、观看视频
[Hero图片或视频背景]

品牌定位：

2-3句话的定位声明
权威媒体/客户标志

核心价值：

3-5个价值主张要点
以价值为核心的标题及配套文案

客户见证：

轮播式视频或引用展示
头像及资质信息

权威展示区：

作者简介、媒体出镜记录、主题演讲片段

服务概览：

带CTA的可视化卡片

获客磁铁/订阅入口：

吸引用户留下联系方式的专属福利

重复CTA：

滚动触发的锚点按钮
悬浮式CTA选项

2. About Page (Trust Builder)

2. 关于我们页面（信任建立页）

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

目的： 建立共情、展示专业度、增强亲和力

个人故事：

带暖心介绍的Hero图片
展现成长与转变的真实经历

专业履历：

背景与资质
成果与认可
照片与媒体出镜记录

愿景与价值观：

核心使命
价值观声明
品牌初心

CTA模块：

联系、关注或预约邀请

3. Services/Products Page

3. 服务/产品页面

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

目的： 清晰且有说服力地展示产品/服务

标题：明确传递成果
分层服务（如有）
每项服务的核心价值
相关客户见证
定价（可选/需权限查看）
常见问题解答（打消顾虑）
滚动触发的CTA

4. Case Studies/Results Page

4. 案例研究/成果页面

Purpose: Showcase proof, inspire belief

Story-driven testimonials
Before & after snapshots
Video interviews
Specific metrics and results

目的： 展示成果、增强信任

故事化的客户见证
前后对比快照
视频采访
具体数据与成果

5. Contact Page

5. 联系页面

Purpose: Reduce friction to connect

Simple contact form
Booking calendar integration
Social icons
Location or virtual service note

目的： 降低用户联系门槛

简洁的联系表单
预约系统集成
社交图标
线下地址或虚拟服务说明

6. Blog/Resources

6. 博客/资源页面

Purpose: Thought leadership and SEO

Articles and interviews
Behind-the-scenes content
Lead magnet placements

目的： 打造思想领导力与SEO优化

文章与采访
幕后内容
获客磁铁放置位

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

清晰优先于花哨
共情驱动的信息传递
使用第二人称“你”
强调转型价值
易扫描的格式
行动导向的CTA

Integration Requirements

集成要求

CRM/Email platform connection
Booking system integration
Analytics and heatmaps
Accessibility compliance
Cookie/privacy policies

CRM/邮件平台连接
预约系统集成
分析与热图工具
无障碍合规
Cookie/隐私政策

Optional Pages

可选页面

Events/Speaking
Media/Press Kit
Podcast/Video Library
Affiliate Program
Client Portal

活动/演讲
媒体/新闻资料包
播客/视频库
联盟计划
客户门户

Examples

示例

Homepage Hero Section

首页Hero区域

html

<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>

html

<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

关于我们页面个人故事区域

html

<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>

html

<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

服务页面卡片布局

html

<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>

html

<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

避免网站误区：

绝对不要：使用看起来虚假的库存照片
绝对不要：将CTA放在页面折叠线以下
避免：使用访客无法理解的行话
跳过：自动播放的视频或音频

首页最佳实践：

Hero标题需回答：“你能为谁解决什么问题？”
在折叠线以上（或紧邻下方）加入社交证明
主要CTA需在5秒内可见
信任元素：品牌标志、客户见证、数据统计

导航规则：

主导航最多5-7个选项
最重要的页面放在前面
移动端菜单需适合拇指点击
联系/预约按钮需放在页眉

关于我们页面要点：

先讲用户的故事，而非自己的
个人照片能增强信任
展示资质但不炫耀
结尾加入合作CTA

文案原则：

标题：清晰＞花哨
正文：口语化，而非企业化
多用“你”而非“我们”
每个页面只需一个清晰的CTA

视觉层级：

尺寸越大，优先级越高
对比吸引注意力
留白创造焦点
一致性建立信任

移动端优化：

在真实手机上测试，而非仅用模拟器
按钮最小点击区域为44px
移动端文字最小为16px
图片需优化（WebP格式）

速度至关重要：

首页加载时间需在3秒以内
上传前压缩图片
减少第三方脚本
对折叠线以下内容使用懒加载

Quality Checklist

质量检查清单

Does site communicate credibility instantly?
Is navigation intuitive?
Are CTAs clear and compelling?
Is mobile experience excellent?
Does this convert visitors effectively?

网站是否能即刻传递可信度？
导航是否直观？
CTA是否清晰且有吸引力？
移动端体验是否出色？
网站能否有效转化访客？

website-design

Original

Translation

Brand Website Design

品牌网站设计

Core Objectives

核心目标

Website Page Structure

网站页面结构

1. Homepage (The Flagship)

1. 首页（核心页面）

2. About Page (Trust Builder)

2. 关于我们页面（信任建立页）

3. Services/Products Page

3. 服务/产品页面

4. Case Studies/Results Page

4. 案例研究/成果页面

5. Contact Page

5. 联系页面

6. Blog/Resources

6. 博客/资源页面

Design Principles

设计原则

Copywriting Guidelines

文案指南

Integration Requirements

集成要求

Optional Pages

可选页面

Examples

示例

Homepage Hero Section

首页Hero区域

About Page Personal Story Section

关于我们页面个人故事区域

Services Page Card Layout

服务页面卡片布局

Guidelines

指南

Quality Checklist

质量检查清单

Additional Resources

额外资源

Reference Files

参考文件