What is a wireframe?

A wireframe is a blueprint of a web page or an app that usually doesn’t include color or specific fonts. Instead, it shows the elements of the page and how they work when users interact with them.

UX designers create wireframes by sketching boxes, shapes, and lines to communicate their ideas better. 

Wireframes help designers, web developers, and clients explore ideas during the product design process. It serves as a visual structure guide to the team in understanding each page’s purpose and function.

Wireframes also help the team and the client assess if the site has a logical structure of links and pages. Wireframes can be used to set the basic structure of a website. In turn, this helps plan the number of pages required.

Wireframes can be sketched using a black pen and white sketchpad. For example, designers draw boxes with an “X” inside, lines, and shapes to represent an element or functionality.

Wireframing tools like WireframeSketcher, InvisionApp, and Balsamiq allow designers to create digital, high-definition wireframes. 

How are wireframes different from mockups?

Wireframes are basic illustrations that highlight functionality, while mockups are used as a non-functional visual representation of the final product. For example, it could be an image made with Photoshop of how a website would look when completed. 

A wireframe shows a bare, concise layout and functionality of the page. It includes details of where to position an element, functionalities, and overall user behavior. 

A mockup is a high-definition design that shows the visual identity of the website or a brand. It includes the actual logo, images, and typography. It’s a product of a wireframe that the team and client had approved. 

How are wireframes different from prototypes?

Wireframes are images or drawings of page structure, while prototypes are unfinished models of a website or an app. It’s like an advanced wireframe.

A prototype allows testing, rather than simply visualizing placement, or showing its design. While based on a wireframe, they can include code, visual aspects, and offer interaction for testing out its features.

Some prototypes can be made by drawing sketches on paper, using colorful pens, and sticky notes. It helps the team to better animate the flow and sequence of the elements or pages. 

Prototypes focus on displaying interaction design. They are useful for testing pages and elements before the actual development starts or to improve and test ongoing features.

Types of design wireframes

Wireframes have a level of fidelity in showing the details of the pages. For example, low-fidelity wireframes focus on the structure rather than finer details. 

Designers use any of the three wireframe designs. But the low-fidelity types are easy to create and ideal in meetings and discussions.

• Low-fidelity wireframe – a simplified version that contains lines, boxes with “Xs” inside, and shapes as placeholders for elements. It’s typically in black, white, or grayscale and doesn’t include finer details. These are great for brainstorming during design meetings.
• Mid-fidelity wireframe – an enhanced and refined version of a low-fidelity wireframe. It shows an accurate representation of elements. These sometimes use color coding, but rarely have actual images or rich illustrations. Creators typically leave notes to clarify visitor behavior and page flow. This type can be used for basic user interface testing.
• High-fidelity wireframe – a digital wireframe that has elements set in a specific place, such as images, navigation systems, preliminary page copy, and comments on user behavior and expectations. The layout is typically representative of how the finished page will look. 

Benefits of using wireframes

Gives direction to the creative team – wireframes help designers, developers, and clients discuss how the design decisions are made. It opens opportunities to discuss essential elements of the page, how they’ll work, and how it would affect user experience.

Time-saver for the entire project – wireframes can be repetitive. That leaves room for feedback and changes. It’s a perfect tool to test how users will respond to a given website. This can be done with basic visual design techniques, implementing easy and quick changes.

Gives clarity on the website’s purpose – wireframes provide specific details, which provide clarity to the team on what they should focus on. Designers, developers, and writers deliver what’s expected from them based on the site’s purpose and function. 

Helps create a better user experience – wireframes go through constant evaluation. The team can identify the unnecessary elements that will cause a poor browsing experience. 

Shortcomings of using wireframes

No visual design and visual identity – wireframes don’t simulate the site’s overall functionality and flow of the pages, unlike a prototype. It’s difficult for clients to grasp the overall aesthetics because wireframes are rough drafts of the site’s structure.

Extra effort for designers – designers and developers must put a lot of effort to communicate abstract ideas with clients. Some clients may not grasp the technical aspects and may require designers or developers to do some extra work to explain how the project will eventually turn out. 

Limited aspects of animations for complicated projects – wireframes only display the structure and content. It may not be helpful for complex projects with animation and gestures, which can’t be fully represented on static pages. 

Wireframing tips for the design process

Wireframing emphasizes the simplicity of the design process and then applies incremental changes based on the overall feedback.

When creating wireframes, here are some key points you need to consider:

• Make it simple – the purpose is to explain the structure of the page. Keep the layout simple, and hold on from adding design elements, unless absolutely necessary.
• Add annotations to give context – it doesn’t need to be a long description, but it will provide both the team and clients with an overview of the structure and layout.
• Use generic fonts and avoid colors – use one font style and present the design in grayscale. Use black, white, and grey hues to emphasize essential elements only.
• Be open to feedback – make room for corrections and changes, then apply those revisions to avoid unnecessary hurdles later on.

How to get started with wireframing

• Identify the project and its purpose – know the end goal of the project and to whom it’s intended for. If it’s a website, the sitemap can help you get started with the layout. If it’s a mobile app, consider each design detail, the size of the screen, and make adjustments to the elements, avoiding ones that are unnecessary.
• Choose your tool – start with simple sketches. Move onto tools like Invision Freehand later, when you need to flush out the details or to exact measurements.
• Start building the wireframe – begin creating the layout of the page with simple and easy to understand annotations for the team to pass around and evaluate.
• Test everything out before finalizing – wireframes, depending on the type of design during the process, will always have room for improvement. Once you finalize it, start testing it and iterate changes according to feedback.