+353 (0)22 55002 info@spiralli.ie

Put Your Website in Motion

Web & App Design have been defined by many visual styles through the years, shaped by major IT companies or individual designers daring enough to bring something new and provide a better experience to their users. Some of them succeeded, setting new design trends in the process.

What makes a website special, different? It might be the service you are offering, the features available, but most of the time it is the way the company’s product or activity is presented.

Good colour schemes, iconography and imagery certainly help, but nowadays this is not enough to make your brand or its related website memorable. Now, users expect movement and action. What makes the user interaction and experience stand out? Animation. Cleverly used, it can be a true game changer for your website.

You can have the most impressive images to show, but if everything on your website is static and doesn’t invite your users to interact, then you lose their interest. A living website is much more attractive and appealing in many ways. What do I mean by a living website? I am not talking about dynamic tasks or scripts running in the background, but animated elements that form a coherent and consistent chain of events. Animation comes in many forms and shapes and can be applied to any element displayed on your website (or not!). All you have to do is to choose carefully where movement will occur, as it all depends on your website scope and needs.

Make it unique and distinctive

One of our recent projects, Baltimore Sea Safari website, is the perfect example of a site that stands out from the crowd. As a tourism website, the user had to be engaged in an interactive experience involving elements showcasing the sea safaris and boat trips advertised. On the homepage, a video welcomes the visitor and shows them pictures taken from past sea safaris. Then they are invited to scroll down the page to explore the different types of trips available. What can describe the feeling of exploration better than a compass in this situation? So we created a custom animation, triggered on every mouse hover on one of the three boxes. See it for yourself:

bss-trips

The compass needle is not moving all of the time, just when a user is looking for more information regarding one of the trips. It is relevant, interactive, and brings your website to life with a simple but effective touch.

The same kind of triggered animation can be found in the following section, illustrating the information regarding the company itself:

bss-about

It is an entertaining way of presenting who is at the helm of Baltimore Sea Safari, how the company operates and what its goals are.

Movement can change the way you read and navigate

A more blatant example of such animation is visible in many websites, and can radically alter your users’ reading. It is based on a fairly basic question: Which element of my website do I want to display on the screen at once, and which one should I hide? This helps to highlight a particular piece of content, whether it be text, images, or videos, and prioritise their appearance before the users.

We have answered this question on several websites we built recently, one of these being Creative Cleaning Services. In every page, the user is only able to see one section or part of it while scrolling down, guiding his reading and keeping him focused on specific content, one piece at a time.

ccs-home

The fading in of the paragraphs, images and entire sections is a slick way to make reading more entertaining and turn a static collection of content into a seamless experience. This effect is even more effective in this case because of the monochrome colour palette used for the whole project.

Motion can be applied to the most basic element

Given that every HTML element can be animated, you probably don’t want your entire page to be rotating counter clockwise to make your website stand out! You have to pick the element the user is most likely to interact with. That means: buttons, links, icons, form fields… And animate in a subtle way.

Adding motion to a button is quite easy. You can change its background colour, dimensions, font colour and style, and even more. But sometimes you need a bit more. And there are a lot of possibilities when it comes to animation and transition: make an image appear in the background, show a new element next to your text, add borders, etc. Here is an example:

afs-button

This image was taken from our most recent work, Assured Financial Solutions website. Since the design needed to be bright, simple and concise, there was not much scope for fancy animations in a website dedicated to financial planning and advice. Still, we were able to make this website refreshing and breathe life into some of its parts. Setting a gradient background colour that is visible through every button, title and section background was one way to do it, the other one was to use button animation on the mouse hover. This action allows the user to see a related icon at the right end of each button, as a subtle way to illustrate the button text pointing at the next section.

Continuous animation and conclusion

As previously mentioned, animation is good, even mandatory if you really want to build something unique that can help differentiate your website from your competitors’. As long as it has a true purpose and brings a layer of consistency and life to your pages, you will meet your objectives and have a better chance to be remembered by your website visitors.

You can also capture the user’s attention by setting a slideshow like countless websites advertising their latest products, news or to simply display some photographs. Creating a background video is a favourite option of creative agencies who want to present their activities in an unconventional and funny way. Moreover, many templates and themes now offer animated modules like portfolios, galleries or charts. But by using these methods, you have to be careful that putting too many animations can result in a high CPU usage that can slow down the user browsing and deteriorate the overall experience. You have to be careful to emphasise only the most critical parts of your website, in order to avoid a confusing experience for your visitor.

In the end, it all comes down to your choice. What best serves your website and embodies your brand?

To conclude, here is a nice example of an introductory section especially made for Creative Cleaning Services website: an animated SVG image showing the company’s slogan and including one element moving constantly:

ccs-intro