Published on <a href="https://blog.prototypr.io/how-to-use-animations-and-motion-in-web-design-2fd1f68e6e02?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> PageCloud 
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.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgiphy.com%2Fembed%2Fl2JhL0Gpfbvs4Y07K%2Ftwitter%2Fiframe&amp;url=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2Fl2JhL0Gpfbvs4Y07K%2Fgiphy.gif&#038;image=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2Fl2JhL0Gpfbvs4Y07K%2Fgiphy.gif&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=giphy" width="435" height="379" frameborder="0"><a href="https://medium.com/media/60ba39e9d06657889246c8231d1276a6/href">https://medium.com/media/60ba39e9d06657889246c8231d1276a6/href</a></iframe>
Considering that <a href="https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">your website will be judged in about ten seconds</a>, it’s important to quickly demonstrate value . 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, 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:
<blockquote>The animation should serve a purpose, and with style.</blockquote>
It should draw the eye without being too distracting, and it should keep pace with the viewer — not being too fast, or too slow.
<h3>Motion 101: State Change, Emphasis, and Reveal</h3>
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.
<img alt="" src="https://cdn-images-1.medium.com/max/916/0*5IjTgDbk97qUAc5I.">
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.
<h3>Semantic Animation Keeps Your Motion Graphics as Part of a Larger Whole</h3>
<a href="https://alistapart.com/article/motion-with-meaning-semantic-animation-in-interface-design">Semantic animation</a> 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.
<a href="http://meteor.toys/">Meteor Toys</a> 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.
<h3>Two Motion Techniques to Enhance Your Website</h3>
There are multiple ways to use smooth motion animations to enhance your site. UXinMotion categorized <a href="https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc">twelve basic ways to bring your brand to life</a>.
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.
<h4>Parallax</h4>
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.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgiphy.com%2Fembed%2F9HZ6F2gvFWO9G%2Ftwitter%2Fiframe&amp;url=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2F9HZ6F2gvFWO9G%2Fgiphy.gif&#038;image=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2F9HZ6F2gvFWO9G%2Fgiphy.gif&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=giphy" width="435" height="268" frameborder="0"><a href="https://medium.com/media/7c2984fae1136dd5f89ee74af12f865c/href">https://medium.com/media/7c2984fae1136dd5f89ee74af12f865c/href</a></iframe>
<h4>Dolly and Zoom</h4>
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 <a href="https://cdn-images-1.medium.com/max/1000/1*boQYFGPLtlDof3RRs124bQ.gif">ten more</a> of these elements that could work to help your website usability.
<img alt="" src="https://cdn-images-1.medium.com/max/1000/0*GKNqNK5mHxp4FvzR.">
<h3>Good Design Is Still Imperative</h3>
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:
<a href="http://www.fiftythree.com/pencil">Pencil Stylus</a>: 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.
<img alt="" src="https://cdn-images-1.medium.com/max/398/0*-0-y1WPbXFlkbNoL.">
<a href="https://nocs.pagecloud.com/">Norwegian Ocean Cle‍‍‍aning Systems AS‍‍‍</a>: 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
<img alt="" src="https://cdn-images-1.medium.com/max/814/1*tCJsRnRb9aZlFRoLu1pJ1A.gif">
<a href="https://www.epicfitnessottawa.com/">Epic Fitness</a>: 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.
<img alt="" src="https://cdn-images-1.medium.com/max/768/1*FBj1y5UxdPxphAqWq5RkGg.gif">
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 (including nerds like us).
<h3>Some Tools to Get Started With:</h3>
Ready to get started? We’ve got a list of free (and trial versions) of tools to get you on your way! They make it simple to <a href="https://answers.pagecloud.com/help/animatecss">integrate animation into your website</a>, and help you get that extra impact.
<ul>
<li><a href="http://bouncejs.com/">Bounce.js</a> is a free library that lets you create and embed animations into CSS. It’s easy to use and share.</li>
<li><a href="https://www.animatron.com/">Animatron</a> 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.</li>
<li><a href="https://daneden.github.io/animate.css/">Animate.css</a> is a great tool for making very basic animations. Modest actions could be used effectively to make your transitions pop!</li>
<li><a href="https://codepen.io/hello/">CodePen</a> offers easy HTML, CSS and JS editors. It shows a preview of your code at the bottom of the page.</li>
</ul>
<a href="https://www.behance.net/">Behance</a> and <a href="https://dribbble.com/">Dribbble</a> are also useful resources for inspiration and instruction.
<h3>Final Thoughts</h3>
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 <a href="http://www.pagecloud.com/blog/why-you-need-to-care-about-graphics-not-just-photos">alternative ways to use graphics to engage readers</a>.
Written by <a href="https://twitter.com/henrycabrown">Henry Brown</a>, Manager of Customer Acquisition at PageCloud. This post was originally published on <a href="https://www.pagecloud.com/blog/how-to-integrate-motion-into-your-website-design">The PageCloud Blog</a>, where we discuss website trends, tips and tricks and go behind the scenes at the website builder you’ll love to use.
<h3>Want to read more like this?</h3>
<ul>
<li><a href="https://www.pagecloud.com/blog/why-you-need-to-care-about-graphics-not-just-photos">Why Graphics, Not Just Photos, Matter For Your Website</a></li>
<li><a href="https://www.pagecloud.com/blog/15-places-for-free-website-stock-photos-and-icons-youve-never-seen-before">15 Places for Free Website Stock Photos (and Icons) You&#8217;ve Never Seen Before</a></li>
</ul>
<h3>Looking to build your own website?</h3>
<a href="https://www.pagecloud.com/">PageCloud &#8211; The World&#8217;s Best Drag and Drop Website Builder</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=2fd1f68e6e02" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/how-to-use-animations-and-motion-in-web-design-2fd1f68e6e02">How To Use Animations and Motion in Web Design</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

How To Use Animations and Motion in Web Design

Top Stories