8

What are designers using to create prototype animations for iOS?

over 5 years ago from , Freelance Interactive Designer - matthewortega.co

I was wondering if there are any new web apps or apps out there that make this a bit easier. I've had recommendations to use Keynote and/or Aftereffects. Anything else?

14 comments

  • Pasquale D'SilvaPasquale D'Silva, over 5 years ago

    Use as much as you can. Each tool has severe strengths and weaknesses.

    Lately my diet consists of After Effects, Quartz Composer, Framer JS, Form, Cinema 4D, sometimes Pixate, the web browser, pencil and paper.

    Spend time learning animation fundamentals before relying on tools, and you'll produce great animation work.

    11 points
  • Phil RauPhil Rau, over 5 years ago

    I am a big fan of Hype, it thinks like I do.

    2 points
    • Wesley LaukaWesley Lauka, over 5 years ago (edited over 5 years ago )

      Hype is fantastic. I don't know why it doesn't get as much attention as some of the others.

      Having timeline based capabilities ( especially at the property level like AE) is a life saver for moving fast. You can still write as much javascript as you want and hook it into hype. I feel like it's a great medium between something like After Effects and Framer.js, lets you move back and forth on the spectrum during the prototyping exercise.

      other great things about Hype:

      • will watch assets and update them if you change it externally

      • easy to embed in other html/css/js projects

      • scene/page transitions are cake, super helpful for doing mobile flows

      • in the end, you can "innerHTML" any object from inside Hype.

      2 points
  • Matthew MartinMatthew Martin, over 5 years ago (edited over 5 years ago )

    I was in the same boat as you for a while. With so many prototyping tools out there, I was unsure which would be the easiest to use and also give me the most interactive prototypes.

    A majority of the prototyping tools I used seemed like I was just linking together screenshots with some basic animation effects. Lame.

    Eventually I just decided to cough up the $80 for Framer Studio and try it out. 1) even without JS knowledge, it's super easy to learn/use 2) you can create both simple animations or very complex interactions 3) you can re-use your code snippets for future prototypes 4) previewing and sharing prototypes is easy 5) the documentation and support is great

    Yes, I love FramerJS. You can checkout some of my prototypes at dribbble/mrtnmatt

    I'll be posting some more in the near future. Also, as Pasquale mentioned using, I always start with pencil/paper + a little research on animations before jumping in.

    2 points
    • Daniel FoscoDaniel Fosco, over 5 years ago

      Pro-tip: If you don't want to cough up the $80 for Framer Studio, Codekit does a fine job of compiling the CoffeeScript and serving the prototype locally.

      Although decent mobile visualization and sharing only comes with Framer Studio, so it's worth the price to escape the hassle.

      1 point
  • Spencer HoltawaySpencer Holtaway, over 5 years ago

    I just started using Pixate. I'm a total noob when it comes to actually implementing an interaction idea into a prototype but Pixate has been fairly understandable so far.

    I used to use Hype, maybe 3 years ago. I hear it's had some rad updates so might look again soon!

    1 point
  • Hash MilhanHash Milhan, over 5 years ago

    Proto.io doesn't seem to get much love here. I'm currently using it, and it can be as simple as Marvel or create super complex stuff as well.

    https://proto.io/en/demos/

    i started with doing animations using aftereffects (my go to), but then started using Keynote as it was super simple and quick. then i after trying so many others out there including Pixate and Marvel i have settled down with Proto.io - which is fantastic. They even let you export a HTML package if you need to so you can host it as your own web app.

    And seriously, you can make super quick believable prototypes of interactions and animations - or a whole user experience.

    1 point
  • Daniel FisherDaniel Fisher, over 5 years ago

    Composite to view designs on devices, and Pixate to animate them once you are happy. Both amazing

    0 points
  • Tony RedfernTony Redfern, over 5 years ago

    I used Pixate recently to prototype do review with our clients. It took a while to learn but once you master 'conditions' it gets a lot easier. If you just want to illustrate an animation over an interaction a lot of team use keynote.

    0 points
  • Jerome SenaillatJerome Senaillat, over 5 years ago

    +1 for Marvelapp which is great for super quick functionalish wireframes that are also easy to share.

    After FX is also in my list -- since most designers are often already familiar with Adobe tools the learning curve is less steep.

    Paper, pencil, and CSS/Javascript

    0 points
  • Mariz Melo, over 5 years ago (edited over 5 years ago )

    xchema Frontend (private)

    HTML/CSS/JavaScript (flexible)

    Invisionapp (+ team collaboration)

    Marvelapp (+ animation and easy to use)

    FramerJS

    Origami

    Keynote

    Webflow

    0 points