How-To

How to create a catchy title image for your content

Do you know what generic is? It’s the word you can use to describe 90% of the articles on the internet. And 100% of the title images accompany them.

If it’s an article about user experience, there’s an image of someone sitting behind a laptop or someone’s hand holding a phone. If the article is about programming, there’s obviously code on the screen, and if it’s the article about saving money, wow… a piggy bank.

And if you can’t find an image to accompany your writing, there’s always a picture of several strangers pretending to be a happy, functional family. It fits anything. Now prove me wrong.


How to Live For 100 Years


What You Didn’t Know About Aliens in the US Government


Tide pods are overrated

While others downloaded generic stock photos for their blog posts, I’ve spent hundreds of dollars on custom illustrations. Okay, technically, these were company dollars. Still, it hurt. Sometimes, I feel like my team developed photo creators only to save the company money I was spending on designers and photographers.

Nevertheless, I’m happy they did it. Because you don’t need to spend money to create a killer title image. You don’t need to become a pro photographer or an artist either. All you need is a bit of creativity and advice; I learned the hard way. I’m going to share the advice with you right… Now.

Attention

Attention is the most scarce and valuable resource we have these days. Everyone is fighting for our attention, from our future presidents to door-to-door knives salespeople (are they even still functioning? I’m not talking about presidents, just to be clear).

Can you imagine how much information your reader is going through on the Internet? Scrolling an endless Facebook feed, frantically switching between Twitter tags, or browsing Reddit. Whatever that is, you only get a fraction of a second to grab someone’s attention.

And this is how you do it.

Did I get your attention? Up to that point. I feel as if I’ve just lost it.

How about this:

I bet you can’t make this picture funnier, but I welcome you to try it here.

Three things on this picture aid in grabbing the reader’s attention: story, surprise, and humor (let’s pretend for the sake of an article that you find this image somehow funny)

Stories engage people. We’ve been telling stories to each other for millennia, so it’s natural for us to gravitate toward a story. Make sure your picture tells a story. In this article, I explain visual storytelling using a bunch of tomatoes.

Surprise helps us to catch people’s attention by presenting them with something unordinary. If there’s a family on the beach, that’s generic. If you add a spaceship, that’s unordinary. It catches our attention for sure.

Note: don’t overdo it. If you add a spaceship, a couple of machine guns, a bodybuilder, and a chicken, the whole thing stops making sense, and people don’t usually have an interest in something they deem a “mess.”

Humor is the easiest and the hardest thing in the world at the same time. If your picture is funny, you will instantly grab someone’s attention. The hardest part comes from making the picture funny.

Being the hardest, humor deserves a separate section.

Humor

I’ve spent a lot of time coming up with ideas for funny illustrations that still would make some sense with their article. And that’s an important part.

Don’t expect a funny image that has nothing to do with your article to lure people into it. Apply comedy techniques, but make sure the image has a connection to the article or at least its title.

So, what are the visual comedy tips?


Don’t Listen to Users and 4 Other Myths About Usability Testing

I remember we ordered this illustration shortly after Apple announced its new iPhone7 without a 3.5mm jack.

It works fine on its own, and the article was about usability. So it was relevant, used trendy context, and made fun of it.

Examples of popular context: movies, politics, tech trends, news… Anything. Just make sure to connect the context to the topic of your article and your audience.

Google’s AI Won Singing Contest

Only Rick & Morty fans will probably understand this reference. But if you’re writing an article for a tech community, that means everyone.

2. Reverse context.

Take something that’s common knowledge and make a twist.

E.g. your title is “How to Cure Loneliness”.


How to Cure Loneliness

This is great. The image is relevant and makes fun of a popular stereotype. Now, how about a twist?

How to Cure Loneliness

3. Stretch it

Sometimes, it’s funny to take things a bit far. Comedy uses exaggeration a lot.

Wanna take it further? Well, here you go…

Still Lonely? 10 More Ways to Make You Feel Less Lonely

About memes…

If you use memes or Google “funny image” and use one as your title image, it most likely won’t work. No amount of memes will make it funny. Trust me.

Why? Two reasons. First, memes are a finished piece of internet art in a modern digital society. It’s independent, and people will often laugh at them in their feed and move on. There’s no article expected after a meme. A meme is an end in itself. No continuation. Nada.

The second reason is they all are heavily overused. You gotta edit them to find a new context and make sure the old context is preserved, but also that it becomes funnier. And also relevant to your article.

Pairing with text

I’m sure you’ve noticed that most of the images in this article were accompanied by a made-up title. That’s because they always come in a pair: title and image. First, your image grabs people’s attention, and then they read the title. Or they read the title, see the image, and try to make sense out of all this.

Your image can play with text in three ways:

Direct connection: your image literally describes what the title says.


A Guy Touched a Robot’s Nip. Here’s What Happened

Loose connection: the connection is more abstract but still makes a lot of sense.

Sexual Harassment In the Digital Age

Invented connection: the connection is created by you and your creativity. There is no descriptive element. Paradoxically, the bond formed in this case can be even stronger because new, unordinary connections are one of our brain’s favorite meals.

What Do Millenials Think About At Workplace

As you see, there’s always a connection between the title and the image. Keep in mind that direct or indirect connections do NOT mean that the connection itself is stronger or weaker. All three options can form a strong bond between the text and imagery and, at the same time, urge to read more about the topic.

What about SEO articles?

If you’re writing for SEO, people will usually find your article through Google search.

As you can see, there’s no image, and the only thing people see is an article’s title along with its short description. According to SEO best practices, it should be concise and immediately give an impression that your article is the best response to the Google query.

In that case, one might think that imagery becomes irrelevant. Well, in a certain aspect, that’s true. If 100% of the traffic for your article comes from Google searches, then the image is irrelevant.

However, if you are looking for social shares, viral potential, and high click-through rates on aggregators and e-mail newsletters, consider taking the time to create a meaningful image and a bond between a title and this image. Also, if your image is funny or meaningful, it gives your reader more motivation to read the article further after clicking it, and reading time impacts SEO ranking.

Have fun!

About the author: Andrew started at Icons8 as a usability specialist, conducting interviews and usability surveys. He desperately wanted to share his findings with our professional community and started writing insightful and funny (sometimes both) stories for our blog.

Review the tips on how to cope with banner blindness, check the hot trends of mobile UI design in 2019, and get the list of free vector software.

Title image created with Mega Creator

Recent Posts

Icons that are perfectly shaped for any design

Each design has its own scale. It applies to elements size and like thickness. Now,…

18 hours ago

What is a glyph icon?

There are many ways to define a glyph. Let's take a look at what glyph…

2 days ago

Hues unraveled: exploring lavender in design

Learn how to use lavender color in your designs. (more…)

3 days ago

6 websites that demonstrate the power of surprise

Keeping visitors on your page with surprising, creative tactics can help you convert them into…

1 week ago

Search for an icon or generate one? SVG icon AI-generators test

As designers, we don't need just any icon. We need one that is a perfect…

1 week ago

The ultimate graphics plugin for your Miro boards

This Miro plugin has it all: icons, illustrations, and photos from the Icons8 library to…

4 weeks ago

This website uses cookies.