Prototyping: An integral part of every UI UX designer’s workflow

Simon McCade

What is a prototype?

In the simplest terms, a prototype in design is a test model for the final user experience. It’s what designers use to put their work to the test by simulating the experience that users will have with the content.

The feedback at this stage is invaluable when it comes to refining designs to work as best they can for the end user.

Why is prototyping important?

The different levels of fidelity of prototypes depends upon the stage we’re at in the design process, but each direction is equally important when it comes to understanding how the content will work.

Without this process of planning, designs would be haphazard, ill-informed and out-of-kilter with what our audiences actually like to engage with online.

We don’t only gain insight into audience behaviours, but we also save time and money in the long-run when it means we’re not wasting development time on a design that isn’t ready.

That’s why it’s crucial to test and learn along the way with a number of design iterations in the form of prototypes. These take one of two basic shapes: low-fidelity and high-fidelity.

What is low-fidelity prototyping?

This comes in the early stages of the design process to conceptualise the final piece, but it’s in its most basic form with no frills.

Prototyping tools like InVision, UXPin and Balsamiq make it quick and easy to visualise ideas for initial feedback before any time is wasted on design.

This is purely focussed on functionality at this stage, so it’s a crucial part of the planning phase as you can see from my example below (which is taken from an app project I’m working on):

Clik Jobs Low Fidelity UI Wireframes

What is high-fidelity prototyping?

As the design progresses, it’s necessary to produce higher-fidelity prototypes to continue to test and learn. Multiple phases of feedback (from both users and clients) really help you refine your designs to make them perfectly tailored to your target audience.

The nature of high-fidelity prototypes is such that they are much closer to the final appearance of the content, so it’s a great way to get aligned with developers to be able to brief them properly.

The following example shows the progression from the above low-fidelity prototype to its high-fidelity form, following multiple rounds of feedback:

Clik Jobs GUI (Graphical User Interface) Designs


The benefits of prototyping are plain to see, so there’s no doubt in my mind that it will continue to grow in popularity with clients. It’s easy to spot the difference between content that has been prototyped and content that hasn’t.

Prototyping is best considered as an iterative process; we design, we test and we iterate. It’s a cycle that applies to every project if you want the best results.

Companies that embrace prototyping will reap the rewards for years instead of having to redesign and rebuild content that doesn’t work for their audiences because it wasn’t tested in the production process.

Get in touch if you have any questions about the prototyping process!

Continue reading