Adobe Creative Cloud

April 17, 2015 /

Motion in Web Design the Smart Way

If you’ve been around for a while then you probably remember those corny “site under construction” animations used back in the late ’90s. We all loved those, didn’t we?

Anyway, web design has surely come a long way since then. And so did web animation. Nowadays, it’s no longer corny. More so, it seems that it has finally found its own place among other design mechanisms and tools.

So let’s have a look at how to use animated motion effectively and what place it has in the modern web design space.

The role of motion for modern web

This might sound surprising at first, but when it comes to the core benefits that good motion animation can bring, nothing has changed over the last decade. Mainly because human brains still work more or less the same, regardless of the design trend that’s currently the most popular one.

For instance, it’s been proven that animation helps us get a grasp on what’s happening on the screen and what’s the most important element that we should pay attention to. Why? It’s just how we work. Thousands of years of evolution made us who we are, and made us pay attention to motion. Otherwise, we wouldn’t be able to survive a predator’s attack back when we were living in caves.

So quite interestingly, even in the era of flat design and minimalism, motion still has its place and it indeed can (and should) be used to enrich user experience and make our designs more understandable.

The only thing that has changed is the form in which we should use it effectively. From a technical point of view, good animation in 2015 looks nothing like the animations from the late ’90s or early 2000s.

Many reasons for that, but two in particular:

1. New technology.

With modern CSS and JavaScript libraries we can now create impressive animations through accessible APIs and pre-made frameworks. We also don’t have to understand things on the most basic ground level of coding. What we do need to know instead is how to work inside the interface that the API is providing us with.

For instance, something you might know from the Adobe camp is the Edge Animate environment. Its purpose is to let web designers create interactive HTML motion animations through an easy-to-grasp interface. At the end of the day, it’s the tool that handles the heavy lifting and you can focus on the creative part without worrying what’s under the hood.

But technology is not only about tools, CSS, or JavaScript. It’s also about hardware, and particularly the hardware inside mobile devices.

Let’s face it, mobile devices of today are basically standard computers with great processing power. The only thing that’s different about them is the screen size. Other than that, they can cope with anything.

2. Web design maturity.

Maybe it’s just my impression, but it seems that several years ago webmasters wanted to have animated blocks on their sites just for the sake of it.

Those animations often made navigation harder (physically harder – with elements taking longer to load and so on), and less straightforward (it was difficult to figure out what was clickable and what wasn’t).

These days it’s different. We’re no longer that impressed with animated motion as a standalone thing and we want to see it serve a specific purpose rather than just be there for no reason.

In other words, what’s going on with animation is somewhat similar to the early days of the automobile. When cars first appeared, you could still travel faster by horse (and more reliably). If you had a car back then, you had it for the sake of it, or just to show off. Nowadays, however, the car is mainly a tool for getting a certain job done. Web animation is heading more or less in the same direction.

That being said, we are still somewhere at the beginning of this road and it will take time to get accustomed to the tools, the libraries, and the technical aspects in general. This is something that Steven Snell of Vandelay Design pointed out when asked about the role he sees animated motion taking in the future of web design:

The era of web animation is still in its infancy, but with the introduction of recent HTML5 standards it is already playing a key role in web design. UI and UX designers are leading the way by creating beautifully animated SVG icons and navigation with CSS and JavaScript.

So at the end of the day, the question is how to use motion to put yourself in the right track and make your interfaces more user-friendly, as opposed to just more confusing and flashy. Here are some ideas:

1. Use motion to showcase hierarchy

Most static web designs showcase the layout’s hierarchy by using exclusive colors, big and bold elements and a lot of white space around the most crucial blocks. This is a sound strategy, but we can do so much more with the addition of motion.

It’s been scientifically proven that movement is a lot more noticeable than any other form of presentation. Therefore, there isn’t any better way of conveying some element’s importance than by bringing it to life with movement. For instance, take this example:

motion1

MUSIC App Animation by Sergey Valiukh and Tubik Studio on Behance

It’s clear right away what the most important element on this page is – the app demo. It does a great job of focusing the visitor’s attention right away.

2. Make flat design easier to grasp

As great as flat design is, there are still some serious problems with the concept itself. For instance, even though users who are proficient with how web interfaces work have no trouble interacting with flat sites, those who are a bit less savvy have a lot harder time.

The reason of this confusion is that flat design tends to make various interface elements look very much alike, thus elements such as buttons are not always that straightforward in their appearance compared to everything else.

In this case, animation is one of the few mechanics that can still set things apart and make the interface understandable again.

For example, take a look at these animated icons:

motion2

115 Animated Icons by Hakan Ertan & Sinan Karaçam on Behance

 

The gentle motion, although isn’t anything special in itself, does a great job at grabbing the visitor’s attention and encouraging them to interact with the icon.

3. Be subtle, not flashy

