Searching for the Optimal Prototyping Software for Your Project

Photograph: Framer Blog

Photograph: Framer Blog

 
Your choice of prototyping software will and should vary from project to project.

Depending on the purpose and goals for your screens, you could consider the following factors:

  • Are you planning to build a functional prototype?
  • Or, do you require a one-off animation to show something simple, for example, a loading animation?
  • How complex are the micro-animations?
  • Are they mostly screen transitions?
  • Does your project include a whole level of interactive components such as input fields, drop downs, conditional interactions, etc.?

Adobe After Effects: 

($20/monthly subscription with Adobe CC for one single app)

  • Workspace – uses a time-based workspace (timeline animation)
  • Functionality – includes a large variety of editing capabilities, including video editing and production, motion tracking, and 3D renderings
  • File Compatibility – can only import Photoshop or Illustrator files (unless you do something very hack and tedious from Sketch through to Illustrator, then to After Effects, which works against Sketch users and is an extra step in your workflow)
  • Performance – not exactly made specifically for showing micro-animations within apps, so many of its other features may be redundant making the software quite bulky
  • Export Options – .mov, .gif, .mp4, .swf, .wma and more (can also use Adobe Media Encoder or third party plugins to export/convert)
  • User Testing – If you plan to use this for a prototype, you’re out of luck – user test participants cannot interact with the output because it will be some sort of video format

I’ve personally used After Effects in university for video production (motion tracking, type animation with footage) and at work for animation (motion illustration). However, with the emergence of all these simplified and app-prototyping focused software (such as Principle, Pixate, Proto.io, AE may be too heavy for mobile app animations.)

Framer: 

($15/monthly subscription)

  • Workspace – uses CoffeeScript, a simplified version of JavaScript (there is a higher learning curve since you will need to learn how to code)
  • Functionality – includes robust options and customizations for screen-to-screen transitions and also layer-based animations – you’ll be coding every single interaction and animation, but with the help of their feature called Auto-Code, where it creates code as you design visually
  • File Compatibility – can import Sketch files directly into the software
  • Performance – lightweight, runs pretty smoothly
  • Export Options – public URL link or downloadable to iOS or Android device as an “app”
  • User Testing – user test participants can interact with the prototype via a web link – efficient, accessible, and fast

If you already have a background in some sort of programming language especially JavaScript, I would invest in Framer. For individuals who can’t code – it’s still worthwhile to learn Javascript – but perhaps when you have lots of time!

Flinto: 

($99 for one licence)

  • Workspace – Flinto is an app that is Mac-only, so their workspace is familiar to OS software
  • Functionality – uses a feature called The Transition Designer where it allows you to customize animations between screens
  • Performance – works well with large quantities of screens
  • Export Options – .flinto (to view or interact with the prototype, users need to download the Flinto app on their iPhone device and it’s not available for Android currently
  • User Testing – user test participants can only interact with the Flinto file

I’m an Educator for the UX Design Full-time program here at BrainStation in Vancouver (and formerly in Toronto) where we teach students how to create meaningful and simple transitional and interactive movements in Flinto! We used to teach After Effects to our students a few cohorts ago, but have realized that students had a very hard time picking up the software – even to accomplish simple things like animated screen transitions. The program runs for 10 weeks, and on top of motion design, students learn everything from UX strategy and research all the way to prototyping – we introduce motion design near the last stretch, so there isn’t that much time or leisure for picking up programming.

Principle: 

($129 for one year with free updates)

Another tool you can consider using is Principle! Its capabilities allow you to focus on more detailed and complex control interactions and animations for fewer screens, rather than optimizing for transition animations over many screens. It’s similar to Flinto and they have a great Tumblr blog that showcases real user’s projects so that you can download their files and try the demos yourself for practice!

So to sum up, it really depends on your use case, the type of project, and its size as well. For us as UX Educators, we had our own reasons to choose Flinto over the other tools and knowing which one was best suited for their needs within our 10 week intensive program.

Why Flinto?

Here are a few reasons why we here at the UXFT program at BrainStation have transitioned from using After Effects to Flinto.

  • Lower learning curve
  • You can create prototypes really fast and efficiently
  • Can handle and run smoothly with a large quantity of screens
  • Affordable for individuals

 

Check out:

 
Live to LearnMandy YuUX Design, Prototyping, Software