What Wireframes Are, and Aren’t.

Bonnie Regan, Strategist
Posted on Mar 22, 2018

Creating wireframes is a big part of my job as a UX designer and for good reason. Wireframes are an effective way of communicating the basic hierarchy and layout of a web page. While they're an important part of our process, they're also often misunderstood by those who are unfamiliar with the UX process (and sometimes even by people who are familiar with the UX process). Here are some of the main purposes of wireframes.

Communicate Layout

Wireframes are like blueprints for a house. Architects create blueprints to convey the overall structure and layout of a house without getting into the details of colors or finishes. Wireframes serve a similar purpose and allow us to communicate the basic layout and functionality of a webpage without worrying about the visual design, like fonts and colors. Our wireframes are low-fidelity so they’re composed of simple shapes like rectangles and circles, basic fonts and shades of gray.

Determine Types of Content

While wireframes don’t usually contain final content, we do try to use copy that is representative of what would actually be on the page. This helps us figure out things like how much space each section will take up, how many resources to feature on each page, and what images will be needed. It also helps give writers a good idea of how their content will appear and interact with other parts of the web page.

Establish Hierarchy

Wireframes also help us establish hierarchy within a page. Headings or backgrounds can help draw attention to certain content; this prioritization helps users find the information they need. Changing the order items appear on a page can convey the level of importance; items near the top of the page may be more important than those at the bottom of the page.

Show the User’s Journey

Wireframes help us explore and refine the user's journey through the site with our clients. Sometimes we’ll use several wireframes to show how a user moves through a specific process on the site like checking out or signing up for something.

Wireframes may be napkin sketches, whiteboard drawings, or refined digital files, but they all serve the same purpose: communicate the basic components and functionality of the page without getting weighed down with visual details.