PIXEL UP! LogoPixel Up!May 8-10, 2017

Val Head

Designer & Author

Image of Val Head

Val's Talk

Designing meaningful animation

09:00 on Tuesday, 9 May in Cavalli Main Hall

Motion design has become a necessary skill for designing and building the modern web. The character and energy that motion brings to an interface is becoming as expected on the web as it is in other media.

Great web animation comes from thinking like a motion designer and brand steward, matching the motion we add to our message and design goals.

Learn key animation principles such as timing, offsets, and secondary action as they apply to interface design decisions—plus motion principles specific to designing animated interactions. Consider this your crash course on becoming a motion design pro!

Val's Workshop

Animating the User Experience

09:00 - 16:30 on Wednesday, 10 May at Workshop 17

The best UI animation has both purpose and style. In this workshop you’ll learn how to design and prototype interface animations that do both, and do them well.

You’ll learn how to identify where animation can improve the user experience and how to fit animation into your design process. Using hands-on projects we’ll plan and prototype animations, then evaluate our designs as a group. By the end of the day you’ll be a animation and UX pro!

This workshop is for product designers, web designers, and UX designers looking add animation to their work in meaningful ways.

What you’ll learn:

The brain benefits of animation How we can use animation to reduce cognitive load, free up brain power, and reduce change blindness in our work and the research that backs it up. Design problems animation can solve An in-depth look at the specific design problems animation can solve through providing feedback, exposing causality, orientation, showing relationships and demonstrating.

Prototyping with Keynote & storyboarding How to get your animation ideas on paper, on screen, and in front of your team or users to discuss, test and iterate. You’ll get up and running prototyping animated interactions with Keynote working with hands-on exercises and we’ll explore a range of animation solutions as a group.

UX Choreography The principles of choreography for interfaces. Should you aim for consistency or coherence? Should you match timing or velocity? Deciding these ahead of time helps you design strong choreography in your interfaces.

Documenting motion design decisions Guidelines and best practices of how to document your animation design decisions in your style guide or elsewhere for future use.

Traditional animation techniques worth stealing The classic animation principles that are most useful in our digital world. We’ll look at which ones matter most and how they translate to UX and the digital space.

Principles of interactive animation Animation should never get in the way of the task at hand. Val will show you how to be sure you’re animations are interruptible, non-blocking, and appropriately timed for interaction.

Motion makeovers We’ll take example interactions from existing products and sites and examine how their UX could be improved using animation.

About Val

Val is a web animation expert with a talent for getting designers and developers alike excited about the power of animation. She is the author of Designing Interface Animation published by Rosenfeld Media and teaches CSS Animation on lynda.com.

Val shares her passion for web animation as the host of the co-host of the Motion and Meaning podcast, and curator of the weekly UI Animation Newsletter.

A proud supporter of the web community, she co-founded the Web Design Day conference and runs Pittsburgh’s Girl Develop It Chapter. Val leads workshops at companies and conferences around the world on web animation and loves every minute of it.

Val on the web