When you create a web page, you use tools like fonts, colors, photos, illustrations and shapes to draw attention to important parts and guide the user on how to use your page. Another tool that you can add to help convey information is animation. Animation allows you to add movement or motion on your page. People are hardwired to respond and react to movement. By adding animation, we can use it as another technique for communicating with our users.
Why use animation?
Animation helps you to draw people’s attention the part of the page that has changed, show users where to look next or highlight the arrival or removal of important information. You can use it for telling a story, branding and improving your user’s experience.
What do you need to remember when adding animation?
Don’t animate everything. Use it sparingly. Animation should help guide people on using your page not distract or confuse them.
Make sure it fits with your style or brand. If you are playful and not serious, you can use animation that has a playful aspect. If you are more serious, you want your animation to be simple and functional.
Don’t assume that your animation will work on all devices. You need to test, test and test again.
What kind of animations can I use?
You can add animations to a dashboard, web app or mobile only features. One popular method is to change the hamburger menu to an X. This change lets the user know that the menu can be closed. You can add animations to images on hover or in a gallery.
An easy to read dashboard has from 5-9 pieces of information on it. By combining color, fonts and icons, you can make a dashboard simple and easy to use. I found these three examples on CodePen that you can use to inspire your own designs.
Bootstrap 4 Dashboard Stats Example
Bootstrap Dashboard Indicators
When you design a dashboard, you’ll need to use different type of indictors to display information. Herman Starikov shows you how to use Bootstrap to create different indicators. He combines Font Awesome, Flexbox and CSS Animation. Herman also uses icons as decorative background elements. With CSS and Animation, your dashboard doesn’t have to be plain or boring.
Full Dashboard Design