When I first started in user interface design, I would create and show the client several screens for their website or app, often printed, along with user flows. Once approved, these would be handed off to the developer.

This approach was often futile. Developers had to interpret too many details between the screens presented to them, leading to mediocre results. The screens didn’t always show the final state needed, akin to an animation artist providing only the initial keyframe, leaving the in-betweener to guess the end keyframe without a clear idea.

Over time, I created more screens for each app, but gaps and ambiguities persisted. The biggest issue was that these screens were static, requiring clients and developers to imagine the user paths from the presented visuals.

Hi-Fidelity prototypes became the next logical step. With apps like Figma, Sketch, XD, and Axure, we could create interactive links between screens with clicks, drags, or delays. This allowed us to design intermediate stages often missed, such as error states on forms or password requirements. We could also add micro-interactions, motion, and transitions.

While these tools enabled impressive solutions, ๐—ฎ๐—ฑ๐˜ƒ๐—ฎ๐—ป๐—ฐ๐—ฒ๐—ฑ ๐—ฝ๐—ฟ๐—ผ๐˜๐—ผ๐˜๐˜†๐—ฝ๐—ถ๐—ป๐—ด offered even more. It allows the creation of apps where users can type in text fields and use smartphone hardware like cameras, QR code scanners, phone orientation, voice commands, and haptics.

Prototyping is a vital part of the product design process. User testing of prototypes validates design, encourages feedback, is cost-effective, and allows rapid iteration, preventing costly issues in production. It also secures better buy-in from stakeholders and investors by demonstrating the app’s potential impact and value from the start.

So, why the analogy of โ€œa picture speaks a thousand wordsโ€? People think visually, and a picture can help cement thought processes. Only when they can tangibly use those combined images in a hi-fi or advanced prototype can they truly imagine the app’s visual process and how it works.

Need help visualising your next app? Get in touch.

Leave a Reply

Your email address will not be published. Required fields are marked *