Prototype 101.

WHAT'S A PROTOYPE?

“A prototype is an early sample, model or release of a product built to test a concept or process or to act as a thing to be replicated or learned from. It is a term used in a variety of contexts, including semantics, design, electronics, and software programming. A prototype is designed to test and trial a new design to enhance precision by system analysts and users. Prototyping serves to provide specifications for a real, working system rather than a theoretical one.” (Source: Wikipedia)

Prototypes are interactive illustrations of the structure and components of a web page.

Prototype of a landing page including text and image blocks.

HOW TO CREATE A WEBSITE-PROTOTYPE?

First and foremost there is no right or wrong. Everybody prototypes differently. Yet there are some considerations you might want to take into account when starting off with your first prototype:

Think about the most important aspects you want to illustrate and make sure to include enough information. Ask yourself: What needs to appear on each page of my prototype? Think about the most important user interface elements: header, footer, sidebar, content.

Once you have that think about additional elements your specific projects will feature: search bars, navigation, images, tabs, interactive elements.

The level of detail is dependent on the project and the purpose of the prototype. Do you need your prototype as a guiding document for your own reference then you probably don’t need to dive into details. If you have a whole team working on a project and you need the prototype as a reference and for communicating with your team (e.g. set up further specifications for designers or developers) you might want to prototype in a higher-fidelity and more formal. Also bare in mind that you might be presenting to your client.

WHY SHOULD I CREATE A WEBSITE-PROTOTYPE?

Unless you are looking at a very minimal and simple project, prototypes help you visualize user paths, elements and page dependences.

1

Quick

Use prototypes to get something off the ground quickly. Time matters.

2

Inexpensive

Prototyping is an inexpensive way of testing a minimum viable product (MVP).

3

Clarify

Have a clear look at how the site will react to various different user roles.

4

Adjust

Easily adjust and refine on the go, allowing the planning process to move along smoothly and efficiently.

5

Specify

Give designers and developers a clear set of element specifications and demo interactions to them.

6

Collaborate

Get your team aboard and continously communicate on the project.

7

Detail

Add content and interactivity and bring your static screens to life.

8

Iterate

Set up feedback loops with your team and client.

9

Validate

Set up interactions and run usability tests to validate your work and iterate early on.

WHEN SHOULD I CREATE A WESBITE-PROTOTYPE?

It’s never too late to start to prototype but usually prototypes should be used at the beginning of every website design or redesign process.

Prototypes help to focus on the most important questions upfront:

  • What is the site supposed to accomplish?
  • What is the site structure going to look like?
  • What navigation elements do we need?
  • What elements should be on which page?
  • Where do certain elements link to?

Source: UX diagram by Hello Group

Prototype Showcases

A lot of really great web projects have been accomplished with the help of HotGloo. See some showcases and experience what you can achieve with HotGloo.