Simple Animation Adds That Will Make Your Website More Interesting5 cheap and easy ways to give your website some movement.
Often a website is the first point of contact consumers have with a small business. They may spend more time on it if it’s engaging. And one way to make it more engaging — and give your brand a personality boost — is by adding a bit of animation.
While large animation projects typically require a skilled designer, many DIY website platforms let you easily add a bit of movement to your site.
Here are five animation strategies that you can pull off yourself.
Related: Latest Website Design Trends Small Businesses Should Know About (With Examples)
Drop in a slideshow
Many sites use a slideshow or rotating carousel on the homepage to highlight best-selling products. Having images change every five seconds with a nice transition in between really draws the eye to that part of the website, said Chris Silich, director of interactive development at The Creative Circus, a marketing communications portfolio school in Atlanta. (Portfolio schools are for creative industries, such as web design, that typically require you to have a portfolio to get a job.)
Loop a silent background video
As an alternative to still images in headers and hero banners, many websites are starting to use video as a backdrop. Sites such as Pexels Video and Coverr offer a wide selection of free stock videos you can download. Coverr even provides an embed code for you to copy and paste, making it easy to add the video in.
Make the cart icon jump or pulsate
Another benefit of using animation is that it helps communicate relationships between things on the page, said Silich. “If the user clicks a button that says ‘Buy Now’ and then the little cart icon in the corner does a tiny jump or pulsates with a little animation, it shows the user that’s where they need to go next.”
Related: Why Shoppers Abandon Online Shopping Carts and What to Do About It
Make your photos pop with GIFs
Instead of full-scale animations and large video files, you can add movement by creating GIF images using several photos or a short video clip. While you may associate these moving pictures with social media, GIFs can also be professional if you want them to be. Many GIF-makers, such as Giphy and Imgflip, are both free and easy to use.
Leverage the mouse hover
Many website themes in WordPress and similar sites let you change the display of text or an image when it’s hovered over. This strategy is a way to make your site not only more exciting but more interactive.
Hatmaker Optimo uses tiny animations to accentuate a hat when the mouse travels over the image. When the user mouses over a particular hat, it tilts slightly. Silich said, “It’s almost like a salesperson in a store welcoming you with a nice handshake and saying, ‘Here, this is the hat for you.’”
The Creative Circus uses this technique on its own website to make the faculty and staff page more interactive. Hovering over the photo of a team member turns the black-and-white image to color (and indicates a hyperlink).
Keep in mind that more is not always better. “It’s very easy to go too far with animations,” Silich said. Because movement draws attention, too much of it can distract from the message of your brand.