The right tool for the job: Prototyping (Part 2)

Chiel Borgonjen - 13 February 2019

Are you up to date on today’s digital design tools? For a big design team like ours, it is important to use the same toolset and find a way to make it fit into our design process. At Hike One we have a lot of discussions about this topic. Also, new team members post questions on Slack like “What tool do you use for …?”.

With new toolsets constantly being released it can be tricky to find the right tool for the job. Therefore we decided to write a second post about the prototyping tools we use in our company and why. This is an update of a post we created 3 years ago. Since that time a lot has changed in our prototyping toolbox. There are too many tools available to create a prototype. It is difficult to find out which tool is the right one for you. Our suggestion is to become an expert in 1 tool and only use the other tools for features yours doesn’t have.

During the review of our tools, we noticed a trend towards platforms that combine design, prototyping, and development. Examples are Figma, FramerX, Sketch or Invision studio. So far we haven’t seen a prototyping tool that could replace Sketch as a design tool, but we see FramerX as a potential candidate.

Looking at the past, this list might be out of date in a few months, but there are also some tools on this list that we have been using for years. In this post, we share our experiences with the tools we use the most.

Principle

This is the most used tool in our company. Principle is a high fidelity prototype app to create animated and interactive user interfaces. It is especially useful to communicate final designs to clients and developers.

Principle

What is it? Prototyping software for MacOS.

How often do we use it? Very often, it is very intuitive and fast. It also fits nicely into our workflow. We design a lot for media applications; For example playing a video in a prototype is more than welcome.

What do we use it for

  • Creating high fidelity prototypes and animations
  • Animate specific elements and interactions on a screen
  • Communicate end result to client, users or developers
  • User testing

Price $129 one time purchase

Makes us happy because

  • Able to play video/audio in a prototype
  • The freedom to create almost anything you want
  • Works very intuitive
  • It’s easy to import files from Sketch or Figma
  • Collaborate with multiple designers by using nested components

Sometimes makes us sad because

  • You cannot export the prototype to code or specs (for developers)
  • Not able to share the prototype with windows users (mostly our clients)
  • You have to be meticulous with naming your groups in Sketch
  • Difficult to animate/change a text
  • It can become a mess when working with a lot of screens and elements

What we would like to add

  • Somehow share the designs with Windows users

InVision

Second on our list is InVision. We use it frequently because it offers a lot of functionalities we look for in a prototyping tool. Think of commenting, sharing and standard transitions. We also use it frequently because our clients are already acquainted with Invision.

InVision

What is it? An online prototyping, collaboration, and workflow platform.

How often do we use it? On about half of the projects as it has to fit in the project’s / client’s workflow. We like to use InVision throughout the whole design process because it makes it easy to test our wireframes and/or visual designs.

What do we use it for

  • Explaining user flows and discuss them with clients and the team
  • User testing
  • To check our own work to our colleagues to see what works and what doesn’t
  • Keep track of design status (in progress/approved etc)

Price Starts at $ 0,- per month up to $100,- per month for an unlimited number of projects with 5+ designers.

Makes us happy because

  • It is easy and super fast to create a clickable prototype
  • It is a team application, it offers good review and commenting possibilities
  • It’s a well-known tool, so clients don’t mind using it
  • It is easy to learn, no coding skills required
  • It works well with several other tools we use, like Dropbox, Sketch, and Slack
  • It offers a great overview of all the screens you’ve uploaded
  • It offers a nice preview mode as a device is placed around the screens
  • You can enable and disable “hotspot hinting”

Sometimes makes us sad because

  • It only offers page transitions, it’s not possible to animate layers within a screen
  • Exports are automatically refreshed (which is nice), however things get messy when you rename your exports
  • There is not much logic to add to your prototypes (if this, then show screen X, else show Y)
  • Drawing hotspots on your prototype instead of selecting the component feel sketchy, they can get misaligned when updating your screen.

What we would like to add

  • Make it possible to animate assets on a screen rather than just single pages
  • Make it possible to create custom transitions
  • Adding pictures in comments, now it is sometimes difficult to communicate to the client

Sketch prototype

The prototype function of Sketch is third on our list. It is perfect to make quick low-fidelity prototypes for clients or our colleagues. Furthermore, it is easy to upload it to Sketch cloud and share it remotely.

Sketch prototype

What is it? Feature from Sketch (version 49 - 29 February)

How often do we use it? On almost all our projects we can use it. It is used often at te beginning and middle of our design process to check our designs with our colleagues and clients. We rarely use it for usability tests.

What do we use it for

  • Explaining user flows and discuss them with clients and the team
  • Mirror the screens on our smartphone to experience our designs with different devices
  • User testing

Price $99 per year

Makes us happy because

  • It is super quick
  • We don’t need to start up/download another app
  • No need to draw hotspots for interaction, just select a group or symbol in your Sketch file you want to use as a hotspot
  • Minimal but essential tools needed for Lo-fi prototypes
  • Set multiple “start screens” from which screen your prototype can start
  • Easy to upload with Sketch cloud and share with clients

