25

AMA: Val Head, Web Animation Expert and Author

7 years ago from , Designer

Hi Everyone! I’m Val Head, web animation pro and author of Designing Interface Animation on Rosenfeld Media.

In addition to writing a book about UI animation, I speak at conferences around the wold about web animation, co-host a podcast called [Motion and Meaning](motionandmeaning.io), and teach in-person web animation workshops.(There are some coming up in [Austin](webanimationworkshops.com), Boston and [NYC](webanimationworkshops.com).)

It’s probably pretty clear from that list that I do a lot of work and teaching around web animation. So, if you have any questions around designing, building, or prototyping UI animation, I’ve got you covered!

I’m also a leader of the Pittsburgh chapter of Girl Develop It where I get to help super cool women enhance their web design and coding skills.

On Nov 9 from 11am to 3pm EST I’ll be here answering your questions. Ask me anything about web animation, UI animation, or getting started in web design and I’ll give you my best answer. Let’s have some fun!

6 comments

  • Benoit Massé, 7 years ago

    Hi Val, Thanks for sharing your time :) I'm a UI and motion designer, and I'm use to (and love) timeline animations. It help visualize the timings and make finer adjustments. But I'm not satisfied with any prototyping tool so far. Principles is nice but limited, Framer is interesting but complicated, Origami Studio as well. Mitya is promising but still young, XD is way too primitive, etc, etc, etc. On top of that, with these tools you have to recreate everything everytime.

    I should probably learn how to code my own animations and interactions, but I feel I'll loose a lot of time on coding instead of animating and designing.

    I feel stuck. Are you comfortable with your workflow ? Am I missing some valuable tips?

    Thanks!

    5 points
    • Val Head, 7 years ago

      Hi Benoit!

      I think there are a lot of designers in your same position. Folks who have tried out all the tools that are currently available for designing motion ideas with visual tools and finding that none of them quite fit their workflow. I don't think you're missing something. I think the tool that really fits the needs of UI motion designers hasn't been built yet.

      I think it'd be beneficial to learn how to code your own animations, if nothing else, because it's fun an interesting to see how things work on the code side too. But I don't think that should be required for designers to design animation. Especially since animation is such a visual task. A visual tool seems fitting. We just don't see to have that tool yet.

      The yet is the big part there. There are new tools in the works. Some we know about and some we probably don't know about yet. Personally I'm excited to see what InVision comes up with for their deeper motion tools. From what I've heard, they seem to be on to something good.

      Personally, I've used Framer and Principle a lot for projects with longer timelines where having to re-built the animations for production wouldn't be a huge issue. (Framer is making some big steps to becoming more non-coder friendly.) Whenever possible though, I try to prototype my animations in code. Most of the time this not beautiful production code, but code that's a bit messy except for the motion bits. Then I work with developers to fit the motion parts into proper production code. That tends to work best for me for web projects, but everyone and every team has different ways of working. I'm happy to see lots of work happening on these tools we have so far and the promise of new tools coming soon to give us more workflow options. We really need them.

      3 points
  • Pablo StanleyPablo Stanley, 7 years ago

    Could you share a designer horror story? Or something embarrassing that happened to you working in the field? :) Thank you!

    2 points
  • Mike Mitchell, 7 years ago

    Yeahhh! I saw you talk at Render Conf in Oxford and your talk was awesome.

    I recently created a small multi-scene animation with Sketch, which was exported as a single SVG and animated with GSAP (each "scene" was a different group within the SVG). The biggest problem I had was trying to keep the SVG editable in Sketch after it had been edited in Sublime Text. Whenever I exported after editing it would break / render not as expected.

    I'm guessing having everything in one big SVG was a bit of a dumb idea, but do you have any tips for how to best organise source files for this kind of project, and how to make sure edits can be made without too much pain afterwards?

    1 point
    • Val Head, 7 years ago (edited 7 years ago )

      Hi Mike!

      I'm so glad you liked my talk at Render! That was a fun one :) And a great conference too.

      Having everything in one big SVG isn't a dumb idea. That approach can work well when you need to keep everything contained in one place. Optimizing and organizing an SVG for animation can been the most time consuming part of animating them. Especially for complex scenes or illustrations.

      Personally, I find the workflow for SVG to animation to be easier with Illustrator than Sketch. Illustrator has some more capable optimization and exporting tools to make the SVG output easier to work with. Even when saving it out multiple times because of updates or changes. I like Sketch a lot, but it still seems to do weird things with my SVGs that gets in the way of animating them.

      An SVG optimizer can also be helpful to neaten up the SVG code and make more readable and easier to animate. https://jakearchibald.github.io/svgomg/ and http://petercollingridge.appspot.com/svg-optimiser are my favourites. It sometimes takes a few tries to get a balance between and SVG that is too optimized and one you can animate logically. (Sometimes the optimizers simplify shapes too much or change simple shapes into paths which can interfere with your animation plans.)

      SVGOMG will save out an image file from SVG code you paste in too. That has saved me a couple of times when the source image was lost or the SVG was changed significantly inline. :)

      1 point
  • Shunsuke Kawai, 7 years ago

    Wonderful ! I hope to be held in Japan too.

    0 points