A Guide to Wireframing & Prototyping

Wireframing is a critical step in the design process for any digital product, from websites to mobile apps. However, with so many tools and resources available today, it can be overwhelming to know where to start. In the early days of the web, UX professionals had to learn wireframing by jumping in and doing it, without the benefit of extensive resources or experienced mentors. But today, new designers have the advantage of learning from those who have developed wireframes at scale for large organizations.

Despite the abundance of information available, there are still two challenges that designers may encounter:

First, for those who are new to the field, the abundance of information can be overwhelming, and they may struggle to know where to start. In this situation, they need step-by-step guidance on how others approach the work so that they can develop their own approach.
Second, experienced designers may face a new challenge when working in an environment with multiple designers on the team. In this situation, it’s important to rethink the design process and find ways to adapt so that everyone can co-design effectively.

I have developed this resource to help address these challenges. Inside, you will find an overview of wireframing, including its benefits, types, and what to expect. Additionally, step-by-step instructions on how to create wireframes from scratch are included.

Whether you are looking to refine your wireframing skills or start from scratch, this resource can help take your designs to the next level. Keep reading to learn how to build better wireframes, better digital products, and ultimately, achieve your user and business goals.

Definition

Wireframes are visual representations of a digital product or solution being built. They function like an architectural blueprint, allowing a UX designer or strategist to plan the layout and functionality of a digital product.

General Benefits

Quicker alignment and agreement. Wireframes serve as a communication device, creating a shared understanding of the solution being created. This allows teams to agree on design solutions more quickly.
Avoid costly post-development rework. Wireframes can be used to validate design ideas with actual users BEFORE investing time and money into building a full experience.
Improve design to development speed. Wireframes provide critical information to key team members, making development quicker and easier.
Direction. Wireframes are a valuable communication device, providing valuable information to key team members—especially those that need to build the product. Wireframes, supported by detailed annotations and requirements, streamline the production process, making implementation quicker, easier, and more accurate—not just for developers, but also for others involved in a project.
- Stakeholders: Key stakeholders can offer feedback and input in the context of a proposed experience.
- UX Designers: Designers use them to communicate their ideas and integrate the ideas of others.
- Usability Experts: Wireframes can be used to conduct usability tests.
- Developers: Wireframes communicate the specifics of design to the development teams.
- Content Writers: Wireframes provide a framework to help writers visualize how their content will look on a live site.
- Analytics Experts: Wireframes are helpful as they develop measurement and tracking plans.
- Strategists: Use wireframes to understand (or plan) how all the parts of a webpage come together to reach goals.

Wireframe Contents

Every wireframe should communicate 4 things:

Content: What will be displayed on the site to achieve the user’s goals? To achieve business goals?
Structure & Layout: What elements should be represented in the product and how will the pieces of this site be put together? How will these elements be placed on the screen?
Informational Architecture: How is this information organized and displayed on the site (navigation)? On a particular page (page hierarchy)?
Functionality: How will this interface work? How will users interact with it? How will the interface respond or behave based on user interactions? Data-driven elements?

Wireframe Variances

Wireframes come in a variety of styles and formats, which depend on the intended audience, purpose, project stage, and product type.

Audience and Purpose

When creating wireframes, it is crucial to keep the intended audience and purpose in mind. This includes considering who will view the wireframe and how it will be used. For example, business stakeholders may be interested in how various elements help reach business and conversion goals, while content writers may want to understand the structure and organization of elements so that they can create appropriate copy. Execution team members typically require detailed specifications and interaction notes.

Depending on the diversity of audience needs, you may need to create multiple sets of wireframes. However, this is not ideal, as it makes it difficult to iterate and keep versions in sync. Instead, it is usually better to design one set of wireframes to serve the needs of all audiences.

Product Type

The type of product being built can also impact the appearance of wireframes. For example:

Mobile Focus: Websites that prioritize mobile may have more detailed considerations for different environments.
Technology: Virtual reality products with a 3D aspect will have wireframes that look different from standard web environments.
Evergreen vs. Established product: Established products with a well-defined design system may not need the level of design detail that evergreen products do.

It is important to note that while wireframes can have varied forms, the device’s purpose remains static: to communicate how a product looks and how content is organized.

Project Stage

Wireframes can be created at varying levels of fidelity. During the early stages of the process, wireframes should be simple, hand-drawn sketches showcasing only boxes and generic elements to represent blocks of content. These sketches are quick to create, easy to iterate on, and can be completed by non-designers. Anyone who can draw a rectangle, square, circle, or triangle can participate in the design process.

Over time, the fidelity of a wireframe should increase. Digital design tools are typically used to create higher fidelity wireframes, but even within these tools, the fidelity level of the wireframes may vary. For example, you might start out with simple graybox wireframes with little definition. Over time, you may have more detailed representations with polished, pixel-perfect designs.

