Animation in web design

When you hear the phrase, “Animation in Web Design,” do images of bouncing balls pop in your mind? You remember, the gratuitous design elements of yesteryear that had absolutely nothing to do with functionality, user experience, or site design-- animation that was only there to say, “Hey, I’m a cutting edge designer. Look at the cool tricks I can copy and paste from a clip art gallery site.” (Which is, by the way, how I found this little gem. Yes, these sites are still around.)

 

Let me start off by saying we are not attempting to recreate this type of animation in the scope of this article. In fact, we’re going to just scroll the page down a little bit to obscure the annoyance of a constant ball animation loop, and get to the good stuff.

---

The Good Stuff

Animation is making a comeback, and it’s not out of a clip art box. These days, animation tends to be more tailored and organic to the site’s design. It’s not just randomly thrown in as a cheap gimmick, instead it’s part of the overall user experience. It’s never useless, but it should be an important part of the design.

---

First Things First

One of the most important things to keep in mind when you consider animating your website is your audience. Who is your audience, what type of animation will they like, and what will make them roll their eyes? While a tech savvy audience may enjoy unconventional navigation on an experimental site, that type of animation may not go over well on a site that sells scrapbooking supplies to your aunt. This is not to say that your site can’t benefit from animation. Just consider what animation will make your audience feel comfortable and involved in your site.

---

Animation for Everyone

You don’t have to work at Pixar to implement simple animation elements on your website. These days, animation is easily handled in CSS. Although JavaScript is sometimes required for more complicated animations, you can mostly avoid it. Not sure what CSS is? It’s short for Cascading Style Sheets, and it’s how you dress up HTML and make it look fancy.

---

Don’t Be Overly Gratuitous

Good design is more functional than gratuitous. But there’s always room for beautiful delight. This is where animation comes in. Although it may not be a necessary component, animation can be a moving one (no pun intended). Check out GilGul's homepage here This is a great example of a cinemagraph. It’s a slice of life, a striking image, with a hint of animation. These moving images can really breathe life into your website. Imagine this image next to a blog entry or recipe about an apple tarte tatin with cinnamon and whisky cream. This optical illusion allows the reader to imagine the smells and flavours.

---

Animation can also refer to your brand. For example, this animated text fill:

It may be gratuitous, but logos often are. It should, however, harmonize with your brand message. This would be a fun logo for a barber shop. Remember to make everything feel connected. Don’t just throw an animation out there alone and in the cold-- connect to another element in your blog, whether it’s the story, the navigation, or the user interface.

---

 

Use Loaders

Although the Internet is definitely getting faster, there’s still complicated websites out there that take a long time to load. And audiences have absolutely no tolerance when it comes to load time. If your page takes longer than 5 seconds to load, you need to include an animated loader. Consider loaders like the following from CodePen. See the Pen Pure CSS Loaders kit by Viduthalai Mani (@viduthalai1947) on CodePen. Loaders distract your audience while you’re getting everything started. Try to keep loader animation to a simple loop, not a lengthy storyline that may cut off before the ending.

---

Animate For User Experience

You can animate your design so that users can intuitively experience your site. For example, use a mouse scroll animation to nudge users down the page. Or, make a button shiny to grab attention for an important link that may be missed otherwise.

---

Final Thoughts

Your website’s animation should be both fun and interactive. Although your animation may not be clickable, it should in some way engage the audience to action. What is your favorite web animation? [ssba]

---

Share:

Tags:

animation