Add flare to your website using Adobe XD and Functional Animation

When talking about functional animation and how you can implement it on websites, there’s a question many people ask: what exactly is it? Thinking about the word ‘animation’ conjures up images of cartoons on TV, or video games. However, what’s being discussed in this article is a little further removed from that.

Web design has always been about standing out from the crowd. Doing the same thing that everyone else is doing, or putting something bland and boring on a website just doesn't work. All content works together to enhance a user's experience, and there are many sites that do this well. If you look around online you'll find countless examples of fantastic web design ready and waiting to be explored. However, this article aims to show you that straight forward design isn't the only option. There's another way, and that way is animation. Don't just think about sketches or drawings, animation can really spice up an otherwise dull looking site. Deciding what's best for your site comes down to a lot of elements, but putting something that's eye-catching and vibrant on your pages really brings it to life.

There are a lot of different ways to implement functional animation on a website, and this article explains what, where, and why.

Menus that shake when the wrong password has been entered, or a message box popping up to let you know that you have a new notification can help add something extra to a website. Simply put, functional elements on a site will enhance a user's experience, using visual cues to draw their eye and their attention.

Using Adobe Experience Design CC (or, Adobe XD, as it’s more frequently called) is a good way to practice this kind of functional animation. It’s completely free and gives you the ability to test out some of the examples in this article, and more.

Navigational Transitions

To show you the range of pages you can travel to on a site in a unique and interesting way. Visual cues help users know where they’re going on a site, allowing easy transitions from one part to another. These are usually the simplest and most seen functional animation examples as they’re pretty popular already. This works similarly on certain responsive sites, but can be seen on many functional websites as well.

Using bright colours, or even a simple menu that expands when you mouse over it means that users are more likely to look around. This, in turn, puts more traffic through the site and may lead consumers or potential clients to service pages, e-commerce pages, or contact pages. Through carefully placed, bright and interesting navigation transitions, sites can appear more friendly and inviting. They’ll catch a user’s eye and give them more reason to keep on clicking.

A great example of this is on House of Borel’s site with their simple, but effective navigation tab (top right corner).

System Status

Letting a user know whether a password they entered was correct or not, showing the progress of a loading bar or how many emails a consumer might have, feedback of system statuses gives basic information in an engaging and visual way.  Using bright colours and stimulating animations means that the user’s eyes will be immediately drawn to it. A letter, or number, just appearing on the screen might not immediately alert them, meaning that they miss something important. Making that number or letter colourful, and vibrating means that the user will immediately see it and understand what it means.

When typing in a password, a shake is a universal sign for the word ‘no’, as is the colour red. A correct password may turn green before allowing you access, but a wrong password will turn red, or shake.

A fantastic example of this is on Sonoran’s Valley with their loading bar when the site is opened.

Same Location, New Action

Something that’s used more frequently is a simple change in a button’s appearance. The user wants to stay on the same page, but they also want to write on a form. With functional animation, the button will change its appearance, turning from “send form” to “sent” without affecting the rest of the page. When it comes to 'Same Location, New Action', the user doesn’t want to lose the page they're on.

The main benefit of using functional animation in this kind of scenario is to show the user clearly what has happened; that the action they have just performed was successful, or not as the case may be.

Though this kind of functional animation can be extremely subtle, examples are all over the internet. Quite often companies will utilise the idea of animation in their contact forms, for example It will show something as simple as  a flying envelope for a message that has been sent. This ties in with system status, but specifically keeps you on the same page, making sure you don't lose anything.

A great example of this (that also includes other examples of Same Location, New Action in contact forms specifically) is on Medium, with a subscribe form at the bottom of the page.

Branding

Making your product or business stick out is harder and harder to do. Sometimes, a simple logo won’t work to really show off the broad range of services that a company can do. Functional animation can help to enhance a brand, allowing sites to show moving parts of a picture, symbol or logo to really draw the eye.

Just like any other forums of functional animation, branding should be limited and not overwhelming. It should support the rest of the site and not look completely out of place and awkward; only use it if it’s needed, or if it brings something to the look of the website. However, if the first thing the user sees when they open a site is a bright, exciting and engaging logo or header then they’re more likely to venture further.

Find good examples of branding animation on Gaetan Pautler, Giant Owl, and Google doodles.

But, what shouldn't you do?

There's still a few things to think about if you do try to implement any kind of interactive web design. Longevity is extremely important; are you making something gimmicky, or something that will last? Will it annoy the user after the fifteenth time they've visited the site, or does it make sense? Make sure that animations aren’t obtrusive and that the user can navigate a page without having to click away from it. Google is already looking to punish sites that use annoying pop-up ads. Make sure that any functional animation you try to implement doesn’t bleed into that realm.

Only incorporate any kind of interactive part on your website if it's necessary. Adding in a hundred little things moving on one page may look fancy, but it's too much. Something that draws the eye isn't going to work when there's a lot of it; that's just assaulting the senses.

How functional animation can spice up your website

As explained in this article, there's a lot of ways animation can be implemented on a site. From navigation to forms and loading bars, sometimes a little goes a long way. Go look at sites you love and see what kind of design they have. Do they have moving parts? Bits that flash, or shake, or change colour? You may not have noticed them before, but the more you look, the more you'll see.

Play around with Adobe XD yourself and see what you can create.

The language of functional animation is universal – designers and coders don’t need to translate their work for non-English speakers to understand. A shake of the head, a thumbs up or a flashing number on an envelope; these are symbols almost everyone using the internet understands. Of course, phone and tablet applications use this kind of repressiveness readily, almost as a staple of movement and access. But, it is found in web design too; you just have to know what you’re looking at.

So, go out and look. See how designers do it and try it out for yourself; you could create something truly eye-catching.