Motion Graphics in Web Design

What are motion graphics?

Let’s start by defining exactly what motion graphics are.

Want your sparkling new logo to spin into position at the beginning of a video? Motion graphics.

Want the bars on your fancy Excel spreadsheet to slide in one by one? Motion graphics.

Remember the yellow scrolling text at the beginning of Star Wars? Yep, motion graphics.

Simply put, it’s the movement of graphic design through time and space. Pretty cool, right?

For the past 15 years, these techniques have adapted and evolved into the modern digital world and are now used within all forms of media such as Video Games, Mobile Apps, Websites and more.

 

So how does it relate to web design?

I’m showing my age now but since the web’s early beginnings in the 00’s when Macromedia Flash was all the rage, motion graphics have been used to enhance the user experience by making websites more engaging, easier to use and fun.

A good example of this is Apple. Instead of presenting the user with static images and text, they use a variety of animated techniques to create striking content that not only builds brand personality but also helps to show off the beauty of their products through interactivity and movement.

 

What’s the purpose of adding motion graphics to a website?

1. It helps brands stand out and improves conversion.

The web is a crowded place these days, with lots of brands offering very similar products and services. By adding beautiful animation to your website, it’s a sure-fire way to stand out from the competition leaving the user with a memorable experience.

It also keeps the user engaged for longer increasing the likelihood of conversion (such as business lead submissions, adds to cart, newsletter sign-ups and many others).

In 2021, we designed and built the new website for tangerine, a global pioneer in design. We took their brand assets and combined them with our animation techniques making key sections on the site as creative and engaging as possible.

 

2. It makes websites more intuitive and easier to navigate.

One of the biggest advantages of using motion graphics is that it attracts the user’s attention. When used appropriately, users are able to build a mental model about how the system works and how they interact with it.

So, say if you interact with buttons on an image gallery to make new photos appear, you’ll have learnt this interaction for the next time a similar component appears.

Motion can also help content be more easily navigated. One of the requirements when redesigning Martin Building’s new website was easy interaction when browsing their portfolio. By using motion, we were able to make the navigation between the categories and properties as seamless as possible.

 

3. It adds an element of fun and makes the UI more pleasant-looking.

Motion graphics are really good at conveying a brand’s personality. It’s a great way to add an element of fun to the website and make users smile. Why is this important? Because it is a great way to build positive user experiences, brand likeability and through that – loyalty.

We know ‘fun’ animations aren’t suitable for all the brands out there, but when Bounce came ping-ponging along, we had a great time translating the energy of their experience into entertaining interactions throughout the site.

For example; the first time you are introduced to their logo, it appears as a ping-pong ball and when you interact with the navigation, animated visuals relate to the page you are about to enter.

 

Conclusion.

So that’s it! Hopefully, this article has been useful in learning a bit more about motion graphics and why we like them so much.

It really is a great way to bring your brand to life in creative ways and with web technology getting better every year, we expect to be animating using some really interesting techniques in the future!