Appendix A: Supplementary Prototyping Tools Worth Seeking

In this appendix, we highlight some other notable prototyping tools you may come across. These tools fell short of making the cut for a more detailed discussion in the chapters, possibly because they:

• are more suited to prototyping native applications (our focus has been on tools for prototyping websites and web apps)
• fail to fit easily into the structures of categories and chapters we’ve established
• are arguably more technical-or developer-oriented than the intended core audience for this book

There’s value in briefly reviewing these tools to understand what they’re about. That way you can get a feel for whether they could be useful to you and your team for creating prototypes.

Craft by InVision

Craft is not a standalone prototyping tool; rather, it’s a set of plugins for the Sketch design app. We briefly mentioned Sketch in Chapter 5. It’s a very useful design tool for many tasks including prototype creation, and part of many designers’ prototyping workflows. If you’re on Mac––it’s Mac-only and set to stay that way––you should definitely try it out if you've yet to already do so.

Craft is created by the clever people at InVision as part of their labs project. The various plugins add lots of useful features to Sketch to turn it into a very compelling prototyping tool in its own right. It’s currently free, presumably to help encourage sales of the InVision platform. Notable features include:

• the ability to prototype effects and animations in Sketch for prototyping user interfaces
• the ability to rapidly add and update content in your prototype with Craft’s data, web, and JSON integration features
• cloud-synced design assets to make collaborative prototype design faster and easier
• tight, simple integration with the InVision prototyping platform

Craft’s image and duplicate features make it quick and easy to populate a prototype with realistic content

Facebook Origami Studio

Origami Studio is a prototyping tool developed by Facebook. They’ve used it in the design and build processes of many of their products, including Facebook and Messenger.

It’s likely to be useful primarily in designing and prototyping native apps, rather than websites and apps. We’ve explicitly included it here because its workflow differs greatly to all the prototyping tools we’ve discussed in this book.

Origami Studio is a visual tool in which prototype functionality is built by adding patches onto a canvas, then joining these patches together with connections to create a visual network, depicted below. This style of workflow is often called Visual Programming. If you’ve ever used Yahoo Pipes (a now-defunct tool that let users filter and mash up content from web feeds and web pages without requiring programming skills) or made music by patching together modular synthesizers, you’ll be familiar with this concept.

Adding patches and connections to prototype a swipe interaction on an image in Origami Studio

If you’re on a Mac, reasonably technical, and designing mobile apps where you like your apps to conform to Facebook’s common design language (for example, using consistent and familiar UI animations and transitions), then Origami Studio is worth a look.

Framer

Framer is a tool for creating animated interactive prototypes. It’s likely to be most useful for prototyping native apps but could also be used to prototype interactive websites and web apps.

Framer is worth mentioning because of its code-led workflow. Prototypes are created in Framer Studio (an Integrated Development Environment––IDE) by writing code in CoffeeScript. CoffeeScript is a language syntax for creating JavaScript (it's actually compiled down to JavaScript), which is intended to be simpler than writing raw JavaScript. The Framer CoffeeScript syntax is comparable to CSS. If you’ve used CSS to create and style elements––and you don’t run screaming from a scripting language––you should be fine using CoffeeScript to create and manipulate elements in a Framer prototype. Framer’s Auto-Code feature means that you can add elements to your prototype and manipulate them through a familiar design interface, and Framer will update the CoffeeScript code on the fly for you. This can make it easier to start a project if you have limited scripting experience.

Framer has a significant learning curve, particularly if you've had little coding experience. That said, its Auto-Code feature makes it less intimidating than it would be otherwise to start writing CoffeeScript code. If you want to specify user interface and interaction behaviors in precise detail for your designs, it’s a tool to consider.

The ability to create and manipulate elements with CoffeeScript in Framer makes creating multiple thumbnails in this basic image gallery prototype fast and easy.

Principle

Much like Framer, Principle is best suited to creating prototypes of native apps with its ability to prototype specific user interface interactions and animations.

It’s notable because it brings in a useful design interface paradigm that some designers will be familiar with: animation timelines.

Principle prototype design assets are managed with artboards, and you can use Principle’s built-in basic design tools to create and manipulate elements or import them from Sketch. The workflow should be familiar to Sketch users. Transitions between artboards are managed with connectors. It gets interesting when it comes to customizing the animations between artboards and between individual elements on specific layers in the artboards. This is managed through a timeline user interface. Its workflow will be familiar to anyone who’s used tools for animation such as After Effects or Flash, or who’s done some audio or video editing.

Prototyping transitions for a UI drawer opening and closing in Principle

As with Framer, if you’re looking to prototype specific user interface interactions and animations with high levels of fidelity and control, Principle is a tool for consideration. It’s particularly likely to suit those used to working with tools using animation timelines.

Xcode

Xcode is the IDE developed by Apple for creating production-level apps for Apple products, including macOS and iOS. As such, it’s a fully featured power-beast of a toolset. We’re mentioning it here because it’s possible to use Xcode’s Interface Builder and Storyboards tools to create prototypes quickly, as shown below, and many folks do just that—–particularly when they’re designing and prototyping iOS or native Mac apps.

Prototyping a simple image gallery using Xcode’s Interface Builder and Storyboards features

Interface Builder has a drag-and-drop interface for creating screens from elements, including buttons, toggle switches, and text fields. Storyboards allow you to set up the relationships between screens with connectors, including basic transitions such as “push” and “slide”.

You can stick to built-in interface elements that give you potential consistency and fidelity of native apps. Or you can bring in your own resources, which potentially allow you to create prototypes using lower-fidelity designs such as sketches, or mockups where you can use transparent buttons overlaid on your interface elements to trigger events. If you want to go beyond basic transitions between screens, you’ll have to start exploring code. With Apple’s more accessible Swift programming language, this may be within your capabilities; otherwise, you’ll need to work with a friendly developer.