GA
{{first-name}}
How do you create a wireframe in six steps?
- Do your research.Remember: UX design is a process, and wireframing isn’t the first step in this process. Before you even think about picking up a pen and paper, you need to have covered the first two steps; namely understanding who your audience is by way of user research, detailing requirements, creating user personas and defining use cases, and complementing this with further competitor and industry research;
- Prepare your research for quick reference. If you’re a mere mortal, you might struggle to both retain and recall all of that, so I recommend scribbling a cheatsheet with your business and user goals (your requirements), your personas, use cases, and perhaps some reminders of the coolest features you stumbled across in your competitor research;
- Make sure you have your user flow mapped out.It’s important to have a watertight concept of where your users will be coming from (which marketing channel, for example, and off the back of what messaging), and where you need them to end up;
- Draft, don’t draw. Sketch, don’t illustrate.Remember: you’re outlining and representing features and formats, not illustrating in mighty fine detail;
- Add some detail and get testing.Add detail in the way you would naturally process a screen, or the page of a book: from top-to-bottom and left-to-right. Remember: Your wireframe is the skeleton of your site. You’re not adding the muscle just yet—the content and the copy;
- Start turning your wireframes into prototypes.Once you’ve documented and acted upon the feedback from your first prototype, you can start developing your high-fidelity prototypes. There are lots of slick tools out there for this, from Proto.io to Adobe XD and Framer, but the most well-known are Sketch and the browser-based, new(ish) kid-on-the-block, Figma. Once you’ve developed your wireframes in Sketch, you can import them into the industry-leading prototyping tool InVision.