Wireframe Sketchpad: Sketch Screens Fast, Refine Later
A free browser sketchpad for thumbnail-first wireframing. Draw several rough versions of a screen in minutes, choose the strongest, and only then add detail.
The Eight-Up Method
Sketch many ideas quickly so you don’t get attached to the first one.
Draw Eight Frames
Turn the grid on and draw two rows of four equal rectangles with the shape tool. Each frame is one possible layout for the same screen.
Timebox It
Give yourself five to eight minutes. Fill each frame with a different layout idea: move the main action, change the navigation, reorder the content.
Mark the Winners
Circle the strongest one or two with the highlighter. Add a sticky note saying why you chose them.
Redraw One Large
Draw your pick at full size and label the parts. For symbols and flow arrows, continue with the wireframing guide.
Frame Shapes for Common Screens
Rough proportions are enough. Don’t measure.
| Screen | Rough frame shape | Sketch tip |
|---|---|---|
| Phone | Tall rectangle, about twice as tall as wide | Keep the main action within thumb reach at the bottom |
| Tablet | About 3:4 portrait or 4:3 landscape | Try a side panel in landscape |
| Desktop | Wide rectangle, about 16:10 | Sketch the page top to bottom in blocks |
Keep the Sketch Rough on Purpose
Roughness invites feedback. Polish discourages it.
Thick Lines, No Detail
Draw blocks and outlines only. If you are adding small details, you are working too finely for this stage.
Squiggles for Text
Use wavy lines for body copy and short labels for headings. Real wording can wait.
One Accent Colour
Use a single colour to mark the primary action in each frame. Leave the rest plain.
Sketch the Journey Too
Draw arrows between thumbnails to show how one screen leads to the next.
Getting Useful Feedback
- Ask one question per sketch. “Where would you tap first?” gets better answers than “What do you think?”
- Show alternatives together. Reviewers compare layouts more easily when the eight frames are visible at once.
- Capture comments on the canvas. Use sticky notes beside each frame so reactions stay attached to the sketch.
Frequently Asked Questions
What is a wireframe sketchpad?
A blank canvas for quick, low-detail screen sketches made before you open a design tool.
How many versions should I sketch?
Six to eight per screen is a common starting point. The number matters less than forcing each version to be different.
Can I sketch on paper and bring it here?
Yes. Upload a photo of your paper sketch to the canvas and draw over it to annotate it.
Does it include UI components?
No. It has shapes, lines and text, which suit rough sketching. For polished mockups, use a dedicated design tool.