| Jun 23, 2016
Start Web Animations Early: A Study Guide
As a Front End developer, my job crosses over many disciplines, but this post is not about what a Front End developer/designer does (you can read a great article by Brad Frost on the topic to understand more about this balancing act). During the development of a web site, the front end plays key roles throughout the process. Traditionally the front end was reserved for the post-design states of a project, but more and more, we are seeing the front end discussed and thought about earlier. Depending on the organization or team, the front end can be introduced as early as the beginnings of content strategy, site map development, or wireframing.
These early front ends are usually grayscale websites with placeholder images and Lorem Ipsum text. The ‘polishing’ of a site with elements like color, drops shadows, gradients, and animations are usually reserved for later. But recently I have found myself adding more and more motion throughout all stages of the project especially the early wireframes. For the same reason we make responsive wireframes to review with a working site instead of printouts or PDFs, getting a feel for the site and how it moves and flows is important.
Now, beside the simple CSS transitions and keyframe animations I am still a novice, but thankfully there is a wealth of resources available for us to learn from:
Want to learn about animation? Learn from the master, Walt Disney.
- The Illusion of Life by Cento Lodigiani
- What Disney’s Classic Animation Principles Could Teach Web Designers (by Val Head)
Google’s newest design philosophy, Material Design, has a wealth of information on using animation to assist users throughout their software.
- Discover the expanded Material Design motion guidelines (Google I/O 2016)
- Material motion (from Google Design Guidelines)
Similar to Google, Apple has their own philosophy on animations within their software.
Lastly, Val Head is a developer/writer/speaker that focuses on animation and has plenty of great resources out there, here are just a few
- CSS Animation Pocket Guide (Free EBook)
- Designing Safer Web Animation For Motion Sensitivity (A List Apart)
Introducing basic animations into a project’s early phase has a minimal cost but can increase the comprehension of a user in these somewhat abstract deliverables, like a grayscale wireframe. In the end, these animations should always promote and enhance the user experience not distract or deter … save the Emoji Fireworks for a special occasion.