Alex Sailer

Prototyping: The Future of Design

A prototype is worth 1000 mockups. You've probably heard it before and it's soooo true. (For anyone who just Googled, "what is prototyping" just read on.) Prototyping is the act of creating a functional example of a product to be used for testing purposes. That's a fairly open-ended definition considering that the word "product" is about as generic as it gets. In this case, we're discussing prototyping digital products, such as apps or other digital user interfaces. The purpose is simple, the value is immense, and the means of creating prototypes varies greatly.

What + Why

Similar to wireframing, there are low-fidelity and high-fidelity prototypes. Low-fidelity prototypes could be made simply by sketching on paper. On the other hand, high-fidelity prototypes should be made with finalized design assets. More often than not, both low- and high-fidelity prototypes will be used during the product development process. They'll definitely come to the rescue when static mockups just don't cut it. Mockups are great but they can articulate only so much when trying to translate how an idea/design will function. Prototypes communicate a certain level of interactivity that mockups simply can't.

Lo-Fi

Low-fidelity prototypes are used mostly to test product features. Instead of spending time early in the process designing pixel-perfect interfaces to explain concepts, start off with lo-fi prototypes. They'll be faster to create, easier to edit, and an all around better use of time. Pencil and paper make for the best lo-fi prototypes. To help put your ideas into context, you'll definitely want to sketch within the dimensions of your final form-factor. That could be sketching inside a shape similar to a mobile phone or tablet display. That also allows you to lean on pre-existing user interface patterns. For example, if you're prototyping an idea for an iPhone app, then you'll be able to rely on patterns like scroll, swipe, pinch-to-zoom, etc.

paper-prototypes

Hi-Fi

High-fidelity prototypes are typically used later in the process to test user interactions. By using polished design assets, you'll be able to communicate functionality similar to the final product. They can be time consuming to create but the time investment is well worth it. It enables you to refine your interactions from merely being functional to being weirdly delightful for the user. On top of that, high-fi prototypes provide context to non-technical clients while at the same time acting as "visual specs" for engineers.

Checkout this example from Framer.js - http://framerjs.com/examples/preview/#voice-onboarding.framer

How

Whichever route you take you'll quickly see how valuable prototypes are to any product development process. In order to get the value out of a prototype, you actually need to make one. Like I mentioned earlier, if you're in the early stages you should definitely opt for the pen and paper route. Be sure to grab our printable paper prototype templates before you get started. For high-fidelity prototyping, there are numerous tools out there to get the job done and of course some are better than others. Below you'll find a list of options and why they're awesome.

prototyping-logos
  1. Marvel App - https://marvelapp.com/
    • Free (limited features)
    • Easy to use
    • Intuitive interface
    • Easily add page transitions
    • Import images from Dropbox
    • Mobile app for creating prototypes from photos of sketches
    • Plugin for Sketch to export artboards to Marvel Projects
    • Supports PSD, PNG, JPG, and GIF file types
    • Shareable online prototypes
  2. InVision - http://www.invisionapp.com/
    • Free (limited features)
    • Easy to use
    • Fairly simple interface for the amount of features
    • No page transitions
    • Import images from Dropbox, Box, or using InVision's desktop sync app
    • Supports PSD, PNG, JPG, GIF, PDF, AI, and SKETCH file types
    • Shareable online prototypes
    • Real-time collaboration
  3. Pixate - http://www.pixate.com/
    • Free (Premium Plan available for $20/month/user)
    • Somewhat easy to use
    • Medium learning curve (learn basic functionality in an afternoon)
    • Extremely flexible
    • Wide range of control over animations and interactions
    • Supports JPG, PNG, and TIFF (under 5mb) file types
    • Native iOS app for interacting with prototypes
    • Shareable online prototypes
  4. Keynote - https://www.apple.com/mac/keynote/
    • Mac only
    • Free (only free on new Macs, $20/license on older Macs)
    • Limited animations and transitions
    • Extremely easy to use
    • Low learning curve
    • Prototypes are only viewable in Keynote
  5. After Effects - http://www.adobe.com/products/aftereffects.html
    • $19.99/month Creative Cloud single app subscription
    • Steep learning curve
    • Time-based animations
    • Extremely flexible
    • Prototypes are not interactive
    • Prototypes are only viewable as videos
    • Doesn't always align with what's possible in code
  6. Origami - https://facebook.github.io/origami/
    • Free (requires Apple developer registration)
    • Origami is an add-on for Quartz Composer
    • Offers more freedom than Marvel or InVision
    • Steep learning curve
    • Add robust transitions and animations
    • Lacks sharing features
    • iOS, Android, and Web code export
    • Link Sketch and Photoshop documents with Origami prototypes
  7. Framer.js - http://framerjs.com/
    • $79.99 (free trial available)
    • Steep learning curve
    • Some coding knowledge required (CoffeeScript)
    • Extremely flexible and robust
    • Add effects like animations, filters, and 3D transforms
    • Live preview on mobile device
    • Direct import from Sketch, Photoshop, and After Effects
    • Shareable online Prototypes
  8. HTML/CSS/JS
    • Free! You can even use your built-in text editor!
    • Very steep learning curve
    • Time consuming
    • The most flexible option
    • You can do anything you can code up!

As you can tell by the sheer number of tools available, prototyping is here to stay. All of the tools above are great options and I'd recommend trying all of them if you have the time. Trust me, it's worth it. It's easily the best way to communicate complex concepts without committing serious engineering time.

Go grab our paper prototyping templates and get started! Your clients and engineers will thank you later.

P.S. If you make something cool, don't forget to share it with us on Twitter @madebysidecar!


Give this a share if you enjoyed it :)