Mar 23

Analyzing the Explainer Video Trend in Web Design

Mon, 03/23/2015 - 14:00 — julie

New companies from startups to agencies can all benefit from a revolutionary explainer video. These are usually 2-5 minute videos which cover the gist of a company’s goals, objectives, and services/products. Visitors want to understand a website’s purpose as quickly as possible, and videos just so happen to be an excellent method of doing so.

In the following guide you’ll find some great suggestions for designing a captivating explainer video and methods for incorporating the video into a webpage. Although people can always find your video on YouTube, it’s more common that they’ll stumble onto your site via Google or external links. Getting people to actually watch an explainer video is half the battle which requires a keen eye for marketing & design.

Clarifying with Purpose

A great explainer video will clarify the message with a specific goal in mind. Before even crafting your video, it helps to write out a few questions which should be answered directly. What exactly does the company do? What is being sold and why would anyone need it?

Answering questions in a concise manner is the key to viewer retention. Nobody wants to waste 4 minutes on a video that’s going in circles about vague ideas and “helping the world” through ambiguous technology. Be pithy and detailed with the dialogue so visitors are drawn into the video from a real-world understanding.

we use coins bitcoin video

I really like the example on We Use Coins which goes into detail about Bitcoin and the various means of using the expansive crypto-currency. Their video moves quickly and uses illustrations to visually explain each concept.

Each clip in your video should have a very specific purpose. It’s wise to never repeat information unless it can be presented in a different way. The goal is to have people watch the video and walk away with at least a rudimentary understanding of the product or service.

Little examples and “what-ifs” can help to clarify the message. But in general try to stay grounded to reality. Start with a list of questions that need to be answered and fit those answers into a video script using the most expeditious narration possible.

Lucid Demonstrations

While voice narration is always great it’s not enough to create the perfect explainer video. After all, this is a video which means both audio and visuals should be combined together.

Many explainer videos go with cartoons or vector animations to illuminate their message. Other videos will use real people to demonstrate how someone might use a product, program, or mobile application in real life.

The goal is to connect each idea so the user clearly understands the purpose and function of the company.

crazyegg explainer video design website

For example, many people will recognize the Crazy Egg video which uses a mix of both vector animation coupled with browser rendering. These browser examples are just animated interactions with a visual web browser to demonstrate Crazy Egg features like heatmaps and bounce rates.

instagram direct explainer video

To see a live-action type video check out Instagram Direct. The video concept follows a few people using Instagram Direct in real life. Various scenes depict close-up shots of the application interface to get people familiar with how it looks. These live-action explainer videos tend to work best when the product is used in a more traditional manner as opposed to digitally.

But no matter what style of video you choose to create, the ultimate goal is clarity. Stay brief and stick to the key talking points. Visitors don’t need to know everything. They just need to know enough to pique some curiosity and get them digging for more information.

Self-Hosting or 3rd Party Hosting?

When it comes to hosting the video you’re down to 2 primary choices. You can either host the file(s) on the main website’s server or stream them from an external 3rd party server.

The benefits & drawbacks are pretty straightforward, so it really depends on the company’s level of popularity.

When hosting a video locally it will stream from the main website’s server. This can take up a lot of bandwidth depending on video size and how many people are streaming in an average day.

But hosting locally also allows the designer to embed the video using a custom player. It offers much more control over the player size, color, and button styles. However bandwidth is definitely something to consider and it might be wise to check with the hosting provider first.

Alternatively you could go through a 3rd party host like YouTube. This is very common because many companies already have their own channel profile. It’s super easy to get videos up onto YouTube and their servers are generally lightning-fast.

The only downside is a lack of customization when it comes to video player design – but for most people this shouldn’t be a huge problem.

indiegogo crowd funding video

With a little finesse you can embed a YouTube video flawlessly into any layout. Take the example from Indiegogo which plays a video from YouTube after clicking on a wide CTA banner. It uses a simple button and background image to draw attention into the area without overtly displaying a YouTube media player.

revaluate video wistia hosting

Another alternative can be found on Revaluate which uses Wistia video hosting. This company does cost money so it’s not as great compared to the free YouTube alternative. But in some cases this would be smarter because you’ll have access to analytics and more in-depth customization options.

