The UX Cookbook
The UX Cookbook
Wireframing
🚡

Wireframing

Tag(s)
Prototyping & visual design
Cook(s)
Hoa T HoangBob Liu

Nutrition profile

Quickly brainstorm design ideas and gather feedback.

Cooking time

30 minutes to 1 hour

Perfect for

Brainstorming and experimenting with ideas early in the ideation process of your project. Great for receiving feedback about layout and content from stakeholders and users.

đź’ˇ
Wireframe, mockup, or prototype? A wireframe is a simplified sketch or representation of your digital interface through simple lines and text. It is a low-fidelity prototype, which means it’s less polished and use minimal detail to get the main design ideas across. Wireframes are good for gathering feedback from stakeholders. On the other hand, a high-fidelity prototype or mockup is an accurate representation of your digital interface and often contains visual design elements, images, colors, layout, typography, button interactions, and even animation. Mockups are good for sharing with developers or running usability testing, and should include all details for technical implementation.

Make sure you are clear about your goals before starting your project. If you’re still early in the project and want to gather feedback on design directions, a wireframe or low-fidelity wireframe is a great first step as it’s effective and fast to develop. However, high-fidelity prototypes are great for handing off to developers or demonstrating the visual design and user flows for stakeholders.

Prep work

First, make sure you are clear on your objectives and goals for your project. Have rough ideas of what your page or screen will include, which could be driven by the goals of the project. In your mind, map the ideas to common user interface elements.

Ingredients

Depending on how you plan to share your work with collaborators, you can use physical or digital tools to create wireframes.

For in-person sharing, you may want to use physical tools such as pen and paper or a whiteboard to do a quick sketch.

For online sharing, you can either take photos of your paper or whiteboard wireframes, or use a digital tool to create wireframes. Here are some tools we tried and like:

Some digital tools provide templates for wireframing, but you can also create from scratch with simple lines, boxes, and text as shown below.

Directions

Clarify the content

Start by clarifying what content your wireframe will represent or include. Your prototype will have low visual fidelity, but not necessarily low content fidelity. Use a content planning document to keep track of page sections, call-to-actions, images and graphics, body text, and microcopy in your design.

Having real content (not placeholder text) will always help you reach a more accurate representation of your idea.

Explore layout options

Once you understand the content, start narrowing down the layout options. Get your idea across quickly by using lightweight elements to represent often complicated user interface components layout. Here are a few quick tips to save you time:

  • Use a box with two diagonal lines to represent an image
  • Use a straight line to represent a line of text (bolder for headings, thinner for body text)
  • Use a wide and short box to represent a form field
  • Use a wide and short box with a straight line to represent a button

A digital sketch of an interface using boxes and lines
A digital sketch of an interface using boxes and lines

Explore different options, including layouts for different screen sizes, with these lightweight elements.

Add content to wireframes

After deciding on a layout, it’s time to fill in some content to validate your design. Replace the lines and boxes with real content and see how it fits your layout.

A wireframe of the University of Arizona Libraries’ Borrow technology page, sketched by a member of the library’s UX team.
A wireframe of the University of Arizona Libraries’ Borrow technology page, sketched by a member of the library’s UX team.

The UX team at the University of Arizona Libraries often uses FigJam to create wireframes with real content. The tool allows us to digitize our physical wireframes for easy sharing, and also provides some handy features for inserting content and demonstrating the layout.

A FigJam wireframe for the University of Arizona Libraries’ Special Collections site, created by the library’s UX team
A FigJam wireframe for the University of Arizona Libraries’ Special Collections site, created by the library’s UX team

Tips for using FigJam to create digital wireframes:

  • Use the square shape tool to indicate cards, buttons, or other clickable areas, then double click the shape to add text
  • Use different font sizes to indicate heading levels and differentiate them from body text
  • Underline text to indicate links
  • Colors are optional but can help convey information effectively. For example, you can use a darker color to indicate call-to-action buttons or active links. Consider using simple colors such as a monochromatic palette to avoid confusion
  • Images are also optional, but you should add them if they are an important for specific UI elements

Plating

The final results of these wireframes come in all shapes and sizes depending on what you’re designing, as long as your wireframes accurately represents what you want to communicate to the stakeholders or project team.

For physical wireframes, you can share the artifacts with others in person. For digital wireframes, the tools usually allow you to share a link and sometimes allow others to leave comments. Schedule some one-on-one time with colleagues, call a small meeting with your collaborators, or even try to explain your idea to a loved one.

The key is to not surprise your collaborators. Don’t keep your wireframes secret until the last minute. Always sharing your wireframes with your colleagues before the meeting which gives them time to gather their thoughts.

Pro tips

Think of wireframes as the sketching phase for a watercolor painting. It should be fast and is meant to be changed and erased multiple times before actually starting to paint color. The rule of thumb is to get feedback early and often. Make changes as needed, and don’t get too attached to a design!

Refer to Perfect for and understand the target audiences and use cases for wireframes (low-fidelity prototypes) and mockup (high-fidelity prototypes). When sharing wireframes with the project team, the goal is to gather high-level and early-stage feedback. Avoid including intricate visual design details such as animations or custom typography, which can derail the conversation as people focus on visual design rather than the layout or content.

Resources