What's The Point of Wireframes

When it comes time to start building however you need a visual understanding and agreement of how everything will fit together so that the team is always on the same page. This is where wireframes really shine and can make or break a product.

What is a wireframe?

A wireframe is a tool that allows the design team to plan web and mobile layouts, define and organize information hierarchy and explore how a user might interact with a digital interface. Wireframes allow us to focus on function rather than advanced visual design at a critical stage in the design process - where information hierarchy, task flows and technical feasibility are all being combined to build the foundation of a great user experience.

Wireframes can also be used at any point in the design process to test usability and consumer comprehension. This can be especially useful at the start of the design process before technical development is finalized and major product changes cost exponentially more. Building a good product is a lot like building a house. You have a vision in your head of what you want the end product to look like, how you want the flow to go and where you see each element going. When it comes time to start building though you need a visual understanding and agreement of how everything will fit together to make sure your vision works in reality before you commit to building.

Who uses them?

Pretty much everyone involved in the product development process, Stakeholders and Product Owners use wireframes to understand how a layout will look and collaborate with team members to ensure that proposed designs will meet project goals. Designers use them to figure out foundational design elements and test the user experience of the product early on. Wireframes are also used by the Developers to show both where and how technical requirements interact with front-end design.

What do they look like?

We start to create wireframes almost right away in the product process and typically move through three stages: Low Fidelity, Medium Fidelity and High Fidelity. They start out looking like black and white boxes and end up looking exactly how we want the product to look with colors, text styling and buttons.

Low-Fi Wireframes:

These are the jumping off point for designs. They can either be digital or paper and are typically done in black and white. We do not use color at this point because the focus is on where the information goes and in what order rather than how it looks.

Low-Fi Wireframe Examples:

Medium-Fi Wireframes:

Once the basic informational and functional architecture is set up we can layer on more detailed copy and foundational interface design.

Medium-fi Wireframe Examples:

Hi-Fi Wireframes:

Now that we know where everything goes, the copy, navigational elements, buttons etc, it’s finally time to add color and other visual details. This is the point when the wireframe most resembles the finished webpage, mobile app or other digital interfaces. Small adjustments can be made but ideally, this stage is where we add final touches.

High-Fi Wireframe Examples:

Good wireframes, like a good house blueprint, are incredibly important to creating an amazing product. While it can feel slow and cumbersome at first to go through the process of their creation and iteration, in the long run, they save teams money, headache and time.

I hopefully this helps you in your future wireframing endeavors!