Wireframe Elements — Components, Patterns, Templates

Overview

Every box in a wireframe stands for something with a name. Users arrive trained by every other product they use (Jakob's Law), so the fastest wireframe is assembled from the standard vocabulary: components (the atoms — text, buttons, selectors) combine into patterns (navigation, content, input groups that solve one problem) which combine into page templates (screen archetypes reused across the product). Wireframing is choosing the right existing element, not drawing a new one.

When to Use

• Turning rough idea-sketches into named interface objects
• Deciding what a shape in a wireframe is — button, link, dropdown, card
• Choosing the content pattern (list vs table vs tiles vs cards) or navigation orientation for a screen
• Blocking out a standard screen type: home, list/browse, detail, form, dashboard, settings
• NOT for: visual design — color, type, spacing polish (layout-and-composition)
• NOT for: deciding which screens the product needs at all (userflow)
• NOT for: deep per-pattern mechanics — validation timing, sort behavior (flow-forms, flow-tables)

UI Anatomy

A screen is regions before it is components. Block these out first; each region hosts specific pattern types: