Web Design Patterns
Principle-based patterns for designing website sections that feel human-designed, not AI-generated. Each pattern teaches WHY and WHEN, not just templates to copy.
What You Produce
Well-designed website sections: heroes, card layouts, CTAs, trust signals, and testimonials that match the business context and avoid the "AI skeleton" look.
When to Read Which Reference
| Building this... |
Read this reference |
| Homepage hero, page headers, landing pages |
references/hero-patterns.md |
| Service cards, team grids, pricing tiers, portfolios |
references/card-patterns.md |
| Conversion sections, buttons, banner CTAs |
references/cta-patterns.md |
| Credibility: badges, licences, reviews, guarantees |
references/trust-signals.md |
| Customer reviews, social proof, quote sections |
references/testimonial-patterns.md |
Load on demand — don't read all five for every project. Read the one(s) relevant to the current section.
Cross-Cutting Principles
These apply to ALL patterns. Internalise these before reading any reference file.
Anti-AI Patterns (Avoid These)
The "AI skeleton" that signals template-generated design:
- The sequence: Hero → trust bar → 3 identical cards → features → stats → CTA → footer
- Democratic design: Every element gets equal visual weight, no hierarchy
- Perfect symmetry: Everything centred, perfectly aligned, no intentional asymmetry
- Identical repetition: All cards same size, same structure, same padding, same shadow
- Generic copy: "Learn More" as every CTA, "Quality Service You Can Trust" as every headline
- Decoration without purpose: Floating shapes, random gradients, abstract blobs
What Makes Design Feel Human
- One element clearly dominates — hierarchy, not democracy
- Asymmetry is intentional — not everything centred or balanced
- Specific, opinionated copy — "Schedule Your Free Roof Inspection" not "Learn More"
- Visual weight guides the eye — you know where to look first, second, third
- Restraint — not every technique used, just the ones that serve the purpose
- Context-appropriate — emergency plumber looks different from luxury hotel
Ethical Rules
Non-negotiable across all patterns:
On lead-gen sites (no real business data), NEVER fabricate:
- Star ratings or review counts
- Specific years in business
- Licence or ABN numbers
- Named individuals or team members
- Exact customer counts
Safe alternatives for lead-gen:
- "Experienced Team" (not "25 Years Experience")
- "Highly Rated" (not "4.9 Stars (127 Reviews)")
- "Licensed & Insured" (not "QBCC License #1234567")
Business Context Shapes Everything
The same section type looks completely different for different businesses:
| Business type |
Design feel |
| Emergency services |
Direct, immediate, phone-first |
| Luxury/hospitality |
Spacious, refined, atmospheric |
| Trades/local services |
Trustworthy, capable, genuine |
| Professional/corporate |
Confident, clean, structured |
| Creative/agency |
Distinctive, bold, personality-driven |
Quick Pattern Examples
Hero Approaches
Image-dominant (strong photography available):
- Let the image do the work, minimal text
- One clear focal point
- Text placement within image composition, not slapped on top
Typography-dominant (no strong imagery):
- Font choice, size, weight, spacing IS the design
- Generous whitespace as active design element
- Colour blocking or subtle texture instead of stock photos
Split/balanced (strong copy + strong imagery):
- One side dominates slightly — true 50/50 feels indecisive
- On mobile, order matters — which element first in vertical stack?
Card Layout Decision
- Count items first — wrong grid math creates orphan cards
- Check hierarchy — is one item more important? Feature it at 2x size
- Content density — image-heavy = fewer columns, text-heavy = more columns
- Orphan fix — never leave 1 card alone on a row
CTA Hierarchy
Match CTA urgency to business context:
- Emergency services: Phone number IS the CTA. Huge, high-contrast, tappable.
- Professional services: Lower commitment first. "Book a consultation."
- Creative/agency: Relationship-building. "View our work."
Golden rule: Make your case first, then ask for action. CTA appears AFTER value.
Trust Signal Hierarchy
| Tier |
Type |
Example |
| 1 (Strongest) |
Specific, verifiable |
"QBCC License #1234567" |
| 2 |
Third-party validation |
"4.8 stars (127 Google Reviews)" + link |
| 3 |
Self-claimed |
"Fully licensed and insured" |
| 4 (Weakest) |
Generic assurances |
"Quality guaranteed" |
One Tier 1 signal beats three Tier 4 signals. Distribute trust throughout the page — don't isolate in one section.
Testimonial Approach
| Situation |
Approach |
| One powerful testimonial |
Single featured quote, make it big |
| 3-6 good testimonials |
Grid with variety, one featured |
| No real testimonials |
Service promises, guarantees, process descriptions |
Never use carousels — users see 1 of 5 testimonials, <1% click controls. Show all or curate the best 3.
Reference File Index
Each reference is a deep-dive (300-470 lines) with full principles, anti-patterns, implementation patterns, and business-specific guidance.
| File |
Lines |
Covers |
hero-patterns.md |
~470 |
Approach selection, constraint-based creativity, overlay techniques, responsive behaviour, page-specific heroes |
card-patterns.md |
~550 |
Layout decision framework, anti-sameness strategies, grid math, orphan handling, CSS patterns, business context |
cta-patterns.md |
~420 |
Action hierarchy, placement strategy, copy principles, visual design, mobile considerations, context-specific CTAs |
trust-signals.md |
~490 |
Trust psychology, trust hierarchy, context-sensitive trust, lead-gen vs client, placement strategy, anti-patterns |
testimonial-patterns.md |
~350 |
Social proof psychology, lead-gen ethics, design approach selection, content principles, placement, alternatives |
