What is Wireframing?
A wireframe is a blueprint for a product. Just like a blueprint for a house, a wireframe focuses on key things like structure, space and access. You won’t find colour palettes, copy, or button shapes in a wireframe, just the basics.
It’s an important communication tool in any MVP, be it both a web or an app project. It gives the client, developer, and designer an opportunity to walk through the key things without getting off track - when you remove all the distractions, you can really get to the heart of the design.
How to Wireframe
Wireframing sounds like a super fancy design process, but the first wireframing you do should be with paper and pen. If you over-design at the beginning, you’re going to end up getting less useful feedback. You want testers to focus on the functionality, accessibility and flow, NOT whether they like the colour on that CTA button. Your wireframe will demonstrate how people will navigate through your website or app. It will show the visual order of information on the page, and help you determine the important places on different content. For example, if your interviewees reported often feeling overwhelmed when trying to find healthcare information, your wireframe should show how you plan to present information simply, with minimal clutter and lots of white space.
Think about the journey you want your user to take while using your website or app. How will your product guide them through that journey?
Useful Tools
Once you’ve nailed down your bare-bones product design the old-fashioned way, you can start getting a little bit more high-tech. Our favourite tools for wireframing are:
Miro
We are big fans of Miro here - you have the ability to do all the user research for your product using the post-it note and brainstorming features - it’s very simple to then start moving that information into basic lo-fi wireframes. It’s easy enough to get started; just think of them as a step-by-step routine - taking it one screen at a time!
Figma
Once you have your Miro outline, advance onto Figma. It’s the best for collaborative design and wireframing. It can get expensive if you need lots of design files, but the free online version should also suffice for small projects. If you’re feeling extra fancy, you can learn how to add clickable elements and actually prototype the design. This way you can test the buttons and user-flow without having to code anything.
If you’re wireframing a project of a larger nature, one of our favourite tips is to use the ‘components’ tool. If you create a header menu on one art board, make this a component and copy it across to other screens. Then the magic is when you realise you made a typo or design error in the menu and you’ve got it across 30+ screens. But worry not! With components you can edit it on the ‘master copy’ and everything else will change too. Magic.
All in all…
It's easy to get over excited and jump straight into design, which makes it easy to overlook the wireframing. However, establishing a good UI/UX structure is possibly the most important part of designing a product. By creating these building blocks for your product, it can make it that much easier to move forward onto the next stage of creating the best possible MVP.
