Web animation training with Val Head

Get your team up and running with the latest web animation skills and interface animation design know-how.

I’m available to teach web animation workshops at your event or in-house for your internal team. I’ve run custom in-house workshops for folks like Shopify and Automattic and I’ve taught web animation workshops at conferences all over the world at conferences like UX London and Smashing Conf.

Current workshops I’m offering:
Web Animation: Essential Techniques
Animating the User Experience

Interested in having me run a workshop for your team or at your conference? Contact me for group rates.

I also have an online course on CSS Animation to get you started with web animation in a weekend!

Be the first to know when new workshops are booked!
Join my workshop notification list to get workshop dates, topic, and ticket info as they’re confirmed.


Val Head Workshop at FOWD London

Web Animation: Essential Techniques

Motion design is quickly becoming a necessary skill for anyone working on the web today. Designers and developers across the web are embracing the the power of web animation to engage and communicate.

This workshop will get you started with the essentials of web animation. It covers the basics of motion design theory as it applies to the web, and how to use animation to improve the user experience. In addition to the theory, we’ll use hands-on exercises to explore the similarities and difference of animating with CSS, JavaScript, and SVG. You’ll leave knowing how to bring your work to life with motion in meaningful ways and which web animation tool to use to get it done.

This workshop is for front end developers and web designers looking to dig into the code side of web animation while making quality motion design decisions for their work.

What you’ll learn:

Animating in CSS vs JavaScript
Using hands-on code exercises we’ll look at what animation tasks each of these are best at, how to choose between the two and how they can work together.

Animating SVG
We’ll animate SVG via CSS and Javascript and cover the most foolproof ways to animated SVG despite differences in browser support.

Animation and performance
Animation can have both real and perceived effects on performance. We’ll cover which properties browsers can animated most efficiently and how to improve perceived performance by adding animation.

How animation can improve UX
The design problems animation can help solve through providing feedback, showing causality, orientation, showing spatial relationships, guiding tasks and cueing. Examples of each will be reviewed and discussed to help you decide which techniques will be most useful for your work.

Classic animation techniques worth stealing
The 12 classic principles and other useful tried and true motion design techniques. We’ll look at the short list of ones matter most on the web, plus how they translate to UX and the digital space.

Principles of interactive animation
There is more to consider than just the classic principles for interface 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.

The future of web animation
What’s coming next, what’s almost here, and what you, yes you!, can do to influence the future of web animation.

New to web animation?
Try my online CSS Animation course to get you started with the web essentials in a weekend!


class-discussion

Animating the User Experience

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.

Be the first to know when new workshops are booked!
Join my workshop notification list to get workshop dates, topic, and ticket info as they’re confirmed.