Experimental websites which use video in fun, unexpected ways

Video is not an easy element to work with on the web, as anyone who’s attempted to make a website from scratch will know. The possibilities, on the whole, are far more limited than when working with static imagery or text, and so, when you see a website which uses or presents video content in a creative way, it really stands out.

For this month’s Double Click, we’re looking at websites which took us by surprise because of the way they manage to do something different. In some cases, it’s a technical aspect, an impressive bit of coding, but in others, it’s the lateral thinking employed to make video work for them.

Simen Røyseland: www.royse.land

When creating his portfolio site back in school, Simen Røyseland tried over and over again to make something “beautiful showcasing my work in a way that seamlessly blended functionality and aesthetics,” to no avail. Eventually, he thought: “fuck it, what this site needs is a spokesperson.” He searched online for the most charismatic one he could find and the result is a landing page which, on click, sees a complete stranger telling you all about Simen and his work. It’s hilarious and, having first seen this site back in 2017, we’ve yet to encounter anything quite like it.

Simen is currently “strongly considering making a new one” but luckily “the video stays, that dude is a gem!”

Languages used:

“HTML, CSS and jQuery. Nothing out of the ordinary. I chose to avoid the hassle of learning a CMS, so every time I need to update the site I have to edit the HTML file directly. I chose... poorly.”

Any Other Name: goldenhum.com

This next site has been included for the way it actually removes the presence of video, placing it in the background. Golden Hum (AKA Daniel Lea) composes scores and sounds design to accompany film and motion work. The main objective for Ben Atkins, founder of Any Other Name, when designing Daniel’s portfolio, therefore, was to “place emphasis on Daniel’s work rather than the visually striking work of the artists and directors that he collaborates with.”

To achieve this, each project that lives on the landing page is blurred (programmatically), leaving only enough detail to view colour and movement. As you move your cursor closer to a pulsing dot on the right-hand side of the shape, the video in the background becomes clearer. Clicking the dot allows you to view the original video in full focus, in turn, spotlighting Daniel’s role in each project. To create the site, Any Other Name partnered with Official Business to realise the concept. “They understood the technical challenge straight away and considered every detail really thoughtfully,” he remarks. “For example, the contextual cursors ‘LISTEN’ and ‘PAUSE’, when clicked, don’t just turn sound on or off, they fade the audio in (or out).”

Languages used:

“We use Contentful, a headless CMS for content management and GatsbyJS, a React framework for the frontend.”

Osk: osk.co

Osk is a studio based in Los Angeles known for its websites and experiences for the film industry and beyond, founded by Isabelle Albuquerque and Jon Beasley. As part of one of its projects, the studio created a film to train an AI the studio is developed. Osk worked with dancer Denna Thompsen to “capture a range of emotion that can be expressed in the human face to help this AI learn more about us,” the studio explains, of the video which features on its landing page. “The footage was shot by our long time collaborator and friend, the artist Arthur Jafa and the classical almost Veneer like lighting juxtaposed with Denna’s alien performance really speaks to us.”

When you click on the page, it zooms into the z-axis of Denna’s emotion and the word “osk” is spoken in a computer-generated voice. “At our studio, we are interested in developing visual and cinematic languages from new, often non-human, perspectives and we like that this site speaks to that while also allowing people using it to feel agency in the way they see and click through it,” Osk explains. Interestingly, you can zoom in so close on Denna’s skin, that you can view it from closer than actually possible IRL.

Languages and tools used:

“The site is very minimal with the following stack: Languages: Javascript (ES6). Frameworks: React, Redux. Libraries: THREE.js, GreenSock. Tools: Gulp, Babel, Browserify, Sass, PostCSS.”

Iago Barreiro: davidgalar.com

Iago Berreiro is a designer and developer based in Barcelona and the creator of fellow Barcelona designer David Galar’s portfolio site. The starting point, he tells us, was David’s visual identity which is “very simple but at the same time very powerful, based on a display typography and two colours that vibrated with each other.” Before Iago took on creating his site, this identity had only been applied on paper and so he had to translate that visual language to an interactive environment.

David’s site presents video in a unique and altogether digestible way. Hovering on a project title open its video player and, when you move your cursor away, the video’s title is used to show the video’s playback progression. “The objective was to focus the attention of the user on the projects themselves,” Iago explains, “making them the protagonists, as well as making the navigation experience a memorable one.”

Languages used:

“The main library I used was Plyr. It proved very useful to manage the videos, smooth the loads, control the different states and customise the player.”

Pointer Studio: www.pointer.click/naturedocumentariesandmatrixsoundtrack

Asya Sukhorukova and Jakob Schlötter of Pointer Studio caught our attention with their genuinely absorbing site combining nature documentaries and the soundtrack from The Matrix. On load, you’re prompted to click to enter and so the wondrous, meditative experience begins. “We wanted to keep the interface as simple as possible, to keep the focus on the content and create a cinematic experience. It's a never-ending stream of sound and video, so staying on the site for a while feels somewhat like binge-watching a series on Netflix,” they explain.

The visuals of the site make reference to The Matrix in its typography and colour palette, in particular, mimicking the iconic “digital rain”. “To us, there's also humour to it, the running ‘code’ is actually gibberish that consists of random Japanese characters,” they joke. “It looks very cryptic and mysterious while it absolutely isn't. Overlaying the footage from nature documentaries with green Matrix-inspired type has something strange and exciting to it, it creates a new realm in the same way as the combination of sound and visuals do.”

Languages used:

“Plain Javascript, absolutely nothing fancy. The magic is all in the content :)”

With advanced design capabilities and specialised features, Wix gives you the freedom to design and customise a website that expresses your vision, no matter your brand or business. To save 30 per cent on all yearly premium plans with Wix, use code “DoubleClick20” at checkout.