Prototyping tools

- Prototypes are an important way of conveying the design and functionality of projects to clients and potential users. Prototypes are not mock ups. They're functioning examples of pages or sites that could help you iterate and develop your projects by getting valuable feedback on how effective and usable your design is. Since prototyping is so specialized, specific prototyping tools have emerged to help you create them. I want to take a look at some of the prototyping tools out there and how to decide if they're right for your projects.

Picking the right tool first starts with understanding what the focus of your prototype is going to be. Will it show a single feature that you want feedback on or is it a wider representation of the entire site? Will it need to accept user input or are you getting feedback on things like site navigation? In large part the tool that you choose is going to be driven by what you need the prototype to do. I'm going to start with some of the tools that you're probably familiar with.

Powerpoint and Keynote, and here you're seeing a little bit of a Keynote prototype that I built a little while back. Both Powerpoint and Keynote are a powerful presentation tools and you can use them to build prototypes of varying degrees of fidelity. You know, the fact that you can do things like linking slides together using animations and transitions and import multiple asset types, makes them really an ideal choice for a lot of different types of prototypes even though most people might not initially think of them as web prototyping tools.

Adobe's Creative Cloud features several programs like Photoshop, Illustrator, Fireworks, and Dreamwaver that can be used to create prototypes. Newer tools from Adobe like Muse, Edge Animate, and Edge Reflow can also simulate complex web interactions fairly quickly. For some reason people tend to leave Acrobat off of their list of prototyping tools. You know in reality Acrobat is a fantastic tool for prototyping. It features things like clickable links, interactive form elements and the ability to embed rich media like videos directly inside of PDFs.

What's more, since the Acrobat Reader is so widespread distributing prototypes made with Acrobat is really really simple to do. Visio and OmniGraffle are two of the most widely used prototype creation tools on the market. Although primarily a diagramming tool, Visio's main strengths lie in wire framing sites and applications and then creating click through prototypes that simulate application flow. Similar to Visio, OmniGraffle is well suited to creating wire frames, content maps and simulating different types of application flow as well.

Now Visio is Windows only and OmniGraffle is available only for the Mac. Although it does feature several import and export features for Visio files. Now there's also several tools that have been developed specifically for building web prototypes. Tools like Axures Pro and Balsamiq feature multiple tools for wire framing and creating low to high fidelity prototypes. I also recommend checking out justinminds' prototyper and Antetype.

Both have extensive prototyping features that will help you rapidly build and share prototypes. It's becoming more common for designers to build prototypes in HTML and CSS just like this really really simple click through HTML prototype that you're looking at here. There's actually several really nice advantages for using this technique. You're already working for example with the technology that the site's going to ultimately be built in and you're previewing it directly within the browser.

To speed up the development of HTML prototypes, a lot of designers use frame works, like Bootstrap and Zurb's Foundation. Now these frameworks come with built in styles that can control design and layout and they have scripts that can help simulate functionality. Whether you use a frame work to help you build your prototypes or if you build them yourself it's really largely going to be a personal decision and it's usually based on coding standards and how quickly you need to iterate through prototypes. When you're first starting out I recommend staying with what you already know.

Although there are a huge number of tools out there that are dedicated solely to prototyping chances are you already worked with software that could build what you need. Tools and techniques come and go. Focus more on establishing a prototyping workflow that's going to generate the types of prototypes you need and then adopt the tools that are going to help you build them.