One of the trends proclaimed for this and next year are transitions and animations. You can already see many examples of websites using these new CSS3 modules. Some of these websites use them slightly while others more heavily. What remains the same among web designers is the philosophy behind the way of using them. This is something that has to change. Let’s discuss more in-depth how transitions and animations can enhance overall experience from browsing the web.
At first, transitions and animations might look like a cheap effects to entertain users or to get their attention. This premise is a big mistake. Thinking in such a small degree have no real benefits for either you users, clients or you. This way, you are just wasting the bandwidth and resources available on devices used by users. What’s more, in case of slow connection – not everyone has high-speed broadband, it will cause to expand loading time of the website.
Instead of this “decoration” thinking let’s switch to “enhance” thing. With this type of thinking you can use transition and animations in your projects in much better way than the majority of people. Try to think about animating various actions on the website. These actions can range from simple buttons and scrolling through content to browsing individual pages. It still might seem like overdecorating a Christmas tree. However, there is a subtle difference. In this case, we are using these CSS features to make interactions between user and website more natural and friendly. To make it more clear, below are some examples.
One of examples on how can you use animations is to enhance moving from post to another on blogs or news sites. Imagine it like a simulation of reading through the physical newspapers (yes, those made from paper). Instead of turning real pages by your hands, you can create sliding effect on website to mimic it. More commonly used example is to soften the transitions between states off buttons on website. Animated transition between the states is often more pleasant than jumping from one to another.
This also works great when elements change their size or shape. It is actually one of the things I like on Google’s Material design. They did great job in connecting individual behaviors of individual layers precisely through animations. When you take a look at some examples of interfaces using Material design, you can see this effect very often. It makes switching between tabs or whole pages more friendly and natural as well. Apply this on your website or project and your users will enjoy browsing more, at least some of them.
If you are working on something more complex or even creating some app, you can use animations and transitions to enhance interactions as simple as adding or removing content. For example, think about plain swipe gesture for removing something in mobile app. Another example from the world of apps can be scrolling through list of things to do. Sure, you can leave it static, but when you add animation, user will more likely use the app.
It might seem crazy, but many users do base their decisions only on design and friendliness of interface. They don’t care that much about functionality, instead they prioritize good and user-friendly design. Please, don’t get me wrong here. I’m not suggesting you to flush functionality into toilet for the sake of design. That would be nonsense. Remember that design has to be functional in order to last.
Don’t try to use animate every single element on the page. That would be just amateurish mistake. As with everything, making these decisions too is a skill to be learned. After some time of practicing design and going through trial & error you will get much better in it and you will naturally feel where you can use animation or transition to enhance this or that element. Give it a time and allow yourself to fall flat on your face. Play with animations and transitions, with different duration and timing functions. You can also utilize delays and create more complex animations. Also, don’t keep yourself inside closed box. Take a look at good and bad examples of using animations on the web to learn more and let yourself to be inspired by them.
Summary
Animations and transitions should not be used just as fancy decoration to make your website look cool or modern. They can be used to make interactions like switching between various states more natural and to make user experience better, more pleasant. You can use animations and transitions to make your project more user-friendly and feel more natural. Think about these new CSS modules more like about creative ways to enhance impression users (visitors) will get while browsing the content on your website instead of a way to suck all available bandwidth and resources of their devices. Learn more about these modules, practice them, master them. Be creative and produce something new.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
