How to Integrate Motion Into Your Website Design

Ever since Walt Disney made Mickey Mouse famous decades ago, animations have captured the hearts and minds of billions. There’s something inherently curious about a graphic that moves.

Considering that your website will be judged in about ten seconds, it’s important to demonstrate value quickly. Motion can draw attention, teach and delight. You can use motion to make a loading screen more entertaining, or to lead a visitor through the specs of your latest product.

Motion graphics, when properly used, can draw people in with engaging, interesting and subtle actions, and help to make sure they stick around your site. Done improperly, they can distract, repel, or overwhelm a visitor…

Designers specializing in motion and animation have come up with some principles to make sure that never happens. The fundamental principle starts with function:

The animation should serve a purpose, and with style. It should draw the eye without being too distracting, and it should keep pace with the viewer — not being too fast, or too slow.

Motion 101: State Change, Emphasis, and Reveal

The first thing you want to figure out is the purpose and feel of your animation... Essentially the why and how. The purpose of your animation is related to how your audience is interacting with your site. Generally, there are three common ways to use animation online:

1. State change: This animation reflects user interaction and shows that an object on the site has changed because someone has hovered over a section or clicked. It makes for softer transitions.

2. Emphasis: These animations draw attention to a specific piece or action in order to propel a user to engage further with your site. They’re useful for high consideration zones of your site, such as a call-to-action or to highlight a specific piece of information you want to communicate.

3. Reveal: Some animations work to hide information (like menus) at the side or bottom of a site, and can be called upon to appear as if by magic. This keeps information organized and clear.

The feel of your animations should directly express your brand’s personality. Bouncy and light transitions could be confusing if you’re in family law, or if you’re a health company with a bold and direct tone. A good match will stand out, be memorable and make your site more three dimensional.

As technology improves, everything can be animated — and oftentimes, everything is. The issue is it’s very easy to overuse, or misuse, this technology.

Semantic Animation Keeps Your Motion Graphics as Part of a Larger Whole

Semantic animation is an important concept to consider when adding motion to your product. Basically, the point is you can’t think of each animation as a separate entity if they interact with each other or lead to a new page, because it will seem like a continuous experience — a single space. The simplest example:

Think of how we know intuitively to scroll up and down on websites, but for the occasional horizontal scroll site we can adapt quickly.

Animations are most powerful when they reflect this concept. Try to think of every part of your interface as a specific and unique component of one larger concept.

Meteor Toys is a great example of semantic animation in action. Check out the zoom animations on the buttons at the top, and the expansion animations for each of the content boxes.

There’s no question where these animations are coming from, and clicking on each box “expands” it (or “contracts” it when it’s open). Each of zoom reveals more information, and each expansion reveals more information.

Two Motion Techniques to Enhance Your Website

There are multiple ways to use smooth motion animations to enhance your site. UXinMotion categorized twelve basic ways to bring your brand to life. There are different solutions and options for whatever situation you’re faced with, but we’re just going to focus on the two most popular motion techniques.

Parallax

This primarily scroll-based animation describes different interface elements moving at different rates. This difference makes it easy for your brain to separate immediate content from the ambient or supportive content. Objects in the foreground move faster, and are perceived as closer to us, whereas objects in the background move slower and seem further away (and less important). This difference in time and emphasis can be used by designers to point to objects of high priority in a subtle way.

Dolly and Zoom

Originally taken from film, these concepts refer to the movement of objects relative to the camera. In UX design, it is a smooth transition of the image itself, changing from a long shot to a close up, or vice versa (the Meteor Toys example above uses the zoom technique).

There are ten more of these elements that could work to help your website usability.

Good Design Is Still Imperative

Keep the rhythm simple, so that information can flow at a comfortable pace. Whatever movement you have on your site, make sure the reader can sense the context and be able to discern what the focus of the animation is. Here are a couple of examples of sites that use motion effectively:

Pencil Stylus: Fiftythree.com’s interface is subtle yet engaging. As you scroll down through the site, you begin to unravel the actual hardware of their newest product, letting you see its stats and specs without interrupting your experience.

Norwegian Ocean Cle‍‍‍aning Systems AS‍‍‍: Using clever background motion that doesn’t deter from the message, NOCS goes beyond explaining what they do, but uses the animation to convey a feeling. It’s beautiful, simple, and effective.

Epic Fitness: Sometimes motion can be purely aesthetic. Epic Fitness uses animations that occur when you hover or move, adding spice to the page. You should click through to see and feel this one in full.

There are many simple methods for subtly improving your site with motion. You can transition between pages very smoothly through fluid opening and closing of pages, and make loading the site more engaging.

Animated graphs are small scale movements that create a bite-sized infographic on your site, making the metrics more interesting to your audience. Along with these methods, infinite scrolling, slow motion animation for ambience and controlled modular scrolling can all work to subtly add depth to your site.

Even a task like filling out a form can be made a bit more enjoyable by animation, making the job seem more casual — and even potentially fun for some (e.g., nerds like us).

Some Tools to Get Started With

Ready to get started? We’ve got a list of free (and trial versions) of tools to get you on your way! They are simple to integrate into your website, and help you get that extra impact.

Bounce.js is a free library that lets you create and embed animations into CSS. It’s easy to use and share.Animatron is a trial version of software primarily used to make videos and graphics. Its editing software is fast and easy-to-use, and offers Wave and Studio options. Animate.css is a great tool for making very basic animations. Modest actions could be used effectively to make your transitions pop! CodePen offers easy HTML, CSS and JS editors. It shows a preview of your code at the bottom of the page.

Behance and Dribbble are also useful resources for inspiration and instruction.

Final Thoughts

Integrating the right kinds of animation can make a world of difference to your pages by increasing traffic and time spent on your site.

Whether you’re advertising the specs of your new product, or spreading information in a moving graph, remember to: keep it simple, maintain the tone and have fun exploring your options in motion.

Of course, motion graphics aren’t the only types of graphics you should consider for your site. Here are a few other alternative ways to use graphics to engage readers.