Prototyping

What is a Prototype?

Prototypes are an interactive, navigable version of a wireframe. Rather than having only static design elements, prototypes bring the design to life and allow you to start to envision the user journey. Prototyping is a crucial phase of any design project, as it simulates (at a high level) how the final product will work.

Once website or product wireframes have been created and approved by stakeholders, the design team moves on to prototyping.

Benefits of Prototyping

Prototyping has many benefits and it’s recommended that you take advantage of it whenever you approach revisions or additions to your design. Here are a few of the benefits.

  1. Prototyping clearly presents design ideas and can bring to light strong and weak design elements.
  2. Prototyping highlights design elements that may have been accidentally omitted in the wireframing process.
  3. Prototypes can be easily shared with your team and stakeholders, and they provide everyone the opportunity to review, experiment with, and provide feedback on the design.
  4. Prototyping builds confidence in the success of the design. The more detail stakeholders can see and approve throughout the design process, the smoother the path to the end product will be.
  5. Prototyping can save time and money by identifying errors or oversights early in the design process before the website or product heads into development. The later revisions take place, the more time and effort required.
Types of prototyping

There are two common types of prototyping: Low-fidelity prototyping and high-fidelity prototyping (fidelity refers to the level of detail included).

Low-Fidelity Prototyping

Low-fidelity prototypes are simple, quick, and they allow for changes and updates to be easily made. Typically done using pen and paper or with a basic online design tool, they include the bare minimum of functionality and design and allow stakeholders to see the general idea and identify specific likes or dislikes. The drawback to low-fidelity prototyping is that it is far from the actual product, and it can be difficult for some stakeholders to visualize future functionality.

High-Fidelity Prototyping

High-fidelity prototypes are far more detailed and are typically done digitally with an online design tool. These prototypes are very close to the actual finished product and include a high degree of design aesthetics and functionality. Because of the added detail, high-fidelity prototypes require more time and effort to create, and it can be more challenging to make revisions to them.

Relevant Terms

Sketching

UI sketching is the process of drawing out your user interface ideas before diving deeper into the design process. It can be done with pen and paper or with a variety of online tools.

Wireframing

Wireframing is an efficient and low-cost way to visually represent the structure and layout of a product or website before progressing further into design and development.

Mobile App Mockups

A mobile app mockup is an in-between stage between a wireframe and a developed prototype. Mockups present finished design - including colour palette, typography, imagery, layout, button styles, etc.

Let’s start writing your success story.

Book a Call