What Wireframes Are, and Aren’t. Bonnie Regan

Written on: March 22nd, 2018 in user experience

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.

Communicating Layout Wireframe

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.

Determine Types of Content

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.

Hierarchy Wireframe

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.

The User's Journey

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.



Let's Talk.