Wireframing

Imagine building a house without a blueprint. The process would be confusing and inefficient, and you would waste a lot of resources if you discovered issues later on and had to knock down walls to fix these problems.

Building a website or app without a wireframe can invite similar chaos. By sketching out the rudimentary elements of your design right from the start, you can give your project a sense of direction and provide everyone on your design team some much-needed clarity.

Wireframing is the process of creating a blueprint for the structure of a website or app. Unlike a full mockup, which includes colors, icons, text, and other stylistic elements that wind up in a final design, a wireframe is just a black-and-white skeleton.¹ Designers use wireframes to experiment with different page layouts before spending time on design details. As such, wireframing occurs early in the development process.

Unlike a polished design, the main focus of a wireframe is functionality. When designers are wireframing, they’re not focused on the appearance of the finished product, but on how it functions. They’ll use wireframing to rearrange buttons, text fields, images, and menu items to determine the best possible layout for users and optimize the user experience (UX). During wireframing, designers consider the path users take to complete tasks and ensure page content is positioned correctly to maximize usability.

Rather than fleshing out the entire design right from the beginning, starting with a wireframe ensures the user interface (UI) is simple and intuitive in its most basic form.

Notably, wireframes don’t have to be technical—you can create a website wireframe with a whiteboard or pencil and paper. However, today’s digital wireframing programs make the process incredibly efficient, allowing designers to move and scale elements with the click of a mouse.

User Interface (UI): The point of interaction between a human and a computer, including keyboards, display screens, computer operating systems, and front-facing digital platforms.² The UI of an application or website makes it possible for people to use these digital products. When designers create a wireframe, they’re establishing the basic layout of the UI.

User Experience (UX): The overall interaction and satisfaction users have with a product, system, or service. It considers factors such as usability, accessibility, aesthetics, emotions, and the overall perception of the user throughout their entire journey, from initial interaction to completion of tasks.

User Flow: The sequence of steps users take to accomplish a specific goal within a digital product, like purchasing an item from an e-commerce store, downloading a digital file, or signing up for email updates.³ For example, to purchase a product from a website, users must land on the product page, add the product to their cart, navigate to the checkout page, and complete the checkout process. Wireframing helps designers map out this path and understand which pages or elements are critical to user flow.

Low-Fidelity: Used to describe black and white wireframes with a low level of detail, often resembling rough sketches.⁴ Low-fidelity wireframes tend to be more abstract, using shapes and dummy text for placeholders when real content is unavailable.

High-Fidelity: These wireframes more closely match the design of the final product, incorporating finer details, content, and typography. High-fidelity wireframes can still lack color, but designers often use grayscale to represent different color values.

Mockup: A high-fidelity visual design that resembles what the final product will look like. Unlike wireframes, which outline the format and structure of the page, mockups include visual elements like logos, colors, icons, and images. Because mockups are static in nature, they’re better for visualizing design rather than testing usability.

Prototype: A High-fidelity version of the wireframe that looks and functions similar to the final product. While mockups are static, much like drawings or artistic renderings, prototypes are dynamic and interactive. Because prototypes offer functionality, they’re ideal for usability testing.

Iterative Design: A design methodology that involves creating a prototype, testing the prototype, analyzing the results, and making changes based on these results.5 This is a cyclical process, meaning it occurs again and again as successive versions of the product are refined. Because wireframes are easy to change, they allow for rapid and efficient rounds of iteration.

Wireframing was used in design long before the days of digital products. Surprisingly, historians have discovered hand-drawn wireframe models dating back to the Renaissance, depicting structural visualizations of artistic sculptures.

In more recent history, video game designers in the 1980s and 1990s created wireframes to represent 3D objects.⁶ Using early computer-aided design (CAD) programs, designers connected points with lines—resembling wires—to outline the edges of 3D objects.

With the release of Adobe Illustrator in 1986 and Photoshop in 1990, wireframing became more flexible and dynamic. Using these tools, designers could wireframe logos and other 2D graphics. Digital prototyping tools, such as Axure and Balsamiq, emerged in the following decades, allowing designers to create interactive wireframes.

