Wireframes and Mockups in draw.io
A quick wireframe shows a screen's fields and buttons before anyone builds it, so requirements stop being guesswork. Learn how to turn on the mockup shapes in the free draw.io web app and sketch a sign-up page with a browser window, form fields, a checkbox and a button.
Step by step
Show the screen
- Wireframes. Words like "a simple sign-up form" mean something different to everyone. A wireframe shows the actual fields and buttons, so the team agrees before anything is built.
- Blank diagram. Open draw.io and start a blank diagram.
- Mockup shapes. Click More Shapes, tick Mockups and click Apply. New groups of shapes for buttons, forms and containers appear in the shapes panel.
The frame
- Browser window. Start with the frame. From Mockup Containers, drag a Browser Window onto the page. Now it is clearly a web page. Double-click the address bar and type the page address, myshop.example/signup, so everyone knows which page this is. Do the same on the tab and type the page name: Sign up.
Form fields
- Fields. Now the form. From Mockup Text, drag a Text Box into the page and type what goes in it: Email address. From Mockup Forms, add a Password Field under it. The stars show that the typing is hidden. Then add a Combo Box, which is a drop-down list, and type Country.
- Checkbox. From Mockup Forms, add a Checkbox lined up with the fields and type its text: Send me offers.
The main action
- Button. Last, from Mockup Buttons, drag in a Button and type what it does: Create account. Name buttons with a verb, not OK or Submit, and keep one clear main button per screen.
- The finished wireframe. Click an empty spot to see the finished wireframe. It is plain on purpose, so people talk about the fields and the flow, not the colours.
Recap
- The rules. Turn on the mockup shapes, start with a browser window, add one shape per field and give the button a clear verb. Keep it simple.
Common mistakes
- Not finding the mockup shapes. They are not shown in the shapes panel at first. Click More Shapes, tick Mockups and click Apply to add them.
- Vague button labels. OK or Submit doesn't say what happens when you click. Use a verb that names the action, like Create account, and keep one main button per screen.
- Adding colours and styling too early. Then people debate colours and fonts instead of the fields. Keep the wireframe plain until everyone agrees on the fields and the flow.
- Leaving fields unlabelled. An empty text box doesn't tell anyone what data it collects. Type the field name into each shape, like Email address or Country.
When a business analyst uses this
In a requirements workshop for a new sign-up page, sketch the wireframe in draw.io while stakeholders watch. Each field becomes a line in the requirements log, for example whether Country is mandatory, and the agreed wireframe goes into the sign-off pack.
Questions people ask
Is draw.io free for making wireframes?
Yes. draw.io is a free web app, and its Mockups shapes include browser windows, form fields, checkboxes and buttons.
How do I add mockup shapes in draw.io?
Click More Shapes, tick Mockups and click Apply. The shapes then appear in groups such as Mockup Containers, Mockup Forms and Mockup Buttons.
What is the difference between a wireframe and a mockup?
A wireframe is a simple sketch of a screen's layout, fields and buttons. A mockup usually adds more visual detail, such as colours, fonts and images.
