How to use the Wireframe Maker
- 1. Pick a frameMobile, tablet or desktop, and a template or a blank page.
- 2. Arrange blocksAdd blocks, drag them, or select one and use arrow keys or its number boxes.
- 3. ExportDownload a PNG or SVG to share, or save JSON to keep editing later.
How it works
The page opens with the landing page template in a 375 × 760 mobile frame: a header, a hero banner, three feature cards and a footer, 6 blocks in all. Tap or click a block to select it (it turns orange), then drag it, or use the arrow keys to move it 1 px at a time, with Shift for 10 px. The panel underneath lets you rename it and type exact X, Y, width and height values, duplicate it or delete it. Press N to move the selection to the next block without a mouse.
Block types include header, navigation, hero, image (drawn with a cross), heading, text and list (drawn as grey lines), button, input, card and footer.
Why wireframe first
- Grey boxes keep feedback on structure and priority, not colours and fonts.
- Changing a box takes seconds; changing a finished design takes hours.
- Developers and clients can agree on what goes where before anyone writes code.
Your layout autosaves in this browser's local storage, which belongs to this device only and is lost if you clear site data, so use Save as JSON to keep a copy. Open JSON reloads it here or on another device. Exports are drawn in your browser at 2× for PNG. This is a quick sketching tool, not a replacement for Figma; when the structure is settled, move to a full design app and use the Figma shortcuts cheat sheet. Check target screen widths in the viewport sizes reference.
Frequently asked questions
Can I resize blocks by dragging?
Use the width and height boxes in the panel below the canvas; dragging moves blocks. This keeps it usable on phones and with a keyboard.
Can two people edit the same wireframe?
Not live. Save as JSON and send the file; the other person opens it with Open JSON.
Is the Wireframe Maker free?
Yes, the Wireframe Maker is free. The first time you export your first wireframe, you are asked for your name and WhatsApp number once. After that, this and every other Uncodemy tool opens straight away without the form.