I had a lot of fun preparing and presenting my talk about prototypes for IXDA Columbus. I covered basic thinking about prototyping, design process, workflow, tools, and personal experiences. Below is a narrated screencast version of the presentation, and a list of all the tools and resources I referenced.
These (mostly desktop) tools manage the heavy lifting of wire framing and design, but are limited in collaboration or prototyping features.
This desktop tool for wire framing has been around for a long time and is industry standard. It’s powerful and versatile, and fairly easy to get started with. Prototyping features are very limited to basic clickable PDFs or HTML pages, and no collaboration features are available.
This Microsoft Office of wire framing is very powerful and feature-rich, but also expensive and has a learning curve. Axure prototypes are typically lower fidelity visually, but allow for more complex logic, so it’s best for larger teams that regularly do very detailed user-testing.
Desktop and web app for wireframing and lightweight collaboration and prototyping
Balsamiq is easy to get started with, and comes with lots of UI libraries. Personally, I’m not a big fan of the sketch-like visual style, but others might find this perfect for their purposes.
Web app for wireframing and lightweight collaboration and prototyping
UXPin is the most full-features for the web-based wire framing tools with support for importing Photoshop files, creating other types of documents (e.g. personas), and responsive breakpoints.
Web app for wireframing and lightweight collaboration and prototyping
Moqups throws you directly into the wire framing tool when you visit the site, so it’s great for quickly getting in and getting things done.
These desktop tools is where visual design happens. They are powerful for production, but limited in collaboration or prototyping features, so they need to be paired with other tools.
The workhorse of interaction design for many years. Takes time to learn, but is incredibly powerful. With Photoshop Creative Cloud, Generator and various integrations, collaboration around Photoshop has become much easier to collaborate around recently.
Design tool that has gathered a lot of attention recently. It’s cheaper and more lightweight than Photoshop, and a nice community has flourished around it. While it’s easier to pick up, it's also less powerful than Photoshop.
More appropriate for graphic design, Illustrator is still frequently used for screen-based design. Just like Photoshop, it’s powerful, has a learning curve, but can lead to amazing results. Some prototyping tools can read the Illustrator file types for a smooth workflow.
A combination of lightweight prototyping, collaboration and project management, these tools complement the production tools and allow the whole team and clients to quickly iterate and discuss the project throughout the process.
Web app for lightweight prototyping and heavy collaboration
Invision has gained a lot of momentum recently due to it’s extensive collaboration features and integrations. Prototyping is limited to static screens with clickable hotspots and some basic gestures and transitions. Has the most robust collaboration tools, which is great for medium to large teams.
Web app for mobile and web prototyping
iOS app for quickly creating mobile prototypes. Great choice if you don’t all the collaboration tools Invision offers (or use something else already for collaboration, like Basecamp).
Mac software for mobile prototyping
Has it’s own app to upload screens and create prototypes.
Web app for iOS, Android and Windows prototyping
Mobile only, detailed control over animations, gestures and user interactions. High fidelity and high performance, collaboration, feedback, easy sharing. Prototypes can be run in the Proto app for best performance.
You (typically) use these tools to create high-fidelity interactive or animated prototypes of your interface based on the visuals you created with wireframing and design tools.
Open-source Javascript library and Mac software
An open-source Javascript library and desktop tool for prototyping. Perfect for anybody with Javascript experience to mock up mobile interfaces, since gestures, spring physics and many other aspects of mobile interfaces are included out of the box.
Mac and PC software
A motion graphics tool that works best to mock up interface concepts and super high-fidelity interaction ideas and animations.
Mac software for native iOS prototypes
Recently acquired by Google, this tools stands out because it allows prototypes to use native device features like camera preview and sensors (gyroscope, location, etc). The interface is similar to Quartz.
Web app for native iOS and Android apps
Prototyping for mobile with full native performance, and some lightweight collaboration features. Photoshop/Sketch import is coming soon, as well as workflow tools for going from prototype to production.
Mac software for native iOS prototypes
Quartz is originally an animation tool by Apple. Facebook Origami is an interface animation library for Quartz. These tools have a learning curve, and are best for companies that focus on mobile and want to create very high-fidelity, native prototypes with very custom interactions.
Web app for iOS and Android prototyping
A lightweight prototyping tool for mobile apps. Great for smaller teams and projects.
Mac & Windows Software
With Composite, you define your screens and hotspots directly in Photoshop. Composite analyses your PSD as you work on it and creates an interactive prototype.
Web app
Ideal for lightweight, collaborative prototyping, Precursor is a simple tool for drawing wire-frame style interfaces and simple interactions
A presentation tool (like PowerPoint) that Apple internally uses for early prototyping.