Three types of UX Prototypes.

A prototype can be defined broadly, so I want to define the term prototype for the scope of this course before we get started. A prototype is an early working model of a design used to gain feedback and rapidly experiment with ideas. In UX, prototypes are typically created through a mix of

  • sketches,
  • wireframes, or
  • mockups

depending on your project timeline, where you are in the design process, and how robust the prototype needs to be. Let’s quickly go through the differences between a sketch, a wireframe, and a mockup.

why prototypes?

-Limit the expense of development

-Test out design concepts

-refine usability of the product

-communication tool for the project team.

A sketch is a drawing, and often times sketches of the user interface are where designs start to take shape. Wireframes are the representation of the layout and mostly focused on the layout of the content and where everything will reside on the user interface. Often, wireframes are in grayscale or black and white, and they can be really useful when you are at an early stage of your design process and focused on the basics of layout. A mockup is a fully rendered user interface with color details, typography, hierarchy, and general layout all defined.


A mockup looks like the final product. Sketches, wireframes, and mockups are the representation of the design but do not represent the interaction design. You need to add interactivity to these static representations to understand how the design will function when someone takes an action on the user interface. I’m defining interactivity as any behavior that occurs on the user interface that changes the state of the design or the flow. Simple examples of this include selecting a drop down option that might change the view on the page or by clicking on an icon to open a contextual menu.

User interfaces

How user interfaces interact are a key aspect of the design. Interactivity is not represented in a single static sketch, wireframe, or a mockup. As designers, we need to prototype to make sure that the design flows and user interface make sense to our users to validate our ideas and concepts early and to test our various dates of the design to deliver a cohesive experience. One of the key ideas behind prototyping is to validate your designs early and often and without a lot of overhead.

There are a lot of different ways to approach a design problem, and prototyping ideas and concepts help you get through the bad ideas quickly and also bring new ideas to the forefront. This brings me to my next point. Your prototype does not have to be made with code. You can prototype with anything from sketches to using fully rendered mockups, and we will look at some tools in this course that will help you accomplish this. I want to underscore that design prototypes are not made of real code. While some people might feel more comfortable using HTML interactive prototypes, it isn’t a recommended approach.

The goal of prototyping is to get through multiple ideas quickly, and HTML based prototypes can be time-consuming to update. So for the scope of this course, we won’t be focused on code-based prototypes, but we will look at other tools and techniques to create design prototypes.

Share This: