Building great product experiences requires having an effective design process. Now, with the variety of UI/UX tools and methods available, it’s important for designers to understand what processes to use at any range of fidelity. Timing is also critical here, as each one of these methods is used at different stages of a project.
Design fidelity refers to the level of details and functionality built into a prototype. There are three levels of fidelity: low, mid and high.
- Low fidelity prototypes consist of sticky notes and sketches, which is great for high-level brainstorming and collaboration.
- Mid fidelity prototypes are often called wireframes.
- High fidelity prototypes almost represent the finished product.
Low Fidelity - Sketching
We’ll start with the lowest fidelity in the design process, which is sketching. All you need is a pen, some sticky notes and lots of paper. It’s good to start at a macro level and get all your high-level ideas on paper, then collaborate with the project team. This will help you communicate with stakeholders, get initial feedback and then refine your thinking. Start filling in more and more details, which helps the direction evolve. The goal is to generate a bunch of idea that ultimately sets the groundwork for the next phase, which is creating wireframes.
Mid Fidelity - Wireframes
Wireframes are a digitally structured version of your notes and sketches that are meant to be semi functional, but not include any design aesthetics or graphics. These are produced using applications like Photoshop, Balsamiq or other similar tools.
At this stage of the process, you’ve already generated a wide range of ideas and began the reduction phase. This means the removal of any ideas that didn’t work, and refining the best ones on your list. Remember, this is a process that will be repeated throughout design phase. Now it’s time to create something tangible to actualize the UX work put together during the sketching phase, this is called wireframing.
Creating wireframes means implementing your ideas into a clean formatted version of a sketch. Wireframes give us the ability to create pixel-based layouts that resembles the product structure, but with limited functionality and little to no styling. This let’s us determine what elements work within our layout, and which ones cause constraints that can impact the user experience. Wireframes are not meant to look beautiful or resemble any particular style guide, and should remain within the low-to-mid fidelity range.
High Fidelity - Prototypes
What’s the most important fidelity range?
Focusing on the low-to-mid range fidelity seem to be most effective approach. This allows for an iterative design process to evolve over time, but without getting in the way of conducting any user testing. Limiting the level of creative details and nuances involved in visual design at this stage prevents the client from focusing on colors, fonts, images or layout aesthetics when you’re trying to refine the functional aspects of the product.