Sometimes makes us sad because

  • You can’t comment per screen, only overall comments are possible. This makes it hard to receive feedback.
  • Only standard transitions are available
  • You can’t animate individual groups

What we would like to add

  • Custom animations
  • Make it possible to animate elements on a screen rather than single pages.

Tools we use less often

There are also some applications we like to use, but aren’t used that often. This has to do with the functionalities the application offers, the learning curve it has and whether or not it fits in our workflow. Nevertheless, they are still good tools to use for different purposes.

Framer X (beta)

One of the first in its kind: a design tool, prototype tool and developers tool all in 1. It is still in beta, but we are excited because they are trying to close the gap between design and development. Framer X has all the building blocks to become the best tool there is on the market. A great community, developers on their side, promising design tool and a lot of automation to make our life easier. Up till now we’ve played around with it a lot, but haven’t been able to properly use it in a project because our developers didn’t work in React. And while we absolutely love the ‘stacks’ feature, it’s not yet replacing Sketch because it’s missing some essentials like text and object styles.

Furthermore, we still prefer Principle for hi-fi prototyping due to its easy and custom animations, but could see Framer X replacing InVision.

Framer X (beta)

What is it? Native prototyping app for MacOS

How often do we use it? Never. We didn’t find a project yet with React developers

What do we use it for? It could be a replacement for most of our tools, but it isn’t there yet

Price $12 per month

Makes us happy because

  • The stacking feature is amazing, it will automatically add a padding between the elements in a group
  • An easy way to build a component library
  • Team store makes it easy to share your components with your team
  • It is very easy to download all the libraries for iOS, material design and a lot more in the Framer store
  • Automatic nesting and responsive behavior makes our lives easy as designers
  • A quick way to create a clickable & responsive prototype
  • Fast and clean
  • A single source of truth: Prototyping, design and developer tool all on 1 platform
  • FramerX community is very active; no questions will be unanswered online

Sometimes makes us sad because

  • Make custom animations requires knowledge of React (javascript library)
  • Coding your custom animations happen in a different program
  • Not suited for sharing and getting feedback from clients

What we would like to add

  • Customizable animations without using react

Axure

Axure is clearly focused on interaction designers. Even though some of us still find it one of the most complete prototyping tools, nowadays there are much more tools out there that work for both interaction designers and visual designers. Similar tools we used this year have a smaller learning curve, work a lot faster and can be used on several moments in a project, also in later stages.

Axure

What is it? A wireframing & prototyping application.

Price Starts at $289,- per license.

Makes us happy because

  • It’s possible to create wireframes and prototypes in one application
  • You can make things as advanced as you like
  • It is nice to use if you want to create an advanced and realistic prototype for testing

Sometimes makes us sad because

  • It has a high learning curve (lots of options)
  • You need to click a lot in order to create something, therefore quite time consuming
  • It offers no easy design functionalities, will look like a wireframe most of the time (importing visual designs from another application does work)

InVision Studio

InVision Studio attempts to combine design and prototype in 1 platform. What is great about this tool is that it has standard transitions and customizable transitions. Overall this program has a lot of potential, however, it doesn’t feel intuitive to use, and doesn’t feel native in preview. All in all, it doesn’t feel serious enough to replace our design or prototype tool for this app.

InVision Studio

What is it? Design and prototyping tool for Mac and Windows

Who is it for? Interaction designers, visual designers

How often do we use it? We haven’t used it in a project yet, but when it has offers added value compared to Sketch for example we might switch.

What do we use it for? Exploring new tools

Price Free

Makes us happy because

  • It is possible to have standard and customized transitions
  • A prototype program with a timeline to adjust single elements
  • Sketch import is very easy, you can just copy paste your artboards
  • You can use % instead of px to make your design responsive
  • Just like Invision, we love it that our clients can comment per screen
  • Easily send your screens to your phone

Sometimes makes us sad because

  • Live preview doesn’t feel native, for example, scrolling feels like you’re constantly refreshing a webpage
  • There is no style system available yet
  • Overrides in components aren’t accessible quickly, and it is not possible to lock certain overrides
  • Everything is image based, to support another state like hover changes we need to upload another image
  • No seamless integration with Sketch, some layers might look different after import
  • It’s not possible to create responsive prototypes

What we would like to add

  • Labels under the icons in the program, the icons don’t make any sense as a first time user and therefore work less intuitive
  • Responsiveness in preview mode, switch from phone to tablet without having to open a new project
  • Export to video, gif or code

Webflow

Webflow makes it easy for designers to create a responsive website in a short time. It is a drag and drop tool that is easily customizable with a little bit of CSS and HTML knowledge.

Webflow

What is it? A tool to create a website

How often do we use it? We used it for a couple of websites for ourselves and for clients

What do we use it for? Create a simple webpage or form.

Price Free, hosting is from $12/month

Makes us happy because

  • Immediately result on how your website looks responsive
  • It’s easy to create a prototype, but it is also easy to communicate our design/animations/responsive behavior to a developer
  • Possibility to add small animations and hover effects
  • You can make a CMS for your editors to work in.

