What is a prototype

What is a prototype

A simple definition

A fake and hacky interactive version of the product you are building.
  • Product = Something as tiny as a button to as big as a complete app or website.
  • Fake and hacky = Built with quick and smart ways to make it look and feel, like it's real. (e.g. buttons are static images instead of real native buttons. Data in the UI look real but are hardcoded instead of fetched from a real backend API)
  • Interactive = it's not static, and you can use it and interact with it (e.g. buttons can be clicked, forms can be submitted etc.)

Examples

Apps and websites

image

While designing the screens of an app or website, we connect these screens quickly and create various interactions in order to test and understand if the overall flow feels right and is easy to use.

Augmented Reality - How Apple prototypes

image

Designing for AR is complex and hard. Discovering usability problems during development can cost a lot of time and money. That's why prototyping in smart dirty ways, and testing ideas early on is so important.

Animated films - How Pixar prototypes

image

In Pixar when they create new films they start by sketching the characters and landscapes. They use simple software to create short videos and see how everything fits together and how their story feels like. They don't start by spending their time on designing the perfect 3D models, or finding the perfect colours. These come later through iteration and testing. For them watching the movie is the actual user test. They can observe if the message is clear, if the story is boring and so on.

Hardware - Apple's iPhone early prototypes

Designing hardware is tough and usually starts with paper sketches and fake prototypes. This way people can use and test their ideas, get a sense of how they feel like and decide if they want to evolve them further or search for new ones.