web-design-patterns（网页设计模式）

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

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:

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

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:

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

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

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

One Tier 1 signal beats three Tier 4 signals. Distribute trust throughout the page — don't isolate in one section.

Testimonial Approach

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.