Wistia has a large features page which covers all the various options and properties of their video service. So for most new companies the choice of 3rd party hosting seems obvious.

The secondary question is whether to choose a premium host like Wistia, or go with a free alternative like YouTube or Vimeo. There is no right or wrong answer because the choice will be different for each company. Just take a look over the options and pick whatever feels right.

Tuts+ logoThere are a mountain of explainer video After Effects templates over on VideoHive. If you’re looking to learn how to use Adobe After Effects, you should head over to Tuts+, they have many tutorials and courses that will get you started in no time!

Video Placement Tips

Once you’ve chosen where to host the video it’s crucial to choose a prominent location on the page. Some landing pages will embed the explainer video at the very top. You can see something like this on Panorama9 where the video is displayed well above the fold.

panorama9 explainer video website

Otherwise you could choose to embed the video lower in the page like on the Revaluate homepage mentioned earlier. This may capture less views but it also feels less blatant in regards to marketing.

Hand-in-hand with video placement is the embed style. The obvious first choice would be to embed the video right into the page. This way visitors can just click and the video starts streaming. Nothing right or wrong about any of these choices – they’re just choices and one may fit better into a design than another.

Let’s dig into two other alternatives:

Modal Window Players

In-page modal windows are like the 21st century version of popup windows. These are white boxes which appear on top of a webpage. They’re usually opened by clicking a link or a button. Typically the website will be covered by a semi-opaque shade of black to draw more attention to the modal window.

adwords for video explainer

Google uses this technique on the AdWords for Video landing page. In the top header section, you’ll notice a YouTube icon with the link text “watch the video”. It blends very nicely into the page and doesn’t draw too much attention.

google wallet modal window explainer

Once you click the link it’ll open up a modal window with the embedded video. You’ll find the exact same technique on the landing page for Google Wallet. Modals are great for keeping an explainer video within reach but out of sight.

Fullscreen Players

Absolute fullscreen domination is another choice for explainer videos. These don’t take up the entire screen right on pageload, but instead have some type of call-to-action link or button. Once clicked it’ll open the fullscreen video player so visitors aren’t left with a choice of clicking a “fullscreen” button. explainer video design

The homepage for uses a large banner image with a play button on top. It’s somewhat obvious that the banner is clickable and leads to a video. Most users would be able to take the hint and choose to either click or skip right over it.

animaker fullscreen video cta

For a somewhat reversed effect check out the Animaker website. The entire homepage header uses a fullscreen background with the same play button icon indicating a video player. By clicking anywhere on the header a video player will appear inside a modal window.

But in this case the header banner & play link are “fullscreen” while the video is embedded into a reasonably-sized modal window.

This way visitors will obviously notice the play button and quickly catch on about the hidden video link – but when playing the video it won’t take up the entire page. And naturally the video player does have a fullscreen button so it’s more of an option instead of a requirement.

Whichever of these methods you choose will again come down to circumstances. Check out the various examples from this post and see which effect you like best.

Next Steps

The very first step to creating an explainer video is to outline the concept and jot down important bullet points. Clear out any duplicate ideas and then organize some type of script. If you have knowledge of live recording, animation, or video editing, it may be possible to create the video yourself. But keep in mind this is a big task and will be quite the arduous adventure for a newcomer.

Those who want to get a high-quality professional explainer video should stick to the designers that specialize in this type of work. If you are looking for some professional help for creating or editing your VideoHive infographic template, Envato Studio has an abundance of professional videographers & motion designers that will create that perfect explainer video your business deserves.

Just make sure that you have a really clear plan or at least a solid outline of the video. It may also help to organize a script if the video requires a lengthy narration.

Truthfully, this process requires a lot of work, but it’s more fun than you might expect. Just make sure to outline your concept and stay focused on the overarching idea. From there you can find the right team to help create the video and work to style it perfectly into a landing page or company website.

Browse Explainer Video Templates on VideoHive →

The post Analyzing the Explainer Video Trend in Web Design appeared first on Market Blog.

Copyright 2009. E-mail Me
Auto Spare Parts