Of the various tools in the web designer’s toolbox – typography, photography, illustration, layout and so on – movement has often seen as a tag-on extra, even a gimmick. But with last year’s surge in parallax scrolling, video backgrounds and animated GIFs, more and more businesses are looking to use motion in their websites to further engage and motivate their visitors, albeit in a ‘less is more’ way.
In this blog post, we will look at four ways to incorporate movement into your web design:
- Video
- Animation
- Parallax scrolling
- 2D approaches
Video
Whether you choose to embed content from YouTube or Vimeo, use Flash or HTML5, try creating an introductory sequence, an animated story or a virtual tour, video is both a powerful and effective method of bringing your website to life and packs both a visual and a content-driven punch. One interesting new development is in the use of video backgrounds.
Created with either Flash or HTML5, video backgrounds blur the boundary between film and website by layering text and graphics over moving video.
Often used successfully with slow-moving or slow-motion backgrounds, it is important that your background video adds to, rather than detracts from, your overall message, and is completely on-brand. High-quality video footage used in this way can create a very compelling site and draw readers in right from the outset.
Top Tip: For optimum effect, be sure not to include too much text or imagery on top of the video.
Animation
Full-on animations can bring a lot of fun and vibrancy to your website, as well as being educational and highly sharable. But if you don’t want to spend the time or run to the expense of creating lengthy sequences, there are a couple of alternatives you could try:
Hover animations
A simple way to add some subtle motion to your site is by using CSS3 animated effects. At a basic level, these do not require any JavaScript code or plug-ins and are useful for adding movement via simple focus or hover events.
Animated GIFs
Although animated GIFs are a particularly old type of motion format (dating back to the late 80s), they show no sign of a popularity decrease. On the contrary, with social sharing sites such as Tumblr and Vine making them big business, animated GIFs are here to stay.
In a world with information overload and time at a premium, a simple few seconds of looping video can be surprisingly effective at gaining and maintaining attention.
Since they have no sound and only last a couple of seconds, they do not necessitate much in the way of viewing – they are easy to digest, and can make great calls to action.
Top Tip: Optimise your animated GIFs by reducing image size, reducing the amount of frames and saving for web.
{module_contentholder,name=”Blog ad”}
Parallax scrolling
Originally created for the gaming industry, parallax scrolling creates a 3D motion effect by the images in the foreground moving at more quickly than the images in the background. This technique, although very ‘on trend’, can be easily overdone and works best on sites where there are plenty of high-quality images and less in the way on text. For this reason, sites with parallax scrolling may be less SEO-friendly than those with other forms of movement design.
However, when executed well, the technique can create an immersive, highly engaging effect for your users.
Top Tip: If you do decide to use parallax scrolling on your website, make sure you put in plenty of upfront planning and image work in Photoshop, so that the end results are as realistic and fluid as possible.
2D approaches
Of course, it’s not always necessary to use any of the above techniques to create a sense of motion. The use of still imagery, whilst it doesn’t move, can also give the impression of movement if used in the right way.
An image of a person looking in a certain direction, an action photograph (e.g. of a skier or surfer), an image of someone’s hair streaming out behind them as they run, or their dress as they dance for example, can create this feeling of flow and motion.
In a similar way, shadows, the use of light within a picture and the placement of stacked objects or frames give depth and add to the sense of movement, as can colour, shading and blur effects.
Using arrows and shaped elements (e.g. triangles, pencils) that point in a certain direction draw the reader’s eye across the screen, and the skilled use of typography can imply movement, whether through the use of italics, ‘wonky’ lettering or differences in font size.
And finally…
Using movement in website design can be engaging, active and immersive, adding a touch of style and elegance to your site, as well as no small measure of excitement and fun. It can definitely set you apart from the crowd.
But it’s important not to overdo it. Motion in web design should be there to complement the content, not outdo it. So if your videos, animations or parallax scrolling do not form a central part of your message or invoke the feeling you intend, they may prove to do more harm than good. Plan carefully, execute meticulously and remember that less is almost always more.