How to Bring Your Website to Life with UI Animation

Celý článek

Websites are pretty predictable these days. Visitors know exactly where to go to navigate the site, which pages contain the specific information they need, as well as how to utilize certain features.

But what if you could add a little excitement to their visit with interactive and moving elements? 

Below, we’re going to look at 6 types of UI animation that will bring a little life to your designs and, consequently, increase visitor engagement with your content. We’ll show you some examples — from BeTheme’s pre-built websites as well as from sites around the web — that subtly use motion to give more power to your static content. 

Inspiring examples of UI animation in web design

UI animation doesn’t need to be over the top in order to be effective. It simply needs to blend well with the brand’s style and be used just enough to capture your visitors’ attention.

One thing to keep in mind is this: 

When choosing the element to animate, make sure it’s one you want visitors focusing on or engaging with. If it doesn’t help move visitors along in their journey, then it’s just a wasted opportunity.

Here are some UI animation ideas for you to draw inspiration from: 

1. Transform primary buttons or blocks with motion and color

Websites — and, in particular, the homepage — contain a bunch of clickable links, buttons, and blocks. With so many other pages to explore, these on-page links are necessary for pointing visitors in the right direction.

That said, not every internal link is made equal. And you can use various types of animation to demonstrate where the most important information is. 

When visitors encounter primary CTAs — ones that drive them to the meat of what the website sells — use transformational animations to really make them pop. 

For example, here’s how REQ transforms these blocks on the homepage: 

Considering the valuable information contained within each service page, the UI animation here makes it difficult for visitors to ignore these blocks. 

This is how the BeAgency pre-built site uses a similar kind of UI animation: 

Notice how the “Read More About Us” button has just the slightest color transformation. When placed within the context of these animated service blocks, you can see which elements the designer really wants visitors to take notice of.

2. Slide in content that must be seen

When all of the content on a web page is static, it’s the visitors’ job to tackle each section one-by-one. Big, bold headers may help them scan it to find the most important or relevant bits, but that’s not always a given. 

If there’s a particular message that needs to be read by every visitor, animate the element with a slide-in effect. 

Just be careful: The motion will disrupt the visitor, so you need to make sure it’s 100% worth it. 

Atlassian, for example, slides in this special message about the Team Tour from the bottom of the fold: 

For dedicated Atlassian users and prospects interested in companies that offer more value, this message is well-place and well-timed.

BeLeasing shows us another way this can be done, with the hero image’s message sliding into view from the side: 

Notice how this animation is much different from what you’d see in a slider element. It’s just one piece of the page that slides into view, immediately calling attention to it and nothing else. 

3. Flip images to reveal quick-action options

This UI animation is particularly useful for e-commerce websites as it allows you to give shoppers an easy way to do things like: 

• Reveal another view of the product from the search or category page.
• Open a quick-view of the product.
• Save an item to the cart. 

This enhanced shopping process will most certainly delight new shoppers who appreciate the attention to detail. It’ll also make shopping go more smoothly for loyal customers who know what they need and don’t want to have to click through each page to add items to their carts. 

Aveda is one such website that uses this product image flipping trick: 

In this example, we see that Aveda’s image flip reveals an alternative look at the product along with a “Quick Shop” link to the product page.

The BeClothing pre-built site takes a different approach, darkening the product photo and bringing to the forefront quick-action buttons: 

In this case, the buttons allow shoppers to place items directly into their carts or to visit the product pages.

4. Call attention to content with a change in tone

When a website regularly publishes new content, there’s going to be a lot of it competing for attention. And when you take the time to design a website to be clutter-free, you don’t want the content itself to be the reason visitors feel too overwhelmed or distracted to take action. 

To help your visitors focus closely on one item amongst a sea of other items, subtly change the tone of the block. This can be done by adding a colored filter. You can also darken it. 

Travelzoo uses the darkening feature here: 

BeClinic uses a similar tone change while also emphasizing the label:

In both cases, it’s a subtle enough change, but it gets the job done. It forces visitors’ eyes to zero in on just one piece of content at a time.

5. Call attention to impressive stats with animated counters and progress bars

It’s not easy being the new kid on the block. So, when you launch a new website, you need to give visitors a reason to not only trust your brand but to consider choosing yours over the competition. 

One of the most effective ways to do this is with social proof and data. So, if you have a way to show prospects that you’ve worked with 100+ companies, sold $1M in products, or have increased clients’ profits by 150%, that needs to be highlighted on the site. 

While this information can be displayed as a static data visualization, animation can make sure this humble-brag doesn’t get missed. 

Here’s how WP Elevation shows off their impressive statistics: 

BeTheme includes a similar feature on its homepage: 

Although the static design would be eye-catching enough for either of these sites, the animated counter forces visitors to stop scrolling and take a minute to read the convincing data.

6. Draw attention to an app by animating it

Again, this comes down to how difficult it can be to sell a new product (in this case, software or an app) when it’s brand new or comes with a high ticket price. 

Of course, that’s why a website goes into exhaustive detail about the app, the benefits of using it, as well as what the features do. But visitors actually need to read that information for it to matter.

Whether your website contains snapshots of the app in action or it’s all illustrated, animating these elements can help grab and hold visitors’ attention. 

QuickBooks, for example, animates screenshots of its product’s features on the homepage:

Just below the fold you see the budget tracking features populate. 

If your site has an illustrated product design like BeApp, you can do something like this instead: 

In this example, the designer includes strategically-timed animations to draw attention to important features.

Level up your static website with UI animations

There’s nothing wrong with having a website with static content. However, if the brand is new, there’s an excess of information competing for attention, or you simply need the site to stand out from the crowd, UI animation can be an effective differentiator. 

By maintaining a good balance between static educational content and eye-catching UI animations, you’ll find that visitors are more engaged with the content on each page. And if you can get them to pay closer attention to the content, you can encourage them to explore even further and, eventually, convert. 
With the help of Be and its plethora of animated pre-built sites, you can easily bring life to your websites, too!

The post How to Bring Your Website to Life with UI Animation appeared first on Codrops.