Web Animation and Motion Design Training and Workshops

Available for training in house and at conferences

I teach from a place of creative coding and my rich history as an award-winning cartoonist. As a web designer turned front-end developer, I connect the silos of design, UX, and programming wherever I teach. This empathy for all parts of the human equation required for building a better web lets me engage all attendees, no matter their level or job title.
Let's talk about training!

Tactical Workshops (2-3 hours)

These workshops are short, to the point, and narrow in focus. The information contained is concentrated and powerful, designed to buff up a team’s problem areas.

Animation on the Brain: The how, when, and why of motion design


Designers, UXers

Flash may be dead, but animation was never the enemy. Like any tool, animation be used to improve the user experience… or to make it worse. With operating systems, games, and apps doing so many things right with motion design, isn’t it time we bent the practice to our own ends as well? In this workshop, Rachel Nabors shows how properly designed animation can be used to both guide and inform users without getting in their way.

Key take aways

  • How to employ animation to benefit and guide your users
  • The science behind how animation improves user task flow, perceived performance, and boosts brain processing
  • Six must-have key concepts behind animating interactive components of a web site
  • Best practices you shouldn’t animate without

Animation Essentials: CSS Animations and Transitions


For Web Developers, Designers

For many designers and front-end developers, CSS animations and transitions are the first stop in a long journey of motion design discovery. What seems simple at first glance is actually riddled with new concepts like easing and hardware acceleration. This cat-themed workshop gives students hands-on exercises mastering the basics while exposing some of the core theories of traditional animation and some of the more complex performance topics.

Key take aways

  • Handle and manipulate play state
  • Animate spritesheets with only a few lines of code
  • Create your own custom timing functions
  • Add subtle parallax effects by transitioning transforms
  • Chain animations
  • Avoid and test for animation performance issues

Masterclass Workshops (1 day)

These workshops have time included for breaks, lunch, and sometimes a bonus lecture to be determined based on the audience’s needs. Having wider appeal than the Tactical Workshops, people from many departments are sure to learn something from attending. All Masterclasses are hands-on, with a generous mix of lecture and exercises.

Motion in Design and Development


For Web Developers, Designers who use JavaScript

Motion design is increasingly important for developing interactive designs and interfaces, and CSS and the Web Animation API offer some of the most performant ways to animate today. This workshop gives attendees the future-facing tools they need to bring their work to life. Rich with fun example code, demonstrations, and lectures, there’s a great mix here for people of all learning styles.

Key take aways

  • 3 kinds of animation and how to tackle them
  • 4 ways to put animation to work enhancing your site and UIs today
  • Mastery of CSS transitions and animations
  • How performance and rendering are intertwined
  • Spotting and fixing performance bottlenecks
  • Stateful Animation with JavaScript

Practical Cartooning for Technical People


For Web Developers, Designers, UXers, leadership

Most everyone can benefit from improving their communication skills. From designing a presentation to creating user stories to wireframing a sales page, most visual communication involves an element of storytelling. In this workshop, Rachel shares the secrets to successful storytelling she learned in her years in comics. It’s an intense, fun workshop that will improve attendees’ emotional communication, composition skills, and storytelling chops.

Optional workshop add-on includes art pouches full of all the tools attendees need to participate. Please inquire for pricing.

Also available online as a self-paces course for individuals.

Key take aways

  • How to give and take constructive feedback
  • Recognizing and conveying emotions on faces
  • Simple anatomy for getting ideas out quickly
  • Gestural drawing
  • Composition techniques from animation, film, and the old masters
  • Framing devices for conversations
  • Layout and flow tricks from comics
  • Choosing characters your audience will identify with
  • Growing a story from an idea to a beginning, middle, and end
  • 3 and 4-stage narrative arcs
  • How to test your story in a vacuum

Deluxe Workshops (5 days)

Deluxe workshops are custom designed around an entire team or department to help them reach their goals and overcome problem areas. These workshops are a mix of lecture, exercises, and most importantly, group problem solving.

The Ultimate Web Animation Training


For the entire team: UXers, Designers, Developers

  • 3 days of training on animation for: UX, design, and development
  • 1 day group workshop, all teams applying their new knowledge
  • 1 day consulting and hands on help with in house projects

Key take aways

  • Six must-have key concepts behind animating interactive components of a web site
  • How to employ animation to benefit and guide your users
  • The science behind how animation improves user task flow, perceived performance, and boosts brain processing
  • Principles and theories of traditional animation as applied to interfaces and design
  • Animation don’ts that distract and disorient users
  • Best practices for making animation so good, users won’t even notice it
  • Where and when to fit animation into your team’s workflow and process
  • How to communicate and document animation across your organization with motion style guides
Copyright © 2008 – 2019 Rachel Nabors