Designing a website doesn’t mean you have to create a static experience – it’s not print. With the rise of HTML5 it’s become easier to add things like animation to create a richer user experience. These visual flourishes can often work to create a more interesting, immersive and remarkable experience if done properly. The same is also true of video, which HTML5 makes much easier to implement in a way that’s accessible.
Bulgari B.Zero1
Bulgari, an Italian jeweller and luxury goods retailer, uses a background video to showcase (or “celebrate”) its new B.Zero1 line. Although the implementation is natural and done well, once again there is a strong potential for making the browser slow that would cause the website to run less than optimally.
Uniqlock
Uniqlock is an advertising campaign for Uniqlo, one of Japan’s largest casual wear retailers. By including the video dance routines, time-signal music and clock utilities, the designers craft a unique experience using the background video technique. .
Gudrun og Gudrun
Gudrun og Gudrun is a hand-made clothing brand by two knitwear designers from the Faroe Islands. The designers use background video to showcase their fashion show, and they use it throughout the website, with subtle transitions via various elements.
Jay Jays Dance/Off
Dance/Off is an interactive 3-D online catalogue for the new line by youth fashion brand Jay Jays. This website is truly exceptional in concept, but not so in execution. The 3-D approach is innovative but also makes the website (which is effectively a fashion ad) impractical.
Louis Vuitton Journeys
Louis Vuitton Journeys is an advertising campaign features three soccer legends, Zinedine Zidane, Pele and Diego Maradona. The intro to the video plays a little too fast to catch everything as it loads, but otherwise it is handled well.
John Galliano
John Galliano is a Gibraltarian-British fashion label; here, the video begins on the main page and takes over your sound and drains your system resources. The navigation is a little too fluid, making it difficult at times to quickly jump around to where you want to go.
Valentino
Valentino is an international clothing company based in Italy. It does a much subtler and less intrusive variation on this technique. Although video elements play throughout the website (e.g. on the “Haute Couture” page), the home page does not automatically start a big video until you select one navigation item.
Byblos (-> Runway)
Byblos is an Italian fashion house that uses video backgrounds very subtly. The splash page is a single frame, and sound runs continuously through the website unless you turn it off. But once you get past the splash page, the only really resource-sapping videos are limited to certain sections of the website, namely the “Runway” section.
Nike: M6
Jordan Melo’s sixth signature shoe by Nike is the subject of the background video featured here; it is a multi-part behind-the-scenes look at the new product design. Once again, there is a potential lag issue because the videos are very big and looped continuously.
Anti Sweden
Anti Sweden is a Norwegian fashion brand that subtly employs background video to complement its minimalist approach. Without the heavy graphics and sound that usually accompany this technique, the website is not as resource-intensive as some others, which is a nice change.
mediaBOOM is an interactive advertising agency that’s taken a unique approach to creating its branding. A background video filmed with a retro Americana style tells the story of their agency set in a fictional world that resembles Manhattan in the 1950s.
The MyProvence festival site uses background video to show highlights of artists exploring the area. The music and the scenes in the video work together perfectly to set an uplifting mood for the site.
Music streaming app Spotify uses background video to help add emotion to their landing page. The core message behind the site is that Spotify is available to provide music for every moment. The background video, a series of clips which demonstrate emotional attachment in different ways, combines well with the accompanying music to generate a sentimental atmosphere around the brand
The promotional website for Ang Lee’s Oscar winning movie Life of Pi makes full use of the full browser-sized background by showing beautifully shot excerpts. Each scene, along with the music, helps to turn a minimalist design into something more interesting and inspirational.
Telly is a startup that finds and shares the most popular viral videos. Its ‘About’ page makes use of a faded, repeating background video, which helps to set the mood beautifully.
