Incorporating Video into Your Website Design

Mike Goubeaux’s life revolves around video. An L.A.-based television commercial director, Mike has worked on spots for the likes of Doritos, Sprint, and Disney, to name a few. In fact, you’ve probably seen some of them.

As a freelance director, Mike is constantly competing against other directors and production companies, pitching agencies to win jobs based on the quality of his reel — which is where Wistia comes into play.

For Mike, and for many companies who prioritize video on their websites, the goal is simple: let visitors get to the videos as quickly as possible. "I want my video content be the first thing people see,” he said. Which explains why his commercial spots take up practically his entire homepage. “They’re what I want people to experience as soon as they land on the page.”

Throughout the years, he’s gone through several redesigns of his site, with a few different video players hosting his content. All of these changes have brought him to his current format, a grid design featuring bright, splashy images from his promos and spots that lead to Wistia-hosted videos.

Sure, he frequently gets compliments on his site from friends and colleagues in the industry. But he also wonders why so many of his competitors have sites that look so, well, bad. ”Some people are still using QuickTime embeds!” he joked.

Not to mention that as a freelancer, the stakes are particularly high. “If the player doesn’t load or buffers, I don’t get the job," he explained. "It needs to work, work fast, and look good.”

“If the player doesn’t load or buffers, I don’t get the job. It needs to work, work fast, and look good.”

We hear from customers like Mike all the time that love the sleek look of the Wistia player, but aren’t always sure how best to incorporate it into the design of their website.

If you’re going to invest in a video marketing and awareness strategy, you want your efforts to show. So we sat down with members of the Wistia Design team to see what companies could be doing better to take advantage of the unique design of the Wistia player.

Making video a priority on your site

Let’s set the stage for why having video on your website is even necessary in the first place. Because video is such an integral communication tool — some might even argue the primary tool — for the online landscape, if you’re not building a website with video in mind, you’re only using a fraction of the tools available to you. “Text and images alone aren’t going to cut it,” said Phil Nottingham, Wistia’s Video Strategist.

When thinking about how to include video on your site, approach it the same way you might consider adding text or images to your pages. “You want to ask yourself, ‘What’s the most dynamic way I can present what I do to my audience?’ The answer will probably result in including video on your pages,” Phil said.

“You want to ask yourself, ‘What’s the most dynamic way I can present what I do to my audience?’”

Video also allows people to explore your content in a way that best suits them. With all numbers indicating that the overwhelming majority of web traffic is going to continue to be video-driven for the foreseeable future, you may already be behind the curve if video isn’t featuring prominently somewhere on your site.

Understanding the design of the player

The Wistia player has undergone a series of makeovers throughout the years, some obvious, some less so. But every single one has been pored over by a team of Wistia designers who know better than just about anyone what makes the player attract attention on the page.

Take it from Joe Ringenberg, Wistia’s Director of Design, who helped spearhead the redesign of the Wistia player in 2016. “One of the guiding principles was that we wanted the users’ content to be ahead of the player itself,” he said. “Our number one goal was for the player to get out of the way.”

That’s one of the reasons why the player design is as minimal as possible; you won’t find any unnecessary borders or extra shadows. “There’s literally no element or pixel that doesn’t have to be there,” Joe said. ”[The player] looks distinctive, but ideally no one sees it and recognizes it as anything other than a video. It’s how video should look on the internet.”

Some players can draw undue attention to themselves, be it in their excessive branding components or poor aesthetics. “We didn’t want the player to look so stylized that it starts conflicting with someone’s branding or design on their site,” Joe said. "Your video should be about you, not the platform it’s hosted on.”

“We didn’t want the player to look so stylized that it starts conflicting with someone’s branding. Your video should be about you, not the platform it’s hosted on.”

Danielle Bushrow, Design Lead at Wistia, shares the same sentiment. “Other players have disruptive branding elements that dilute your brand voice,” she said. “It might not seem like a big deal to host your video on a generic player, but when something doesn’t match or feels off, it disrupts the entire user experience.”

Choosing your own adventure with customizations

For Mike, having a player that looked great and delivered speedy playback without buffering weren’t the only must-haves. “I needed a player that was reliable, in addition to being customizable,” he said.

Spend even a few seconds glancing at his homepage, and you’ll get an immediate sense of his style and work, aided by his signature play button color — pink. “It feels like I designed the player to match my site, when really the player already comes looking like that. It just happens to suit the site.”

That isn’t an accident, according to Joe. “Everything is affected by the player color you pick, not just the play button,” he said. “Ideally, the controls themselves should look like they’re part of your brand. They’re super minimal, and whatever character they do have comes from what color and customizations you set them to.”

According to Danielle, ensuring all these details are consistent and cohesive helps create a stronger voice for your brand. “The Wistia player being so minimal and customizable really lets you and your content shine,” she explained. “Good design is invisible, and in some ways we want our player to be, too.”

“Good design is invisible, and in some ways we want our player to be, too.”

Putting the pieces together

If you’re thinking about how you may want to feature video on your site, what should you take into consideration?

First, Danielle says to step back and make sure you’re not adding a video just for the sake of having it: it’s crucial that your video actually adds value to the page. “Ideally, the information you include in the video should be best communicated through that platform,” she said.

Once you have an idea for where the video might live on the page and how it might look, work closely with your videographer or video team to come up with the final plan. “As a designer, it feels disjointed if you say, ‘We need a video to go here’ without considering it from every team’s perspective,” Danielle said.

Whatever video you end up making, owning that content as part of your unique branding will make sure your visitors leave your site with a lasting impression of your company, not the company you use to host your video.

That’s a big plus for Mike. “The Wistia player doesn’t seem like it’s part of the Wistia brand, because it’s not enforcing its branding onto your branding,” he said. “It’s just another example of the design power and flexibility I need, and get, with Wistia.”