Pagesmith.ai
Start building

Design Patterns

Proven design patterns for websites. Layouts, components, and visual hierarchy that work.

Design patterns that consistently work. Use these as building blocks.

Page Layouts

Standard Marketing Page

[Header - Logo, Nav, CTA]
[Hero - Headline, Subhead, CTA, Visual]
[Social Proof - Logos or testimonials]
[Features - 3-4 key benefits]
[How It Works - Steps or process]
[Testimonials - Customer quotes]
[Pricing - Plans comparison]
[FAQ - Common questions]
[CTA - Final call to action]
[Footer - Links, contact, legal]

Documentation Page

[Header - Logo, Search, Nav]
[Sidebar - Navigation tree]
[Content - Prose, code, examples]
[TOC - Right sidebar on desktop]
[Prev/Next - Navigation]
[Footer - Edit link, feedback]

Blog Post

[Header]
[Hero Image]
[Title, Meta, Author]
[Content]
[Share Links]
[Author Bio]
[Related Posts]
[Newsletter Signup]
[Footer]

Hero Sections

Split Hero

Visual on one side, content on the other:

[Content Column]     [Visual Column]
- Tagline            - Image, video, or
- Headline             illustration
- Description
- CTA buttons

Works for: SaaS, products, apps

Centered Hero

All content centered:

         [Tagline]
        [Headline]
       [Description]
    [CTA]      [CTA]

Works for: Landing pages, campaigns

Hero with Background

Full-width background image or gradient:

┌──────────────────────────────────┐
│   [Background Image/Gradient]    │
│                                  │
│          [Headline]              │
│         [Description]            │
│            [CTA]                 │
│                                  │
└──────────────────────────────────┘

Works for: Bold statements, portfolios

Feature Sections

Feature Grid

3 or 4 column grid with icons:

[Icon]    [Icon]    [Icon]
Title     Title     Title
Desc      Desc      Desc

[Icon]    [Icon]    [Icon]
Title     Title     Title
Desc      Desc      Desc

Alternating Features

Image and text alternate sides:

[Text]              [Image]
----------------------------
[Image]             [Text]
----------------------------
[Text]              [Image]

Feature Cards

Each feature in its own card:

┌─────────┐ ┌─────────┐ ┌─────────┐
│ [Icon]  │ │ [Icon]  │ │ [Icon]  │
│ Title   │ │ Title   │ │ Title   │
│ Desc    │ │ Desc    │ │ Desc    │
│ [Link]  │ │ [Link]  │ │ [Link]  │
└─────────┘ └─────────┘ └─────────┘

Social Proof

Logo Bar

Grayscale client/press logos in a row:

"Trusted by teams at:"
[Logo] [Logo] [Logo] [Logo] [Logo]

Testimonial Cards

Quote cards in grid or carousel:

┌────────────────┐
│ "Quote text    │
│ goes here..."  │
│                │
│ [Photo] Name   │
│         Title  │
└────────────────┘

Stats Row

Key numbers with context:

[2,000+]     [$5M]        [4.9★]
 Users      Processed    Rating

Pricing Tables

Three-Tier Standard

┌─────────┐ ┌──────────┐ ┌─────────┐
│  Free   │ │   Pro    │ │Enterprise│
│         │ │ Popular  │ │          │
│  $0     │ │  $29/mo  │ │ Custom   │
│         │ │          │ │          │
│ • Feat  │ │ • Feat   │ │ • Feat   │
│ • Feat  │ │ • Feat   │ │ • Feat   │
│         │ │ • Feat   │ │ • Feat   │
│         │ │ • Feat   │ │ • Feat   │
│         │ │          │ │          │
│ [Start] │ │ [Start]  │ │[Contact] │
└─────────┘ └──────────┘ └─────────┘

Comparison Table

For detailed feature comparison:

Feature      | Free | Pro | Enterprise
─────────────┼──────┼─────┼───────────
Projects     |  3   | 10  | Unlimited
Team members |  1   |  5  | Unlimited
Support      | Docs | Email| Dedicated

CTAs

Primary CTA

High contrast, clear action:

[██████████████████]
  Get Started Free

Secondary CTA

Lower emphasis, alternative action:

[──────────────────]
    Learn More

CTA Section

Full-width final call to action:

┌──────────────────────────────────┐
│      Ready to get started?       │
│   [Primary CTA]  [Secondary CTA] │
└──────────────────────────────────┘

Standard Header

[Logo]  [Nav Links]           [CTA]

Docs Header

[Logo]  [Search]  [Docs] [API] [CTA]

Mobile Menu

Hamburger that opens to:

┌────────────────┐
│ [×]            │
│ Link           │
│ Link           │
│ Link           │
│ [CTA]          │
└────────────────┘
[Logo]      [Product]    [Company]   [Legal]
            Features     About       Privacy
Description Pricing      Blog        Terms
            Docs         Careers

[Social Icons]           © 2025 Company
© 2025 Company  |  Privacy  |  Terms  |  [Social]

Visual Hierarchy

Contrast

Guide attention with contrast:

  • Large vs. small
  • Bold vs. light
  • Color vs. gray
  • Filled vs. outlined

Spacing

Use consistent spacing scale:

  • Within components: small (4-8px)
  • Between elements: medium (16-24px)
  • Between sections: large (64-96px)

Alignment

Align to a grid:

  • Left-align body text
  • Center for emphasis
  • Consistent margins

Responsive Patterns

Stack on Mobile

Desktop:  [A] [B] [C]
Mobile:   [A]
          [B]
          [C]

Hide on Mobile

Remove secondary elements on small screens.

Different Order

Reorder for mobile priority:

  • CTA before content
  • Hero image after headline