We're lucky that we have so many options for creating digital prototypes, but the constantly changing landscape can get confusing fast! This was last updated in 2015, so some of the information may be out of date.
I've marked my personal favorites with ❤ and the most beginner-friendly options with ☺.
I've marked my personal favorites with ❤ and the most beginner-friendly options with ☺.
Create Diagrams & WireframesSketch (USD $99, 50% off edu discount) ❤
A vector graphics program like Adobe Illustrator, but cheaper and much easier to learn. It's the new kid on the block, but designers all over are loving it. Worth the investment! Keynote / PowerPoint ☺ Sometimes the best tool is the one you already know how to use! Both these presentation tools let you create text, boxes, arrows, etc. Balsamiq (online version USD $12 per month, download $89) ❤ ☺ This lightweight program has one job and does it well: drag-and-drop elements to create wireframes. It's by far the quickest and easiest way to create wireframes. Adobe Illustrator (23,79 € per month) The big daddy of vector graphics programs. Incredibly versatile, but packed with more options than you need, and steep learning curve. Not worth it unless you're going to do serious UI design. InDesign Only use InDesign for wireframing if you already are comfortable with it. It's not really designed for digital design, and it's complex to learn. |
Prototype InteractionsEmily Schwartzman, at Cooper in San Francisco, has already created a very useful chart explaining the pros and cons of different prototyping tools. It is more up-to-date than the information below.
Invision (free / USD $15 / $25 per month) ❤ Marvel (free / USD $12 per month) ❤ These two apps are almost identical – pick whichever you like best. Upload images and link them together, then package it as a realistic "app" and sync it to a mobile device for testing. Both have great integration with Dropbox, Photoshop, and Sketch. Flinto (USD $20 per month) Another "upload images and link them together" service. No free option, unfortunately. POP (free / USD $10 / $25 per month) ☺ Pop's main selling point is its mobile app, which makes it very fast and easy to take photos of drawings and link them together. Proto.io (USD $24 per month, 50% edu discount) A one-stop shop: drag-and-drop elements to create wireframes. Has a lot of logic and sophisticated interactions. Occasionally buggy when the app gets complicated. UXPin (USD $15 and up per month) Drag-and-drop elements to create wireframes, then link them together. Not as sophisticated as Proto.io, but faster to learn. |
Just Need a Website?
If your idea is a simple informational website or blog, you don't need any of the tools listed above. You can have a live professional-looking website up and running in less than an hour.
Weebly (free / $4 USD per month and up) ❤ ☺
Great themes including tablet/mobile, easy to edit, and a solid free option. I think the advertisement they place on free sites is less distracting than on Wix.
Wix (free / $4.50 USD per month and up) ❤ ☺
Themes are a little prettier than Weebly, but you can't change themes after you build a site. On the plus side, Wix lets you be more flexible with where you place design elements.
Squarespace ($8 USD per month and up) ☺
Also great themes, easy to edit, nice on mobile, etc., but no free option.
Weebly (free / $4 USD per month and up) ❤ ☺
Great themes including tablet/mobile, easy to edit, and a solid free option. I think the advertisement they place on free sites is less distracting than on Wix.
Wix (free / $4.50 USD per month and up) ❤ ☺
Themes are a little prettier than Weebly, but you can't change themes after you build a site. On the plus side, Wix lets you be more flexible with where you place design elements.
Squarespace ($8 USD per month and up) ☺
Also great themes, easy to edit, nice on mobile, etc., but no free option.
Get Remote User Feedback
These services source users and send them to your site. You can use these services with click-through prototypes.
Five Second Test (free if you take tests, costs money if you don't want to take tests yourself) ❤ ☺
Show a screenshot to a user for 5 seconds, then give them a question to answer.
Click Test (free if you take tests, costs money if you don't want to take tests yourself) ❤ ☺
Show a screenshot to a user and ask them where they'd click to do a certain task. You get a heat map of their clicks.
Peek (free)
Get a 5-minute video of a user navigating your prototype.
TryMyUI ($35 USD per test)
Get video and voiceover of a user from a target demographic using your prototype and answering questions about it. Not as good as testing in person, but it's the next best thing.
Usertesting.com ($45 USD per test)
Similar to TryMyUI, but offers more advanced annotation features in the videos you get.
These services only work with a public, live app or website. They don't include user recruiting. They only give you data on the people already visiting your site.
Optimizely (free and up) ❤
The most robust testing and analytics tool available. Not suitable for interactive wireframes. Don't use this until you have a working prototype up and running. Requires quite a bit of setup, and doesn't include user recruiting,
Crazyegg (free trial, then $9 USD per month)
Only works with live, public websites. Gives you a heat map and other visualizations of how people use your website.
Five Second Test (free if you take tests, costs money if you don't want to take tests yourself) ❤ ☺
Show a screenshot to a user for 5 seconds, then give them a question to answer.
Click Test (free if you take tests, costs money if you don't want to take tests yourself) ❤ ☺
Show a screenshot to a user and ask them where they'd click to do a certain task. You get a heat map of their clicks.
Peek (free)
Get a 5-minute video of a user navigating your prototype.
TryMyUI ($35 USD per test)
Get video and voiceover of a user from a target demographic using your prototype and answering questions about it. Not as good as testing in person, but it's the next best thing.
Usertesting.com ($45 USD per test)
Similar to TryMyUI, but offers more advanced annotation features in the videos you get.
These services only work with a public, live app or website. They don't include user recruiting. They only give you data on the people already visiting your site.
Optimizely (free and up) ❤
The most robust testing and analytics tool available. Not suitable for interactive wireframes. Don't use this until you have a working prototype up and running. Requires quite a bit of setup, and doesn't include user recruiting,
Crazyegg (free trial, then $9 USD per month)
Only works with live, public websites. Gives you a heat map and other visualizations of how people use your website.