Categories / Tutorials

How to Get Started With Wireframe Design

Jerry Cao March 31, 2021 · 7 min read
Pinterest

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.
image01
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.
  • image04
    Photo credit: UXPin

  • 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).
  • image06
    Photo credit: UXPin

  • 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).
  • image03
    Photo credit: Keynote

  • 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.

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
image07
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.
Content Inventory
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.
Visual Hierarchies
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.
Content Block Wireframe
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.
image08
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.
    image00
    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.
    Wireframe Prototype
    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.

    Lettering Worksheets
    Getting started with hand lettering?
    Free lettering worksheets

    Download these worksheets and start practicing with simple instructions and tracing exercises.

    Download now!
    About the Author
    Author
    Jerry Cao
Related Articles
2 Comments
  • Brilliant article. Thank you! 6 years ago
  • Great article overall but this sentence is GOLD: "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." Your content needs to build the design not the other way around (ie: fitting your content into a premade design). 6 years ago