Why wireframe first?
It's far easier to move a grey box than to rewrite finished HTML and CSS. Wireframing forces you to decide what goes where and what matters most before you get distracted by fonts and colors.
Fast & cheap
Sketch a whole page in minutes. Change your mind freely — it's just boxes.
Focus on structure
No color or copy to hide behind — you confront layout and priority head-on.
Easy to share
Get feedback before investing in a real design. People critique a sketch more honestly.
A build plan
A good wireframe is basically your HTML outline — header, main, sections, footer.
Low, mid & high fidelity
Wireframes range from a napkin sketch to a near-final mockup. Start low, add detail as the idea firms up.
Low-fi
Grey boxes, placeholder lines, scribbled labels. Pure layout. Fastest to make and change.
Mid-fi
Cleaner boxes, real text, rough spacing and sizes. Usually built in a tool like Figma.
High-fi
Looks like the real thing — colors, fonts, images. Basically the final design (a "mockup").
What's in a wireframe?
A wireframe is built from labeled boxes — each one stands in for a real piece of the page. Here's a typical landing-page wireframe with every block named.
Call-to-action button
The same page: wireframe → finished
Notice the layout is identical — the wireframe already decided the structure. The design step just adds the skin.
Build something great
The fast way to launch your idea.
Get startedPick a screen size first
Wireframe for the device your users actually hold. Designing mobile-first (smallest screen first) keeps you focused on what matters, then you expand for bigger screens. Common starting sizes:
How to wireframe a page
- List the content — what must this page contain? (logo, nav, headline, 3 cards, footer…)
- Order by importance — what should people see first? That goes at the top / biggest.
- Block it out — draw boxes for each piece. Use grey only; no color, no real images.
- Label everything — write "logo", "hero image", "sign-up button" inside the boxes.
- Use placeholder lines for text — don't write real copy yet.
- Check the flow — does the eye travel in the right order? Adjust and repeat.
main, sections, footer.Wireframe vs. mockup vs. prototype
Three stages of turning an idea into a real design — each adds a layer. Wireframe = structure, mockup = looks, prototype = behavior.
Wireframe
The skeleton. Grey boxes and labels showing what goes where. No color, no clicks.
Mockup
The skin. The same layout with real colors, fonts, and images — what it will look like.
Prototype
The behavior. A clickable mockup you can actually try — buttons and links respond.
Do's & don'ts
A few habits keep a wireframe useful — and a few habits quietly turn it into a slow, premature design.
Do
- Keep it greyscale — structure over style
- Start from the goal of the page
- Make navigation obvious and consistent
- Reuse the same blocks across screens
- Share it early, while changes are cheap
Don't
- Don't pick fonts and colors yet
- Don't add real images or polished art
- Don't get attached — it's a rough draft
- Don't cram in every idea; show priority
- Don't skip labels — unlabeled boxes confuse
What to wireframe with
You don't need fancy software — the best tool is whatever lets you change your mind fastest.
Paper & pencil
The fastest, cheapest wireframe. Perfect for a first pass with zero learning curve.
Figma
Free and browser-based — great for digital wireframes and sharing. Learn Figma →
Whiteboard / slides
Excalidraw, Google Slides, or a real whiteboard are perfect for quick team sketches.
HTML boxes
Plain <div>s with grey backgrounds — your wireframe becomes your layout.