Getting Started with UX Prototyping
A handy list of design tools, resources, & articles for new UX designers
New to UX design processes and principles? Start here. Otherwise, read on.
Prototyping Tools
My prototyping process is simple, straightforward, and definitely not original: explore design possibilities on paper, refine the promising ones with static digital prototypes, and, when necessary, augment them with interactive digital prototypes.
1. Paper prototyping
Paper is my tool of choice for the early stages of prototyping; it’s inexpensive, straightforward, and allows for quick iteration. Design software is becoming more efficient and powerful every year, but I am still a firm believer in “pencil first, pixel later,” as described by designer Ryan Nance:
Because most of my design work consists of established UI patterns (and since I’m not much of an artist), hand-drawing detailed and beautiful prototypes would be a waste of time. Instead, I use paper prototyping to experiment with workflows and interactions; visual polish takes a back seat.
2. Static digital prototyping
Only after I’ve worked through design workflows on paper do I take the time to create high fidelity mockups. I’ve used Photoshop and Illustrator for this in the past, but switched to Sketch four years ago, and haven’t looked back. It is by far the best static UX design tool I’ve tried, and certainly the most popular.
All of Sketch’s features, from basic to advanced, are well documented and explained on its website, which includes video tutorials, courses, and design articles. Sketch publishes a summary of new features with every major release on its own Medium page, and the Sketch Medium community is a great place to learn how other designers are using Sketch for their projects.
One of the best parts about Sketch is that its feature set is constantly growing. Any user can create a Sketch plugin to accelerate their design process. Sketch users often make these plugins available for free; the easiest way to search for and install them is through the Sketch Plugin Manager. My favorite plugins include: Sketch Runner, Sketch Palettes, Sketch Find and Replace, Sort Me, Content Generator, Sketch Measure, Stark, and Marketch. Craft by Invision, the most powerful Sketch plugin I’ve come across, combines powerful collaboration tools to keep symbols, colors, and typography consistent across projects.
Skechappsources.com offers a wealth of Sketch resources, including UI kits, icons, wireframes, and device mockups. Most are free, and can be easily downloaded and modified for both personal and professional projects.
3. Interactive digital prototyping
Interactive digital prototypes (i.e. prototypes that look and behave like a real product) are even more time consuming to create than static digital prototypes, so I usually only create them when I need to experiment with new interactions and motion. However, just because this process is time-consuming does not mean it should be ignored; motion is an integral part of UX:
Interactive digital prototypes can also be used to create high-polish UX videos. A 30 second video can often explain a complicated workflow better and faster than dozens of annotated static images.
There are scores of interactive digital prototyping tools available; I’ve tried prototyping in Axure, Atomic, Experience Design, Figma, Flinto, Form, Framer, Invision, Keynote, Marvel, Origami, Principle & Proto.io. There’s really no undisputed leader here, and it can be hard to sort through them all. Cooper (a design and business strategy consultancy) has published a prototyping tools comparison guide that’s worth a look:
Despite all of the prototyping tools available, I regularly use only three. For simple interaction experiments or demonstrations, I use Keynote or Invision. If I’m focusing heavily on the aesthetics & presentability of a project, I use Principle.
Keynote: Apple’s PowerPoint competitor was not intended to be used as a prototyping tool, but it actually works quite well for this purpose. In the video below, designer Andrew Haskin demonstrates that Google’s Material Design highlight reel can be completely recreated using only Keynote.
Creating this 51 second video with Keynote would be an absurdly painstaking process. I’d never recommend using Keynote for a project like this, but it does demonstrate how powerful of an animation tool Keynote can be. For a more practical lesson in how to use Keynote as a basic prototyping tool, see below:
Invision: When collaborating with other designers on basic interactive prototypes, I use Invision. It integrates very well with Sketch, and makes it easy to quickly share prototypes and get feedback. Invision currently has limited animation capabilities, but its recent acquisition of Silver Flows is likely to change that soon. Invision is pretty intuitive, but learning some of its more powerful features takes practice; fortunately, there are great educational resources on Invision’s website and YouTube channel.
Principle: For fully interactive prototypes with a high degree of polish, I use Principle. It’s an incredibly powerful tool that’s simple to use and integrates well with Sketch. Principle’s website contains excellent video tutorials that explain the basics; for the nitty gritty details and advanced features, I recommend reading Principle’s software documentation or this unofficial guide.
Design Resources
There are some great sites that curate lists of design resources; here are my favorites:
Sans Francisco: a collection of tools to help designers craft delightful experiences
Makerbook: a hand-picked directory of the best free resources for creatives
The Stocks: a collection of royalty-free stock photos, videos, mockups, icons, and fonts in one place
From these lists, and from my own searching, I’ve pulled out the resources that I’ve found to be the most helpful, shown below:
Typography
Google Fonts: a source of hundreds of free typefaces for download or use in web projects
Typewolf: a fantastic blog about what’s trending in typography on the web
Typography.com: the site of Hoefler & Co, a type foundry that produces some of the most popular typefaces in use today
Icons
The Noun Project, FlatIcon, and Material Icons: vector icon libraries
Font Awesome: a free font consisting of 675 vector icons that can be customized with CSS
Tools
Cheatsheet: an essential for every Mac user; once installed, simply hold the ⌘-key for a few seconds in any application to get a list of its keyboard shortcuts
Paste: a Mac app that aggregates and categorizes everything you’ve ever copied — text, links, files, images, and more — making ⌘-C + ⌘-V much more powerful and useful
WhatFont: a browser extension that makes it easy to identify fonts on any website (to identify fonts I find in print, I use WhatTheFont)
Thanks for reading; I hope it was helpful. If you have a favorite design tool, resource, or article that’s not included here, leave a response. If you’d like to see what else I’m up to, get in touch or check out my website.
