As humans, we’re evolutionarily primed to pay attention to motion. Even in our peripheral vision, movement attracts attention. This makes motion a powerful tool to direct the attention of our users as we try to guide or impress.

There are different ways we as web designers can harness motion to our advantage, depending on what we’re trying to achieve. Let’s go through a few of our options.

Parallax effects

One of the big breakout design trends of 2021 is parallax effects. It simply means that the website consists of several visual layers that move at different speeds, imitating visual perspective and depth.

In this design, the parallax effect is used to enhance the sense of space, drawing the user into the content universe.

By Slava Konilov via dribble

However, parallax can also be used more subtly, to make images stand out a bit more, like in this Mono template.

Use parallax effects to add a modern dynamic feel and interesting visual depth to your designs. However, make sure to use it sparingly as to not distract from the content. As the saying goes - content is king.

Micro-interactions

Another big design trend in 2021 is micro-interactions. Micro-interactions are the small interactions you have with a website, such as clicking a button, submitting something in an input field and so on. You’re asking the system to do something, it then processes that request and gives you feedback on the outcome.

It all contributes to the overall experience of using a website.

These small feedback loops can range from small interactions that create a certain sense of tactile satisfaction - to dazzling, creative expressions.

In the example below, notice how movement is used to make a simple interaction seem fluid while providing feedback to the user.

By Dmitri Lauretsky via dribble

Here’s another example with a bit more visual pizzazz. The navigation transition lets the user know they’ve navigated somewhere else, and they get a bunch of lush, visual storytelling as a part of that transaction.

By Nathan Riley via dribble

Micro-interactions are the cherry on top of your website sundae. They make interactions delightful and the user experience pleasurable, while also reinforcing your branding.

Background video

Video can be used in many ways; to set an emotional tone or to convey information. Video headers or video backgrounds can reinforce your branding and make your website look like a million bucks. They can also present an insight into your service, venue or product.

See how we use a video background on the ‘our story’ page on our website.

Here, video is used to emphasize the purpose of the website – getting you excited about visiting Scandinavia.

By Giulio Cuscito via dribble

In this design, video is used to give the user an insight into the ballet company, fostering a sense of behind-the-scenes intimacy.

By Josh Kirk via dribble

Videos are great windows into your company and your offerings. But, as with all things, they only work as great as the quality of the video. There are options for getting great stock video, such as Dareful or Pexels if your budget doesn’t allow for custom footage.

Animations

Even small animations can lend a dynamic feel to otherwise static content. Take for example the winner of our Best Website Competition, the media agency Idium with their website advokathogseth.no. Small interactions grab the attention of the user as they scroll down the page.

Another contender in the competition is Localsearch’s work on symplypetfood.ch, a British producer of pet food. They’ve used animated gifs to add a bit of quirky character to their website, tying in neatly and underpinning the wholesome, charming brand.

Custom cursors

On a more wacky note, custom cursors are making the rounds in 2021 as well. Definitely not applicable for most businesses, they manage to make a bold statement, and are mostly seen for design agencies venturing to create an impact and make an impression.

By Quintin Lodge via dribble

Wrapping up

In conclusion, animation is an integral part of making a great website come alive and can be a powerful tool in your belt. But we should always keep the website’s intention in mind.

Although every website benefits from dynamic elements, a no-frills corporate professional service needs something different from a creative design agency. There’s a time for sophistication and there’s a time for wacky.

We’ve built a future-proof website builder for you to build and manage websites at scale. With e-commerce, scheduling, and engagement tools, you can build beautiful websites for your clients.

Sign up to the
Mono newsletter

Sign up