UI Wireframe Sketchpad
Correctly proportioned phone, tablet and desktop browser frames, ready to sketch a screen design on.
About this UI wireframe sketchpad
A wireframe works best when it's fast — a rough sketch on a correctly-shaped screen tells you more about whether a layout actually works than a polished mockup you spent an hour on. This tool prints properly proportioned phone, tablet and desktop browser frames, ready to sketch directly on to with a pencil.
Choose blank frames for pure freehand sketching, or a basic layout scaffold that lightly subdivides the screen into the zones almost every app or page actually uses — a header, a main content area, and a footer or tab bar — drawn as light dashed guide lines rather than solid boundaries, so they suggest structure without getting in the way of what you draw inside them. The list layout adds a few repeated rows to the content area, useful for sketching anything that's fundamentally a list — a feed, a settings screen, a set of search results.
Print several frames per page to sketch a flow rather than a single screen — an onboarding sequence, the states of a form, or a few competing layout ideas side by side. Add a label per frame if you want each one named, or leave them blank and they'll simply be numbered.
Frame proportions are realistic modern approximations — a tall phone screen, a squarer tablet, and a wide desktop browser window with its own address-bar chrome — verified directly rather than eyeballed, so a layout that fits the frame here will translate reasonably to an actual screen.
Everything is generated in your browser and your settings are saved locally between visits. Nothing you sketch or type is uploaded anywhere.
Frequently asked questions
What's the difference between the basic and list layouts?
Basic layout gives you three zones — header, content, footer — as light dashed guides. List layout adds several repeated row guides inside the content zone, useful for anything list-shaped like a feed or a set of search results.
Can I sketch a multi-screen flow instead of one screen?
Yes — increase frames per row, or print more than once, and add a label to each frame if you want to name the screens in sequence (for example "1. Login", "2. Home feed", "3. Profile").
Which device frame should I use?
Whichever matches what you're actually designing for — phone for a mobile app, tablet for a tablet-specific layout, desktop for a website or browser-based product. The proportions are realistic approximations for each, not an exact model of one specific device.
My frame chrome is not printing
Look for a "Background graphics" or "Print backgrounds" option in your print dialog and switch it on — some browsers strip fine lines and shading from printed pages by default.
My frames don't fit on the page
If nothing fits at all, add more columns rather than fewer — more columns means each frame is narrower, and narrower means shorter too, so it becomes more likely to fit. A smaller margin or the other orientation also help. If frames do fit but feel too small, that's the opposite adjustment: fewer columns per row for larger, fewer frames.
Why does it say "try more columns" when I want fewer, bigger frames?
Those are two different problems with opposite fixes. When nothing fits at all, more columns shrinks each frame until at least one fits — that's the error message you're seeing. When frames already fit but feel cramped, use fewer columns instead for larger frames; you'll just get fewer per page.