My UX toolkit: Wireframes
My UX Toolkit is a series of posts exploring different tools and techniques used in the user experience design and research process, my understanding of them, and when they can be applied. UX is a broad and varied space that can range from quantitative statistical analysis to graphic design, from branding and content strategy to storyboarding. Here I am trying to scratch the surface of how UXers UX, share my knowledge and further my own understanding of this vast career field.
Wireframes
When people in the design industry think of the tools of a UX Designer, wireframes is probably where their mind jumps to. It is one of the most important tools in the UX toolkit, communicating a product’s structure, information architecture and functionality.
A wireframe is to a website or mobile application what a blueprint is to a construction project. Wireframes are intended to be a greyscale skeleton for a product, showing the layout of a site or app without any of the design elements such as styling, imagery, color or graphics.
Wireframing is usually done somewhere in the ideation phase of a project, after all of the research has been gathered and synthesized, and perhaps after some of the information architecture has already been created.
Hand sketches should be the first step in the wireframing process. Initial hand sketches should be seen as a brainstorming tool. Oftentimes UX designers will hold a design studio with different crossfuntional team members and stakeholders involved in the project. This should be a “no bad ideas” exercise where everyone feels free to share even their most far fetched ideas. A lot of inspiration and creativity can occur as a result.
Once a more solid idea of the design requirements is developed, starting off hand sketching before moving into digital wireframing can save a lot of time later. Depending on the project scope, hand sketches may be sufficient to move into the usability testing or design phase of the project.
Low fidelity digital wireframes contain the most basic, bare bones content and layout visuals. They are a good place to start when working in a larger team. Before getting in too deep on a specific interface, you can create a low fidelity version of the wireframe and use it to check in with other members of the team to make sure you all are on the same page about the design.
While lo-fi wireframes are not typically turned into prototypes for usability testing, when done it can yield some enlightening results. Lo-fi wireframes can be used to great effect to test very simple ideas, and because they contain so little frills and distractions users may have some valuable insights about the functionality of the product.
High fidelity wireframes begin to add in more details such as content, fonts, colors and graphic elements and are a more realistic view of how the end product will look. They are usually made into interactive prototypes that demo basic interactions and flows of the product. They are used to present a more realistic version of what the final product will look like and how it will behave.
Why wireframe instead of going straight into design? Wireframes force UX designers to focus on the functionality and content of a product without getting lost in details like design elements and branding. While design elements play an important part in a users enjoyment of a product, the overall user experience will be greatly enhanced by a strategically thought out interface.