Sometimes makes us sad because

  • When somebody of your team logs in, you get kicked out
  • There is a limit to the customizations that are possible, e.g. overlapping elements or small deviations from your grid
  • It’s a steep learning curve, you need some knowledge of CSS and HTML

What we would like to add

  • A way to collaborate with multiple team members
  • A plugin that translates your Sketch files into Webflow

Flinto

Flinto

What is it? A prototyping application ideal for web and mobile

How often do we use it? We haven’t used Flinto that much in our projects yet. 

What do we use it for?

  • Explaining user flows and discuss them with clients and the team
  • User testing
  • Communicate our designs to the development team
  • To check for ourselves and see what works and what doesn’t
  • Create animations

Makes us happy because

  • It is simple and intuitive.
  • It allows for easy path transitions to make loaders or graphs.
  • It supports force touch, haptic feedback, and 3D transformations.
  • It has all the common screen transitions that are quickly applied.
  • You can re-use custom transitions across other components.

Sometimes makes us sad because

  • It becomes more complex in larger prototypes and is difficult to keep an overview on what's happening.
  • There haven’t been a lot of updates and the tool is quite unstable. Many crashes and bugs occur.
  • It doesn’t have a lot of customization to saved recordings like the type of cursor you want or the resolution.
  • Scroll transitions are complicated to set up.

What we would like to add

  • Flinto is one of the few applications to have force touch and haptic feedback. But without a lot of customization, and you can't apply the haptic feedback separately.

ProtoPie

ProtoPie is an ideal tool for mobile. It is possible to make high end prototypes without any coding, and can be testend on actual devices. And they won a Red Dot Award for the user interface.

ProtoPie

What is it? High fidelity prototyping software for MacOS and Windows.

How often do we use it? Not often because most of our prototypes are for web, TV or a combination of mobile tablet and desktop.

What do we use it for? When we need to utilize specific smartphone sensors

Price $99 once

Makes us happy because

  • Utilize the smartphones’ sensors
  • You can bridge interactions between 2 different smartphones
  • Intuitive interface, everyone can use this
  • Sketch import to immediately start prototyping our designs
  • Easy sharable with our clients

Sometimes makes us sad because

  • Not ideal for more complex flows
  • Focussed on mobile, not desktop

AdobeXD

AdobeXD

What is it? Prototype program from Adobe

How often do we use it? Maybe 1 or 2 projects a year

What do we use it for? When we’re building a prototype that needs voice feedback or voice triggers

Price Free

Makes us happy because

  • Easy to create voice feedback in your prototype
  • Possibility to create voice and keyword triggers
  • Auto animate is amazing
  • Intuitive settings, takes over your previous settings per animations

Sometimes makes us sad because

  • The animations options are limited, they all end at the same time, or you need to hack it together with multiple art boards
  • The live preview app is a bit slow in updating your latest designs
  • You have to touch your screen or hold the spacebar to initiate the microphone
  • The alignment isn’t always clear, sometimes it changes on live preview

What we would like to add

  • A timeline to adjust the animations of individual components
  • We would love some specialized tools to quickly make a voice prototype
  • Easier way to open or refresh Sketch files, a simple drag and drop doesn’t work
  • More triggers like pinch, forced push or scroll

Figma

Figma

How often do we use it? A couple of times per year

What do we use it for? Figma is ideal for short projects with multiple designers or design sprints

Price Free

Makes us happy because

  • It’s very intuitive to use
  • It’s a design tool and a prototype tool in 1

Sometimes makes us sad because

  • Prototype functions are very limited
  • It has no animation options
  • It doesn’t have any plugins for a better design workflow

What’s next?

So how about you? What’s your opinion on the tools we’ve used, are your favorites part of this list? Obviously there’s a lot more out there we haven’t mentioned yet, like Kite compositor, Adobe After Effects, Framer, Balsamiq, Origami, proto.io, UXPin and more. Let us know your experience with them! What functionalities do you look for when creating a prototype? We’d love to hear about your favorite applications and check them out!

Tips for prototyping

  • Prototype early and often! Make prototyping part of your design process.
  • Only prototype what you need. When you are making your prototype for a usertest, only prototype what you want to test. Or when prototyping micro-animations, only prototype non-standard behavior.
  • Don’t loose yourself in building the prototype. If something does not work out, find another solution.
  • Fake it when needed. Only build the facade, not the system.
  • While making the prototype, constantly test it yourself. For example by having it mirrored on the device you are designing for. Or by going through the flow or viewing the transitions in slow motion.

Links

Overview of prototype tools: https://www.prototypr.io/prototyping-tools/ 

Chiel Borgonjen

Interaction Designer

The Power of Prototyping

Article

8 Things to Consider When Creating UI Animations

Maurice van Pelt - 26 November 2018
Article

“Hacking” Principle: 9 things you thought you couldn’t do

Jimmy Goedhart - 18 June 2018
Event

Meetup: The Power of Prototyping

Jimmy Goedhart - 7 February 2019