The past decade has produced several innovative wireframing tools. The release of advanced design platforms like Figma and Sketch allowed designers to create and test wireframes in the same app, making the process of prototyping and UX testing significantly more efficient. These tools also introduced new collaboration features to the field of design, which has become increasingly important during our mainstream shift to hybrid/remote work.

The evolution of wireframing has shaped the way designers create digital products today, ultimately leading to better experiences for end users. Because wireframing prioritizes the user experience, it encourages designers to embrace user-centered design, or design that focuses on the needs of the users above all else.

Targeted Usability Testing

One of the main benefits of wireframing is the ability to conduct usability tests before spending resources on producing detailed designs. After creating interactive wireframes, designers can engage users in hands-on interactions with the interface, encouraging them to complete specific tasks and observing how they do.⁷

This process of usability testing can help designers identify problems with the layout or functionality of the design, gauge people’s reactions to proposed layouts, and make design decisions based on real-world feedback. Having users interact with a wireframe, compared to a completed design, allows user testing to focus on usability rather than aesthetics. 

Streamlined Collaboration

Wireframing has also led to efficiency improvements in collaborative design environments. With many different people working on a project, things can get confusing very quickly. Wireframing is an easy way to convey clear design ideas, ensuring everyone is on the same page.

Today, wireframes are used and understood by many different professionals. Developers use wireframes to program the functionality of a website, web designers use wireframes to optimize the layout of the UI, UX designers use wireframes to design user flows, and stakeholders use wireframes to share their design ideas. Wireframes are a common language for people working in these different disciplines, allowing designers, developers, and stakeholders to collaborate effectively and avoid miscommunication.

Also, because wireframes are simple and quick to create, stakeholders are less likely to get attached to certain design decisions. A stakeholder might not want to make changes to a finished design because they love how it looks (or spent a lot of money on it). However, they may be more flexible about rearranging elements in a wireframe to test new design ideas.

While wireframing offers opportunities to increase efficiency in the design process, over-relying on wireframing can lead to a few common pitfalls.⁸

Design Ambiguity

For example, wireframing can create opportunities for misunderstandings among teams. Because wireframes are incredibly minimal, stakeholders might form inaccurate assumptions about what the finished product will look like. Wireframes that lack clear annotations can confuse stakeholders and designers alike, leading to a final product that falls short of expectations. Because of these misunderstandings, designers often spend a lot of time explaining their wireframes to stakeholders. In some cases, it’s faster to present a more polished design instead.

Neglecting User Flows

Another problem involves how designers work with wireframes. Designers often sketch out every page of a website without fully understanding how users will interact with it. For example, a designer creating an e-commerce website might wireframe each page before considering how the customer will navigate the website to find a product and complete the checkout process. As a result, their wireframes will lack direction and clarity, requiring major design overhauls in the future. Mapping out the user flow ahead of time allows designers to focus on pages that are critical to the flow, ensuring the overall layout and style of the website makes tasks as easy as possible for users.

Issues of Aesthetics

When designers create wireframes, they also risk focusing too much on aesthetics. Remember, wireframing is not about looks, but about functionality. Adding extra design details to a wireframe can distract from the overall structure and flow of the design, which is the primary purpose of wireframing.

At the same time, many critics argue that aesthetics and functionality go hand in hand. It’s true—the appearance and design details of an interface do impact usability. Think about how colors, icons, images, text, and animated effects help you complete a task on a website or app. Low-fidelity wireframes that lack these details may not be great candidates for usability testing. This is because users have to make assumptions about what the different elements in a wireframe are, producing inaccurate UX testing results.

Wireframes Becoming Obsolete

Due to the availability of web-based design tools, many critics argue that wireframes are becoming irrelevant.⁹ In fact, the idea that wireframes are “essential” to design may no longer be true. With access to tools like Figma and Adobe Illustrator, designers can throw together high-fidelity mockups in the same amount of time it takes to create low-fidelity wireframes. Many times, these design elements already exist in the form of templates or brand assets, and it’s faster to simply drag and drop these existing elements than to sketch up a brand-new wireframe.

