Animating the User Experience Workshop

Val Head
Designer & Interface Animation Consultant
Author, "A Pocket Guide to CSS Animations" (2013) & "Designing Interface Animations" (to be published this year, Rosenfeld Media)

Great 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 prototype and design animations using CSS animation, then evaluate our designs as a group. By the end of the day you’ll be an 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 in this workshop

• The basics of animating with CSS and using it to prototype animation ideas
• The brain benefits of animation
• Design problems animation can solve
• Storyboarding & prototyping interface animation
• Traditional animation techniques worth stealing
• Principles of interactive animation 

What you'll need for the workshop
No prior experience with web animation is required, but a basic knowledge of HTML and CSS is recommended. Familiarity with JavaScript may be helpful but also not required.

A laptop with a text editor and a current version of Chrome or Firefox will be needed to participate in the workshop exercises. A (free) Codepen.io account will be necessary to follow along with the exercises’ starter code and demos.

Schedule

This is a full-day workshop.

Breakfast and lunch will be provided. Please let us know if you have dietary restrictions. We'll have an "All-American" buffet breakfast in the morning and an assortment of boxed lunches (turkey club/roasted vegetable wrap/roast beef ciabatta).

• 8:45am-9:30am Breakfast and networking
• 11am Morning break
• Noon Lunch break
• 4pm Afternoon break
• 5pm Wrap-up