Animated Icons
Well crafted, refined icons are versatile. They are concise but powerful visual cue. They are easy to put any place in any size. And If they dance delightfully responding to the mouse input, it'll definitely take user's attention.
Here are a tile-design for a dashboard. Each tile contains handful of information and I spiced them up with the animated icons which is designed to be triggered by mouse hover event. It enhances the visual appeal and improves the user engagement.
I crafted icons on Adobe Illustrator with the next animation work in mind. And each element that will be animated in HTML is exported as a seperate SVG file accordingly.
First I placed them on the right position using CSS and gave the proper class name. Once static design is perfectly aligned on the page, I animated them with CSS and made the animation activated by mouse hover event. And I also some shadow effect to the wrapper so that the animated section can stand out even more.
Responsive design is always crucial. For the mobile screen, I tweaked the layout and the size of each design element using CSS media query.