Animation on the web is a tremendously hot topic. The techniques for implementing animations are not new, but as it has become more prevalent, the topic has captured the attention of the design industry. In my last post, I discussed the future of illustration on the web, which addresses the use of animated illustrations on the web.
Here I will to revisit the topic of animation, but instead focus on the more supporting role it can play in web design. I consider this type of illustration to be decorative in nature. These kinds of animations contribute to the overall experience, but they are seldom the focal point of the design. Let’s dive in and dissect what is happening in some lovely examples that play different supporting roles.
Animation to communicate functionality
http://www.calvinharris.co.uk/gb/home
When we think of animation, we often think of a more radical usage of the element. In the example above, you can see that the animation is a subtle nuance of the design. Here, the animation of the navicon changing into an X helps the user understand how to close the panel. The animated transition makes the change in the icon’s purpose clearer to the user. In this case, a subtle animation leads to better usability and a less cluttered interface by having one element perform two functions. And, of course, the panel itself slides out as an animation, which also helps the user understand the interface.
This example illustrates the same effect. It does have one extra twist, however: when the user hovers over the navicon, it expands slightly in a beautiful, subtle way. In this case, the supporting animation plays into the overall usability of the interface, making it feel fun and almost playful while still clearly communicating its function.
Animation to indicate changes
https://dribbble.com/shots/1507529-Form
I don’t usually cite examples found on Dribbble, but in this case I will make an exception. Here, the use of animation allows for an unusual interaction: A multi-field form is condensed into a single space. Animation is the key to making this possible. I am not necessarily suggesting you use this approach, but it’s inspiring to see how others are pushing boundaries and thinking outside the box.
https://www.theloop.com.au/app/login
In this example, the animation also indicates changes in the interface. When the user clicks into a field, a subtle glow appears. Highlighting an active field is good form, and doing so with animation gives it a slick look—a smooth change instead of an abrupt, immediate one.
Animation as pure decoration
If we are considering animation as a decorative or supporting element, then we must observe samples where the animation is nothing more than a decorative element. Here we find just such a case. Yes, the animation and its contents reflect the content, but it is not critical to the site. It is there to beautify and decorate.
Animation for storytelling
One common use of decorative animation is to help tell a story. In this example, the animation comes to life as the user scrolls through the designer’s work. The animation isn’t crucial, and the design is beautiful on its own, but the animation adds that extra dash of awesome sauce that pushes it over the edge, bringing the design to life in a subtle and friendly way.
Animation and hover states
http://thenorthalliance.com/family-members/
One of the most common places you’ll find animation as a decorative element on the web is in hover states. This particular sample is unusual because the animation has been applied to a normal link.
http://www.calvinharris.co.uk/gb/home
In this example, we see the same idea at work. The simple hyperlink is transformed into a fun interactive element that brings an extra bit of life to the design. It isn’t crucial, and you might even say it is frivolous. And yet, it speaks volumes about the attention to detail the designer put into it, and since this is a portfolio site, the details are especially crucial.
Examples like the one above are great fun because the over-the-top design demonstrates how something as boring as socks can be presented cleverly. Now, I may not necessarily want to buy these kitschy socks, but the whimsical design certainly appeals to those who enjoy offbeat accessories. The animation complements the quirky patterns of the socks.
On the same website, we also find this strange little Easter egg in the navigation. Is the detail necessary? Not really. Does the animation really add anything to the usability of the site? Probably not. Is it an awesome detail that transforms a super simple design element into a fantastic one? Definitely.
Conclusion
Animation can be used in countl
ess ways. Sometimes it’s in-your-face, while in other cases it is so natural and perfectly placed that you don’t even notice it happening. In my opinion, the latter is an art form worthy of consideration. As we design rich interfaces, we much always be aware of the finer details that bring our creations to life. Animations can give your web designs that extra spark and improve overall usability. As you approach your next project, carefully consider if animation is the missing ingredient.