668 lines
20 KiB
Markdown
Executable File
668 lines
20 KiB
Markdown
Executable File
# Website Design Document
|
||
|
||
> **How to use this document:** Fill in every section below. Replace the `_[fill in]_` placeholders with your details and tick the checkboxes that apply. Anywhere you see **💡 Recommendation**, that's a suggested default — keep it, edit it, or replace it. The more detail you provide, the closer the final website will match your vision.
|
||
|
||
---
|
||
|
||
## 1. Project Snapshot
|
||
|
||
| Field | Your Answer |
|
||
|---|---|
|
||
| **Company name** | _[fill in]_ |
|
||
| **Legal entity name (if different)** | _[fill in]_ |
|
||
| **Primary domain** | _[e.g. acme.com]_ |
|
||
| **Working title for the project** | _[e.g. "Acme Website Redesign 2026"]_ |
|
||
| **Target launch date** | _[fill in]_ |
|
||
| **Budget range** | _[fill in]_ |
|
||
| **Document owner** | _[name + email]_ |
|
||
| **Last updated** | _[date]_ |
|
||
|
||
---
|
||
|
||
## 2. Company Overview
|
||
|
||
### 2.1 Who we are
|
||
- **What we do (one sentence):** _[fill in]_
|
||
- **Tagline / one-liner:** _[fill in]_
|
||
- **Elevator pitch (3–4 sentences):** _[fill in]_
|
||
|
||
### 2.2 Mission, vision, values
|
||
- **Mission:** _[Why we exist]_
|
||
- **Vision:** _[Where we're going]_
|
||
- **Core values:** _[List 3–6, e.g. Honesty, Craft, Speed]_
|
||
|
||
### 2.3 Company facts
|
||
- **Founded:** _[year]_
|
||
- **Headquarters:** _[city, country]_
|
||
- **Other offices / coverage areas:** _[fill in]_
|
||
- **Team size:** _[fill in]_
|
||
- **Industry / sector:** _[fill in]_
|
||
- **Stage:** _[ ] Pre-revenue [ ] Early revenue [ ] Growth [ ] Established_
|
||
|
||
### 2.4 Our story
|
||
_Brief origin story — why the company was started, key milestones, what makes the journey notable. 100–250 words._
|
||
|
||
> _[fill in]_
|
||
|
||
### 2.5 Key milestones / achievements
|
||
- _[Milestone + year]_
|
||
- _[Award / press mention]_
|
||
- _[Notable client or partnership]_
|
||
|
||
---
|
||
|
||
## 3. Target Audience
|
||
|
||
### 3.1 Primary audience
|
||
- **Who they are:** _[e.g. operations managers at 50–500-person SaaS companies]_
|
||
- **Where they're based:** _[fill in]_
|
||
- **Age range:** _[fill in]_
|
||
- **Job titles / roles:** _[fill in]_
|
||
- **Industries:** _[fill in]_
|
||
|
||
### 3.2 Audience personas
|
||
Define 1–3 personas. Duplicate the block as needed.
|
||
|
||
**Persona 1 — _[name, e.g. "Ops Olivia"]_**
|
||
- Role / background: _[fill in]_
|
||
- Goals: _[What they want to achieve]_
|
||
- Pain points: _[What frustrates them today]_
|
||
- What they need from our site: _[e.g. proof we can scale, pricing clarity, a demo]_
|
||
- Triggers to convert: _[fill in]_
|
||
|
||
**Persona 2 — _[name]_**
|
||
- _[same fields]_
|
||
|
||
### 3.3 What we want visitors to do
|
||
Rank in priority order (1 = most important):
|
||
- [ ] Request a demo / consultation
|
||
- [ ] Buy a product or service
|
||
- [ ] Sign up for a free trial or newsletter
|
||
- [ ] Download a resource (whitepaper, case study)
|
||
- [ ] Contact sales
|
||
- [ ] Apply for a job
|
||
- [ ] Learn / build brand awareness
|
||
- [ ] Other: _[fill in]_
|
||
|
||
---
|
||
|
||
## 4. Goals, KPIs & Success Metrics
|
||
|
||
### 4.1 Business goals for this website
|
||
1. _[e.g. Generate 50 qualified leads per month]_
|
||
2. _[fill in]_
|
||
3. _[fill in]_
|
||
|
||
### 4.2 Measurable KPIs
|
||
| KPI | Current baseline | 6-month target |
|
||
|---|---|---|
|
||
| Monthly unique visitors | _[fill in]_ | _[fill in]_ |
|
||
| Conversion rate (visit → lead) | _[fill in]_ | _[fill in]_ |
|
||
| Average session duration | _[fill in]_ | _[fill in]_ |
|
||
| Demo / contact form submissions / month | _[fill in]_ | _[fill in]_ |
|
||
| Organic search traffic | _[fill in]_ | _[fill in]_ |
|
||
|
||
### 4.3 What "success" looks like 12 months after launch
|
||
> _[fill in]_
|
||
|
||
---
|
||
|
||
## 5. Competitor & Inspiration Landscape
|
||
|
||
### 5.1 Direct competitors
|
||
| Competitor | URL | What they do well | Where they fall short |
|
||
|---|---|---|---|
|
||
| _[Name]_ | _[URL]_ | _[fill in]_ | _[fill in]_ |
|
||
| _[Name]_ | _[URL]_ | _[fill in]_ | _[fill in]_ |
|
||
| _[Name]_ | _[URL]_ | _[fill in]_ | _[fill in]_ |
|
||
|
||
### 5.2 Sites we love (any industry)
|
||
List 3–5 sites whose design, copy, or feel you admire. Note **why**.
|
||
- _[URL]_ — _[what you like: typography, color, motion, copywriting tone, layout, etc.]_
|
||
- _[URL]_ — _[why]_
|
||
- _[URL]_ — _[why]_
|
||
|
||
### 5.3 Sites we want to look nothing like
|
||
- _[URL]_ — _[why not]_
|
||
|
||
### 5.4 Our differentiators
|
||
What makes us genuinely different / better? Be specific.
|
||
1. _[fill in]_
|
||
2. _[fill in]_
|
||
3. _[fill in]_
|
||
|
||
---
|
||
|
||
## 6. Products & Services
|
||
|
||
For each offering, fill in the block. Duplicate as needed.
|
||
|
||
### Offering 1 — _[name]_
|
||
- **What it is:** _[fill in]_
|
||
- **Who it's for:** _[fill in]_
|
||
- **Key benefits (3–5):** _[fill in]_
|
||
- **Features / what's included:** _[fill in]_
|
||
- **Pricing model:** _[ ] Fixed [ ] Tiered [ ] Custom quote [ ] Hidden until contact_
|
||
- **Price points (if shown):** _[fill in]_
|
||
- **Primary CTA:** _[e.g. "Book a demo", "Get a quote"]_
|
||
- **Supporting proof:** _[case studies, stats, testimonials to attach]_
|
||
|
||
### Offering 2 — _[name]_
|
||
_[same fields]_
|
||
|
||
---
|
||
|
||
## 7. Brand Identity
|
||
|
||
### 7.1 Logo
|
||
- [ ] We have a finalized logo (attach: _[file path / link]_)
|
||
- [ ] We have a logo but it needs cleanup
|
||
- [ ] We need a logo designed
|
||
|
||
### 7.2 Color palette
|
||
List hex codes. If you don't have a palette yet, describe the mood and we'll propose one.
|
||
|
||
| Role | Color | Hex | Notes |
|
||
|---|---|---|---|
|
||
| Primary | _[e.g. Deep blue]_ | `#______` | Used for CTAs, links |
|
||
| Secondary | _[fill in]_ | `#______` | _[fill in]_ |
|
||
| Accent | _[fill in]_ | `#______` | Used sparingly for emphasis |
|
||
| Neutral dark | _[fill in]_ | `#______` | Body text |
|
||
| Neutral light | _[fill in]_ | `#______` | Backgrounds |
|
||
| Success / Warning / Error | _[fill in]_ | `#______` | UI states |
|
||
|
||
> **💡 Recommendation:** Pick one primary brand color, one accent, and a neutral scale (5–7 grays). Avoid more than 3 saturated colors — it gets noisy fast.
|
||
|
||
### 7.3 Typography
|
||
- **Heading font:** _[e.g. Inter / Custom / "open to suggestion"]_
|
||
- **Body font:** _[fill in]_
|
||
- **Monospace (if used):** _[fill in]_
|
||
|
||
> **💡 Recommendation:** Use a pairing like **Inter** (headings + body) or **Fraunces + Inter** (editorial feel + clean body). Both are free, web-optimized, and load fast.
|
||
|
||
### 7.4 Imagery & illustration style
|
||
- [ ] Photography — real, candid people in our offices
|
||
- [ ] Photography — stock (specify style: _[bright & airy / moody / corporate / lifestyle]_)
|
||
- [ ] Custom illustration (style: _[fill in]_)
|
||
- [ ] 3D renders
|
||
- [ ] Icon-led, minimal imagery
|
||
- [ ] Mix — describe: _[fill in]_
|
||
|
||
### 7.5 Voice & tone
|
||
Pick 3–5 adjectives that describe how we sound:
|
||
- [ ] Authoritative [ ] Friendly [ ] Playful [ ] Technical [ ] Aspirational
|
||
- [ ] Witty [ ] Calm [ ] Direct [ ] Warm [ ] Bold
|
||
- Other: _[fill in]_
|
||
|
||
**Example phrases we'd say:**
|
||
> _[2–3 sample sentences in our voice]_
|
||
|
||
**Example phrases we'd never say:**
|
||
> _[fill in]_
|
||
|
||
### 7.6 Existing brand assets
|
||
- [ ] Brand guidelines doc — link: _[fill in]_
|
||
- [ ] Logo files (SVG / PNG)
|
||
- [ ] Photography library
|
||
- [ ] Existing website copy worth keeping
|
||
|
||
---
|
||
|
||
## 8. Site Structure (Information Architecture)
|
||
|
||
### 8.1 Sitemap
|
||
Tick the pages you want. Add custom ones at the bottom.
|
||
|
||
- [ ] **Home**
|
||
- [ ] **About** — story, team, values
|
||
- [ ] Team / Leadership sub-page
|
||
- [ ] Careers sub-page
|
||
- [ ] **Services** / **Products** — overview
|
||
- [ ] Individual service / product pages (one per offering)
|
||
- [ ] **Case Studies** / **Work** / **Portfolio**
|
||
- [ ] Individual case study pages
|
||
- [ ] **Pricing**
|
||
- [ ] **Blog** / **Resources** / **Insights**
|
||
- [ ] Article template
|
||
- [ ] Category pages
|
||
- [ ] **FAQ**
|
||
- [ ] **Contact**
|
||
- [ ] **Book a demo** / **Get a quote** (landing page)
|
||
- [ ] **Press / News**
|
||
- [ ] **Partners**
|
||
- [ ] **404 page**
|
||
- [ ] **Thank-you pages** (post-form)
|
||
- [ ] **Privacy Policy** _(required)_
|
||
- [ ] **Terms of Service** _(required)_
|
||
- [ ] **Cookie Policy** _(if EU/UK visitors)_
|
||
- Custom: _[fill in]_
|
||
|
||
### 8.2 Primary navigation
|
||
List the top-nav items in order:
|
||
1. _[fill in]_
|
||
2. _[fill in]_
|
||
3. _[fill in]_
|
||
4. _[fill in]_
|
||
5. **CTA button** — label: _[e.g. "Book a demo"]_
|
||
|
||
### 8.3 Footer
|
||
- [ ] Mini sitemap
|
||
- [ ] Contact info (address, phone, email)
|
||
- [ ] Social links: _[which platforms]_
|
||
- [ ] Newsletter signup
|
||
- [ ] Legal links (Privacy, Terms, Cookies)
|
||
- [ ] Company registration number / VAT (if required)
|
||
- [ ] Industry certifications / logos
|
||
|
||
---
|
||
|
||
## 9. Page-by-Page Content Brief
|
||
|
||
### 9.1 Home
|
||
- **Hero headline (max 10 words):** _[fill in]_
|
||
- **Hero sub-headline (1–2 sentences):** _[fill in]_
|
||
- **Primary CTA:** _[label + destination]_
|
||
- **Secondary CTA:** _[label + destination]_
|
||
- **Sections to include (in order):**
|
||
- [ ] Hero with visual
|
||
- [ ] Social proof bar (client logos / press)
|
||
- [ ] What we do (3–4 service highlights)
|
||
- [ ] How it works / process
|
||
- [ ] Why us / differentiators
|
||
- [ ] Featured case study or proof point
|
||
- [ ] Testimonials
|
||
- [ ] Stats / metrics
|
||
- [ ] Recent blog posts
|
||
- [ ] Final CTA block
|
||
- **Key visuals needed:** _[fill in]_
|
||
|
||
### 9.2 About
|
||
- Origin story: _[link to §2.4 or expand here]_
|
||
- Team intro: _[ ] full team grid [ ] leadership only [ ] no photos_
|
||
- Values block: _[link to §2.2]_
|
||
- Office / culture photos: _[ ] yes [ ] no_
|
||
- Press / awards row: _[ ] yes [ ] no_
|
||
|
||
### 9.3 Services / Products
|
||
For each offering, one page with:
|
||
- Hero with the offering name + one-liner
|
||
- The problem it solves
|
||
- How it works (steps or features)
|
||
- What's included
|
||
- Pricing or "request a quote"
|
||
- FAQs specific to this offering
|
||
- CTA
|
||
|
||
### 9.4 Case Studies / Work
|
||
- Number of case studies at launch: _[fill in]_
|
||
- Template per case study:
|
||
- Client + industry
|
||
- Challenge (the problem)
|
||
- Approach (what we did)
|
||
- Outcome (metrics, quotes)
|
||
- Visuals: _[before/after, screenshots, photos]_
|
||
|
||
### 9.5 Pricing _(if applicable)_
|
||
- [ ] Show full pricing
|
||
- [ ] Show tiers, hide exact numbers
|
||
- [ ] "Contact us" only
|
||
- Tiers: _[list each tier with price + what's included]_
|
||
- Add-ons: _[fill in]_
|
||
|
||
### 9.6 Blog / Resources
|
||
- Launch with how many posts? _[fill in]_
|
||
- Categories: _[fill in]_
|
||
- Authors shown? _[ ] yes [ ] no_
|
||
- Comments enabled? _[ ] yes [ ] no_
|
||
- Newsletter signup on every post? _[ ] yes [ ] no_
|
||
|
||
### 9.7 Contact
|
||
- [ ] Contact form (fields: _[name, email, company, message, ...]_)
|
||
- [ ] Direct email
|
||
- [ ] Phone number
|
||
- [ ] Physical address + map
|
||
- [ ] Office hours
|
||
- [ ] Calendly / booking link
|
||
- [ ] Live chat widget
|
||
|
||
### 9.8 Other pages
|
||
_[Add custom briefs as needed]_
|
||
|
||
---
|
||
|
||
## 10. Features & Functionality
|
||
|
||
Tick everything the site needs:
|
||
|
||
**Lead capture & forms**
|
||
- [ ] Contact form
|
||
- [ ] Demo request form
|
||
- [ ] Quote / estimate form
|
||
- [ ] Newsletter signup
|
||
- [ ] Gated content (downloads behind email)
|
||
- [ ] Multi-step / progressive forms
|
||
|
||
**Content & engagement**
|
||
- [ ] Blog with categories & tags
|
||
- [ ] Search
|
||
- [ ] Filtering on listings (case studies, blog)
|
||
- [ ] Comments
|
||
- [ ] Social share buttons
|
||
- [ ] RSS feed
|
||
|
||
**Booking & scheduling**
|
||
- [ ] Calendly / Cal.com embed
|
||
- [ ] Custom booking flow
|
||
- [ ] Event RSVPs
|
||
|
||
**Commerce / payments**
|
||
- [ ] One-off product checkout
|
||
- [ ] Subscription billing (Stripe)
|
||
- [ ] Invoice / quote generation
|
||
|
||
**Authentication / portal**
|
||
- [ ] Client login area
|
||
- [ ] Account dashboard
|
||
- [ ] File / document sharing
|
||
|
||
**Interactivity**
|
||
- [ ] Animations / scroll effects
|
||
- [ ] Video backgrounds
|
||
- [ ] Interactive product tour
|
||
- [ ] Calculator / configurator
|
||
- [ ] Live chat (Intercom / Crisp / HubSpot)
|
||
- [ ] Chatbot (AI / rules-based)
|
||
|
||
**Localization**
|
||
- [ ] Multi-language: _[which languages]_
|
||
- [ ] Multi-currency
|
||
- [ ] Region-aware content
|
||
|
||
**Other:** _[fill in]_
|
||
|
||
---
|
||
|
||
## 11. Design Direction
|
||
|
||
### 11.1 Mood
|
||
Pick the words that fit. Strike through ones that don't.
|
||
Minimalist · Bold · Elegant · Playful · Editorial · Corporate · Warm · Futuristic · Premium · Approachable · Technical · Human · Spacious · Dense · Quiet · Energetic
|
||
|
||
**Top 3 for our brand:** _[fill in]_
|
||
|
||
### 11.2 Layout preferences
|
||
- **Density:** _[ ] Spacious / lots of whitespace [ ] Balanced [ ] Dense / information-rich_
|
||
- **Width:** _[ ] Full-bleed / edge-to-edge [ ] Contained (max ~1200–1400px)_
|
||
- **Page rhythm:** _[ ] One idea per scroll-section [ ] Multi-column / magazine-style_
|
||
|
||
### 11.3 Motion & interactivity
|
||
- [ ] No motion — fast and static
|
||
- [ ] Subtle (fade-ins, hover states)
|
||
- [ ] Moderate (scroll-triggered reveals, parallax)
|
||
- [ ] Rich (custom animations, WebGL, video)
|
||
|
||
### 11.4 Devices to prioritize
|
||
- [ ] Mobile-first (most traffic on phones)
|
||
- [ ] Desktop-first (B2B sales context)
|
||
- [ ] Equal weight
|
||
- **Browser support:** _[modern evergreen / IE11 / specify]_
|
||
|
||
---
|
||
|
||
## 12. Tech Stack
|
||
|
||
### 12.1 Frontend framework
|
||
- [ ] **Next.js (React)** — 💡 Recommended for marketing sites that need flexibility, blog, and excellent SEO
|
||
- [ ] **Astro** — 💡 Recommended for content-heavy, mostly-static sites; fastest performance
|
||
- [ ] **SvelteKit** — modern, lean, great DX
|
||
- [ ] **Plain HTML/CSS/JS** — simplest, for very small sites
|
||
- [ ] Other: _[fill in]_
|
||
|
||
### 12.2 Styling
|
||
- [ ] **Tailwind CSS** — 💡 Recommended, fastest to iterate
|
||
- [ ] CSS Modules
|
||
- [ ] Styled Components / Emotion
|
||
- [ ] Vanilla CSS
|
||
- [ ] Other: _[fill in]_
|
||
|
||
### 12.3 CMS / Content management
|
||
Where will marketing edit content?
|
||
- [ ] **Sanity** — 💡 Recommended; flexible schemas, great editor UX
|
||
- [ ] **Contentful** — enterprise-friendly, more expensive
|
||
- [ ] **Strapi** — self-hosted, open source
|
||
- [ ] **WordPress (headless)** — familiar editor, huge ecosystem
|
||
- [ ] **Markdown in the repo** — for tech-savvy teams, no CMS overhead
|
||
- [ ] **Notion as CMS** — easy for non-technical teams
|
||
- [ ] No CMS — developers update content directly
|
||
- [ ] Other: _[fill in]_
|
||
|
||
### 12.4 Hosting & deployment
|
||
- [ ] **Vercel** — 💡 Recommended for Next.js; preview URLs, zero config
|
||
- [ ] **Netlify** — great for Astro / static sites
|
||
- [ ] **Cloudflare Pages** — fast, generous free tier
|
||
- [ ] AWS / GCP / Azure — if existing cloud commitments
|
||
- [ ] Other: _[fill in]_
|
||
|
||
### 12.5 Domain & DNS
|
||
- **Existing domain:** _[fill in]_
|
||
- **Registrar:** _[fill in]_
|
||
- **DNS provider:** _[ ] Same as registrar [ ] Cloudflare [ ] Other_
|
||
- **Email hosting:** _[Google Workspace / Microsoft 365 / other]_
|
||
|
||
### 12.6 Forms backend
|
||
- [ ] **HubSpot Forms** — if using HubSpot CRM
|
||
- [ ] **Formspree / Basin** — simple email-based handling
|
||
- [ ] **Custom API + database**
|
||
- [ ] CMS-native (Sanity, etc.)
|
||
|
||
### 12.7 Repository & CI
|
||
- **Code host:** _[ ] GitHub [ ] GitLab [ ] Bitbucket_
|
||
- **CI/CD:** _[ ] Vercel/Netlify built-in [ ] GitHub Actions [ ] Other_
|
||
|
||
---
|
||
|
||
## 13. Integrations
|
||
|
||
Tick everything that needs to talk to the website.
|
||
|
||
**Analytics & attribution**
|
||
- [ ] Google Analytics 4
|
||
- [ ] Plausible / Fathom (privacy-friendly) — 💡 Recommended if GDPR matters
|
||
- [ ] PostHog (product analytics)
|
||
- [ ] Hotjar / Microsoft Clarity (heatmaps & recordings)
|
||
|
||
**Marketing & CRM**
|
||
- [ ] HubSpot
|
||
- [ ] Salesforce
|
||
- [ ] Pipedrive
|
||
- [ ] Mailchimp / ConvertKit / Beehiiv (newsletter)
|
||
- [ ] Customer.io / Klaviyo
|
||
|
||
**Communication**
|
||
- [ ] Slack notifications on form submits
|
||
- [ ] Intercom / Crisp / HelpScout (live chat / helpdesk)
|
||
|
||
**Booking & payments**
|
||
- [ ] Calendly / Cal.com
|
||
- [ ] Stripe
|
||
- [ ] PayPal
|
||
|
||
**Other**
|
||
- [ ] Algolia / Meilisearch (search)
|
||
- [ ] Tag manager (GTM)
|
||
- [ ] reCAPTCHA / Turnstile (form spam)
|
||
- Custom API: _[fill in]_
|
||
|
||
---
|
||
|
||
## 14. SEO & Content Strategy
|
||
|
||
### 14.1 Target keywords
|
||
List 5–15 keywords / phrases you want to rank for.
|
||
1. _[fill in]_
|
||
2. _[fill in]_
|
||
3. _[fill in]_
|
||
|
||
### 14.2 Per-page meta
|
||
We'll fill these per page during build, but flag any **must-have** titles or descriptions here.
|
||
- _[fill in]_
|
||
|
||
### 14.3 Structured data
|
||
- [ ] Organization schema
|
||
- [ ] LocalBusiness schema (if relevant)
|
||
- [ ] Article schema (blog)
|
||
- [ ] FAQ schema
|
||
- [ ] Product / Service schema
|
||
- [ ] BreadcrumbList
|
||
|
||
### 14.4 Redirects / migration
|
||
If replacing an existing site:
|
||
- [ ] Old sitemap to preserve: _[link]_
|
||
- [ ] 301 redirect map needed: _[ ] yes [ ] no_
|
||
- [ ] URL structure changing? _[fill in]_
|
||
|
||
### 14.5 Content production
|
||
- Who writes the copy? _[ ] We will [ ] You / your team [ ] External copywriter_
|
||
- Who edits the blog post-launch? _[fill in]_
|
||
- Cadence: _[posts per month]_
|
||
|
||
---
|
||
|
||
## 15. Accessibility, Compliance & Legal
|
||
|
||
### 15.1 Accessibility
|
||
- [ ] WCAG 2.1 **AA** target — 💡 Recommended baseline
|
||
- [ ] WCAG 2.1 AAA (stricter, for public-sector / health)
|
||
- [ ] No specific target
|
||
|
||
### 15.2 Privacy & data
|
||
- **Visitors from EU/UK?** _[ ] yes [ ] no_ → if yes, GDPR applies
|
||
- **Visitors from California?** _[ ] yes [ ] no_ → if yes, CCPA applies
|
||
- [ ] Cookie consent banner needed
|
||
- [ ] Privacy policy already exists — link: _[fill in]_
|
||
- [ ] Need privacy policy written
|
||
- [ ] Terms of service already exists — link: _[fill in]_
|
||
- [ ] Need ToS written
|
||
- **Data controller / DPO contact:** _[fill in]_
|
||
|
||
### 15.3 Industry-specific
|
||
- [ ] Healthcare (HIPAA) — _[fill in]_
|
||
- [ ] Finance / banking — _[fill in]_
|
||
- [ ] Children's products (COPPA)
|
||
- [ ] Other regulated: _[fill in]_
|
||
|
||
---
|
||
|
||
## 16. Performance & Quality Bar
|
||
|
||
### 16.1 Performance targets
|
||
- [ ] **Lighthouse score 90+** on mobile (performance, accessibility, SEO) — 💡 Recommended
|
||
- [ ] **LCP < 2.5s**, **CLS < 0.1**, **INP < 200ms** (Core Web Vitals "good")
|
||
- [ ] Page weight under _[e.g. 1 MB]_ on landing pages
|
||
|
||
### 16.2 Browser support
|
||
- Modern Chrome / Safari / Firefox / Edge (last 2 versions) — 💡 Recommended default
|
||
- [ ] Need IE11 / older support: _[describe]_
|
||
|
||
### 16.3 Quality assurance
|
||
- [ ] Cross-browser testing
|
||
- [ ] Mobile device testing (iOS Safari, Android Chrome)
|
||
- [ ] Accessibility audit (manual + automated)
|
||
- [ ] Performance audit (Lighthouse + WebPageTest)
|
||
- [ ] SEO audit pre-launch
|
||
|
||
---
|
||
|
||
## 17. Timeline & Milestones
|
||
|
||
| Milestone | Target date | Owner |
|
||
|---|---|---|
|
||
| Design document signed off | _[date]_ | _[name]_ |
|
||
| Wireframes approved | _[date]_ | _[name]_ |
|
||
| Visual designs approved | _[date]_ | _[name]_ |
|
||
| Content delivered | _[date]_ | _[name]_ |
|
||
| Development complete | _[date]_ | _[name]_ |
|
||
| QA / UAT | _[date]_ | _[name]_ |
|
||
| Soft launch / staging review | _[date]_ | _[name]_ |
|
||
| **Public launch** | _[date]_ | _[name]_ |
|
||
|
||
---
|
||
|
||
## 18. Budget
|
||
|
||
| Bucket | Estimate |
|
||
|---|---|
|
||
| Design | _[fill in]_ |
|
||
| Development | _[fill in]_ |
|
||
| Copywriting | _[fill in]_ |
|
||
| Photography / illustration | _[fill in]_ |
|
||
| CMS / hosting / SaaS (annual) | _[fill in]_ |
|
||
| Contingency (10–15%) | _[fill in]_ |
|
||
| **Total** | _[fill in]_ |
|
||
|
||
---
|
||
|
||
## 19. Post-Launch: Maintenance & Growth
|
||
|
||
### 19.1 Ownership after launch
|
||
- **Day-to-day content edits:** _[name / role]_
|
||
- **Bug fixes & dev support:** _[fill in]_
|
||
- **Hosting & DNS:** _[fill in]_
|
||
|
||
### 19.2 Ongoing work
|
||
- [ ] Monthly performance / analytics review
|
||
- [ ] Quarterly content refresh
|
||
- [ ] Annual design review
|
||
- [ ] SEO / content marketing retainer
|
||
- [ ] Paid acquisition (landing pages)
|
||
|
||
### 19.3 Roadmap (post-launch features)
|
||
Things we know we want but aren't launching with:
|
||
1. _[fill in]_
|
||
2. _[fill in]_
|
||
3. _[fill in]_
|
||
|
||
---
|
||
|
||
## 20. Stakeholders & Approvals
|
||
|
||
| Name | Role | Email | Sign-off needed on |
|
||
|---|---|---|---|
|
||
| _[fill in]_ | Project sponsor | _[fill in]_ | Final launch |
|
||
| _[fill in]_ | Marketing lead | _[fill in]_ | Copy, design |
|
||
| _[fill in]_ | Tech lead | _[fill in]_ | Stack, integrations |
|
||
| _[fill in]_ | Legal / compliance | _[fill in]_ | Privacy, ToS |
|
||
| _[fill in]_ | Design lead | _[fill in]_ | Visual direction |
|
||
|
||
---
|
||
|
||
## 21. Open Questions & Risks
|
||
|
||
Track anything unresolved here so it doesn't get lost.
|
||
|
||
- [ ] _[Question or risk]_ — owner: _[name]_ — due: _[date]_
|
||
- [ ] _[fill in]_
|
||
- [ ] _[fill in]_
|
||
|
||
---
|
||
|
||
## 22. Appendix: Asset Checklist
|
||
|
||
Before development starts, gather these:
|
||
- [ ] Logo (SVG + PNG, light + dark variants)
|
||
- [ ] Brand guidelines (if any)
|
||
- [ ] High-res photography (team, office, product)
|
||
- [ ] Client logos (for social proof bar) — with permission to use
|
||
- [ ] Testimonial quotes — with permission and attribution
|
||
- [ ] Case study source material
|
||
- [ ] Existing copy worth keeping
|
||
- [ ] Press logos / awards / certifications
|
||
- [ ] Video / motion assets
|
||
- [ ] Founder / team bios + headshots
|
||
- [ ] Social media handles & links
|
||
- [ ] Office address, phone, support email
|
||
|
||
---
|
||
|
||
_End of document. Once every section above is filled in, this is everything needed to design, build, and launch the website._
|