7

How do you go about sketching interface animations?

over 6 years ago from , Head of Product at Clientela

I've always wondered about how other designers go about sketching interface animations! Anyone care to share their process and a few images of how you sketched something like http://d13yacurqjgara.cloudfront.net/users/22691/screenshots/1280275/gif_autism_ui_kit_animation.gif before heading into after effects to animate the magic?

16 comments

  • Jonathan YapJonathan Yap, over 6 years ago

    Start from paper and storyboard before diving into any software. It pays to be prepared with several iteration and alternatives before experimenting. Will save you time in the long run and gives you option if you hit a dead end or limitation.

    Tried several options like Framer.js, Quartz Composer, and dabble in Hype. The easiest to work with quickly for me is Powerpoint/Keynote, and the most powerful is After Effects. You'll find your right tool when you experiment a little. ;)

    2 points
    • Lucifero Von NachtosphereLucifero Von Nachtosphere, over 6 years ago

      I totally agree with you Jonathan. Storyboards can even help you to identify flaws in the interaction or already give you the chance to simplify/iterate the concept (sometimes in my mind starts too much complicate, given the amount of time I decide to invest). I still have to try Powerpoint/Keynote! I believe Framer.js and Quartz Composer are two interesting choices, also. The whole point is that with After Effects, your interactions are not interactive and this bugs me a bit.

      0 points
      • Jonathan YapJonathan Yap, over 6 years ago

        There's still no silver bullet for this, QC and Framer allows interactivity, requires a bit of learning with some technical limitations and coding for the latter. Powerpoint/Keynote doesn't do fancy stuff. After Effects = no interaction.

        One approach I haven't try however is using Xcode. Meng To written an article about it.

        1 point
    • Darren Moten, over 6 years ago

      You know, that was my point. I've never seen an interaction sketched out on paper or story boarded. Do you have any good examples of sketched interactions BEFORE they hit prototype phase?

      I think any good designer worth his weight believes in starting on paper, but whereas i've seen VARIOUS examples of interface being sketched and applied to a storyboard, i've only seen interactions verbally communicated.

      1 point
      • c kizerc kizer, 6 years ago

        Yes! Is there some standard drawing elements I can use for "slides over", zooms and so forth? I'd love to see what other people did on a sketch to show animation.

        0 points
  • Suganth SSuganth S, over 6 years ago

    I feel creating animation in after effects is much easier and takes less time. So no intermediate step for me. I saw some people using Photoshop timeline to create gifs. You can try that too.

    1 point
    • Darren Moten, over 6 years ago

      I wondered...I can't really see how storyboarding it statically helps, I do make notes and draw rough sketches for certain animations but I wanted to see if anyone had other interesting methods of getting it done.

      0 points
  • Ed ChaoEd Chao, over 6 years ago

    Quartz Composer + Facebook Origami is a probably the most effective way of quickly creating demo-able UI interactions. The problem with most solutions (AE, PS Timeline...) is you can't actually interact with them other than hitting play. So you have no idea if a nifty animation will turn out to be annoying as hell. But with QC, you can actually interact as you would IRL. You can see a short demo here: http://vimeo.com/85578380

    0 points
  • Jamie MartinJamie Martin, over 6 years ago

    We use Powerpoint, which handles animations really well.

    0 points
  • Kai TurnerKai Turner, over 6 years ago

    I'm a big fan of using Tumult Hype (tumult.com/hype/) - it's similar to Flash, except it is all HTML5 based, so you know it will work in the browser. I've been prototyping interaction design with it for years.

    0 points