How To Make Your Wireframe In 6 Steps


1. 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. What does that mean? That means carrying out analysis of similar product lines to your own, digging into prevailing UX trends and best practises, and, of course, reviewing your own internal design guidelines.

And if you’re designing a new feature, don’t be afraid to research outside of your domain. Introducing tracking and data visualization as part of your logistics company’s service? Perhaps it’s worth checking out some fitness or nutrition apps on Dribbble or Behance for some ideas. Creativity is often set loose at point where fields of expertise intersect, after all.


2. Prepare your research for quick reference.

You can imagine how much quantitative and qualitative data those various phases will produce. Well, that’s what you need to keep in mind while drawing out your wireframes. If you’re a mere mortal, you might struggle to both retain and recall all of that, so I recommend scribbling a cheat sheet 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. A few choice quotes from your audience might also help focus your attention on the user’s experience, which is—never forget—what you’re designing!

3. Make sure you have your user flow mapped out.

Your wireframing is going to get very messy very quickly if you don’t have an idea of how many screens you’ll need to produce and the flow you expect the user to follow. 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. If you’re already well-acquainted with UX vocabulary, your internal voice will be alternately screaming “user flows” and “information architecture”.

Good information architecture will ensure that your users are self-sufficient (fewer messages to your customer service asking how to do something painfully simple), lower levels of user frustration (and ultimately more satisfaction and trust), and therefore lower drop-off or drop-out rates. Which probably means more revenue, and probably means happy managers—and a job well done.

A UX designer connecting paper wireframes into a user flow

4. Draft, don’t draw. Sketch, don’t illustrate.

Ok, now we’re on step four and you can finally start putting pen to paper. Sorry it’s taken this long, but the previous steps were critical: The old adage that you should look before you leap is 100% relevant to UX.

Anyway, let’s get some wires on your frame. Remember: you’re outlining and representing features and formats, not illustrating in mighty fine detail. There’s nothing worse than a blank piece of paper, so you need to start getting your ideas down pronto—that’s the imperative for step three. Don’t think about aesthetics, don’t think about colors—the UI designer can deal with that. And if you’re the only designer at your fledgling startup… well, just do it later.

A good, thick marker pen (a Sharpie, as our friends in the US call them) is a handy tool for this stage of wireframing. Why? Because it prevents you from drowning yourself in detail. You’ll focus on delineating the functional blocks that form the skeleton of your design. As Jeff suggests in the video above, pose yourself the following three questions while you’re sketching:

How can you organise the content to support your users’ goals?

Which information should be most prominent? Where should your main message go? What should the user see first when arriving at the page?

What will the user expect to see on certain areas of the page?

Which buttons or touch points does the user need to complete the desired actions?

Once you have a few variations of your first screens, you might want to do a bit of collaborative wireframing with a fellow designer or product manager. What’s that mean? Simple. Lift your wireframes of the paper and onto a whiteboard, and play around with them. Ask yourself and one another; “Are we creating something usable that meets our audience’s needs?”

5. Add a little bit of detail and get testing.

So you have a flow and you have your screens, and you’ve corroborated your ideas with some clued-up colleagues. The next step is to add some informational details to prepare your wireframe for its upgrade, Megatron-style, to prototype-mode.

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. To extend the metaphor somewhat uncomfortably, these elements are the ligaments and tendons that will connect form and functionality. Think about the following:

Usability conventions, such as putting the navigation at the top next to your logo, having a search box on the top right, and so on

Simple, instructional wording for i.e. calls-to-action

Trust-building elements: What do you need to build trust in your customers and where would be the best place to put these elements?

Tooltips to indicate any functionality that could be included in a prototype transition

Once you’ve done all that, you’re ready for your first user tests. At this stage, your users may well be your colleagues. Indeed, one of the joys of the humble wireframe is that it serves as a common language between designers, stakeholders and web and app developers. You can use tools like UsabilityHub to preference test screens and collect qualitative feedback, and Prott to test and check understanding of the basic user flow. With this tool, you can simply photograph and upload your hand-sketched wireframes, and then connect them user button overlays. Clever stuff!

6. 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 (which, incidentally, we built a course in conjunction with) and interlink your screens for a second round of high-fidelity user testing. It’s at this point that we’ve most certainly crossed from wireframing to prototyping. To find out more about that, you’ll have to read another article.

Let’s summarize by reviewing three key principles to keep in mind when you’re producing your wireframe.

Collaborative wireframing between a UX designer and a product manager