Prototyping is the process of mapping out a user interface before jumping into development. It is the chance to account for all the actions you are asking users to perform, and to ensure they will be able to accomplish these actions without getting frustrated.
Prototyping usually involves a two-stage process:
1. Usability Wireframes
At the start of the design process, we will discuss the goals of the digital service and who it is meant to serve.
The first stage in prototyping is to create a "wireframe", or a low-resolution layout that focuses exclusively on usability. A wireframe is just "words and rectangles". If colours, fonts, and imagery enter the conversation too early, the design process can get stuck in debates about preference. Wireframes don't involve any branding elements so that we can keep our focus entirely upon the tasks users will perform on your website.
2. Design Comps
Once wireframes are established, the next step is to create high resolution "design comps" with your branding, typography, colours, and imagery worked in.
Typically, the design comp comes together much faster when built upon a wireframe, since most of the wireframe established most of the design thinking.
Usability Testing for Prototypes
Usability testing is the natural companion for prototyping. By spending some time testing the designs with users, we can identify where assumptions were built into the design or where further refinement is needed before jumping into a costly development process. There is no better way to ensure a good experience (and to avoid expensive re-development) than to invite users into the design process.