• Videvo
  • /
  • Blog
  • /
  • Creative Ways of Using Stock Video in Web Design Projects

Creative Ways of Using Stock Video in Web Design Projects

in Category: Blog | by Videvo

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, image 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 elements of a website where use of video can really up the ante.

 

The Landing Page

 

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. As sleek web design becomes the name of the game, it’s important to strike the right balance: efficient, not bare; simple, not boring. The video you use does not have to be complex, or even extremely specific to the company, product or service that your website represents, but it ought to correspond in some way, and this is where stock video proves invaluable. The best video backgrounds or elements of landing pages tend to be those that provide enough information for the user to know they’ve found what they’re looking for, but still encourage site engagement.

Take, for example, the video element in Designer Fernando J. Maclen’s landing page: visually unobtrusive, this blurred, black and white, high quality footage of Maclen working ensures that the video element does not overshadow the key information in the copy. Instead, it complements the function of the website by reassuring users that they can expect quality (and up-to-date!) content and services.

 

Headers

 

As you may have noticed from our own web design, we’re big fans of the use of video in a banner or header from a page. Video banners are a great middle ground for those websites where a full-screen video background or element would be too intrusive, and negatively affect user experience. The brilliance of the banner is that users can simply scroll past it. For example, websites who market videos (like Coverr, a great web design resource for video), have to strike a balance between showcasing their clips, without diverting attention away from the bulk of their content. A video banner is perfect in a website looking to give their users the feeling of being in control, which is advantageous for a site looking to market to those who know what they’re looking for.

 

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. This is an example of where the right background video can really set a website apart from the others. A looped slow moving or abstract video provides a perfect base that allows foreground images or copy appear to interact with the background. As a result, the asymmetrical scrolling speeds don’t appear too disjointed. A brilliant example is the Feedmusic website. Their use of video as both foreground and background matter make the simple act of scrolling through a website and exciting and playful experience, and guarantees that site visitors will spend a little extra time on their webpage.

 

Instead of Copy

 

Why tell your users what they’re engaging with on when you can show them? The general consensus seems to be that it takes 60,000 times more effort 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.

The website for German Band OK Kid is a perfect example of this. Video’s position at the top of the media food chain in order to generate 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. Luckily, you don’t need your own music video in order to replicate this effect. Stock video affords a near-infinite choice of unusual and eye-catching clips, and a navigation page like this is where such footage can take centre-stage. Unlike video elements that serve as trust signals, and complementary features,  OK Kid’s website 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 sound autoplay is an acceptable feature of a website. As a rule of thumb, improved user experience depends on videos being seen and not heard.

 

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 hasn’t sacrificed 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 any of the more prominent video formats.

 

So, having shown you what inspires us, we thought we’d throw in a few of our favourite websites to get you started. In addition to our own selection of high quality clips, Coverr, (as listed above) and Mazwai both specialise in stock videos perfectly suited for the purposes of web design, and are well worth a look. As always, we’re eager to hear your thoughts, comments, or suggestions for anything we may have missed.