The late ’90s are long gone, thus animation just for the sake of it has no place on the web any more. And since users are no longer impressed with things simply moving about, the core nature of the animation needs to be a bit more subtle.

The gold standard would be to make it just alive enough that it can be easily noticed, but also subtle enough to not overpower the whole design completely.

The value of such an approach is that it makes the visitor less likely to get distracted and focus on the motion itself rather than on the call to action that this motion is trying to pitch.

4. Keep testing on mobile relentlessly

These days, mobile is the main environment for which your design should be optimized.

This can’t be emphasized enough, so let me say it again from a slightly different angle – mobile is now more significant than desktop.

First of all, 60 percent of all web traffic comes from mobile now. Secondly, even Google has just about had it with sites that are not mobile-friendly, so they issued this statement:

Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results.

What this means in plain English is that if your site is not mobile-friendly, your search ranking will suffer. Also, making a site mobile-friendly is often about much more than just making it responsive. That’s something worth keeping in mind not only when designing animations, but when working on your next site in general.

Therefore, rolling out any animation that isn’t mobile-friendly or, even worse, that isn’t accessible on mobile at all is just asking for trouble.

Make it a recurring step in your development process to keep testing your animations on all popular mobile devices.

5. Use animation as your “what-makes-me-unique” element

Let’s stay with flat design for one more minute here. Like was said earlier in this post, many flat designs often look very similar, so making your creation distinguishable becomes quite tough. While you can always search for a creative color scheme or something, you are still limited by the corporate identity and the appearance associated with the brand you’re building the design for.

All of those limitations make motion the perfect tool to make your design unique. Most importantly, you don’t need much to stand out. Consider these examples:

motion4

Dianping Film promotion Html5 / FURY by wang 2mu, He Fan & 3 Water on Behance

Both designs are very simple in nature, and the animations used on them are the only elements that make those sites interesting. If you were to remove those animations, the designs would look rather basic and wouldn’t grab as much attention.

6. Use motion for individual pieces of content

Making a custom website design with the use of motion is one thing, but you can also go for a smaller scale approach and use motion when working on individual pieces of content.

For example, Neil Patel of Quick Sprout has been known for publishing and popularizing the concept of motion infographics. In its core, the idea itself is very straightforward. He creates what would normally be a standard infographic, but then adds animated elements to it. Here’s an example. Another animated infographic.

Doing this can give you an additional edge over the competition and other sites in the same niche, all fighting for the visitor’s attention.

Now, infographics are just one concept. You can also use the same idea when working on standard posts, articles, case studies, or any other piece of content.

7. Try scroll-based motion

Motion is a broad topic and also quite a complex one. For instance, in order for something to be considered in motion, does it actually have to be moving, or does it only need to appear like it is? For instance, parallax scrolling effects and other cases of scroll-triggered animation are great examples here.

The idea is to create the impression of movement by using custom CSS, JavaScript, and HTML. By itself, the design is static, but once the visitor starts scrolling, they can see a depth-of-field illusion or even full-blown moving elements.

Consider these examples. First, simple parallax transition effect. More complex scroll-triggered animation.

8. Use motion for notifications

Animation is most visible when it first pops up on the screen. This makes it a perfect tool to display various kinds of notifications. For instance, whenever there’s something going on in the background of a web interface (e.g. some settings being saved in an online admin panel), you can notify the user that the operation has been completed through an animated box appearing somewhere at the top of the screen. This sensation of unexpected motion in an otherwise static environment is all you need to alert the user.

For example, have a look at the notifications that can be built with this tool.

It’s nothing striking in terms of design, but it does its job well and grabs the user’s attention.

9. Focus on motion quality

Less is more for web animation of today (and likely in the future as well), but you still can’t compromise quality in your pursuit of less.

Even Google is making this very clear with their material design guidelines in regards to working with motion. In the official docs, they encourage designers to make every element’s motion authentic. This means giving it mass and weight, acceleration, and other characteristics that a real-life element would have.

Feel free to go here to see the guidelines along with some demo videos by Google.

Conclusion

Motion wasn’t always the most appreciated tool in web design history, but that is likely to change in 2015 and going forward.

With the technological developments and the overall maturity of the web design world, people are more willing to experiment and try improving their user interfaces with subtle, yet useful moving elements.

On one hand, the days of flashy animation used just for the sake of it are long gone. But on the other, the days of animation that enriches the user experience and makes websites more functional have just begun.

What’s your take here? Have you stumbled upon any creative ways to incorporate motion in web design that are worth pointing out?

Join the discussion

  • By Vesture India - 5:38 AM on April 23, 2015  

    Hello, Really one of the best blog post i have ever seen on web design, all points are described with best suitable examples. This post is really helpful for web designers, to understand how to use motions for web Design and Development.

    • By Karol K - 8:46 AM on April 24, 2015  

      Thanks! I’m glad you enjoyed it.

  • By Herbert - 6:29 PM on May 5, 2015  

    Many designers will probably share this information because it teaches a lesson a web design.