The more I talk to other designers and developers, I hear that one pain point in the design and development process, mainly in mobile is; it is hard to communicate the animation ideas from a static comp to a finished product. For example, the way a navigation menu floats in, or the way a screen slides up. Assuming that a prototyping tool like Flinto can't solve all of these problems, does anyone have techniques for communicating animation ideas?
I make little sounds like thwwt, ziiiip, foosh. I'm not kidding.
those are the best :P
Ha, it's like being at the mechanic. :P
HA! That was awesome. :)
Ah i see, fair enough. Looking forward to your final choice. Currently using Avenir-Book on mine
I recently found out that you can use animated gifs in flinto, while it's not perfect it is an addition to static visuals.
that's a great idea, gonna try that out.
Not to derail this into a 'designers should code' discussion, but learning development was the best thing I've ever done.
because of this, I'll quickly prototype a small piece of a design and use CSS3 transitions (easily done with SASS or using Dan Eden's great animate library: http://daneden.me/animate/ ) and it becomes a quick & dirty way to show exactly how a module should animate and transform across devices and resolutions.
From there, it's a really easy 'This header should shrink so there aren't widows' or 'That padding needs to go up by about 10px on this screen' type of communication.
From the time before I knew how to do basic dev to now, the communication errors on projects have become non-existent.
I really recommend trying it with something like Foundation or Bootstrap - for a lot of people, it takes a weekend of messing around to get a good handle of those, and maybe one more to try out the animations.
I usually write really bad jQuery to show animations when possible... sometimes Axure (even though I hate that damn tool) for more complex transitions
I think that's the point though - writing clean code isn't the point. If you use 10 jquery libraries every time you need to show something, who cares? As long as you can do it quickly and efficiently and get your point across.
After all - everyone starts out being bad at things. As you keep doing them, you'll find yourself writing production code, if you wanted to.
If you have the time: http://www.apple.com/finalcutpro/motion/ or After Effects.
I've always produced a static HTML page to show this kind of thing. Actually creating a demo of the animation/interaction in HTML/CSS/JS is much better than creating a GIF, as people can interact with it, and some of the code can be took forward into the final solution.
That's awesome. Do you by chance have an example you can share with me?
I just emailed you with a recent example – I hope that it helps
Nice. Mind sharing with the rest of us?
I'd love to take a look also!
I'd say its one of those areas that hasn't been fully hashed out yet in terms of solution but yes, I use flinto for as much interaction as possible. Other options would be GIFs.
I'm writing an article now for Smashing Mag that disucsses this along with many other designer to dev pain points and how to solve them and one thing that never fails is ultimate communication between the two. Sitting down and explaining exactly what youre looking for to them. Finding real world examples in current apps if possible, or if doing something completely different, just communicating that to them.
=/ Good luck.
I'm doing a big ol' talk on this in Sydney next week at Web Directions South.
Short answer: After Effects for non-interactive, QC for interactive and rough animation, AE + QC for well animated, interactive prototypes.
For the project currently I'm working on it was very time consuming but I and our product managers were quite pleased. I draw almost anything in illustrator ( because pen tool is better than Photoshop) and copied all the paths to after effects. Then, we created real svg animations in D3.js. If you have coding background I strongly advice you to learn it. It's very flexible and fun.
I tend to use after effects, for example producing something like this http://dribbble.com/shots/1184419-Elastic-Scrolling?list=users
I import the slices from the PSD and animate them in After Effects. I used to use it all the time for video editing, so I'm really familiar with it, which is why I use it. There may be a better program/service to do that but I haven't found yet. Once you get to learn the AE you can do some cool things with it.
Get on it!
Check back with me in 1 year for an answer ;)
I've been using this TAP Fireworks prototyping framework (based on jQuery Mobile)for the last few month - works quite nicely for simple animations.
(Some of the interactions are a little finicky in iOS7 - I need to find time to poke around and update jQuery Mobile and then send it back to the original creator.)
Anything else, I've been using the animation pane in Photoshop for simple GIF demonstrations (also, been really wanting to dig in deep on After Effects - haven't had the time though).
I haven't personally tried it yet, but I've heard that Tumult's Hype can be great for this. http://tumult.com/hype/
I find Keynote a great tool to showcase and communicate my animations and interactions for apps I'm designing. I've contemplated incorporating Quartz into my process, but not sure if it's worth it.
HTML/CSS/JS IMO is the ultimate way to go about it.
Rob, thanks. What are your thoughts on the concept of having a simple GUI that is for non-coders where you can basically do what Keynote, Framer.js and Animate.css does. Necessary, not necessary?
Would love this.
I find prototyping animations/interactions for native desktop apps is the toughest as you're not dealing with a set viewport. I tend to do things in Keynote but it's still a rather time consuming process :/
After Effects and .gif files. The best thing about them: You can open a .gif in your browser to view the animation in all it's beauty, or you can open it in Preview.app to view every frame.