6 Basic Principles For Using Animation In Web Design
When you’re trying to design an eye catching website you need to make it dynamic, animations are one of the best ways to do that. If you’ve just got a static web page that doesn’t have any animations on there, people are going to get bored with it pretty quickly and it won’t leave a lasting impression. But if you make good use of animations, you’ll create a unique site that people will actually respond to. However, it’s easy to get it wrong when you’re trying to use animation in web design and if you make mistakes, you’ll end up making a site that is annoying to use and far too cluttered.
If you want to master the art of using animation for web design, you need to adhere to some basic principles and rules. Here’s what you need to remember if you’re going to use animation effectively in web design.
What is website animation?
Before we get into the basic principles of website animation, let’s look at what it actually refers to. There are a lot of larger animations that you find on websites, especially ones that aren’t using a traditional layout. But even on more traditional websites, there are a lot of smaller animations. It’s these tiny details that really make a website stand out, not the big flashy animations. Think about links, for example. A standard link without animation looks cheap and outdated. Even a small hover animation before the user clicks gives the impression of quality. Some animations, such as the ‘like’ feature on social media, become iconic.
When you’re thinking about using animation, don’t focus on big stuff. Consider all of the small animations that the user barely notices, they’re the ones that elevate the quality of a website.
Now that you’ve got a bit of an idea of what the best website animations look like, here’s how you can create your own.
Focus on maintenance
Broken animations on a website can really ruin it which is why maintenance is essential if you’re using animations. That’s why it’s important that once built, the website is managed and maintained by a good web design company. Use Web Design Review sites to find reliable companies that can handle that level of maintenance and ensure that your website animations are always working correctly.
Only change certain properties
If you’re running a lot of animations on one webpage, you need to make them as simple as possible so everything works smoothly. That’s why you should only change certain properties. For example, if you want to make something smaller, you could change the width. But it’s easier for the computer to handle the animation if you use the transform function instead. You can also use the transform function to move the position of objects.
Don’t animate everything at the same time
Choosing the right functions to alter is important for making sure that animations work well, but you need to be careful with how many you’re running at the same time. If somebody opens a page and there are hundreds of tiny animations all loading at the same time, it’s way more likely to crash. Running 2 or 3 animations at the same time is usually fine but any more than that and you’re entering dangerous territory. You need to schedule the animations properly so you’ve only got a couple loading at one time. When you’re scheduling animations, you need to consider the page as a whole and each animation as a part of that page. The order which you animate things in is a lot more important than people realize. Think about how it will actually look when it loads and have things animate like a choreographed dance.
It’s also important that you think about the larger items. For example, if you’re playing stock footage on your site, you need to load the player first before you start trying to load other animations.
Design in slow motion
Choreographing all of those animations is difficult but you can make it easier if you design them in slow motion and then see how they perform when you speed them up. If you do it that way, you’ll be able to find the right speed for each animation and make sure that they’re all in sync with one another. Then you can speed the whole thing up and it’ll run smoothly. This is especially helpful if you’re trying to choreograph a lot of separate animations at once.
This is also a good technique for identifying any animations that don’t work properly. If you can’t get it to run smoothly at 1/10 speed, you’re never going to get them to work properly at normal speed. You can save yourself time by picking up on these issues and trying to create the animation in another way so it works better at full speed.
Some animation software will have a slow motion feature built in so look out for it when you’re trying to organize your website animations.
Video your animations and watch them back
This might sound like a bit of a strange idea but it actually works very well. When you’re watching animations back, it’s difficult to see if they’re working exactly as you want them to be. When you take a video of them and watch it back a few times over, you’ll begin to pick up on any timing issues a lot easier. It gives you a new perspective and it also gives you more of an opportunity to slow things down a bit and see how they work.
You can use this technique to look at specific animations as well as looking at the page as a whole. If you’re trying to test an entire page, you’re bound to miss some of the animations so having a video to replay is a massive help here.
When you’re trying to use animation in web design, don’t go overboard and pack out your page with a load of in your face animations. Be selective and make sure that you’re focusing on usability above all else.
