over 9 years ago from Darren Moten, 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?
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. ;)
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.
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.
I've been looking for something like this, thank you a lot!
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.
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.
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.
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.
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
We use Powerpoint, which handles animations really well.
Do you have an example of a powerpoint that you'd be willing to share. I've never actually seen a presentation mocked up in powerpoint! Only after effects.
You can grab one here: http://pages2.marketo.com/UXDesigner_UX.html
Also here's an example with animation: https://slack-files.com/T025FH3U8-F026EC573-f3e12b
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.
Can you share some work, that you have done :) ?
Here's a quick one I did http://seanschraeder.com/portfolio-item/scaled-dynamics/
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now