Digital Machiavelli #9: Effective Thumbnail Design
Why compelling visual narratives trump low-effort clickbait every time.
Welcome back to my ongoing digital content strategy course, delivered straight to your inbox every other week.
What You’ll Learn Today: The basics of thumbnail design, and why thumbnails are so important for attracting eyes in an environment of ever-shrinking attention spans.
Text-based information architecture is all well and good, but we’re in 2022, and we have little choice but to fight desperately for every ounce of attention our audience has to spare.
Fortunately, visual design helps us in this effort, as all formats of content today, from simple articles to long-form videos, can be shared alongside a visual aid to help attract attention from even the most impatient users.
Thumbnails: How & Why?
On the most fundamental level, thumbnails serve to attract attention at the very beginning of a user’s interaction with your content, be it one of your videos in their YouTube subscription feed or a link to your article on a social media platform.
The reason we get to see these thumbnails alongside the title of a web page linked to us on any given platform is because the page is setup to point to a particular image that gets parsed by the platform publishing the link.
<meta property="og:image" content="https://www.mysite.com/assets/1224593264.jpg" />
This is facilitated through HTML meta tags, which can be parsed by messaging apps like Telegram, social media platforms like Twitter, and just about every other major online communication tool we use on a daily basis.
But why do we need this?
Simply put, not everyone is going to read your title, and even out of those who do, some simply won’t be compelled to click a link to your content based solely on something they processed by reading.
This is where thumbnails often help save the day by providing early visual stimulus that has real potential to drag a user to your content before they ever get to see the myriad visual hurdles you’ve placed throughout your article or watch your carefully edited video.
Strokes, Shadows & Contrast
You'll often see thumbnails with foreground images or text outlined by thick strokes.
This has a practical purpose from the perspective of information architecture, as we visually lock on to such highlighted elements before anything else.
It's also an effective way to smooth out what are often jagged edges on an image painstakingly cut out of a larger screen grab or photo.
Shadows play a similar role but are generally much harder to use effectively. And you can of course apply both in moderation to really ensure that a particular part of your thumbnail stands out above the rest.
Title Text vs Thumbnail Text
The title for your piece of content can have compelling interplay with the text in your thumbnail, provided you take care to not make things too verbose.
While it may seem tempting to simply mirror your title into your thumbnail, presuming that a user who doesn’t immediately read it in text form will perhaps be more inclined to do so when presented with an image, that doesn’t really work well.
Instead, a far more effective and engaging mechanism is to build a narrative across the title and the thumbnail, wherein you have several options.
Your title can respond to the text in your thumbnail, or vice-versa.
Your thumbnail can visually depict whatever you describe in your title.
Your title can be a fully serious statement, while your thumbnail contains a joke.
There are more variations, but hopefully you see the theme here. Titles and thumbnails can serve as continuations of each other, which helps engage users in entertaining ways, and that’s exactly what you want.
Getting users engaged with the content from the very first touch point helps associate you in their minds as a source of compelling thoughts and ideas, which makes it much less likely they’ll just scroll past.
When All Else Fails, Simplify
Just because you can use text in a thumbnail, and just because you can superimpose a dozen different images on to your thumbnail, doesn't mean you have to do so.
The cardinal rule of top-notch information architecture is simplification.
The less cumbersome your title and thumbnail pairing, the more effective they will be.
All you really need to do is make it a habit to double check your new post’s title and thumbnail together, ideally with fresh eyes after a night of sleep.
Try putting yourself in the shoes of an impatient user scrolling through their feed and coming across your new article or video, and ask yourself some critical questions.
Does this thumbnail stand out visually?
What’s the first element your eyes lock on to when looking at the thumbnail?
Does reading the thumbnail before the title result in cohesive narration, or vice-versa?
Stick to this line of thinking over the long term, and you’ll eventually refine your thumbnail game to the level of a master, which will serve you well into the future as we continue to descend into the vast unknown of an increasingly technologically possessed society.