Types of Wireframes

When it comes to wireframing, there are various methods designers can use to bring their ideas to life. Some designers prefer to start with pen and paper, while others dive straight into digital wireframing tools. Let’s explore four common wireframing methods so that you will have a better understanding of which wireframing method will work best for your project.

Type 1: Sketching. Sketching is a very versatile method that can be done almost anywhere with minimal materials. It’s a great way to brainstorm ideas and quickly sketch out wireframes without being limited by a specific software tool. Sketching is also ideal for collaborating with team members, as sketches can be shared and modified in real time. However, because sketches are not typically precise, they may not be suitable for presenting to stakeholders or clients.
Type 2: Paper Cut-Outs. Paper cut-outs are similar to sketches, but they offer a more tactile experience. They allow designers to easily move elements around and explore different layouts without the need for software tools. Paper cut-outs can be especially useful when working with a team, as they encourage collaboration and experimentation. However, like sketches, paper cut-outs may not be suitable for presenting to stakeholders or clients.
Type 3: Stencils. Stenciling is a method that involves creating pre-made templates or stencils that can be used to create wireframes quickly and consistently. This can be especially useful for large projects that require many wireframes or for teams that need to work together to create wireframes. Stencils also help ensure that the wireframes are consistent and follow a standard structure. However, creating the stencils can be time-consuming, and they may not be as versatile as other methods.
Type 4: Digital Wireframes. Digital wireframes are the most popular wireframing method and involve using software tools to create wireframes digitally. They offer the most precision and flexibility, allowing designers to easily modify and present wireframes to stakeholders or clients. Digital wireframing tools also often offer collaboration features, making it easy to work with team members and share wireframes in real time. However, digital wireframing tools can have a steep learning curve and may require a significant investment in time and money to learn and use effectively.

How to Create Wireframes

Step 1: Review UX Artifacts.

At the beginning of the wireframing process, gather all relevant research, including customer profiles, personas, user scenarios, experience maps, competitive research, screenshots from existing channels, and current web metrics related to the existing channel. Once you have gathered this information, organize it in a way that is easily accessible.

Step 2: Determine the Scope of the Wireframing Effort.

Without boundaries, a wireframing effort can become unwieldy and counterproductive. Spend time answering the following questions:

How much detail is required? Consider audiences and purpose, product type, and project stage (as described above).
How will my output be packaged and shared? Do you need a formal presentation, wireflows, or a clickable prototype?
How will I annotate the wireframe, and what might I include?
Will I need to provide additional requirements to accompany the wireframe?

Step 3: Develop a User Flow

User flows are an essential component of UX design. They help designers visualize the user’s journey from start to finish, identify potential pain points and areas for improvement, and ensure that the user experience is consistent and intuitive. Let’s discuss the steps involved in creating a user flow based on user tasks.

Step 1: Define User Tasks Before you can create a user flow, you need to define the user tasks. User tasks are the actions that a user needs to take to achieve their goal. These tasks are usually related to the features and functions of your product or service. Some common user tasks include signing up, searching for information, adding items to a cart, and checking out.

To define user tasks, you can use a variety of research methods such as user interviews, surveys, and user testing. Once you have identified the user tasks, you can start to map out the user flow.

Step 2: Map Out User Flow The next step is to map out the user flow. A user flow is a visual representation of the user’s journey from start to finish. It outlines the steps that the user needs to take to achieve their goal. To map out a user flow, you can use a variety of tools such as whiteboards, sticky notes, or design software.

Start by drawing out the steps that the user needs to take to complete each task. Use arrows to show the flow between the steps. You can also use color-coding or other visual cues to differentiate between different paths or decision points.

Step 3: Identify Pain Points Once you have mapped out the user flow, it’s time to identify potential pain points. Pain points are areas of the user flow where the user might encounter difficulty or frustration. These can include confusing navigation, unclear instructions, or technical issues.

To identify pain points, put yourself in the user’s shoes and try to complete the user flow. Look for areas where you get stuck or confused. You can also conduct user testing or surveys to gather feedback from real users.

Step 4: Improve User Flow Based on the pain points you have identified, it’s time to improve the user flow. Look for ways to simplify the user journey, reduce confusion, and remove any obstacles that might prevent the user from achieving their goal.

Some ways to improve the user flow include simplifying the design, providing clear instructions, or adding helpful visuals. You can also look for opportunities to streamline the user journey by removing unnecessary steps or combining tasks.

Step 5: Iterate and Refine Creating a user flow is an iterative process. Once you have made changes to the user flow, it’s important to test it again to see if it’s working as intended. Look for areas where users are still encountering pain points and make additional refinements.

Remember that the user flow should be constantly evolving as you gather more feedback and make improvements. Regularly testing and refining the user flow will ensure that the user experience is always optimized for the user’s needs.

Step 3: Identify What You Will Be Wireframing.

Once you have mapped out what the goals of your experiences is and how the user will move from task to task, it is now time to determine what aspects of the digital product you will be working on. Here, the goal is to simply create a list of what should be included on your pages and what elements are needed. There is no need to actually start designing here. In general, at this stage, I will develop:

Screens. Once you are familiar with all the material on hand, determine which screens or pages need to be wireframed. For each one of those, create a list of goals, content requirements, messaging, call-to-action (CTA), and functionality requirements.
Global Elements. Global elements refer to design elements that are consistent across multiple pages of the digital product, such as headers, footers, sidebars, forms, carousels, and call-to-actions (CTAs). By designing these global elements upfront, you can establish a consistent visual language throughout the digital product, saving time and effort in the long run.
Consider Components. Based on content requirements, are there components that you need to create for common design patterns? Components refer to design elements that are specific to certain pages or sections of the digital product, such as cards, tables, lists, and forms. By identifying the required components based on content requirements, you can design them upfront and reuse them across multiple screens, saving time and maintaining consistency throughout the product.

Step 4: Begin Wireframing

Once you have a solid understanding of what you will be wireframing, it’s time to roll up your sleeves and start designing. There are different approaches to wireframing, and it ultimately depends on the designer’s preference and the scope of the project. Here’s a general process that designers can follow to complete a wireframe:

Step 1: Develop Global Elements Start the wireframing process by developing the global elements. These are the design elements that will appear on multiple pages, such as headers, footers, sidebars, forms, carousels, and call-to-actions (CTAs). By creating these elements first, you can ensure consistency throughout the product.

Step 2: Develop Components Next, move on to developing the components. These are design elements that appear on multiple pages but serve specific purposes. For example, if your product requires a login feature, you will need to design a component for this. By creating components, you can easily reuse them in different wireframes, saving time and effort.

Step 3: Develop Screens Once you have developed the global elements and components, you can start wireframing each screen. You can choose to start wireframing individual screens first, or you can begin with the home page or main landing page, which usually sets the tone and visual style for the rest of the product.

Step 4: Iterate and Refine Wireframing is an iterative process, and you should expect to make changes and refine your design as you go. Solicit feedback from stakeholders, conduct user testing, and make adjustments as necessary.

Step 5: Add Annotations.

Digital products these days are very complex and have a lot of functionality. Communicating what happens during interactive applications is challenging to visualize with static wireframes. Annotations are the quickest and easiest way to indicate what occurs when certain actions are triggered. You can use annotations to add a broad range of details to any basic wireframe without adding clutter. Some examples of annotations that you may want to include in your wireframe are:

Functionality: clicks, taps, swipes, zoom, pop-ups, data inputs and outputs.
Content: text, fonts, layout, sizing, linking, graphics, multimedia, dimensions, resolution.
Behavior: animation styles, speed, and positioning, interactions, link destinations.
Key Constraints: hardware, software, browser, data.

Step 6: Package and Share Wireframes

Sharing wireframes with others can be challenging, particularly when the product you’re working on involves multiple pages or interactions. Fortunately, there are several ways to package and present wireframes for easy sharing and collaboration:

Method 1: Unpackaged Wireframes. With this method, you simply share individual wireframe images without any packaging or organization. While this is the simplest approach, it may not be the most effective if you have many wireframes or if you want to show how the wireframes are related to one another.
Method 2: Presentation with Wireframes. This method involves placing the wireframes inside a presentation, such as a PowerPoint or Google Slides deck. This allows you to provide context and explanation for each wireframe and easily navigate between them. You can also include annotations or additional information to help others understand the purpose of each wireframe.
Method 3: Wireflows. Wireflows are a type of flow chart that show the interaction between screens or pages in your product. With this method, you first create a flow chart that outlines how users will move through your product, then place the wireframes on the appropriate steps in the flow chart. This can be a helpful way to visualize how the wireframes fit together and how users will interact with your product.
Method 4: Clickable Prototype. A clickable prototype involves using a design tool to make elements of the wireframes clickable, allowing others to simulate navigation and explore the many screens and interactions in your product. This method can be particularly useful for getting feedback on user flow and functionality, as it allows others to experience the product in a more realistic way. However, creating a clickable prototype can be time-consuming, and may not be necessary for all wireframing projects.

<aside> Hi there! My name is Tiffany and I am a UX and Technology leader who helps large enterprises build profitable digital products and high-performing digital teams. From time to time, I share helpful resources that address common challenges on my website at www.MsTiffanyBritt.com.

</aside>