The Design Elements of Effective YouTube Thumbnails

YouTube is the second largest search engine. But before you bust out the camcorder you need to learn about thumbnail design.

Before YouTube, if you did a Google search and you wanted someone to click on your link, you needed a strong headline that would encourage people to click through to the article.

With YouTube, we have what I’m calling Headline 2.0. And that’s video thumbnails. You’re no longer limited to text, You have your video title (text) and the thumbnail.

Are thumbnails really that big a deal??

Thumbnails are the gatekeeper to your content. Your video could be amazing but if your thumbnail sucks, the chances that anyone will watch your video decrease dramatically.

What Makes Thumbnails So Powerful?

YouTube thumbnails can do a lot of the heavy lifting, more than the headline can do on its own. You have more variety and flexibility in the visual elements that you can have in your thumbnail.

You can have multiple graphics, images, and icons.

You can use typography: font-families, font-weights and font-sizes.

And of course, you have a lot more control over the layout as well.

What makes YouTube thumbnails so powerful is the opportunities for using multiple visual elements and tailoring them to your brand or channel.

They become another design element for your brand.

To give you a better understanding of the power of thumbnails, we need to look at the difference in user experience and behaviour between YouTube and Google.

Google (Active Search) vs. YouTube (Active & Passive Related Suggestions (expanded search)

Active Search (Google)

When you go to Google you have a specific goal or question in mind for your search. Once you click an article Google loses its ability to suggest related content (this is ignoring ads and remarketing ads that follow you around of course).

Active Search + Passive Discovery (YouTube)

People search YouTube in a similar way, but there’s also the addition of Passive Discovery throughout the platform. This is through Recommendations , Suggestions , and Up Next Videos and it’s often how you end up down the YouTube rabbit hole.

Searching may be the beginning but once you’ve clicked a video, Passive Discovery begins. For example if you watch a video on photography it may return related topics to photography like Photoshop, Lightroom, or camera reviews.

You’ll continue to get suggestions that relate to or expand on the video you just watched or previous videos you’ve watched.

This increases the chance you’ll discover a new channel or video that’s related to your search and your recent views. The most visible element in any of the related or suggested video sections is the thumbnail.

A well-designed thumbnail is often the first exposure to an audience that may not know you exist.

In recent years Google has also started placing YouTube video’s first in their search results.

For this entry in Dissecting Design, I want to look at a collection of thumbnails and analyze the common patterns and design elements that are used.

Before we look at design elements we need to quickly address a design principle, consistency.

Consistency – The Design Principle Behind Recognizable Thumbnails

When you see thumbnails that appear familiar, you’re seeing consistency at work, specifically visual consistency.

Visual Consistency

Similar elements that are perceived the same way make up the visual consistency. It increases learnability of the product. Fonts, sizes, buttons, labeling and similar need to be consistent across the product to keep visual consistency. source: Design Principle Consistency

The quote above refers to products but in this we’re applying the principle to a branded element ( thumbnails )

In a sea of thumbnails, you can quickly recognize and associate a thumbnail with a particular channel.

This doesn’t mean that the thumbnails are exact duplicates (although there are common patterns) but they use similar combinations of elements to achieve consistency.

Now lets look at the different design elements you have at your disposal and how they’re used to make consistent thumbnails.

Design Elements

Typography

Typography gives you a lot of variations that you can play with. If you’re not a “designer” and can’t create your own custom logos or graphics, typography is a great element to use and can have a lot of power on its own. You’ll get a lot of variation from a single font-family:

• Font-Size
• Font-Weight
• Font-Family
• Color

The Futur is a great example of this where the fonts, the typography is consistent in all their thumbnails. They also use different font families to associate the thumbnails with a particular video series or playlist.

Color

Color is great to use as an overlay and to connect thumbnails when the content may change. For example, if you’re using a photo and you don’t have a lot of control over the content in the photo, it can be difficult to make multiple images feel connected.

And your colors can change to communicate a different context or meaning.

As I mentioned in the previous example of The Futur you have yellow as the main color for this series. But they’ll also use their signature blue color.

Webflow also uses different colors based on the series topic/name.

Icons and Logos

When you look at something like Webflow, they place their icon or their logo in the top left corner, and then they’ve got the title below. If you have a logo or brand mark, this is a chance to put it on display.

Icons can also be used to give more context for what the video is about. YouTuber Dansky who creates design related tutorials, uses the icons for the various Adobe programs.

Titles

Titles are closely related to typography but with the addition of the content, what words are being using in the title? There are a few different approaches to use titles in your thumbnails.

• Double dip – Use the video title again in the thumbnail. This gives you the ability to make it stand out from other thumbnails with bold typography.
• Support the headline – Give more context to the video title with additional elements (logos, icons, additional text and styling)
• Create Intrigue With Time or Steps – Learn X in 20 Minutes, Setup Your Camera in 3 easy steps

Frames/Borders

Another example is frames or borders. This element can be seen on the channel Flux/Ran Sigall

Ran Sigall uses a turquoise frame on a lot of his videos.

Even though the topics vary slightly on his channel, the coloured frame makes it easy to connect these videos to his channel.

Even if the elements within the frame change, the frame helps give some consistency across the different layouts and different styles. The coloured frame also draws your attention and stands out amongst other thumbnails with no frame.

People

A very common practice on YouTube is to have the channel host either on the left or the right side of the thumbnail and they’re either looking at you, or they’re looking off into the distance at an icon, topic title, or the subject of the video. Or they’re pointing at the subject of the video and this draws your eye to it.

Both DesignCourse and Kevin Powell primarily use this style of thumbnail.

This builds familiarity with the person behind the brand and channel whether you actually click the video or not.

In the future if you’re given the choice between 2 video thumbnails, one without a person and another with a person, you may choose the one with the person because you like their presentation style.

Layout

Keeping a consistent structure and layout for your thumbnail makes it easy to recreate thumbnails. It saves time since you don’t have to think about where you’re going to place elements.

We’ll revisit WebFlow and The Futur. Webflow has the same layout of elements in their “Intro” series: logo up top, the title or main topic of the video in the center, and then they’ve got the video series text in the bottom left. The only thing they need to adjust for additional thumbnails is the background image and the title.

Up Next: Applying These Design Elements To Your Videos

There are a lot of elements to consider when it comes to creating your own thumbnails. And that’s without even considering the video content itself. In a future article I’ll be looking at how channels use these design elements and the content itself to help group their content together. Hopefully this can give you some ideas of how you may start creating your own thumbnails.

The post The Design Elements of Effective YouTube Thumbnails appeared first on Ryan Dejaegher.