Wireframes and prototypes are a great way to get your client to experience a solution before it is even built. They help to communicate your understanding of the requirements to clients as well as engineers. I have found interactive prototypes to be an essential part of the discovery process, since you can actually build the solution and see if it will work, rather than spending valuable engineering time on a product only to find out that it doesn’t deliver.
So how do you get started?
Answer the important questions
Before starting wireframes, I make sure I have the key questions answered that will inform the workflow and scenarios like, “Who are the people that can interact with this functionality?” Is it all users of the site? Just logged in users? Only users with certain roles? Fleshing out these details will help you understand the scope of the scenarios and identify entry points into the functionality. It will become evident how many versions or states of a page/ functionality you will need.
Draw… with a real pencil and paper
These days, many people head straight to a computer to start writing or working on an idea. Sketching out the idea and workflow on paper (yes, you can use a whiteboard too) the old fashioned way will allow you to make changes and explore different ideas in a cost effective way. Trying out different ideas digitally can actually take much longer than you expect, especially when you are starting from scratch.
Start your prototype… but keep it simple
It is important to keep in mind the goal of the prototype - to communicate specific functionality and page elements. When I start prototypes, I like to use almost no design elements (I’ll only make an exception when elements are already live on the site and will be re-used). This allows the client to focus on functionality and not get distracted by font, button color, etc. This also keeps your prototyping exercise “rapid”. Using a “sketchy” font like Axure Handwriting helps to keep a draft feel. Ensure that the elements you need on the page and worry about style and format later.
Spice it up… but don’t invent the wheel
Now that you have done a first pass on the pages you will need, you can link pages and enhance functionality with dynamic interactions. But remember - you are not the first person to need a dynamic progress bar or rotating slider. The key to keeping your prototyping rapid is reusing widgets and functionality that are already built. If you use Axure, Axureland is a great repository for pre-built widgets that you can reuse. Axure 7 also has new features that allow you to add functionality that used to require widgets to build. For example, I reference in a prior blog post how to easily create a lightbox.
Occasionally you will have to build a widget, but don’t let all that time go to waste. Save your widgets in your personal widget library for reference later on!
The most powerful part of prototyping is that your client can interact with exactly what you are planning to build before you build it. Sharing your prototype with others who are not familiar with the project allows you to perform an inexpensive UX test on the spot.
Transition to high fidelity designs
Finally, once your functionality meets what your client is looking for, you can get into high fidelity wireframe design. Your designers will also thank you when the page elements have already been fleshed out and all they need to do is apply the style guide!