Web Design Patterns

What You Produce

When to Read Which Reference

references/hero-patterns.md

references/card-patterns.md

references/cta-patterns.md

references/trust-signals.md

references/testimonial-patterns.md

Cross-Cutting Principles

Anti-AI Patterns (Avoid These)

1. The sequence: Hero → trust bar → 3 identical cards → features → stats → CTA → footer
2. Democratic design: Every element gets equal visual weight, no hierarchy
3. Perfect symmetry: Everything centred, perfectly aligned, no intentional asymmetry
4. Identical repetition: All cards same size, same structure, same padding, same shadow
5. Generic copy: "Learn More" as every CTA, "Quality Service You Can Trust" as every headline
6. Decoration without purpose: Floating shapes, random gradients, abstract blobs

What Makes Design Feel Human

1. One element clearly dominates — hierarchy, not democracy
2. Asymmetry is intentional — not everything centred or balanced
3. Specific, opinionated copy — "Schedule Your Free Roof Inspection" not "Learn More"
4. Visual weight guides the eye — you know where to look first, second, third
5. Restraint — not every technique used, just the ones that serve the purpose
6. Context-appropriate — emergency plumber looks different from luxury hotel

Ethical Rules

• Star ratings or review counts
• Specific years in business
• Licence or ABN numbers
• Named individuals or team members
• Exact customer counts

• "Experienced Team" (not "25 Years Experience")
• "Highly Rated" (not "4.9 Stars (127 Reviews)")
• "Licensed & Insured" (not "QBCC License #1234567")

Business Context Shapes Everything

Quick Pattern Examples

Hero Approaches

• Let the image do the work, minimal text
• One clear focal point
• Text placement within image composition, not slapped on top

• Font choice, size, weight, spacing IS the design
• Generous whitespace as active design element
• Colour blocking or subtle texture instead of stock photos

• One side dominates slightly — true 50/50 feels indecisive
• On mobile, order matters — which element first in vertical stack?

Card Layout Decision

1. Count items first — wrong grid math creates orphan cards
2. Check hierarchy — is one item more important? Feature it at 2x size
3. Content density — image-heavy = fewer columns, text-heavy = more columns
4. Orphan fix — never leave 1 card alone on a row

CTA Hierarchy

• 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."

Trust Signal Hierarchy

Testimonial Approach

Reference File Index

hero-patterns.md

card-patterns.md

cta-patterns.md

trust-signals.md

testimonial-patterns.md