Trend Alert: Moving Imagery
Now we've said goodbye to worrying about the complexity of video players, the homepage is beginning to see the emergence of video imagery. Not only an effective attention-grabber, this tool creates content which is spoon-fed and passively engaged with, setting the tone for the site experience.
Who's doing it?
Brands like Airbnb and PayPal have jumped aboard and added hero video to their homepages with an extremely engaging effect. On Airbnb, the video is personable, inviting and inspiring – just the thing to whet an adventurer’s appetite and encourage them to use the site to explore accommodation options all over the world. PayPal references the connection between money and experience, emotion, and everyday moments – positive money associations as positive PayPal associations.
Does size matter?
PayPal and Airbnb use a static image immediately, with the video files loading at a later point - the video files on these sites can be quite large!
If you’re familiar with the Terabyte homepage, you’ll see we use a stylised video for some movement. This is captured in our own studio and compressed and optimised to a file less than 2MB in size.
A "next-level" solution we would consider for clients in New Zealand, where bandwidth ranges from “dial up crawl” (seriously, ask me about it in person!), to fibre-fast would be bandwidth detection. This involves loading an image, followed by a smaller video for users at a lower bandwidth or using mobile data, and larger, longer video for users with a better connection.
What type of moving image?
For a homepage, as a hero element or even as content, there are several types of moving image.
Stop motion video can be effective, as can slow motion or time-lapse: these effects can be achieved on some modern mobile phones.
The humble GIF (Graphic Interchange Format) image is a type of image format which can be animated. It’s more commonly associated with internet “meme’s” lately, however the format is handy for creating animated images with a low file size that don’t need a special player to be viewed.
Cinemagraphs can be in a GIF or video format. The name was bestowed by their founders, Jamie Beck and Kevin Burg of Ann Street Studios in New York. Cinemagraphs are photographs with moving elements, the benefit of these is that the reduced amount of movement or change in the image can mean a smaller file size. Their effect can also be stunning! Some very cool examples live here.
Design inspiration ...
Where imagery or moving imagery forms a whole background, care must be taken to ensure any content that sits above it is still legible and recognisable. We’ve seen this technique used in websites from cars to hotels, skin clinics to accountants. Some examples:
- Powerhouse Company showcase their architectural and design work in motion.
- Businesspark Vienna present their site offering with mood-setting imagery. The texture overlay would also assist with disguising any video compression that may degrade video quality.
- High Tide’s website takes their name literally in video, while maintaining elegant simplicity.
- Project Skin uses video to engender confidence as a medical practice: the facilities have an impression on their clients. Presenting those first and foremost on the site is brilliantly reassuring.
- Zendesk use video to create a bit of personality on their homepage. They certainly seem approachable!
- Unchartered Waters’ homepage is immersive, bringing their subject matter to life and taking the user aboard yachts through video.
Every client we’ve workshopped a homepage with in the past 5-6 months has wanted to discuss this approach. We'd love to explore more with your brand in mind.
Always interested in great examples, feel free to share those with us if you spot them in the wild!