↵

How do you go about sketching interface animations?

over 9 years ago from Darren Moten, Head of Product at Clientela

  • Jonathan YapJonathan Yap, over 9 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 9 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 9 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 MotenDarren Moten, over 9 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, over 9 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