Wirewax logo

5 Tips On Crafting An Eye-catching Overlay

First thing’s first. What is an overlay? 

As you may know, WIREWAX is a platform that allows you to make any video interactive. Often, this means making notable objects or people within videos clickable (WIREWAX users will know we call these “hotspots”). What we’ve termed an “overlay” is the layer of information that is applied on top of your video once you’ve clicked on one of these objects. It can take many forms, so here are a few examples to get you familiar with what an overlay can look like:

5 Tips On Crafting An Eye-catching Overlay

Chaptering/Branching overlays

5 Tips On Crafting An Eye-catching Overlay

Purchasable product overlays

5 Tips On Crafting An Eye-catching Overlay

Video in video overlays 

5 Tips On Crafting An Eye-catching Overlay

Image gallery overlays

Now that you have an idea of what an overlay is and some of the features they can contain, we can get down to business on making yours as eye-catching and effective as possible. 

We have some beautiful overlay templates you can pick from, but for those wanting to get familiar with everything our overlay editor has to offer, staring at a blank template can sometimes be daunting.

Keep these in mind to get the ball rolling or to double-check your overlay is accomplishing exactly what you want it to.

1. Remember the story you’re trying to tell (or sell)
Whether it’s through a commercial, a training asset, or a TV show, video is a medium that’s always conveying some sort of story. Ask yourself what impact you want to have on your viewer, and what action you’d like them to take as a result of your interactive creation.

5 Tips On Crafting An Eye-catching Overlay
Mango example

Have you got your sights set on retail?  Make sure you have a clear “Buy Now” CTA in your overlay paired with images that leave your audience with that “must-have” feeling.

Trying to educate new employees on company policies? Try using time-triggered overlays which open automatically and encourage viewers to stay engaged with the content.

What about adding a layer of information to the viewing experience without actually interrupting it? Experiment with using non-pausing overlays which don’t take up the entire screen, allowing viewers to continue playing the video while your overlay is open.

2. When it comes to sticking with company aesthetic, try taking design notes from your own website and brand guidelines
We’ve worked with a lot of interesting brands over the years, and it’s always fun to help create interactive videos that feel distinctly “them.” As with everything, you want your video to be able to blend in seamlessly to your website and socials, so it’s important to be pulling inspiration from your existing materials. This can go a long way in helping to dictate the overall look and feel of your project- you’ll be able to gather a color palette, fonts, and small details that make your overlay immediately recognizable (think logos, the way your brand may show close buttons, etc).

5 Tips On Crafting An Eye-catching Overlay
Jansport example

We recommend that when perusing your own site, you choose a simple design cue and apply it often. This will help keep brand flow across your overlays even if you’re making several overlay types throughout one video.

3. Keep it simple-white space is your friend.
The world of interactive video opens up so many possibilities that it can sometimes be easy to want to pack your overlays full of information. We believe in grouping all the content you want to share with your viewers into different overlay types and spreading them out throughout the experience. This way each click of a hotspot can be unique, and your overlays can constantly be delivering something new and enticing. Cramming in blocks of text is often much less effective than spreading it out and complementing it with beautiful imagery.

4. Add movement and animations to keep visual interest
There are several ways to add movement to your overlay. Try uploading a simple background video to your Studio, then use that embed link within another video’s overlay background using our iFrame widget.

5 Tips On Crafting An Eye-catching Overlay
Gif of Porsche overlay with fullscreen iFrame in the background

The image widget within our overlay editor also allows you to add several different file types. Experiment with uploading animated gifs to add little flourishes to your overlays and bring your designs to the next level.

5. Reduce image file sizes as much as possible

If you’ve made it to this step, then why not take that extra minute to reduce your image sizes to ensure your overlays slide in buttery smooth? Uploading massive files will affect the viewing experience, and we all know that no one enjoys spinning load icons.

We suggest aiming to keep all images under 100KB and using sites such as compressor.io or  websiteplanet.com to help bring down file sizes, making sure people experience your overlay masterpieces exactly as you envisioned.

Hopefully this round-up of tips is helpful in getting you started with your next WIREWAX creation. You can check out a few of our favorite examples to gather more inspiration and see what our Studio is capable of, and always feel free to reach out to our team to share your latest interactive video builds.

Written by Jen Mah, Creative Director


interactive overlays

interactive video