Making a Video Banner | Michigan Web Design

When Facebook updated its banner features for users, Artonic decided we wanted to create a video for our Facebook banner. Then we decided to use the video for our website, too. Here’s the story of making a video banner for our website.

First Things First

Artonic's homepage design Making a Video Banner. — Our homepage needed an update.

Once we decided to make a video, we determined that we wanted something short that could be played on a loop. We settled on a video of a worker at a desk, performing routine tasks. (Want to know why we think it’s important to show visuals of your team doing what they do every day? Check out Photo Stories: Onsite with Doctor Flue.)

Ashlee arranges a coffee cup on her desk.

To that end, we chose Ashlee’s work desk as our location. She arranged items on the desktop like a cup, mouse and mouse pad, headphones, and a branded Artonic folder.

Equipment Set Up

Next, she set up her equipment: a camera, tripod, and a mic to capture audio. This was placed behind the desk, as though watching the individual from the back.

making a video banner for our website was fun. — We used a camera, mic, and tripod.

We Need a Puppy

Ashlee’s dog was in the office the day we were making the video banner, so we included her in the footage. Her bed is under Ashlee’s desk, so she was in the perfect position.

We are making a video banner. — Quinn at the office, making a video banner.

Quinn is naturally gorgeous, so we love to include her in photos and videos when it makes sense. In this case, her presence was perfect, since she’s in Artonic’s office quite often, she adds interest to the video footage, and she’s visually beautiful.

Photos of the Video Process

While Ashlee set up the shot, we took a few photos to document our work.

We decided on a simple video – sitting at a work desk, typing, writing, and drinking coffee. We placed an Artonic mug on an Artonic coaster near the model’s right hand. It would be thirty seconds or less, so we didn’t need much footage.

This is actually a really smart thing to do – document the every day things you do and write a blog article about it or post the images on social media. It’s a great way to connect with your audience by showing them the authentic side of your business.

Another View

Ashlee decided to shoot the video from above for a different type of viewpoint. To do this, she positioned the camera and mic above the model.

This was actually a lot of fun, and it didn’t take very long. Ashlee was quick to set up her equipment and the location, and we only filmed for a short time, about ten minutes. We used only one point of view with zero cuts, so editing was much less time-consuming than usual.

Watching the Footage Live

She used her mobile phone, placed on a shelf, to view the overhead image as it recorded. This also allowed the model to glance at the screen and see what the shot looked like.

Ashlee watches the live video on her mobile phone.

Another reason this video was so quick and easy to shoot was the location. We didn’t have to decorate or even clean up very much, because our office is beautifully branded.

Audio

We recorded audio so that we could have soft background noises included in the video banner. Loud audio that plays automatically when your website loads is not what we’re going for. Instead, we wanted subtle noise to enhance the viewing experience.

Envato makes this statement about auto-playing audio on your website, and we agree:

People browsing the Internet will often be playing music of their own. When another sound comes out of nowhere it’s either a brief shock or a persistent annoyance. Even if you assume most visitors will have their speakers turned off, is it really worth the risk?

Do the right thing and just mute background videos. Trust me, you and your visitors will be happy you did.

Props

We shot at Ashlee’s desk with branded materials, like a mug and a folder. We incorporated a bunch of flowers, but ultimately decided against including them.

Artonic’s desks are white and the props we used – computer monitors, phone, mug, and folder – are black with orange accents. Because our office is excellently branded, it is the perfect setting to shoot an Artonic-themed video.

Video Length

We wanted a short video that we could play on a loop, because we didn’t want the video to slow down our website or overwhelm viewers.

Check out Sitepoint’s view on video length from 10 Guidelines for Better Website Background Videos, “You should always limit the length of your video to 30-40 seconds at the most, or even better, find a short video that loops seamlessly, so that it seems like a longer video, but could be less than 1MB or 2MB in size, depending on the length.”

The Final Video Banner

Our video banner was just completed and submitted to our developer to implement. As soon as he does, we’ll update our post to show you!

For now, this is what the design of our homepage will look like, with the video banner:

Making a Video Banner for Our Website