Using animation to make your website design stand out
We are starting to see animation being integrated into web design more and more, from simple page transitions to fully interactive animated homepages. It was practically unheard of previously, but now it is becoming a bigger tool for web design. Are you wondering what it can do for you? When you think of animated websites your mind probably immediately jumps to large companies like Apple and Samsung, who have full interactive 3D elements responding to every movement of your mouse.
However, this is only one example out of the thousands of types of animations that can be used for web design. But why should you use animation with web design? Animation can open new avenues of creativity and design which is only possible through its unique aspect of “Motion and Movement”. With this aspect, you can breathe new life into a static scene, make objects and elements come to life and evoke emotional responses allowing your audience and clients to better connect with your views. Animated web design can help shake up the stale flow of static web design, and the introduction of motions can make important elements stand out and become memorable.
After all…
“You’re not supposed to animate drawings you’re supposed to animate feelings”
- Ollie Johnston
Let’s take a look through a couple of different examples of animated web design, from small elements to full-page designs.
Starting by covering a simple example, the “Hover State”. The hover state is a term used for when a computer mouse scrolls onto an element. It helps create a sense of interaction and allows the user to see the site is responding to their actions. This is a form of animation which is likely already being used on your site without you even realising it! The hover state is mainly used on elements such as buttons and links to show the user they are, in fact, hovering on a button/link and if they click, they will be directed to the said link.
This form of animation is usually quick and snappy. Its purpose is functional rather than just looking fancy. This style can scale from really simple to complex animation, depending on what is needed. Below you can play about with some buttons which scale (left to right) from simple to complex animation hover states.
Next up is scroll animation. This is a style of animation that will move with a user when they scroll up or down a page. This can highlight great importance to an element, even if it’s a static image, as the user is forced to see the element while it follows their scroll up or down the page. On top of highlighting elements, it can help break up large areas of content making it more digestible rather than one never ending section.
Scroll Animations
Here you can see an example of scroll animation.
You can see the text on the right moving up and down with your scroll
While the title on the left stays where it is, following you while you scroll
Scroll Animations
Here you can see an example of scroll animation.
You can see the text moving with your scroll
Until it reaches the next section
Here is a second example where only the background moves. Also known as a parallax background and can help highlight a section, but only when a user reaches it.
Alternatively, you could try transition animations which tend to be used to switch smoothly between elements, likes sliders or switching pages. These can also be used to animate an element into a page so that when a user scrolls to a specific section or hovers over an element, it can appear before their eyes. This can help add movement to a static site or draw a user’s attention to certain elements so it is the first thing that they see.
Hover over the squares below to see it transition between two states.
Transitioning elements like this can help break up sections to make content easier to read.
Transitions can help draw the users attention to see what you want them to see first, then control what they see next.
Transitions can help shake up the design so it’s not just static elements one after the other.
If these don’t appeal to you, maybe a short loop animation will. These are very versatile and can be used for multiple reasons, although they are usually used to spice up the look of a site and make it look fancier. They tend to be gif files that play once or on repeat. These can be used in combination with any of the above, or, on their own to highlight sections, add movement or show what the site is doing. The most common example of loop animation is a loading loop, designed to show users that something is happening. A common example of this is “Please wait while the site loads”.
You can see how the colour gradient on the side constantly transitions back and forth between two gradients.
The final example we will show off is full page/section animations. These usually end up quite complex and can take a long time to set up and get working. However, the trade off is a unique design that is fully custom made and animated to suit your brand.
If you would like to see an example, take a look at the DofE Shaping Our Future site which we created. We set up a simple homepage navigation animation.
If you would like other examples of any of the above, why not take a look at these other sites or visit our portfolio page.
Got an animation idea for your website or app? Get in Touch with us and we can help bring your ideas to life, no matter how simple or complex!