Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- What is a prototype?
- How prototyping helps user experience
- Defining prototype goals
- Sketching ideas
- Creating paper prototypes
- Building low-fidelity and high-fidelity prototypes
- Creating HTML prototypes
- Testing and evaluating prototypes
- Choosing the right prototyping tool
Skill Level Beginner
The type of resources you'll need when creating prototypes varies dramatically depending upon which type of prototype you're building. For building paper prototypes, you'll need to have the basic materials that we discussed earlier. In addition to those, however, there are a few resources that I want to point you to that can help you build more effective paper prototypes. Uistencils is a great site for finding sketching pads, stencils, and other paper prototyping accessories. Sneak peak it, in addition to being a great name, has a great collection of sketch pads for browsers, ipads, mobile devices, and wire frames.
The best part is they're all free to download and print out. Appsketchbook.com has a fantastic collection of UX sketchbooks that you can use as a starting point for building paper prototypes. Now, while not technically a paper prototyping tool, I am really crazy about this cohdoo phone doo, which is fun to say and really, really interesting. Now, these are a collection of iPhone sized white board templates that have magnetic backing, and give you the ability to sketch out app ideas in a quick And fun way.
Drawing the multiple UI elements that you'll need to create for your paper prototypes can be tedious. So much so, that I really recommend creating templates of UI elements in programs like Illustrator. And then printing them out to give you a starting point. Now if you don't feel like doing that yourself, there are a bunch of UI element templates out there that you can download and I want to share a few of my favorites. Chris Tanner has this really nice set of iPad UI elements that you can download and open in Illustrator. If they look familiar, it's because these are the ones that I used when I was demonstrating paper prototyping techniques earlier.
Pixeden has this neutral webpage wireframe stencil that provides you with dozens of common UI elements and icons. Webalys has a nice collection of UI elements that are saved as illustrator symbols, allowing you to build a nice collection of custom UI symbols within your illustrator files. Dessky has a web design wireframing kit that contains common UI elements as well as custom elements like maps and social media icons. The download is free but you will need to register.
I really like this ultimate wireframe UI kit from MediaLoot. The elements are all neutral colors but they're refined enough to give your paper prototypes a more polished look. Georgio Ventiri has created an illustrator template for designing iPhone apps that is perfect for paper prototypes of iPhone screens. You can visit his blog for a free download. That is, of course, not even close to being all of the templates, stencils and sketchbooks that are available to you. A quick search online will bring up dozens of resources that you can purchase or download and use.
Just keep in mind for paper prototyping, the goal is speed and ease of use, so. Make sure whatever resources you choose actually helps you with that and doesn't make the process needlessly complicated.