ray
82 lines
2.0 KiB
Markdown
82 lines
2.0 KiB
Markdown
# Website Blueprint Template
|
|
|
|
Use this format when designing a website before building. Write the blueprint first, then build from it.
|
|
|
|
---
|
|
|
|
## Business Context
|
|
- **Client:** [name]
|
|
- **Business:** [type — HVAC, handyman, plumbing, etc.]
|
|
- **USPs:** [2-4 unique selling propositions — 24/7, family-owned, flat-rate, fast response]
|
|
- **Service Areas:** [city list]
|
|
|
|
## URL Structure
|
|
```
|
|
/ → Homepage
|
|
/service-a → Service page A
|
|
/service-a/landing → Standalone landing page (for ads)
|
|
/service-b → Service page B
|
|
/contact → Contact / Quote Request
|
|
```
|
|
|
|
## Technology
|
|
- Static HTML/CSS/JS — no backend
|
|
- Form submissions via Web3Forms (free tier)
|
|
- No frameworks, no build step
|
|
- System font stack, CSS custom properties
|
|
|
|
---
|
|
|
|
## Per-Page Blueprint
|
|
|
|
For each page, list sections top-to-bottom with:
|
|
- Section name
|
|
- Visual elements (icons, photos, layout)
|
|
- Copy and headlines (with SEO keywords)
|
|
- CTAs (buttons, phone links)
|
|
- Psychology notes (what the visitor feels, what they need to see)
|
|
|
|
### Global Header
|
|
```
|
|
Layout: Logo | Nav links | Phone | CTA button
|
|
Mobile: Logo | Hamburger + sticky tap-to-call bar below
|
|
```
|
|
|
|
### Global Footer
|
|
```
|
|
Layout: Brand | Service links | Contact | Service areas
|
|
SEO: All service area cities in footer on every page
|
|
```
|
|
|
|
### Page: [Name]
|
|
#### Section 1: Hero
|
|
- Headline: [H1 with primary keyword + city]
|
|
- Subcopy: [1-2 lines]
|
|
- CTAs: [primary CTA, secondary CTA]
|
|
- Psychology: [what the visitor is thinking]
|
|
|
|
#### Section 2: [Name]
|
|
- ...
|
|
|
|
[Repeat for all sections]
|
|
|
|
---
|
|
|
|
## Color Palette
|
|
|
|
| Role | Color | Usage |
|
|
|------|-------|-------|
|
|
| Primary | hex | primary CTAs, brand elements |
|
|
| Secondary | hex | secondary CTAs |
|
|
| Emergency | hex | urgency CTAs if applicable |
|
|
| Dark | hex | body text, dark sections |
|
|
| Light | hex | page background |
|
|
|
|
## Implementation Priority
|
|
1. Global shell (header, footer, CSS, JS)
|
|
2. [Highest-conversion page]
|
|
3. [Contact form]
|
|
4. [Homepage]
|
|
5. [Remaining service pages]
|
|
6. Polish (schema, meta, images)
|