We’ve come a long way since the days of dial-up internet access and websites whose sole purpose was to pass on practical information. We’re now seeing websites with much more engaging, interactive elements that integrate sound and movement to create whole, sensory experiences. These new explorations are leading to truly innovative web design that couldn’t be possible without the incorporation of motion – a crucial part of this storytelling process. As our demand for seamless online video experiences grows, it’s technology that has to up its game, enabling us to play with motion and treat videos just like any other design element.

Before we deep dive into examining how videos are being used in today’s web design, let’s take a little trip down memory lane. Similarly to websites, videos were once predominantly used for sharing information, or as a form of promotion or entertainment. They were (and usually still are) presented in a vertical or horizontal box shape. When gifs came along, we couldn’t get enough of them, adding them to our Instagram stories and using them in many other ways to eloquently express ourselves (ahem). But despite their popularity – and we really do love them – gifs affect websites’ performance, dramatically slowing them down. In a world of short attention spans, we have no time to lose if we want to retain our site visitors. When Google started advising people to replace their animated gifs with video files earlier this year, some of us finally got the message.

Creative studio, The Beautiful Meme, put an emphasis on videos on their homepage, resulting in an addictive scrolling experience.

With this in mind, let’s take a look at the state of video trends in web design today, and what we can expect to see in 2019:

1. Videos of all shapes and sizes

So, if rectangular videos in web design are now a little passé, what’s the hottest up-and-coming video format these days? Well, that’s the thing – there’s no particular format. In fact, it’s time to toss all rules aside and treat videos on websites simply as moving elements. This doesn’t mean that the more traditional video format can never be used (rectangular videos can still be a highly valuable way of passing on information), but when speaking about creating immersive online experiences, videos should be used as dynamic design tools that help convey a certain look & feel and engage the user. See how 6SKIN, a sound and image fantasia, merge moving backgrounds with videos of different shapes on their Wix website. Each fold of their site offers diverse and intriguing visuals that keep you fixed to the screen.

That’s all very well, but how can you put this into practice? “When we recognized the need to add motion as an integral part of the online storytelling process, we explored the best way to achieve this, from both a design and technological point of view,” explains Ron Ron, Product Manager and Creative Director from Wix’s Wow Team. “We believe that technology and content go together hand-in-hand. Sometimes, technological constraints can end up pushing us to create new things. In fact, that’s how we came up with the VideoBox feature. It’s all about design, storytelling and motion, or in other words, video experience. It uses video files instead of gifs, so it combines what we love about gifs with what technology can offer, while offering great performance online. VideoBox enables you to share videos with no black margins and design your video in any way you want – you can alter the ‘Play’ button, add filters, crop the video to different shapes and more.”

Graphic designer, Jed Mikolaites, has put video in the forefront on his online Wix portfolio, using VideoBox to create mesmerizing effects.

Independent news outlet, The Public Probe, have added a video on their top fold to help set the scene, while incorporating a retro filter using VideoBox.

2. Videos with transparent backgrounds

We’re already accustomed to using PNG or SVG files (static images) with transparent backgrounds, so why not take it to video too? Another video trend you can expect to see on websites near you, is transparent videos. This nifty trend opens the doors to many exciting web design possibilities, as you can integrate videos on your website, while keeping the background beneath exposed. See how multidisciplinary artist and Wix user, Ariel Noltimier Strauss, seamlessly combines animations on her website.

A similar effect is achieved here on architecture studio Mershandlee’s website, with videos presenting 3D shapes that seem to float in a black void. A nice extra touch is that you can pause the various videos with the custom-made ‘Play’ button they’ve created.

To make this all possible, we’ve designed a small, but growing, library of transparent videos that you can use for free on your website. And there are more surprises on the way, so watch this space!

3. Animated vector illustrations

This brings us smoothly onto another exciting motion trend on the horizon: animated SVG files. In the responsive world that we live in, more and more design elements need to adapt. We can already see the growing use of vector art (or in other words, SVG files that are scalable and cannot pixelate), but why not bring them to life? It’s already possible to animate these files, making them slide, spin and gradually fade in and out of sight, but this can be taken a step further, with technology that gives us advanced control over each detail of the illustration. This trend will enable us to include any vector-based images and animate them on our websites, while resting assured that they won’t negatively affect our sites’ performances, as they are much lighter than gifs. Plus, thanks to the wonderful technology that is vectors, you’ll be free to scale them in any size you like.

So, where do all these beautiful things leave us? If you want to stay up to date, explore how you can integrate motion onto your website – both on the desktop and mobile version. Remember that thanks to technology and cool video features, you don’t necessarily have to be a motion graphics expert – you can freely experiment with simple videos and animations that make your website that little bit more dynamic and engaging.