10

Ask DN: How do you communicate animations or animation ideas?

almost 10 years ago from , Product Designer / Hacker

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?

30 comments

  • Ketan Anjaria, almost 10 years ago

    I make little sounds like thwwt, ziiiip, foosh. I'm not kidding.

    8 points
  • Tyson SoelbergTyson Soelberg, almost 10 years ago (edited almost 10 years ago )

    Seems Framer should be mentioned here.

    "A prototyping tool for animation and interaction on desktop and mobile." —http://framerjs.com

    3 points
  • Jonny BeltonJonny Belton, almost 10 years ago

    I recently found out that you can use animated gifs in flinto, while it's not perfect it is an addition to static visuals.

    2 points
  • Manik RatheeManik Rathee, almost 10 years ago

    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.

    1 point
    • Aaron WhiteAaron White, almost 10 years ago

      I usually write really bad jQuery to show animations when possible... sometimes Axure (even though I hate that damn tool) for more complex transitions

      0 points
      • Manik RatheeManik Rathee, almost 10 years ago

        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.

        2 points
  • Marco SousaMarco Sousa, almost 10 years ago

    If you have the time: http://www.apple.com/finalcutpro/motion/ or After Effects.

    1 point
  • C___ F_____C___ F_____, almost 10 years ago (edited almost 10 years ago )

    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.

    1 point
  • Cat NooneCat Noone, almost 10 years ago

    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.

    1 point
  • Pasquale D'SilvaPasquale D'Silva, almost 10 years ago

    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.

    0 points
  • Cihad TurhanCihad Turhan, almost 10 years ago

    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.

    0 points
  • Ed LeaEd Lea, almost 10 years ago

    I tend to use after effects, for example producing something like this http://dribbble.com/shots/1184419-Elastic-Scrolling?list=users

    0 points
  • Jake KwaschnefskiJake Kwaschnefski, almost 10 years ago (edited almost 10 years ago )

    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.

    0 points
  • Marc EdwardsMarc Edwards, almost 10 years ago

    Hype. http://tumult.com/hype/

    Get on it!

    0 points
  • Nathan ManousosNathan Manousos, almost 10 years ago

    Check back with me in 1 year for an answer ;)

    0 points
  • Martin Mark, almost 10 years ago (edited almost 10 years ago )

    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.)

    http://unitid.nl/2011/03/touch-application-prototypes-tap-for-iphone-and-ipad-using-adobe-fireworks/

    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).

    0 points
  • Matt BaxterMatt Baxter, almost 10 years ago

    I haven't personally tried it yet, but I've heard that Tumult's Hype can be great for this. http://tumult.com/hype/

    0 points
  • Rob Sicat, almost 10 years ago

    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.

    0 points
    • Jess EddyJess Eddy, almost 10 years ago

      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?

      0 points
      • Jordan BorthJordan Borth, almost 10 years ago

        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 :/

        0 points
  • Marcel Wichmann Marcel Wichmann , almost 10 years ago

    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.

    0 points