Wireframes in the UX Design Process

Explore how wireframing can be used in different stages and aspects of the UX design process
Wireframes in the UX Design Process Lesson

The best design process isn't linear. It takes an iterative approach in which designers are involved in product development at early stages and can rapidly share, test, and validate ideas.

When you've conducted user research and have enough data about users' goals and motivations, you can start with low-fidelity wireframes defining the primary interactions, structuring content, and outlining navigation. Once you've done some initial testing, the next step is to add fidelity, aesthetics, and interactive capabilities to your wireframes.

The next round of testing may include clickable hi-fi prototypes. They help your users and stakeholders get a more vivid picture of the end product. The last stages of testing may be taken on prototypes using HTML, CSS, and JavaScript and usually implies only the tiniest final refinements.

Every product is unique, and the wireframing order you choose should depend on the project.

Wireframing for interaction design

Interaction design (IxD) refers to the practice of designing interactive digital products and services with a focus on improving the interactive experience between users and a product.[1]

Generally, IxD relies on 5 dimensions: words, visuals (including icons, typography, images, etc.), physical objects (like computer, mouse, touchpad, etc.), time (relates to animations, videos, and sounds), and behavior.

At the wireframing stage, interactive designers don't focus on depicting graphical elements, though. Instead, they try to understand user needs and define interactions to satisfy those needs.

Digital.gov suggests considering the following questions when working on interactions, for example:

  • What commands can users give to interact with the interface?
  • What information do you provide to let users know what will happen before they perform an action?
  • Are there constraints put in place to help prevent errors?
  • Is information chunked into a few items at a time?[2]
Wireframing for information design

Information design is a practice that strives to represent content in the most efficient manner. The discipline is closely related and overlaps with communication design, data visualization, and information architecture.[3]

If you look around, you'll notice that we're surrounded by information. However, if it's presented poorly it's hard to digest and users will struggle with your product.

Wireframing helps information designers make sense of data for users. With wireframes, you can:

  • Plan content strategy
  • Proofread and review copy for each page
  • Organize and categorize information
  • Plan the layout of each unique page
  • Test organization and layouts with clients and users
Wireframing for navigation design

Navigation design is the discipline responsible for organizing information on a page so users can easily navigate through a website or app and find the information they need. Simply put, navigation helps users get from point A to point B in the least frustrating way.

Using wireframes, designers decide on things such as:

  • Logical and consistent placement of the primary navigational links
  • Placement of secondary navigational elements, such as submenus, breadcrumbs, and search
  • The expected behavior of navigational elements

With wireframes, designers can establish consistency among pages. The same navigational elements should be at the same location. For example, most users expect the logo to sit in the header or the search to be in the upper right area of a page. It means the logo and the search buttons should be at these locations on each page.

Tabs, menus, accordions, breadcrumbs, buttons, and other navigational elements should behave the way users expect them to. If users click on a menu, they assume to see the list of options and don't expect to be redirected to another page. Otherwise, they experience friction and are likely to abandon the site.[4]

Wireframing for UI design

User Interface design (UI) is a multi-faceted discipline that focuses on building user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, delivering great usability, and also delighting users aesthetically.[5]

We can break UI design into 4 layers:

  • Controls (links, buttons, headings, body text, icons, etc.)
  • Patterns — groups of controls (header, image grid, search function, etc.)
  • Design principles (contrast, hierarchy, proximity, alignment, etc.)
  • Templates (search results, category page, checkout page, etc.)[6]



Wireframes display the main features, functions, and content of a future user interface without diving into visual design. Designers should only work on the visuals after perfecting the structure of the page.

Prototyping with wireframes

Wireframes usually precede the prototyping stage and present a general idea of a future product, working as a skeleton for building up more relevant content. Wireframes use simple blocks and contain minimum interactivity — just enough to test ideas without diverting users' attention to colors and typography.

On the contrary, prototypes are more high-fidelity and reminiscent of a nearly finished product. Hence, they allow you to conduct more effective user testing with interactions and functionality.

The best approach is an iterative process, where each iteration includes a new level of fidelity. Start with low-cost wireframes, test assumptions, refine, and improve. Since it's more costly to make changes to prototypes, approach them only once you've already tested your ideas a couple of times.

User testing with wireframes

One of the biggest benefits of wireframes is their utility. All you need is the bare minimum — a pen and paper — to jot down a layout using black and white boxes and real or dummy wireframe text to test your ideas on users. Once you receive the first feedback, refine, improve your wireframes, and test again! Alternatively, you can turn sketches into digital frames using simple wireframing tools like Balsamiq.

Wireframes are a go-to tool for teams that don't want to waste their time on well-thought designs without prior testing.

What type of user testing you can conduct with wireframes?

Wireframes for development Bad Practice
Wireframes for development Best Practice

In the development process of a digital product, it's crucial for designers and developers to start collaborating as early as possible. Instead of polishing high-fidelity designs and waiting for a client's sign off, programmers should participate in discussions at the very early stages of defining ideas.

Basic wireframes are usually enough for developers to assess technical risks and prevent the inclusion of features that might take too long to implement. Close collaboration speeds up prototyping, testing, and refining wireframes. Plus, it eliminates moments of designer frustration when the finished product only vaguely resembles their intended designs.

Complete the lesson quiz and track your learning progress.
Start
<?xml version="1.0" encoding="utf-8"?>