As the popularity of prototyping has risen over the past few years, it's starting to feel as if we've entered the age of the prototype. This rise in popularity can be attributed to the general availability of prototyping tools and the low barrier to entry. To start prototyping, all you really need is a pad of paper and maybe some Post-it notes.
However, the low barrier to entry is preventing the process of prototyping from being honoured. Rather, prototyping is being used as a shortcut to get straight into UI design and development, skipping the necessary steps of ideation and discovery. It's time for a friendly reminder to the design industry that prototyping is indeed a process, and one that will make you a better designer and thinker.
The prototyping process
As a working definition, prototyping is best described as a method of thinking that begins very divergent and progressively gets more convergent with increased levels of interactivity and visual fidelity. Using the information gathered from stakeholders and user research, the first step of the process emerges in the form of rough ideas, generated quickly on paper or a whiteboard.
Once the ideas have been thoroughly vetted, the next step of the process begins to produce the first 'real' vision of the prototype, which defines the overall structure and flow of the design.
Ideation and design
The best ideas don't tend to be the first ones that pop in our heads. Explore ideas away from the computer, working corroboratively with your peers. The results are paper prototypes or sketches that communicate basic ideas on layout, interaction and information design.
It's easy to collect valuable feedback on these early ideas by putting them in front of fellow designers, stakeholders, or, better yet, users, by asking them to perform a couple of key tasks that the design needs to support. Based on the feedback, iterations of the design can be cranked out quickly and re-tested. The goal is to vet a design hypothesis before too much effort is spent on a single design direction.
Building a framework
Once a single direction is chosen, it's possible to develop an interactive prototype in a fraction of the time it would take to develop a solution using code. This allows you to define the design patterns, content types and interaction design frameworks, which will be present throughout the entire prototype.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
During this time, a designer can continue to explore different options. To keep creeping closer to the final design vision, keep the prototype simple so it can be easily tested before getting into the details of the overall solution.
Constructing the house
The final stage of prototyping includes building out all the necessary templates to ensure all the patterns and frameworks you defined up-front hold up through the entire design. The prototype provides useful documentation on behaviours and flows for the development team, which are reviewed with the technical team to ensure everything can truly be built as it was envisioned to secure sign-off. The goal is to build something with enough detail to remove uncertainty about how the project should be developed and used.
Mastering the process
Assuming the designer has mastered the overall process of prototyping, going straight to hard-coded prototyping isn't inherently wrong. The phases of ideation and building the design's framework are things that can be internalised over time as one gets more skilled. That's the path to becoming a craftsman after all.
For those just beginning to explore the art of prototyping, I encourage you to start with the basics with the aim of internalising the overall process. As your expertise grows, you will know when it's possible to spend more or less time in the various steps of the prototyping process.
Brad Nunnally is a UX solution architect at Perficient XD in St. Louis, Missouri, US.
This article originally appeared in net magazine issue 245.
