Wireframing

Wireframes là low-fidelity representations của design.

Fidelity Levels

Low-Fidelity (Lo-Fi)

Paper sketches
Basic shapes
No colors
Quick iterations

Mid-Fidelity

Digital wireframes
Grayscale
Real content
More detail

High-Fidelity (Hi-Fi)

Detailed designs
Real colors
Real images
Close to final product

Common Elements

┌─────────────────────────────┐
│ [Logo]        [Nav] [Nav]   │ ← Header
├─────────────────────────────┤
│                             │
│  [Hero Image or Banner]     │ ← Hero
│                             │
├─────────────────────────────┤
│ [Card] [Card] [Card]        │ ← Content
│                             │
│ [Text Block]                │
├─────────────────────────────┤
│ Footer  [Links] [Social]    │ ← Footer
└─────────────────────────────┘

Tools

Figma - Collaborative design
Sketch - macOS design tool
Adobe XD - Adobe’s design tool
Balsamiq - Quick wireframing
Paper & Pen - Fastest way to start!

Best Practices

Start with sketches - Quick and cheap
Focus on layout - Not colors/fonts yet
Use real content - Not lorem ipsum
Keep it simple - Don’t over-design
Annotate - Add notes and explanations

Mobile-First

┌──────────┐
│ [Logo]   │
│ [Menu ☰] │
├──────────┤
│          │
│ [Image]  │
│          │
├──────────┤
│ [Title]  │
│ [Text]   │
├──────────┤
│ [CTA]    │
└──────────┘

Design for mobile first, then scale up to desktop.