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 product’s flows to go and where you see each element going. 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
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
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:
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:
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.
America Whitten is a Project Manager at Yeti. She is also the resident scrum master and product enthusiast. She is a fitness lover and corgi wrangler. America stumbled onto the tech scene in 2015 and has not left the Yeti cave since.