New Generation of Web Animation in 2016
2016 is a great time for animation. There are an array of tools available to digital creatives that are used to produce original, engaging and expressive animated graphics for the web. If you think your website is in need of some soul, or it’s struggling to keep the users’ interested, a vector animation might be the addition you were looking for. Interactive graphics grab and hold your users’ attention, and can turn a static, forgettable page into something that people come back for.
The best examples are the hardest to notice, they fade into the background, gently prompting you to find your way to the shopping basket, or the enquiry form. The worst offenders spiral across the page, interrupting your browsing and vigorously encouraging you to visit the site of an advertiser.
However animations can also be used to tell a story, or set a mood for your page, not just as part of your interface. Unlike the previous generation of Flash animations, which required their own frame within a page, modern animated graphics fit effortlessly into the normal flow of a webpage. The same tools used to animate the buttons above can be used to animate individual parts of static picture in order to breathe life into them.
Pixels vs Vectors
Pixel Graphic
Pixel graphics store a fixed grid of colours, they can be scaled down, but cannot be scaled up without pixelation. Any image captured by a camera uses this type of file, as do images produced by tools such as Adobe Photoshop. Once created, a pixel graphic can be cropped, distorted or scaled – but the contents of the image itself cannot be changed.
Vector Graphic
Vector graphics store a set of instructions that your computer follows to draw the image, the easiest way to imagine this is with an etch-a-sketch. To draw a square you would need to travel 5cm right, 5cm down, 5cm left and 5cm up. If you wanted to draw a bigger square, you would only need to increase the distance that you travel to produce a larger shape. Vector graphics work like a gigantic, multi-layered etch-a-sketch – and the values for each path can be changed on the fly.
Creating an animation
We have created an original animation to demonstrate our creative process at GenerateUK. SVG (Scaleable Vector Graphic) animation requires both design and development skills – a well executed animation will fall flat if the quality of the original graphic is unimpressive, and likewise, an ill-assembled animation can ruin a high quality illustration.
The first step is for the designer to create the image using Adobe Illustrator, which he passes to the developer as a storyboard:
Using this storyboard, the developer creates an SVG file and a set of animation instructions for each shape that needs to change state. Some shapes require a colour change, others need to move or fade. Depending on the complexity of the animation, this process can take minutes or hours.