With so many efficient prototyping tools at your disposal, wireframes might no longer be ideal for usability testing. Still, wireframes can be great for brainstorming the general layout and flow of a product in the very early stages of design.

The Nielsen Norman Group (NN/g), founded by usability experts Jakob Nielsen and Don Norman, is a leading company in UX design. When the team at NN/g decided to redesign the home page of their website, they leveraged wireframing to rapidly develop and test new design ideas.¹⁰

The design team used an iterative approach to develop and test wireframes and prototypes, gathering user feedback through multiple rounds of testing. They started with low-fidelity wireframes to plan out the general structure and layout of the page, then shifted to high-fidelity prototypes to assess the aesthetic appeal of these designs. 

With each round of testing, designers learned something new about the layout and visual style of the page. Based on this feedback, they would tweak different parts of the page and test the design again.

The key takeaway from this case study is the value of using wireframes to explore different design options without perfecting the layout up front. As a result of using wireframes and prototypes, the designers at NN/g avoided wasting time making the early versions pixel-perfect. Wireframing also allowed the design team to make rapid adjustments to the design during testing to extract as much feedback as possible in a short amount of time.

UX Designer

UX designers create digital interfaces with the goal of maximizing usability for the end user. UX designers typically conduct usability tests on wireframes, prototypes, and finished designs to determine what’s working and what’s not. Check out this article to learn about UX designers and how they contribute to the design process.

UX Research

Conducting UX research allows design teams to determine how users interact with their products. UX research is essential to user-centered designs, ensuring that websites, apps, and other digital products behave how users expect. Take a look at this article to learn more about UX research and how the field started.

1. Wireframing. (n.d.). Usability.gov. Retrieved January 31, 2024, from https://www.usability.gov/how-to-and-tools/methods/wireframing.html
2. Churchville, F. (n.d.). What is user interface (UI)? Definition from SearchAppArchitecture. TechTarget. Retrieved January 31, 2024, from https://www.techtarget.com/searchapparchitecture/definition/user-interface-UI
3. Kaplan, K. (2023, April 16). User Journeys vs. User Flows. Nielsen Norman Group. Retrieved January 31, 2024, from https://www.nngroup.com/articles/user-journeys-vs-user-flows/
4. Wireframes: Low-Fidelity vs. High-Fidelity. (n.d.). Dupont Creative. Retrieved January 31, 2024, from https://www.dupontcreative.com/wireframes-low-fidelity-vs-high-fidelity/
5. Design Iteration Brings Powerful Results. So, Do It Again Designer! (2023, July 31). The Interaction Design Foundation. Retrieved January 31, 2024, from https://www.interaction-design.org/literature/article/design-iteration-brings-powerful-results-so-do-it-again-designer
6. The history of wireframing & prototyping. (2015, August 13). Infragistics. Retrieved January 31, 2024, from https://www.infragistics.com/community/blogs/b/devtoolsguy/posts/the-history-of-wireframing-amp-prototyping
7. De Lange, P., Nicolaescu, P., Neumann, A.T. et al. (2020) Integrating Web-Based Collaborative Live Editing and Wireframing into a Model-Driven Web Engineering Process. Data Sci. Eng. 5, 240–260 https://doi.org/10.1007/s41019-020-00131-3
8. 10 Critical Wireframing Mistakes That Can Derail Your Design Project. (2023, March 20). MockFlow. Retrieved January 31, 2024, from https://mockflow.com/blog/wireframing-mistakes-that-can-derail-your-design-project
9. Why wireframes are becoming obsolete. (n.d.). Anton Sten. Retrieved January 31, 2024, from https://www.antonsten.com/wireframes
10. Whitenton, K. (2018, August 26). Case Study: Iterative Design and Prototype Testing of the NN/g Homepage. Nielsen Norman Group. Retrieved January 31, 2024, from https://www.nngroup.com/articles/case-study-iterative-design-prototyping/