Moving images are increasingly becoming the tool of choice to breathe new life into corporate websites. Stage videos or animations can attract the attention of your stakeholders or can be impressively representative of a company’s performance. A smart use of videos or animations within a header draws a lot of attention from the beginning as they are the first thing the visitor sees. As the old saying goes, you can only make a first impression once! Furthermore, they can be a useful tool to preview stories or specific sections in a digital report that companies want to showcase.
Flat design, 2D, animated SVGs
From a design perspective, SVG animations are often based on a flat-design approach, and flat design is about simple shapes (hence 2D). When properly embedded into a specific design concept though they can become very powerful tools. Furthermore, animated SVGs load very quickly, they’re very small from a file-size standpoint and they take very little time to produce without a lot of background work. Check out what we did for Metro and Clariant.
3D animation
3D animation relies on graphic capabilities in the sense that you can show anything you want. It’s pretty limitless in terms of creativity which makes it possible to show more complex shapes so it is pretty much up to the designer’s imagination. Compared to flat design it is more time-consuming to produce as it entails more complexity but it has a bigger WOW effect. An excellent illustration of this was what we did for Prosieben‘s new Annual Report.
Loop-video
HHLA uses classical loop-video features as a way to grab people’s attention. This approach is recommended when clients have access to a repository of multimedia material or are open to produce a new one. In this case from a concept perspective the video on a constant loop also perfectly captures the feeling of constant motion in a port. This approach requires a fair amount of planning if there are no multimedia materials available.
Cinemagraphs
HUGO BOSS means FASHION so they always need to come up with something very eye-pleasing and a bit avant-garde. To this end, they use cinemagraphs. In their particular case, these are actually based on static photos that are animated so that they produce a moving, vivid effect in order to immediately catch the reader’s attention. The main advantage is that you only need one picture as a starting point to produce cinemagraphs. It needs very few resources but the outcome is quite unique (depending upon the designer’s skills and talent of course!).
Text: Daniel Gallar