I use a handful of wireframing and prototyping tools and choose specific tools depending on the job. There are dozens of UX tools available and countless blog posts comparing them.
Plenty of people arrive here by Googling things like ‘wireframing’ and ‘prototyping tools’ so I thought it’d be useful to talk about the tools I use and why I use them.
- Paper. I start on paper every time. I like the design studio method and time-box paper sketching as tightly as I can – often to a few minutes. Then it’s a question of how far. After sketching and iterating sometimes I test with users on paper; rough sketches can be the highest fidelity required for validating interfaces. Solidify or UX Pin can bring paper sketches to life and stitch them together into a user journey to help with testing.
- Keynote. If there’s more detail required beyond paper I’m straight into Keynote with the Keynote Kung-Fu wireframe toolkit. Keynote handles web and mobile prototyping well; it’s fast, disposable and exports nicely. Most of the time Keynote is sufficient; the rest of the tools stay on the shelf while Keynote gracefully iterates and knocks out my prototypes. I test face to face whenever I can and for remote testing I use Verify or Chalkmark. I understand why designers also use Keynote for web and app interface design. It rocks.
- Fireworks. I find interaction design with Fireworks works best when the prototype evolves into the visual design. Files can be handed over and artwork integrated with wireframes, but this also the issue with Fireworks – it’s a fully-featured digital design tool so it’s easy to focus on the details too early. It can work ok, but I’m using it far less than I used to and generally favour Keynote.
- Markup. Mocking up with markup is the best approach and always will be. Real code is unbeatable; it feels right when customers are testing it, it’s natural for testing responsive design, it’s native and it solves the big issues early. It’s the best format for eye-tracking and is re-usable (to an extent) in the final solution. If the UX requirements demand markup (big, detailed projects) I’ll do the basic thinking on paper and jump into code as early as possible. Foundation, Bootstrap and other frameworks are good places to start and sometimes building the prototype on a CMS makes sense. Divshot looks like a good way to generate responsive markup without writing it, particularly for me – my coding skills are limited and I’m generally directing other people to produce the output, so a collaborative drag-and-drop environment make sense.
People love tools like Axure, Balsamiq, Mockflow and others. I’ve tried these and plenty more and have settled on my regular workflow of paper (always), Keynote (often), Fireworks (rarely) and markup (whenever I can).
