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