From interactive websites to online portfolios, video-based web design has been quietly taking over: refreshing uses of video hovers have been popping up on different websites and more designers employ sound-related interactive visuals in their work. But the growing use doesn’t mean it’s become easier to implement and control the moving image. On the contrary, designing video’s basic elements – like shape, location, or the ‘play’ button – still requires developing skills. Also, as GIFs increase loading time – a crucial element for users with short attention spans – and are promoted less than videos by Google, there isn’t an actual alternative in sight.

As humans, we are dynamic problem solvers, but we also get used to new things quite fast. Once we figure out how to use or do something, we rarely challenge it or think about how it can be redesigned. The video medium is a great example for this tendency: it’s been around for quite a while and its use is growing exponentially, with some analysts suggesting that by 2019, video will account for 80% of the world’s internet traffic. Yet, its rectangular shape and complex implementation made the potential of video hard to realize. For the designers at the Wix Wow Team – a small product-innovation team working on unique products – VideoBox is the answer to a new video-based design presence.

A box of tricks

Aimed at transforming the use of video in web design, VideoBox is a design tool that  liberates the moving image from its traditional four-cornered shape, while breaking it down into elements that can now be controlled. With each aspect of a video being customizable, from its shape to its ‘play’ button, videos can be used as design elements on websites, adding to their character and visual identity. Similarly to any GIF, image or vector art, VideoBox elements can appear in any section of a website – either as a visual element, or to counter an existing text.

VideoBox is built to overcome the technical complexities of using video players, and free videos from their rectangle borders, while bringing to use all the advantages of a responsive video, so that the user can play, stop and fully control the sound. The videos also don’t affect the website loading time, and can actually facilitate SEO efforts (with the use of a description). But the product’s true innovation is attributed to the new design and interactive abilities that it offers – editing overlays, shadows, borders and shapes that transform video files into vivid visual elements. With a flexible, seemingly borderless structure, it allows enhancing the playback experience with a blended motion overlay. It can be used in countless different and creative ways, to convey a message or to simply surprise the user.

The creative development

For this project, the Wix Wow Team’s variety of professionals let their intuition lead the way. The project was first initiated when they noticed how video was both taking over as a medium, while simultaneously reaching a standstill design-wise. The team carefully examined the complex implementation of video-based elements in web design, and realized that a unique product was the solution. The technical complexity of such a product meant a long development process that influenced their understanding of the end result: a timeless product, rather than a trend-based solution.

The team’s designers still wanted to combine the product’s timelessness with up-to-date visuals – and leaned on brutalist aesthetics, as well as being influenced by the work of artists like Alessandro Michele (for Gucci). The design features of the product focused on the simple creation of contours and masks, with a designated description field to enable users to promote their content on social media. The development aimed to give every user full control over video behavior – from start to finish.

A new kind of mastery

Once video is no longer a unit, but rather a group of designed elements, there’s a long line of aesthetic decisions to be made: when to start playing, whether it should be paused, how it should end and what will follow. Additional aspects – like playing with hover effects, making it behave like a GIF, and controlling the sound – show that there are countless uses for video as a design element in any website. The Wow team continue to update the pool of patterned overlays, ensuring that the look and feel of the videos will keep resonating current trends.

Here’s a simple how-to guide to start playing with VideoBox and create your own video elements:

– In the Wix Editor, go to ‘Add’ on the menu bar and click on ‘Video’. – Scroll down to the ‘VideoBox’ section, then drag a VideoBox onto your page. – Once the VideoBox has been added to your website, click on it and start editing the way it looks and behaves.

If you want to upload your own video or change it to a different video from our catalog:

–  On the VideoBox, click ‘Change Video’ then select a video from your Media Manager.

Whether using your own video, or choosing one from the catalog, you can add overlays, play with the shape of your video using ‘Contour’, and decide what viewer interaction you want for your video.