Member-only story
Understanding Fidelity in User Experience
What is fidelity, and how to utilize it?
Let’s talk about fidelity.
Not in relationships, though.
You know those rough sketches that designers use to map out the layout and structure of a product? The “drafts” of interface design?
Well, those are called wireframes! And did you know that there are different levels of “fidelity” when it comes to wireframes?
First, you have low-fidelity wireframes, or “lo-fi” for short. These are rough, simple visual representations of a product’s layout and structure. Basically, a bunch of black rectangles that lay out the page as placeholders for the actual components. They’re usually created quickly and early in the process, and they’re not meant to be polished or detailed. They do not represent the look of the final product in any way. Instead, their primary purpose is to communicate the overall structure and layout of the product and get feedback on the big-picture stuff. These are often created by hand or with simple tools like paper and pencil or a whiteboard.
High-fidelity, or “hi-fi” wireframes, on the other hand, are much more polished and detailed. They’re almost like a finished product, except they’re still prototypes. Many design iterations occur after the first set of hi-fi wireframes are ready. They include all the specific design elements, like colors and typography, and they often look very similar to the final product. These are usually created later in the design process when the concept is refined and approved. They’re used to get even more specific feedback on the design and to help developers understand how the product will look and function.
Many designers opt to jump right into hi-fi wireframes, especially if the brand still needs to be established. Getting a feel of the product and how it sits with the typography and color choices makes it easier, at times, to imagine the final product.
You thought there were just two types. But there’s always more…
There’s also something called mid-fidelity (mid-fi) wireframes. These are a little more detailed than low-fidelity wireframes and include slightly specific design elements, like buttons or menus, but they’re still pretty rough. They’re used to understand better how the product will function and get more specific feedback from stakeholders.
So there you have it!
Low-fidelity wireframes are super basic, mid-fidelity wireframes are a little more detailed, and high-fidelity wireframes are almost like a finished product, as their names imply! Each type of wireframe has its purpose.
Sometimes product design starts with high fidelity, and sometimes an existing product requires a step back into low fidelity. It depends on the case.
