Wireframing

What are wireframes?

Wireframes are like a blueprint. They lay out the structure of your website or product. Sometimes they’re also referred to as mockups, mocks, or simply wires. Wireframes provide a clear but simple overview of your structure and layout using shapes and lines to represent imagery, text, buttons, and more. Wireframes can be drawn by hand or created using a variety of online tools.

Are you in the process of creating a new website or product? You might want to consider wireframing as part of your process. Wireframing is a common design tool that is typically done in the early stages of design. It allows you to present your design at a basic, structural level and layout the basic flow of content on a page or screen.

Prior to wireframing, your team can brainstorm ideas, establish project scope, and determine the requirements and goals of the project. Then wireframing is used as an efficient and low-cost way to present early design plans and gather feedback from stakeholders before progressing further into design and development.

Why use wireframes?

There are numerous benefits to using wireframes in your design process. These include but are not limited to:

1. They provide a visual representation of your website or product which can be easily presented to stakeholders for review and feedback before progressing the design.
2. Wireframes are easy to create, review, and change based on stakeholder feedback. Sometimes designers will even make adjustments to wireframes live during a presentation.
3. Wireframes are inexpensive to create as they can be hand-drawn with pen and paper or on a whiteboard. These informal approaches also make it easy to collaborate on wireframes with others.

Types of wireframes

There are three key types of wireframes, each classified according to its level of detail.

Low-fidelity wireframes

These are very basic visual representations of the initial design, typically sketched out roughly and without any sense of details. Low-fidelity wireframes promote discussion and brainstorming about structure among other stakeholders and project owners.

Mid-fidelity wireframes

Mid-fidelity wireframes are the most commonly used type of wireframe. They include a higher level of detail in the design layout. These wireframes are commonly created from software or application.

High-fidelity wireframes

This is the most detailed version of the three and may include actual imagery and content. Because of the additional details in these wireframes, these wires may look quite close to the actual finished product.