If video killed the radio star then it’s for good reason. Video – whether as a tool for marketing, engagement or entertainment – is a medium which combines sound, images and eye-catching movement into a powerful trifecta that consistently yields results. It’s no wonder that the world of web design is using it to its full advantage; more and more websites are incorporating video into the very fabric of their design in order to make their mark on the internet, and stock footage is the ideal resource for this purpose. With that in mind – and since creative use of stock videos is what we’re all about – we’ve compiled just a few of the most creative ways using video elements in a website can really up the ante.
In A Grid
The most obvious place where it pays to use video is on your website’s landing page. This is the first thing users see when they navigate to your site, so making an eclectic first impression is key. It’s important to strike the right balance: efficient, not bare; simple, not boring. In the age of minimalism and negative space, using video as part of a grid layout can tip the balance of a web design from basic to streamlined, and this is where the flexible nature of stock video proves invaluable. One video does many jobs: it succinctly communicates the mood, product and service that the website represents, providing just enough information for the user to know they’ve found what they’re looking for, while encouraging further site engagement. The blurred, black and white, high quality video element in Designer Fernando J. Maclen’s landing page is a visually unobtrusive trust signal that does not overshadow the key information in the copy. Instead, it complements the function of the website by reassuring users that they can expect a high-quality product and diligent service.
As a Header
As you may have noticed from our own web design, we’re big fans of the use of video in a banner or header for a page. But we’re not the only ones. For pages like Shutterstock, which aims to showcase a variety of visual media, the movement of a video header draws the eye to their CTA, without dominating webpage real estate. This means that the video banner can offer users who know what they’re looking for control over how they navigate the site, while simultaneously offering guidance and inspiration to those who don’t. A video header is one of the most flexible design elements, allowing for a wide variety of video content. Its relative simplicity means it suits a wide range of video types, from looping motion graphics or abstract footage, to dynamic action shots, panoramas, or portraits.
Parallax Scrolling
Parallax scrolling (also known as asymmetrical scrolling) is a scrolling system in which foreground content moves at a different rate to background content or right-hand side content moves at a different pace to left-hand side content. This is an example of where the right image or video can really set a website apart from the others. A slow moving video or motion graphic provides a perfect base that allows foreground images, graphics or copy appear to interact with the background. As a result, the asymmetrical scrolling speeds don’t appear too disjointed. This technique works brilliantly for websites that aim to construct a narrative, such as CNN’s interactive website which aims to educate its visitors about the impact of global warming on Greenland’s glaciers. Text and graphics which appear to interact with the video backgrounds matter make the simple act of scrolling through a website an interactive and engaging experience, and guarantees that site visitors will spend a little extra time on their webpage.
Instead of Copy
Why tell your users what you’re about when you can show them? It takes more time to read information than it does to absorb it through a visual medium. And since the key to good web design and a positive user experience is that users shouldn’t have to work hard to find what they need, a relevant stock video instead of copy (or nothing at all, leaving users to guess where your page is taking them) can work wonders.Brightly’s Tweetflight project – a music video-cum-twitter livetweet – is a perfect example of this. Video’s position at the top of the media food chain generates user interest in their music from the get-go, taking the dynamism of the music video format and exploring its potential in the age of the internet. The website maps tweets that match the song’s lyrics over a selection of public-domain and found footage. A page like this is where stock footage can take centre-stage. Unlike video elements that serve as trust signals, and complementary features, Brightly’s project provides a perfect example of where a video is, and should, be doing all the work so your users don’t have to. It’s also worth noting that a well-designed band or music website is probably one of the few instances where a video with sound is an acceptable feature.
As Copy
Though video can be fantastic, there is such a thing as too much. In addition to slow loading times and potential battery drainage for your users, a video, no matter how well chosen, can sometimes simply be too distracting. However, in these cases, this doesn’t necessarily mean that it must be excluded. It is possible to swap out the information-through-images format for images-through-information. Advertising company Poolhouse, for example, have incorporated video into the text of their branding, rather than a simple text-on-video overlay. Not only is this a slightly different take in an online world where more and more web design incorporates some form of video background, but it also overcomes one of the major pitfalls; unlike most video-with-text-overlay formats, Poolhouse’s use of video doesn’t run the risk of sacrificing legibility. This kind of design also permits a greater degree of flexibility: since less of the video is visible, the range of clips you can use is far wider than some of the more prominent video formats.
And there we have it! These five creative uses of videos in web design demonstrate that the sky really is the limit when it comes to developing a cutting edge webpage. And stock videos – created with quality, flexibility of application, and aesthetics in mind – make the perfect resource for directing the creative potential of a video element towards improving user engagement, conversion rates, and generating trust signals. As always, we’d love to hear what you think the best uses of video in web design are, so drop us a line if you think we’ve missed anything!
