Wireframe Maker

How to use the Wireframe Maker

1. Open the page. No account is needed, and the canvas is ready to use.
2. Pick a starting point from Templates: landing page, admin dashboard, mobile sign-in, mobile feed or contact form.
3. Click any part in the column beside the canvas to add it. On a phone, the parts appear in a strip instead.
4. Drag a part to move it, and pull a corner to resize it.
5. Double-click a part to change its text. The part keeps its size when the text changes.
6. Drop a part onto a frame such as Browser, Phone, Tablet, Card or Dialog. It then moves with the frame.
7. Open the Arrange menu to align, distribute, group, change z-order or snap to grid. Under Auto layout, choose Tidy to snap parts to a 10 pixel grid.
8. Draw an arrow between two parts or screens by dragging the blue dot, so the flow between screens sits on one canvas.
9. Add a Note part to leave a yellow annotation for your team.
10. Open the Export menu to save a PNG (also 2x or 4x), an SVG or a PDF.

The Saved menu includes “Copy link to this diagram” if you want to send your wireframe to someone. The latest version autosaves in this browser, so your draft stays there when you come back.

What is a wireframe?

A wireframe is a simple, low-detail drawing of a page or screen that shows where content and controls go. It uses boxes, labels and placeholder text instead of color, photos or final fonts, so a team can agree on structure before design work starts.

Because a wireframe leaves out visual style, feedback stays on layout: where navigation sits, which content comes first, and whether a form asks for too many fields. A wireframe can cover one screen or a whole website wireframe with several pages linked together.

What are wireframes used for?

Wireframes help a team agree on what goes on a screen and where, before design or code is written. Designers test layouts and plan user flows with them, while product managers and developers check that a feature covers the steps people need.

How do I create a wireframe?

Start with the one job the screen must do, list the content it needs, and block out where each piece goes. Work from the top of the page down, keep the layout rough, and review the draft with the people who will use it.

1. Write down the main task for the screen, such as signing in or comparing plans.
2. List the content and actions it needs, in order of importance.
3. Sketch the main areas (header, navigation, content, footer) as boxes.
4. Place the controls in each area, starting with the most important action.
5. Add labels and placeholder text, and leave out final copy and color.
6. Link the screens in the order a person moves through them.
7. Share the draft, note open questions, and settle them before design starts.

Wireframe vs mockup vs prototype

A wireframe shows structure in plain form, a mockup adds the visual design, and a prototype adds interaction so people can click through it. Each stage answers a different question, so most teams move from wireframe to mockup to prototype as decisions get settled.

This tool makes static wireframes. It does not make clickable prototypes.

Frequently asked questions

• 

  Flowchart Maker

  use it to map the steps a user takes between screens.
• 

  Use Case Diagram Maker

  use it to list what users can do before you draw screens.
• 

  System Architecture Diagram Maker

  use it to show the services behind the screens.
• 

  Sequence Diagram Maker

  use it for the messages behind one screen action.
• 

  State Diagram Maker

  use it to map the states of a screen or a form.
• 

  Network Diagram Maker

  use it to show devices and links.