Wireframes are low-fidelity outlines of a product, showing screen layouts page by page. Their goal, and advantage, is allowing designers to make crucial decisions about navigation, layouts, visual hierarchies, content priority, and information architecture early on.
Later on in the design process, changing these factors requires uprooting of the entire design, so the sooner they’re solidified, the better. Wireframing answers these questions before designers have to tackle more complex issues like visuals or advanced usability.
Photo credit: “Wireframe“. Baldiri. Creative Commons.
Wireframes are typically one of the first phases of design (if not the first), usually following a brainstorming or rough-sketching session.
Wireframes use placeholders for the actual content to come later. This means no actual text and boxes with Xs to denote images. Their point is to organize content, not to fill in the details.
In this piece, we’ll explore:
- Why wireframes are useful
- Helpful wireframing tools
- An efficient wireframing process
Why Create a Wireframe
Here’s a practical overview of why wireframes are still useful:
- Structured outlines – You know what goes where in your design early on, so you don’t have to go back and undo designs later in a hi-fi mockup (or worse, in code).
- Encourages creativity and experimentation – Wireframes are faster to sketch (or create in a digital tool) than a complete mockup. You free yourself to explore 5-10 different concepts before diving deep into one.
- Promote content-first design – It can be easy to get lost in designing the details and losing focus on what’s really important: the content. Wireframing optimizes the placement of content because there are no distractions at the beginning stages.
To sum it up, think of wireframes as the skeleton of your site. Having it in place first makes it easier to add the real meat.
Wireframing Tools
There’s a lot of different options for creating a wireframe, so choose the one you feel the most comfortable with. Below are some of the most popular choices:
- Paper – Basically more advanced sketches, paper wireframes can be good for brainstorming ideas, and can be done in minutes. The price is visual accuracy, though, and creating prototypes from these is problematic.
- Specialized Tools– Tools like UXPin are designed especially for wireframing and prototyping, with designers as the target users. All elements you need are readily available and easy to use, and you can add interactions to your wireframe (turning them into a prototype).
- Presentation Software – Keynote, Powerpoint, and other presentation software are also equipped to handle the shapes needed for wireframes, and are often already accessible to most companies and freelancers. The tradeoff, of course, is that it’s not as easy to build interactions on top of the wireframe (certainly doable, but takes some extra work).
- Image editors – If you’re a wiz at tools like Sketch, Photoshop, or Illustrator, you can easily create the basic shapes needed for wireframes. Keep in mind that you’ll still need to rebuild the whole design in higher fidelity.
Photo credit: UXPin
Photo credit: UXPin
Photo credit: Keynote
Once you choose your tool of choice, it’s time to get started on the process.
How to Make a Wireframe (Step-by-Step)
Wireframes can come in different forms, but in general you can follow this 5-step process and personalize your choices as you wish:
1. Content Inventory
2. Visual Hierarchy
3. Content Wireframe
4. Lo-fi Wireframe
5. Lo-fi Prototype
Photo credit: UXPin
We’ll explain the best practices for each now.
1. Create a Content Inventory
The first step should always be creating a content inventory, which is mostly a spreadsheet or graph listing out all the content elements you’d like to include.
Photo credit: Maadmob
The content inventory is just one way a wireframe can help put content first. You can build one by:
- Auditing and listing all the content you want, often with URLs and brief descriptions.
- Organize content items by topic (optional).
- Decide which content goes on which page and reorganize the list.
- Look for redundancies – Now is the best time to eliminate unnecessary content, before you waste time designing around it. The less content you have, the more potent the remaining content.
- Assign people to work on certain pages or topics (optional).
Once all the items are listed, you then prioritize them. This is essential for forming the visual hierarchy (the next step), as well as the success of your product overall.
2. Assign Visual Hierarchies
Once you know which content appears on each page, you can start to structure how those pages should look. As explained in the free guide Web UI Design for the Human Eye, this is when the true design work starts – you’ll need to understand user flows to know what content should be prioritized, and visual principles to understand how.
At this stage, organization is important. Color-coding by content can help, although it’s not necessary.
The important part is that you understand where your user wants to go and how they’ll likely try to get there (plus where you want them to go). Then you can start threading pages together.
3. Wireframe with Content Blocks
The first phase of actual wireframing involves broad, vague “content blocks.†These are sectioned off by the type of content with almost no details.
As you can see in the above UXPin example, you’re mostly concerned with figuring out where your content will go, and less about how it’s presented. Working with broad blocks makes it easier to focus on the big-picture goals.
Try implementing a grid-system if your tool allows it. This does wonder for organization and planning, especially if elements are repeated across multiple pages.
Try starting with the mobile viewport first:
- You force yourself to prioritize content.
- You add content as you work with larger viewports . The alternative is subtracting content, which degrades the experience with each smaller viewport.
Once you have your content wireframe, you’ll able to add more details.
4. Sculpt Down Content Blocks
With the content blocks in place, you’re able to start considering details. Don’t go overboard – remember that wireframes are supposed to be simplistic. By “details,†we mean boxes with Xs for images, ambiguous lines for text, and smaller boxes or symbols for buttons.
Photo credit: UXPin
Again, pay attention to user flows and visual hierarchy. Don’t forget scanning patterns and remember that certain images may attract more attention than others.
5. Add Interactivity
Arguably the most important aspect, adding interactivity turns your wireframe into a lo-fi prototype. Here is where most of the criticism about wireframes falls apart. This possibility is relatively new (thanks to technology and a better understanding of design), so not all designers know it’s even possible.
In the rapid prototyping ideology, you create prototypes quickly, test them, then implement the feedback into the next one. Repeating this cycle over and over refines your design along the lines of what users want, ultimately building a better product.
Adding interactivity to your wireframe allows you to start this process early on, improving your product even more. Testing an early-stage wireframe/lo-fi prototype gives you vital feedback on the basics like whether users can find what they’re looking for, or even if the product idea is workable.
Photo credit: UXPin
If you’re using specialized tools, adding interactions can be as simple as dragging and dropping.
Once your lo-fi prototype is finished, you’re free to test it for early feedback with users. Good luck!
Further Reading
To learn more about the best practices for wireframing, including more thorough advice, additional best practices, and real company examples, check out these two free e-books:
The Guide to Wireframing – A cover-all guidebook explaining everything you need to know about wireframing.
The Guide to Interactive Wireframing – A step-by-step manual on how to build a wireframe and turn it into a lo-fi prototype for the best results.
Download these worksheets and start practicing with simple instructions and tracing exercises.
Download now!
2 Comments