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. Here's the one we'll sketch.
- Blank diagram. Start a blank diagram in draw.io.
- Mockup shapes. Click more shapes, tick mockups, and click apply. You get groups of shapes for buttons, forms and containers.
The frame
- Browser window. Start with the frame. From mockup containers, drag in the browser window. Now it's clearly a web page. Double click the address bar and type the page address, so everyone knows which page this is. Do the same on the tab, and give the page its 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 the typing is hidden. A combo box is a drop-down list. Add one and type country.
- Checkbox. Then a checkbox, lined up with the fields. 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 just okay or submit. One clear main button per screen.
- The finished wireframe. Click away to see the finished wireframe. Simple on purpose, so people talk about the fields and the flow, not the colours.
Recap
- The rules. So, 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. Subscribe for more draw.io tips for business analysts.
