<p>Published on <a href="http://ift.tt/2prClhx">| Prototyping: From UX to Front End &mdash; Medium</a> Tyler Beauchamp <img alt="" src="http://ift.tt/2q8jZRY"></p>
<h4>A handy list of design tools, resources, &amp; articles for new UX designers</h4>
<p>New to UX design processes and principles? Start <a href="http://ift.tt/1Q097sx">here</a>. Otherwise, read on.</p>
<h3>Prototyping Tools</h3>
<p>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.</p>
<h4>1. Paper prototyping</h4>
<p>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:</p>
<p><a href="http://ift.tt/2q872Yj">Designing By Hand in the Digital Age</a></p>
<p>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.</p>
<h4>2. Static digital prototyping</h4>
<p>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 <a href="https://sketchapp.com">Sketch</a> four years ago, and haven’t looked back. It is by far the best static UX design tool I’ve tried, and certainly the <a href="http://ift.tt/1LZoOQa">most popular</a>.</p>
<p>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 <a href="http://ift.tt/2lAvKzl">own Medium page</a>, and the <a href="http://ift.tt/1OWmBEs">Sketch Medium community</a> is a great place to learn how other designers are using Sketch for their projects.</p>
<p>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 <a href="http://ift.tt/1AmxNWk">Sketch Toolbox</a> plugin manager. My favorite plugins include: <a href="http://sketchrunner.com">Sketch Runner</a>, <a href="http://ift.tt/1MM00hy">Sketch Palettes</a>, <a href="http://ift.tt/1j7ssxT">Sketch Find and Replace</a>, <a href="http://ift.tt/1OcNdUp">Sort Me</a>, <a href="http://ift.tt/1lLmkuT">Content Generator</a>, <a href="http://ift.tt/1mkIC2K">Sketch Measure</a>, <a href="http://ift.tt/2pikrKK">Stark</a>, and <a href="http://ift.tt/1IX75ZN">Marketch</a>. <a href="http://ift.tt/1pZWfMs">Craft by Invision</a>, the most powerful Sketch plugin I’ve come across, combines powerful collaboration tools to keep symbols, colors, and typography consistent across projects.</p>
<p><a href="http://ift.tt/2g4Qb30">Skechappsources.com</a> 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.</p>
<h4>3. Interactive digital prototyping</h4>
<p>Interactive digital prototypes (i.e. prototypes that look <em>and</em> 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:</p>
<p><a href="http://ift.tt/2oihrMc">Creating Usability with Motion: The UX in Motion Manifesto</a></p>
<p>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.</p>
<p>There are scores of interactive digital prototyping tools available; I’ve tried prototyping in <a href="https://www.axure.com">Axure</a>, <a href="https://atomic.io">Atomic</a>, <a href="http://ift.tt/2q8iDGO">Experience Design</a>, <a href="https://www.figma.com">Figma</a>, <a href="https://www.flinto.com">Flinto</a>, <a href="http://ift.tt/1rbwqBP">Form</a>, <a href="https://framer.com">Framer</a>, <a href="http://ift.tt/Milx48">Invision</a>, <a href="http://ift.tt/2cm1JwP">Keynote</a>, <a href="https://marvelapp.com">Marvel</a>, <a href="http://origami.design">Origami</a>, <a href="http://ift.tt/1GuheZO">Principle</a> &amp; <a href="https://proto.io">Proto.io</a>. 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:</p>
<p><a href="http://ift.tt/2cs6F1i">Designer&#8217;s Toolkit: Prototyping Tools</a></p>
<p>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 &amp; presentability of a project, I use Principle.</p>
<p><a href="http://ift.tt/1PI63RV"><strong>Keynote</strong></a><strong>: </strong>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.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F100377108&amp;url=https%3A%2F%2Fvimeo.com%2F100377108&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F483049838_960.jpg&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=vimeo" width="1080" height="1216" frameborder="0"><a href="http://ift.tt/2r72oqR">http://ift.tt/2r72oqR</a></iframe></p>
<p>Creating this 51 second video with Keynote would be an absurdly <a href="http://ift.tt/2q84CZB">painstaking process</a>. 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 <em>basic </em>prototyping tool, see below:</p>
<p><a href="http://ift.tt/1EwTTEj">Animating your UI designs in Keynote in 7 simple steps &#8211; InVision Blog</a></p>
<p><a href="http://ift.tt/Milx48"><strong>Invision</strong></a><strong>:</strong> 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 <a href="http://silverflows.com">Silver Flows</a> 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 <a href="https://www.youtube.com/watch?v=0qisGSwZym4">YouTube channel</a>.</p>
<p><a href="http://ift.tt/1GuheZO"><strong>Principle</strong></a><strong>:</strong> 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 <a href="http://ift.tt/1hwA8ZS">video tutorials</a> that explain the basics; for the nitty gritty details and advanced features, I recommend reading Principle’s <a href="http://ift.tt/1gvJJic">software documentation</a> or <a href="http://ift.tt/2q81hJY">this unofficial guide</a>.</p>
<h3>Design Resources</h3>
<p>There are some great sites that curate lists of design resources; here are my favorites:</p>
<p><a href="http://ift.tt/2a07tYL">Sans Francisco</a>:<strong> </strong>a collection of tools to help designers craft delightful experiences</p>
<p><a href="http://makerbook.net">Makerbook</a>: a hand-picked directory of the best free resources for creatives</p>
<p><a href="http://thestocks.im">The Stocks</a>: a collection of royalty-free stock photos, videos, mockups, icons, and fonts in one place</p>
<p>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:</p>
<h4>Typography</h4>
<p><a href="http://ift.tt/1XUNYIu">Google Fonts</a>: a source of hundreds of free typefaces for download or use in web projects</p>
<p><a href="http://ift.tt/1EjAQDW">Typewolf</a>: a fantastic blog about what’s trending in typography on the web</p>
<p><a href="http://ift.tt/2l6ISfx">Typography.com</a>: the site of Hoefler &amp; Co, a type foundry that produces some of the most popular typefaces in use today</p>
<h4>Icons</h4>
<p><a href="http://ift.tt/1Cby93x">The Noun Project</a>, <a href="http://www.flaticon.com">FlatIcon</a>, and <a href="http://ift.tt/2ebLqRZ">Material Icons</a>: vector icon libraries</p>
<p><a href="http://fontawesome.io">Font Awesome</a>: a free font consisting of 675 vector icons that can be customized with CSS</p>
<h4>Stock content</h4>
<p><a href="https://pixabay.com">Pixabay</a>, <a href="https://www.pexels.com">Pexels</a>, and <a href="https://unsplash.com">Unsplash</a>: free stock photography</p>
<p><a href="http://coverr.co">Coverr</a>, <a href="https://www.videvo.net">Videvo</a>, and <a href="http://ift.tt/1DJUjwG">Pexels Videos</a>: free stock video</p>
<h4>Tools</h4>
<p><a href="http://ift.tt/20YuJft">Cheatsheet</a>: 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</p>
<p><a href="http://pasteapp.me/">Paste</a>: 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</p>
<p><a href="http://ift.tt/VsnvOg">WhatFont</a>: a browser extension that makes it easy to identify fonts on any website (to identify fonts I find in print, I use <a href="http://ift.tt/YCR5sf">WhatTheFont</a>)</p>
<blockquote><p><em>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 working on, check out my </em><a href="http://ift.tt/2r6QtsS"><em>website</em></a><em>.</em></p></blockquote>
<p><img src="http://ift.tt/2q8dMVS" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2r6VL7L">Getting Started with UX Prototyping</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Getting Started with UX Prototyping

A handy list of design tools, resources, & articles for new UX designers

Prototyping Tools

Top Stories