Dynamically beautiful web animations, style over substance?

I love new tech as much as the next guy. I see the latest phone release with only one extra feature that doesn’t add up against the ever growing price tag – yet I want it. Sometimes web animations can be viewed like this: new tech that we all love. Something that’s flashy and new, we all want it, but it doesn’t seem to add up against the price tag… or does it?

Some avoid animations as they consider them to hamper download time, lack the full understanding of their use and benefits, or don’t have the time/budget. However, this is a dated view point as now they can be as simple or as complicated as you need them to be. Advancements in technology means it’s more feasible than ever to create and incorporate complex animations into your website, with increased internet speeds making little difference to download time. They can be a simple css or javascript effect, a creative SVG with coded various outcomes depending on user input, or an embedded mp4/gif. The simplest can be super small as it is primarily in the code and there is no physical transfer. More complicated embedded animations have a larger file size – but in short, with the right consideration this can be minimised.

For me, animation in web design alone is all about improving the users visual experience; aiding them on their journey to find what they are looking for, or helping them understand a certain element of what they need to know, making otherwise dull information fun and interesting to learn about. As a designer, my aim is to make things as aesthetically pleasing and creatively on point in its medium as I can. In print you do this using what is available to you: interesting folds, foil blocks, or a clever choice of stock for the project. In web design you use parallax scrolls, considered navigations, fixed and unfixed elements. Animations like other elements shouldn’t be ignored but rather used appropriately. For example, they are a great way to fill dead space that can’t be resolved, like downloads, I mean who hasn’t wasted ten minutes watching those Wetransfer animations before you catch yourself on?

Animated elements create another layer of differentiation in the visual hierarchy of information. For the user they act as a quick visual guide for what they need to do, or where they can find what they are looking for. Used correctly with the right knowledge of how we all knowingly (or unknowingly) psychologically interact with technology, it can be a real asset. Unconsidered animations give their use a bad rep. An animation should always compliment a users experience and consider their predicted path. This done right can be a truly beautiful experience indeed. With this in mind and the ability to create interactive designs that are becoming more accessible and easier to achieve, we should start seeing these beautifully interactive elements becoming the norm. Here are a few animated sites that caught my eye for combination of aesthetic, purpose and function:

The actual facts as to why you should use them are also staggering and increasing year upon year. Biteable have a really good resource of statistics relating to video trends and marketing statistics that’s definitely worth a read. https://biteable.com/blog/tips/video-marketing-statistics/ . In short, people seem to prefer and outright demand video content. The thing that seems to be stopping a meteoric rise of its use is the perceived time and budget limitations from marketing teams. While this is a fair concern, and indeed the biggest problem to curb with clients, designers and technology are adapting to meet these current trends. The benefits of improving SEO on a google search, minimising bounce back, massively increasing click through rates and even increasing product sales (85% are more likely to buy a product if they watch an explainer video), are only some of the major benefits that should encourage this.

In summary, animation in web design is totally beneficial from a marketing point of view. With improvements in technology and designer skills adapting it’s getting easier and easier to produce good results in a reasonable time and budget. The masses love video content for their ability to convey emotion, speed of information uptake, and making a message memorable. They are a useful tool, but as with anything the issue on whether they are effective or not is whether they are considered and implemented correctly. Personally I’m a big fan, they make every considered website a more interesting and pleasant experience, and I hope the growing trend means we start seeing more and more. {Nathan}

To view some of our recent animation work please visit vimeo.com/cornellstudios