1. Sketch out the likely steps

Drawing quick thumbnails of each page is the obvious first step. What's less obvious is how detailed those sketches should be. We want enough detail to let people "click" interface elements, but not so much that we waste time fretting over detail. It doesn't matter if buttons have round corners, what color the links will be, or if the logo is a certain size. You only need to show enough design elements — text, graphics, form elements and the like — to give people context of the sketch. After all, any of these could turn out to be redundant, incorrect, or in need of tweaking. In this case, brevity is the better part of valor.

For these reasons we recommend sketching with sharpies to keep yourself from adding too much detail to a given screen. 

2. Test your workflow

All follow the same idea: Let clients get the feel of a website or app, looking for problems or better ways to streamline processes. Surprising ideas can emerge from using wireframes. For example, you may find that end users need more persuasion before reaching the call to action, that a product details would benefit from modals, or that multiple orbiters aren't such a great idea after all.

Above: Prototype software like Solidify lets designers create tappable "hot spots" so clients and testers can envision walking through an app. This approach is generally cheaper and faster than coded prototypes, and easier to envision than storyboards.

3. Iterate and improve your work

We solve critical mistakes before investing time the wrong design solution. Using these techniques, you can be more confident you're on the right path when developing visuals and writing code.

We created our own prototyping tool called Solidify, to let people interact with paper sketches. And while it's our favorite tool, others such as Marvel, Pop App and Keynote are available as well — anything that lets testers tap through screens in search of workflow problems.

---