Step 9. Prototype

Published in

Mastering UX

3 min readApr 5, 2017

Master UX in 15 steps.📍 Start

“If a picture is worth a thousand words, then a prototype is worth 10,000. Prototypes go beyond the power of show and tell — they let you experience the design” 📔 Prototyping: A Practitioner’s Guide

In this step, you create testable layouts to see if your idea works. Prototypes help to focus on structure and functionality of the site instead of visual elements.

The goal of prototyping is to test your ideas early in a process, get users feedback, improve the interface and save time and effort on developing useless features.

UX prototyping tutorial: Design process overview (4 mins)
LinkedIn Learning Solutions

This tutorial breaks the design process down into five steps — brainstorming, project planning, prototyping, testing, and refining.

Sketches vs. Wireframes vs. Prototypes

Wireframing for UX: What it is and how to get better at it (4 mins)
UX Mastery

Wireframes: what they are, the different types of wireframes you can create, and some practical advice about how to improve your wireframes.

Sketches & Wireframes

How to wireframe a website (5 mins)
CharliMarieTV

From sketches to wireframes — your goal is to generate as many ideas as possible and get feedback.

UX Sketching: Whiteboard 101 (3 mins)
Mary Shaw

Here’s a short video that will give you a handy collection of common interface elements that you can practice sketching anytime.

Paper Prototypes

UX prototyping tutorial: Paper prototyping techniques (10 mins)
LinkedIn Learning Solutions

This tutorial walks through a sample paper prototyping session, providing tips for setting up and representing interface elements with paper and explaining how to make quick changes and identify and categorize feedback.

Testing

Example Usability Test with a Paper Prototype (7 mins)
BlueDuckLabs

Performing a usability test early in your website planning process can have huge returns — a paper prototype allows you to do this with a minimal time investment.