Animation at Work
()
About this ebook
Animation isn't merely decorative-it's an invaluable tool for creating a better web. Start with science: by understanding the human visual processing system, you can design delightful animation that works to ease cognitive load. Rachel Nabors guides you through the anatomy of web animations, patterns, and communication decisions across teams. Th
Rachel Nabors
Rachel Nabors got into interaction development and web standards after an award-winning career in web comics. She's worked with Mozilla, the W3C, and Microsoft, stewarding all things web animations from APIs, to browser tooling, to community. She put the "motion design" in design systems at Booking and Salesforce. Currently she works on documentation, learning resources, and community development on the React Core team at Facebook, keeping her close to her greatest loves: visual storytelling, helping people learn and thrive, and comp and rendering processes. Best of all: she still draws comics.
Related to Animation at Work
Related ebooks
Designing Interface Animation: Improving the User Experience Through Animation Rating: 0 out of 5 stars0 ratingsDesigning UX: Prototyping: Because Modern Design is Never Static Rating: 0 out of 5 stars0 ratingsConversational Design Rating: 0 out of 5 stars0 ratingsWho Is the UX Writer? Rating: 0 out of 5 stars0 ratingsDesigning for Touch Rating: 0 out of 5 stars0 ratingsThe iPhone App Design Manual: Create Perfect Designs for Effortless Coding and App Store Success Rating: 0 out of 5 stars0 ratingsCreating Digital Animations: Animate Stories with Scratch! Rating: 0 out of 5 stars0 ratingsWhat Next? Rating: 0 out of 5 stars0 ratings.NET Developer's Guide to Augmented Reality in iOS: Building Immersive Apps Using Xamarin, ARKit, and C# Rating: 0 out of 5 stars0 ratingsGirl Code Revolution: Profiles and Projects to Inspire Coders Rating: 5 out of 5 stars5/5Image Performance Rating: 0 out of 5 stars0 ratingsThe Mobile Frontier: A Guide for Designing Mobile Experiences Rating: 3 out of 5 stars3/5Starting Up: A Non-Programmers Guide to Building a IT / Tech Company Rating: 0 out of 5 stars0 ratingsThe Freelance Animator: Freelance Jobs and Their Profiles, #1 Rating: 0 out of 5 stars0 ratingsBeyond UX Design: Master Your Craft Beyond Pixels and Prototypes Rating: 0 out of 5 stars0 ratingsCreate an Animation with Scratch Rating: 0 out of 5 stars0 ratingsPractical Webix: Learn to Expedite and Improve your Web Development Rating: 0 out of 5 stars0 ratingsUnity AI Programming Essentials Rating: 0 out of 5 stars0 ratingsMobile First Rating: 0 out of 5 stars0 ratingsMobile App Manual: The Blueprint: How to Start Creating Mobile Apps Using jQuery Mobile and PhoneGap Build Rating: 3 out of 5 stars3/5Everyday UX: 10 Successful UX Designers Share Their Tales, Tools, and Tips for Success Rating: 5 out of 5 stars5/5Creating the Intangible Enterprise: The Critical Skills Required to Thrive in an AI-Driven World Rating: 0 out of 5 stars0 ratingsResponsible Responsive Design Rating: 0 out of 5 stars0 ratingsA Pocket Guide to Creating Symbol Fonts Rating: 0 out of 5 stars0 ratingsProject Management in the Real World: Explaining All This Nonsense About Project Management in Plain English Rating: 0 out of 5 stars0 ratingsCloud Engineering for Beginners Rating: 0 out of 5 stars0 ratingsInteractive Design Beyond the Desktop: User Experience Defined By Aesthetics Rating: 0 out of 5 stars0 ratingsAI and UX: Why Artificial Intelligence Needs User Experience Rating: 0 out of 5 stars0 ratings
Applications & Software For You
Logic Pro X For Dummies Rating: 0 out of 5 stars0 ratingsThe Best Hacking Tricks for Beginners Rating: 4 out of 5 stars4/5Excel : The Ultimate Comprehensive Step-By-Step Guide to the Basics of Excel Programming: 1 Rating: 5 out of 5 stars5/5Blender 3D Basics Beginner's Guide Second Edition Rating: 5 out of 5 stars5/5How to Create Cpn Numbers the Right way: A Step by Step Guide to Creating cpn Numbers Legally Rating: 4 out of 5 stars4/5Data Visualization: A Practical Introduction Rating: 5 out of 5 stars5/5GarageBand For Dummies Rating: 5 out of 5 stars5/5Learn to Code. Get a Job. The Ultimate Guide to Learning and Getting Hired as a Developer. Rating: 5 out of 5 stars5/5Sound Design for Filmmakers: Film School Sound Rating: 5 out of 5 stars5/5The Most Concise Step-By-Step Guide To ChatGPT Ever Rating: 3 out of 5 stars3/5Synthesizer Cookbook: How to Use Filters: Sound Design for Beginners, #2 Rating: 3 out of 5 stars3/5Kodi User Manual: Watch Unlimited Movies & TV shows for free on Your PC, Mac or Android Devices Rating: 0 out of 5 stars0 ratingsThe Little SAS Book: A Primer, Sixth Edition Rating: 5 out of 5 stars5/5Adobe Illustrator: A Complete Course and Compendium of Features Rating: 0 out of 5 stars0 ratingsAdobe Premiere Pro: A Complete Course and Compendium of Features Rating: 0 out of 5 stars0 ratingsHow Do I Do That In InDesign? Rating: 5 out of 5 stars5/5Canon EOS Rebel T7/2000D For Dummies Rating: 0 out of 5 stars0 ratingsSix Figure Blogging In 3 Months Rating: 3 out of 5 stars3/5Gray Hat Hacking the Ethical Hacker's Rating: 5 out of 5 stars5/5Blender 3D By Example Rating: 4 out of 5 stars4/5Beautiful eBooks With Scrivener Rating: 4 out of 5 stars4/5Power OneNote Rating: 4 out of 5 stars4/5Adobe Photoshop: A Complete Course and Compendium of Features Rating: 5 out of 5 stars5/5Creating Apps: The Guide for Ordinary People Rating: 0 out of 5 stars0 ratingsOneNote Recipes: Elegant Techniques for Problem Solving and Visual Thinking Rating: 5 out of 5 stars5/5Start Your Own Podcast Business: Your Step-By-Step Guide to Success Rating: 5 out of 5 stars5/5
Reviews for Animation at Work
0 ratings0 reviews
Book preview
Animation at Work - Rachel Nabors
Foreword
When I first saw
Toy Story in 1995, I immediately knew I wanted to be an animator. Years later, I went to college for it, where I learned a lot—including the fact that, although I liked animation, it didn’t like me back. I took, and enjoyed, classes that talked to me about squash and stretch, anticipation, secondary actions, and all the principles that drew me to cartoons and movies in the first place. But I just didn’t like being an animator.
Luckily, I stumbled into a blossoming field then called interactive design.
I finished school with knowledge of typography and HTML and Flash and white space, and spent the next decade designing websites instead of animations. During that same time, Flash animation was gratuitously used and abused, often getting in the way of what people actually wanted to do on the web—and giving digital animation as a whole a bad name.
Then the iPhone came out.
Suddenly, we realized that animation isn’t just a nice-to-have; it can actually help us. It can show us where things come from and where things go. It can calm us down and excite us. We’ve now seen the value of animation in interface design, and we’re primed to integrate it into our own work.
If words and phrases like animatics
or frame rates
aren’t familiar to you, have no fear: this book will get you up to speed in no time. Rachel’s thorough approach doesn’t just tell you what animation is but, more importantly, why it works. She’ll show you how brains and eyes work, the historical context of web animation, tips for collaborating with colleagues to get the work done, and much more.
Without further ado, welcome to animation at work.
—Dan Mall
To Joe, the best cheerleader and support crew I could ask for.
Introduction
Before I worked in web development, I was an award-winning cartoonist. I always wanted to see my comics moving on a screen—but I ended up moving interfaces on a screen instead!
It was a long journey to get from telling stories with words and pictures to sharing other people’s stories with code and pixels. And, at first, I struggled to explain the importance of purposeful animation, to justify expending effort on it to stakeholders burned by Flash. This is the book I wish I’d had when I started.
This is not a book about what JavaScript library to use, how to write CSS transitions, or how to create performant animations with browser developer tools. There are a great many wonderful books about those topics already.
What this book does contain is distilled, timeless advice on why animation matters and when to put it to use on the web: where to incorporate it into designs, how to communicate it across teams with different skillsets, and how to implement it responsibly. My intention is for this book to empower you and your teammates to make informed, long-term decisions about what to animate—or not animate.
It answers all the questions bosses, clients, and workshop attendees have asked me about UI animation over the years. It shines a light on the things we do know, and—perhaps most crucially—it points out what we don’t know. (And there’s a lot we don’t know.)
Before we go too far, let me clear up some terminology. We are bandying about the terms motion design
and UI animation
and web animation
a lot these days. Sometimes we even use them synonymously! But there are some big differences worth clarifying.
Animation is the act of changing something—animating it. Animation is not limited to motion: you can change something’s color or opacity or even morph it into a new shape without moving it.
Motion design is a branch of animation and/or graphic design, depending on your perspective. You could say that motion design is to animation what graphic design is to illustration: the latter serves as a form of expression and communication, storytelling, and art, whereas the former exists to convey and serve the information it’s delivering to its audience. Motion designers create a wide range of animations, from movie credit sequences to interstitials for television news to explainer videos.
UI animation refers to animating user interfaces on any device, from DVD menus to iPhone apps to dropdown menus on the web. Even a light swirling on your smartwatch or a screen wipe on your eInk reader is a kind of UIanimation.
Web animation encompasses animation, motion design, and UI animation used on the web. Web animations are implemented with technologies like CSS, HTML, WebGL, SVG, and JavaScript.
To fully understand animation and its implications for the future of web design, we must first examine the roots of animation itself.
The illusion of life
When most folks think of animation,
the first thing to spring to mind is often a cartoon character like Mickey Mouse or Sailor Moon. But those are just examples of animation applied to illustration. Animation itself is a visual representation of change over time. And it has some powerful applications. Applied with precision, it can enrich digital environments and help users make smarter, faster decisions.