Prototypes are simulations of the website navigation and features, commonly using clickable wireframes or layouts. It’s a quick and dirty way to test and validate a product before fully developing it.

Prototypes are a close replica of what the end result of a product will look like, usually without code. They incorporate most of the final UI design and interaction that the finished product will have.

They’re a powerful way of designing any digital product because they help us experiment and test out assumptions without them erupting into costly mistakes later on down the line. Prototypes are also an ideal way to communicate functionality, interaction and UI design to all those involved. This kind of communication leads to what’s called the “iterative cycle”.


Types of prototypes

Paper prototypes

Paper prototyping is a fast and easy way of illustrating a concept of your product by using nothing more than a pen and paper. It’s also the least costly method of prototyping. That’s if you include the cost of paper, the pen, and well, a coffee for your users if they need an incentive!

With paper prototyping, you can sketch out the main screen layout, along with basic elements and shapes. You can create several sheets of paper that represent the different screens.

Low-fidelity prototypes

A low-fidelity prototype generally consists of a bare-bones version of the final product. It typically contains the following:

  • Screen layouts
  • Simple element outlines
  • Sizing, spacing and positioning of elements
  • Basic clickability and navigation between screens

High fidelity prototypes

With a high fidelity prototype, you should be close to having designed all but the finished product. High fidelity prototypes will contain all of the layouts, spacing, element positioning and navigation of the lo-fi prototype, but with a lot of extra details.

You can usually identify hi-fi prototypes from the following aspects:

  • Interaction
  • Advanced UI design
  • Real content
  • Data visualization

Stakeholder validation and communication

High fidelity prototypes will be used to show clients and other stakeholders the functionality and visuals of the product so that they can validate the design before you hand it off to the developers. Getting stakeholder feedback on a design before handing it off to the developers is crucial, as any reworks or design errors will be expensive and time-consuming to fix once the coding starts.

Read this full guide to prototyping at:


Test Your Prototypes

Once you’ve built your prototypes based on the ideas you and your team generated, it’s time to gather feedback from the people on whom you are testing these. Optimising how you gather feedback — and, therefore, learn from your prototypes and users — is essential to help you save time and resources in the Prototype and Test stages of the Design Thinking process – and in any other human-centred design process. Being quick and efficient allows you to move rapidly from creating a prototype, to putting it out to test it, to gathering feedback, and finally to creating a new and improved iteration of your ideas. To maximise learning from your tests, we will share six best practice tips on how to gather feedback, as well as three methods (with downloadable templates!) on how you can organise your feedback.

Gathering feedback is a crucial element in the Design Thinking process – and in all other human-centred design processes. In order to maximise the benefits of gathering feedback, however, you need to be purposeful about it.

Here are some pointers to take note of when thinking about gathering feedback from your users –


Share this on: