Motion and movement in web design

Monday, June 30, 2014 by Richard Howe

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.

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.

Your comments

Augusta
I rarely leave comments, however I looked at a lot of comments on your blog. I would like to keep up with you. Would you make a list of the complete urls of your shared pages like your linkedin profile, Facebook page or twitter feed?

Post a Comment


Captcha Image

Request a callback

Filter by category

Post archive

Colour Rich designed a modern, bespoke website from scratch for Amelies Estate Agency which far exceeded even my own expectations.

The site is easy to use and stands out from our competitors for its unique design and ease of use. Richard has continuously been a support from the outset is always happy to answer any queries.

Richard offers excellent value for money, especially for a new business looking to maximise traffic to the site. I have and will continue to recommend Richard in the future. Fabulous job, thank you!

What's next?

Get in touch with us today on 01865 522525 and let's kick-start your project.

Colour Rich custom website design

Web design trends in 2020

Wednesday, March 18, 2020

Web design trends in 2020Web design has changed an awful lot over the years. Most people would assume that web design is as changeable as fashion design - a constant flux of styles and trends which are hot one second and not the next. But, one of the biggest overarching movements within web design has been the growing dominance of focusing on user feedback to guide design decisions.  Read more

© Copyright Colour Rich. Privacy