Here, the use of animation allows for an unusual interaction: A multi-field form is condensed into a single space.
I don’t usually cite examples found on Dribbble, but in this case I will make an exception. 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. It does have one extra twist, however: when the user hovers over the navicon, it expands slightly in a beautiful, subtle way. This example illustrates the same effect. And, of course, the panel itself slides out as an animation, which also helps the user understand the interface. In this case, a subtle animation leads to better usability and a less cluttered interface by having one element perform two functions. The animated transition makes the change in the icon’s purpose clearer to the user.
WEB DESIGN ANIMATION HOW TO
Here, the animation of the navicon changing into an X helps the user understand how to close the panel. In the example above, you can see that the animation is a subtle nuance of the design.
When we think of animation, we often think of a more radical usage of the element. Let’s dive in and dissect what is happening in some lovely examples that play different supporting roles. These kinds of animations contribute to the overall experience, but they are seldom the focal point of the design. I consider this type of illustration to be decorative in nature. Here I will to revisit the topic of animation, but instead focus on the more supporting role it can play in web design. In my last post, I discussed the future of illustration on the web, which addresses the use of animated illustrations on the web. 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. Animation on the web is a tremendously hot topic.
0 kommentar(er)
