Online website wireframe tool
Add the blocks in page order, drag them into place and pull the corner to resize. Click a block to change its text.
How to useThe page sketch, block by block
Available in: 
Online website wireframe tool: what it is for
Build the page sketch with ready-made blocks (header, banner, heading, text, image, button, cards, form, video, footer and a free box), drag them into place and pull the corner to resize, snapping to a 10 pixel grid.
Pick the desktop width (1200 px) or the mobile width (390 px) and download the wireframe as PNG or SVG to get it approved by the client.
How to use
- Pick the page width.
- Add and drag the blocks.
- Download the wireframe as PNG or SVG.
When to use it
- Getting the layout approved by the client.
- Planning a landing page.
- UX and design class.
Frequently asked questions
What is a wireframe?
It is the sketch of a page structure, in gray, with no colors, photos or final copy. It shows where each thing goes (menu, banner, calls to action, form) so you can agree on the layout with the client or the team before spending time on the design.
How do I resize a block?
Click the block and drag the small blue square in the bottom right corner. Blocks snap to a 10 pixel grid so it is easy to keep everything straight. The Delete key removes the selected block.
Can I make a mobile version?
Yes. Switch the width to Mobile before you start: the page becomes 390 pixels wide, like a typical phone screen, and new blocks come in at the right size.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.