What kind of prototype works best in which situations? When should you create high-fidelity mockups? When will a low-fidelity wireframe suffice? Does your team know the difference and what the benefits of each are? Read more to better understand this essential UI/UX tool and how to use it well.
I have seen many job descriptions ask for the ability to create high-fidelity mockups. I often wonder if that is always necessary. Would leaders be happier to see an idea and make a decision with a simpler solution?
What is High- and Low-Fidelity
High-fidelity prototypes are often called “pixel-perfect”. They are meant to be a mirror of what the final product will look like. This means every color, spacing, and font choice is in place. From a sketch on paper to scribbles on a whiteboard, low-fidelity mockups convey the general idea as quickly and easily as possible. Next, I will get into why you should use both of these techniques.
Convey Ideas with a Picture
The easiest way to convey a complex idea is with a picture. This is especially true of digital designs as they are primarily visual. Yet, it does not take much to show someone a high-level or general idea. A quick whiteboard sketch is a great solution to this problem. Draw placeholders for images, lines to represent text, a call to action, and you now have a basic landing page. This is especially helpful to quickly show the transition between desktop, tablet, and phone layouts. The big bonus is how quickly (and cheaply) you can create these artifacts.
When to Use Low-Level Mock-ups
- Preliminary design meetings and brainstorming sessions to illustrate an idea
- Design review feedback sessions when suggesting possible edits
- Outlining new pages or features when you already have an established design system
Hand Over Design Requirements
There are other times when you need to provide detailed design requirements. At some point, team members and leadership want to know what the finished product will look like. This gets complicated if there are complex interactions, such as in mobile apps or online shops. For static images, editors such as Photoshop and GIMP are typical tools. Interactive prototypes require extensive time depending on how complex they are.
When to Create High-Fidelity Prototypes
- When showing a possible final product after the preliminary designs are finalized
- For rebranding presentations to show what a new visual identity looks like
Audience Considerations
Often there is pressure to always show members of leadership high-fidelity prototypes. Please do not fall into this trap. Explain to your leaders that the faster you can get their feedback, the quicker you can proceed or pivot. This may take some expectations adjustment, but saving time and/or money can be great motivators. Use the rule that you show leaders just enough information for them to make a decision.
Action Item
Create a policy with your team for the situations that call for high- or low-level prototypes. Communicate this plan with leadership with an emphasis on saving time and money. Reassure them that low-fidelity mock-ups get you to a design decision faster, and will still result in visually aesthetic products. Then prayerfully move ahead with your new processes and enjoy the time you can shave off your projects.
Photo courtesy of Ivan Samkov
