Rapid Prototyping in Web Design

Posted by: Nick

When I look at the web design processes being used by various freelancers and small- to medium-sized web design agencies, I find that all too often they're grossly oversimplified, static and inefficient.  Between having to collaborate and bend to the will of the client, many designers often wind up bumping up against time or budgetary restrictions due to the volume of criticisms and requests that are made on the way to producing a finalized design. As a designer myself, being able to quell these demands as early as possible helps me reduce the amount of labor-intensive revisions later on and ensures that the final product meets or exceeds a client's expectations.

What is Rapid Prototyping?

Rapid prototyping is the process of drafting multiple rough states or instances of any given system for future development. Being able to do this in a quick, iterative fashion allows for a continuous feedback loop that can lead to better design and a reduction in the number of changes that occur during development.  Furthermore, because of its quick pace, rapid prototyping can free time up for experimentation because it tends to focus on a project's more easily-understood visual elements; allowing designers, team members and even clients to reach a consensus in less time.

Rapid prototyping is NOT about fidelity or permanency. While there are certainly a wide-range of methods for prototyping a web design, rapid prototyping eschews the need for full-on simulations or near-finalized designs. It is a fast, loose process that is, at its heart, a way to get preliminary ideas on the table so that you can easily test, modify, and finalize design elements. An effective prototype is all at once fast, disposable and focused.

Where Do I Start?

Prototyping a site doesn't encompass all of the site elements, just the important ones.  For the sake of keeping it simple; if you need to explain in vivid detail how something works or why it's placed in a certain area, you need to prototype it.

Drop-down menus, a cart's check out process, slide shows, forms, light box functionality, and galleries are all examples of seemingly simple pieces of functionality that can be implemented (and screwed up) in a million different ways. By prototyping them out within a shell, you're able to better explain how that functionality works within the context of the larger piece.

Once a list of needful is established, designers should then take a broad, high-level approach at presenting those ideas and drilling down into greater detail with each subsequent iteration. For websites, this means building out a rough sketch (literally) of the home page and then revising that framework until all of the important elements are sussed out.

In the case of an eComm website, sketching out the placement of promotional elements, featured products, menu items, and calls-to-action is critical to understanding how users will flow through the site before a single piece of software is opened or a single line of HTML is written.  Later iterations of this initial work can then drill down into the site's interior pages to map out the checkout process or the ways in which the product selection process can be extended once a user is past the home page.

The Tools That Make This All Possible

The best and most effective tools to use in a one-on-one collaborative meeting are going to be a pencil and paper. Nothing is more flexible or adaptable at expressing an idea visually. Even if you can't draw, a pencil and paper still allows you to quickly produce a low-fidelity visual approximation of what you want to present. For all intents and purposes, your output during this process should be somewhat muddy, as the idea is to get as much feedback and information as possible until you feel comfortable with closing that loop. But when it comes to digital solutions, there aren't that many options that afford designers that same range of flexibility.

With web designers in particular, many have come to rely on the Adobe suite for all of their drafting and design work.  And while Adobe's software has become the defacto standard in the design industry for a reason, it's counter-intuitive to use offline, professional-grade software for a relatively simple task like rapid prototyping.

The closest middle-ground to the fast-paced pencil-and-paper method and the methodical digital method can be found at uxpin.com. Not only does it have numerous hot-swappable elements (GUI pieces, icons, templates, frames) to make drafting simple and fast, it also supports a wide-array of features that enable collaborative work across multiple users.  Most importantly of all, UXPin can translate paper sketches into fleshed out wireframes; allowing you to convert your offline drafts into online demos.

Final Thoughts

I've heard from a number of designers in the past that the idea of rapid prototyping is an attack on the primacy of the designer; stripping away creative freedom in the name of saving time and money.  But when done right, rapid prototyping can help bridge the gap between the client and the designer, by allowing the designer to inject clarity into the process through quick and simple iteration.

If the end-goal is to produce something that a client likes while minimizing the need for labor intensive re-workings and communication headaches, there's no reason why you shouldn't adopt rapid prototyping into your process.