Skip to content
Home » Blog » Step 04 of UX Design Process: Prototyping

Step 04 of UX Design Process: Prototyping

Types of prototypes used in UX Design

We discussed the first three steps: empathizedefine, and ideate of the UX Design Process with examples, in the article ‘Getting started with the UX Design ProcessThis article will walk you through the 4th stage of the UX Design Process, prototyping.

A prototype is an inexpensive version of a design that is built at the initial stage of product development demonstrating the products’ functionality. It facilitates the product team to improve and reduce the faultiness of the design by testing it out with users and identifying errors at the early stage of the product development.

There are two main types of Prototypes namely low fidelity prototypes and high fidelity prototypes.

Low Fidelity Prototypes

A low-fidelity wireframe can range from paper sketches of individual screens to basic interactive screens drawn using digital wireframing tools. Below is an illustration of how a sketch can be drawn simply by using paper and pens. We draw simple lines or elements to depict components for each screen or a particular state of the app.

  • Save
Paper wireframe: Photo by Kelly Sikkema on Unsplash

Digital wireframes on the other hand show basic interactivity within the screens and components but won’t provide an idea of how the final product might look like in terms of visual design.

  • Save

High Fidelity Prototypes

High-fidelity prototypes provide a more informational and interactive mockup design that can be tested with users. These prototypes are aesthetically appealing since it allows the users to click through interactive elements and see animations in response.

  • Save

The below image shows how screens can be connected and animations can be added to view as a clickable prototype.

  • Save

When presenting to users, interactive high-fidelity prototypes yield better results as it gives a better understanding of the overall product design and interactivity.

Digital prototyping tools

Below are some of the popular prototyping tools used by designers to make their design ideas come to life.

  • Figma
  • Adobe XD
  • InVision Studio
  • Webflow
  • Sketch

The type and fidelity of the prototype depend on the UX Designer’s preferences. Low-fidelity prototypes can be designed in the early stage of the product development to collaborate with team members whereas high-fidelity prototypes can be used to improve the usability of the product with end-users.

Stay tuned to get an insight into the final stage of the UX Design Process, user testing which will be discussed in another article! 😄✨

2 thoughts on “Step 04 of UX Design Process: Prototyping”

  1. Pingback: Getting started with the UX Design Process - Nisandi Jayasuriya

  2. Very nice post. I just stumbled upon your blog and wanted to say that I’ve really enjoyed browsing your blog posts. In any case I’ll be subscribing to your feed and I hope you write again soon!

Leave a Reply

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