Quick Guide to Wireframing: 3 Tips for Creating Wireframes

Wireframing is a process in which a visual guide, or blueprint, is created by user experience designers (UX designers) to show the basic functionality of websites, mobile apps, or any screen-based product that involves a user interface. This blueprint is an important element in the early stages of the design process because it provides key guidelines for design teams regarding layout, functionality, and interaction design.

Wireframes act as mockups for project stakeholders who can use them to determine where to place certain information before design team members build out the site or app’s interface. They can also be used during the development process as part of usability testing to gain feedback from user research about the pros and cons of its visual design and interaction design.

A wireframe may include logos, search fields, and placeholder text. UX design typically renders wireframe images in grayscale to represent colors and text size gradation to underscore the importance of specific parts of the information architecture like headers. Designers can sketch wireframes on paper or whiteboard or with different wireframing tools, depending on the project’s complexity.

There are three different types of wireframe, each delivering different amounts of information about the project:

1. 1. Low-fidelity wireframes. Low-fidelity wireframes are usually simple designs that give a rough idea of the site or app from its starting point. This design doesn’t typically feature details like imagery or clickable content. Instead, placeholder images and lorem ipsum (dummy text) are used to give a sense of layout and user flow.
2. 2. Mid-fidelity wireframes. The most commonly-used form of wireframes, mid-fidelity wireframes is a more accurate depiction of a website or mobile application. They offer more detailed templates but still exclude typography or images.
3. 3. High-fidelity wireframes. Text and image detail is more specific and to scale in high-fidelity wireframes. Layouts are pixel-specific and feature images and content that designers may use in the final product to explain functionality. High-fidelity wireframes are often used during the latter stages of the development project when more details have been solidified.

Wireframes help UI designers capture valuable feedback from stakeholders. Consider these tips to help make the process more straightforward:

1. 1. Be clear. Clarity is one of the most important considerations to take when designing a wireframe because otherwise, the feedback from stakeholders will be scattered and less valuable. Know the goal of your wireframe before creating it so that you can design it with purpose. Have a clear understanding of the target audience, the problem that the website or app is trying to correct, and how users will find it.
2. 2. Make a detailed sketch. Design tools are handy for detailed wireframes, but a whiteboard sketch can also provide basic information during the early stage of product development. Ensure that the drawing can be clearly understood and has the correct data and the features you want to include to make the user interface an easy experience.
3. 3. Keep it simple. In most cases, a wireframe that simply shows content, page views, and functionality will suffice as an informative layout. Issues like color or fine detail are only necessary if you’re creating a high-fidelity wireframe. Otherwise, they can distract team members and stakeholders from the wireframe’s focus.

There are several distinct advantages for wireframing:

• Collaborative. Wireframing allows clients and stockholders to understand the layout of a project and add their own opinions and decisions about functionality and UI design in the early stages of the project. In turn, this makes implementing those changes easier for the design team.
• Cost-effective. The functionality information provided by a wireframe allows designers to make fewer changes during the coding process, which lowers the time and expense needed for frequent edits and corrections. Fine-tuning can be a single step in the process rather than a constant (and costly) back-and-forth.
• Easy to use. A wireframe requires little more than paper or a whiteboard to lay out the basic, pertinent details of a website or app and give designers and content providers a road map for their work. Higher-fidelity wireframes add content but will still streamline the path to completion.

The wireframing process has a few disadvantages, including:

• Possibility of misinterpretation. Your client may only want to see the completed website or app, or misinterpret the wireframe as the finished design. Amending a completed wireframe to add those details also adds time and effort to the development stage.
• Difficult to change. Correcting a paper or whiteboard wireframe can require multiple re-designs to accommodate changes from the client. Wireframing tools can cut out much of this repetition.
• Time-consuming. Even low-fidelity wireframes require time and effort to lay out before presentation. Changes to the wireframe will also add more time to the planning process and detract from the actual design and production, especially if there’s a time constraint on the project.

Get a MasterClass Annual Membership and let David Carson be your personal tutor. The prolific and decorated designer—who’s been lauded as the “art director of the era”—reveals his processes for going off the (design) grid, implementing typography in new and interesting ways, innovative uses of photography and collage, and so much more.