Viewers: in countries Watching now:
Prototyping allows designers to quickly and inexpensively explore multiple iterations of designs, test their performance, and craft even better user experiences for websites and applications. Explore what prototypes are, when they are appropriate, and the different strategies for creating prototypes in this introductory course with lynda.com senior author James Williamson. Learn about sketches, wireframes, mockups, and other types of prototypes; the tools that can help you build them; and how to test and refine your designs. This overview will help you decide which prototyping workflow works best for you and your team.
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.
There are currently no FAQs about Foundations of UX: Prototyping.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.