← Back to Robert’s posts

What I’ve Learned from Analyzing 30 Hero Images from Top Bloggers

Visual Marketing
Visual Marketing

How much do you know about hero images?

First, let me tell you my story with hero images.

I was afraid to put my face on my website. I just didn’t want to be that guy that uses his face, the  so-called “personal brand” to get where he wants.

But before we even started designing my new blog, I had a discussion with Marius Ciuchete (the designer) and he explained to me why people actually need to see a face on the website they are reading. It’s about knowing who you are. It’s about being familiar with someone whose articles you are reading every week.

So I took his advice and hired a photograph to make a photoshoot. It was really awkward in the beginning but then I got used to the camera and even learned how to ‘flirt’ with it! The photoshoot was done in no-time!

A post shared by Robert Katai (@katairobi) on

I was really curious what were Marius’s plans with my photos.

The final touch is what you can see on this blog.

Marius made a homepage and put my face on it.. He designed an “About” page and a “Contact” page using these photos.

But the one thing that I learned from this step is that if you want to have a personal blog or a website,  you need to put your face on it.

If you like it then you shoulda’ put a face on it!

This is why I decided to analyze 30 top marketing specialists and designers (the ones I’m following) on how they’ve created their hero images and what elements they used. I wanted to see what I could learn from them.

But before we get into my analysis, let’s see the definition of a hero image.

What is a hero image?

It’s a considerable large banner image or video, that is placed on a web page, normally in the front and center of it. This visual is the first element a visitor sees on the website and its purpose is to present an overview of the site’s most important content.

Hero image vs Hero header

The difference between a hero image and a hero header is that the hero header is the use of a hero image, combined with text and navigation elements on the homepage or at the top of any site. There can be different ways to have a hero image: you can have a fixed image,an animated one or even a video.

These images can be photos, illustrations, graphic elements, stock photos or even short videos.

Here are the 7 checkpoints for analyzing a hero shots written by Angie Schottmuller:

7 Persuasive Factors of Hero Shot Images

  1. Keyword Relevance – does the visual compelling with the targeted keyword?
  2. Purpose Clarity – does the visual define the message of the website?
  3. Design Support – does the visual support the flow of the page design?
  4. Authenticity – does the visual represent your brand?
  5. Added Value  – does the visual add value?
  6. Desired Emotion  – does the visual attract an emotion?
  7. Customer “Hero” – does the featured image depict the customer as the “hero” once equipped with this solution?

Why do you need to know all of these things as a marketer?

Because you, as a marketer, must understand the psychology behind every element you use on your website. It’s not just that you upload some great visuals, some stock photos and then you wait for the clients to come on your website and buy from you.

This is why you need to know what a hero image is and how to use it.. But most important, I really recommend you to work with a professional designer.

So don’t get fooled by the rumor that only designers need to know about these elements. If you are a marketer, a content marketer, a social media marketer or what ever marketer you call yourself that is working and hustling every day in this digital atmosphere, you need to understand these elements too.

Digital marketing is not something based on lucky and one single shot.

Digital marketing is a psychology work, it’s hard work and the more things you know, the more steps ahead your competition you are.

Now let’s get down to the important stuff and see what I’ve learned while analyzing the hero images of the homepages of 30 bloggers.

 

1. Put a face on it

Every social media platform understands the “put a face on it” theory. This is why all of them have a special place for profile pictures, this is why they allowed you to insert cover photos and some of them are doing a really great job helping you to tag yourself in the pictures you appear. Looking at these hero images I can identify two  trends.

The close up one and the 50% body picture.

iwillteachyoutoberich by Ramit Sethi

For example, let’s look at Ramit Sethi. He has one of the biggest blogs about financial education. If you type his name on Google you will see that among the first results is his website called “I Will Teach You To Be Rich

When you click on that link, you’re taken to his homepage on which you can see Ramit’s face looking at you and a short CTA question on the right side of the image “Do you know your earning potential?

It’s a high quality image that I believe was taken by a professional photographer and edited a little bit. Ramit is the image behind and front of the website “I Will Teach You To Be Rich” so whenever you will see an article from this website or an article that is signed by Ramit, you will know that it’s about financial education.

Rebekah Radice

Another example on using your face on a hero image is from Rebekah Radice who is a social media specialist, speaker and author. She uses her face on her website, smiling and creating a positive vibe. Also, when you go on her homepage you will get a free Social Media Calendar that you can download right now.

Rebekah is using her image hero to collect leads and give something for free.

Actionable tips: If you want to put your face on your website, make sure that you are working with a professional photographer who will take the right photo and which will also edit it a little bit. Don’t use photos made with your smartphone and please make sure that you upload a small photo so that the homepage on your website can upload fast.

 

2. Arms Crossed Over Chest

This is one of the styles I saw many hero images had. Maybe it’s easier to stand in front of the camera like that. Maybe that position makes people feel more confident. It doesn’t matter. The fact is that many of these people used this style and it seems to be really cool.

Pet Flin Smart Passice Income

Pat Flin is one of the biggest bloggers talking about passive income. I really love his website because it has everything you want from a website. Really cool colors. Stays true to the brand color. Easy to read. It loads fast.

And also when I go on his homepage I see Pat’s face and get familiar with it.

He is using this arms crossed over chest style on his homepage because it’s more professional and also in his personal brand’s style. He is not an extravagant person or a really shy one. The photo shows him exactly how he is.

OkDork Noah Kagan

Another website I love to read is OkDork. The man behind this website is Noah Kagan and his homepage is very simple.

The OkDork logo, his folded hand style, the call-to-action, and also a small and simple description that characterize Noah’s style – “Noah Kagan doing his “I Know Shit” look”

Even if Noah manages an 8 figure business and he is working on his personal website too talking about business, marketing and entrepreneurship, it doesn’t mean that he can’t be funny but also serious too when he has to.

Brian Dean from Backlinko used this style too.

Brian Dean

The interesting thing regrading branding is that he is using a very simple color as background and he is the only “visual element” in this hero image with a black color.

The other colors are the same with the ones in his branding, white, green and red.

According to Psychology Today there are “only” 9 truths behind this style, but as I see in my examples, they take the The Power Pose what really meas is that “You are here because of a problem and I will give you the solution” or if we can say it more simple: I’m the specialist here.

Actionable tips: Arms crossed over chest are a simple style that everybody can do. You just have to fold your hands and smile to the camera. Just make sure that the photographer is getting the right angle of you. You don’t have to be very serious if you are using this style on your homepage. Just smile and be yourself.

 

3. In action

Some of these specialists are speakers who often talk at big events and do a tremendous job while they are on the stage.

The first hero image I know with this style is from Gary Vaynerchuk.

Gary Vaynerchuk

What you will understand from this photo is that Gary is a very energetic person who talks at different events about things related to his business. He is a leader that builds companies and the CEO of Vaynermedia.

Here is and old image banner from his website where he is using his smartphone and how focused he is! The interesting thing is that on the hero image you will see a “play” icon that is showing you Gary’s video.

And what got my attention was his mantra: I DAY TRADE ATTENTION AND BUILD BUSINESSES.

Another marketing specialist who is using an action photo on stage is Robert Rose.

Robert Rose

Robert is one of the guys you can listen every week at PNR – This Old Marketing Podcast where he and Joe Pulizzi talk about the news and trends in Content Marketing. One thing to focus on is the fact that Robert used 2 different elements in his hero image: the first one is a black and white photo of him and the other one is a video in a box on orange. That will make the user click on the video if he wants to know who Robert is.

You won’t see a hero image with Robert on a big stage with his microphone in his hand because he is also a trainer and consultant who is giving workshops for B2B and B2C companies about content marketing and content strategy.

Brian Fanzo

Another person who is using a stage photo while doing a keynote is Brian Fanzo. Brian calls himself a change evangelist, podcast host and a social live video strategist. But the first words you will see on his hero images are “Pager-Wearing Millennial Keynote Speaker”.

That means that Brian promotes himself as an interesting keynote speaker who knows stuff about millennials.

In his hero image you will see that Brian is the other type of specialist who is doesn’t wear shirts and suits. But the biggest thing that we can see is that Brian talked at a big event like Inbound. That means that he is doing a really great job if the guys who organized this top event called him as a speaker.

Actionable Tip: If you want to be recognized as a speaker or you want to promote yourself as a speaker, I recommend you to use these kind of photos from different events. Make sure that you are using a photo from the biggest event you’ve talked at so you can have a social proof that you are doing a very good job.

 

4. Video hero images

Some of these specialists are using video images in their hero banners so they can easily attract user’s attention. There are 2 types of users: the ones that really like them and the ones that really hate them.

So if you want to use these hero images, make sure that you understand your audience.

Mari Smith

Mari Smith, a social media professional who is also called “The Queen of Facebook” is using this kind of video on his hero images. You will see her on different scenes like Inbound or even promoting her book next to a desk and a laptop.

Make sure that your videos have a high quality, no sound and that they give a great value to your website.

Marie Forleo

Marie Forleo who is a TV host, entrepreneur and philanthropist, has only one video that stops after a few seconds. This will make you feel more familiar with what Marie does.

What I really love about Marie’s hero image is that everything is so clean. The 2 things that can be easily observed are the text “The Worlds needs that special gift that only you have” and the fact that she is smiling and giving a positive vibe to the ones arriving on her website.

Neil Patel

Neil Patel is truly a game changer and he is not that kind of a regular marketing specialist you are already used to. This is why when you go on his homepage you will already feel the marketing atmosphere. You will see a video with him inviting you to learn how to do real marketing and also welcoming you to his webinar.

He changed the way you look at a homepage. You won’t see any menu page on the top or a contact page. Neil’s website is all about marketing, how to earn money using marketing. And he is using a video to make his statement more powerful.

Use a video on your homepage to make a statement.

Actionable Tips: If you want to use a video as a hero image make sure that this video is something that you are proud of, something that introduces you as a specialist and also lets people know what the site is about.

5. Social Proof

What makes you so special if people already get on your homepage? What and who recommends you? These are the social proofs that you need to use on your website.

It’s not easy to get there but it’s a good strategy to build a bridge between you and your users.

Tim Ferriss

Tim Ferriss is that kind of guy who you really need to follow, listen and whose book you really need to read. He is the guy behind “The 4-Hour Work Week” and his social proof comes from websites like The New York Times, Wired, Men’s Journal and people like Phil Town.

He had also written books that are The New York Times and Wall Street Journal’s best sellers.

Chris Ducker

Chris Ducker also takes advantage of top websites and publishers on which he got featured. So, when you will see the logos of websites like Entrepreneur, Forbes, Success, Inc, Business Insider you will know that this guy is serious about what he does.

I don’t know how many logos you should use. Some specialists use 5, 8 or even 10.

When Marius was designing my homepage, he explained to me that he had only created space for 3 logos because this is the perfect number when you want to show something.

I don’t have to promote all the logos on my homepage on which I feature my work. I only have to use the top 3 social proofs that make me trusted.

Jay Baer

Jay Baer uses another approach of social proof. He is not promoting logos and websites. He presents himself as he really is: NY Times best-selling author of 5 books (he is a writer), most retweeted person in the world by digital marketers (he is a marketing specialists trusted by many marketers), winner of marketing podcast (he is using his podcast to connect with audience) and founder of five multi-million dollar companies (the man behind Convince and Convert).

It’s really interesting to see that Jay has changed the way in which he is featuring his social proof.

Being different than the others can be a really great strategy.

But that doesn’t mean that that will work for you.

Here are a few ideas on what social profs you can use on your homepage or on your hero image banner:

  1. Clients testimonials
  2. Partners testimonials
  3. Websites mentioned your name
  4. Trust Seals
  5. Quotes from other specialists
  6. Celebrity testimonials
  7. Social media proofs
  8. Data & Research

Actionable Tips: Using social proofs like website you are featured on, companies who trusted you or testimonials from your clients can help you earn trust and also make new clients or get more leads.

 

6. Branding

When we talk about branding on hero images I look at 2 important elements:

  1. The brand: logo, fonts, typeface, colors, graphic elements
  2. UVP – The Unique Value Proposition

But some of you may confuse what branding is and think that if you have a logo you already have a brand.

A logo is not a brand!

Your brand is everything you do, you create, you work and you are recognized for. I believe that each and every one of us can have a personal brand that is characterized by working and putting our work out there.

Does Seth Godin have a logo? No. Why? Because he is recognized by his work. Do you see Steve Jobs having a logo on his own? No. Why? Because he was recognized by his work.

Your brand is recognized by your work. If you want to be a writer, then start writing and start building your brand from this. If you want to be a marketer, then start acting like a marketer, document your journey and let people know who you are.

Branding is just  like an iceberg; many of your readers will only see your logo, your great colors and the content you put out there, but the real power of your brand is something that nobody can see, but they will feel it eventually like the Titanic felt the iceberg later.

So, in this chapter I want to tell you about the top of the iceberg – the top of your brand.

Your logo, that small piece of design you need to invest a lot of money in!

Some of the specialists who understand what creating a logo means are only using a typeface word of the brand’s name while others use graphic elements too.

Mark Schaefer

For example, if you look at Mark Schaefer’s hero images you will see that he used his name in the 3 main colors of the website: yellow, black and white.

Even if the website is called businessgrow.com he promotes his name, since he is the one behind this website.

Pro Blogger

Darren Rowse is a well known blogger, speaker, content marketing and blogging consultant and founder of several blogs and blog networks, including b5media, ProBlogger.net and digital-photography-school.com.

If you go on his homepage you will see that Darren is using a graphic element next to the word ProBlogger. And also, if you will go on different pages on his website you will see the consistency of the color combination of his blog.

This is how a professional website should look like.

Do you remember when I said that one of the main elements of a well-done branding is the Unique Value Proposition?

What is your UVP? What makes you different from the other websites? What is the one thing that makes the user choose you to work with you or follow your work and consume your content instead of your competition?

Here is a great example about how to be different in a marketplace that is fully saturated with so known hero images. Marius Ciuchete (he is the one responsible with my blog design) has created a homepage on which we can see three versions of himself, showing people that he is not only a web designer.

He is also an user advocate and will turn your website into something that people will enjoy using every day.

Marius Ciuchete

I really love this hero image because it’s showing me a professional who understands what a website is all about and also it’s different from any other websites.

Actionable Tips: Branding is an important thing for both your hero image and entire website. It’s not only about logos, colors and fonts. It’s also about your work and how you’re presenting it to the world. So make sure that you create a consistent website while staying true to your brand, and to yourself.

 

7. Lead Generator

Your hero image can also be a lead generator. It doesn’t matter if you are not a marketer or a social media specialist, you need to make people follow you and subscribe to your newsletter list.

As Joe Pulizzi said:

“An email list is critical because you can’t build your content on rented land.”

How do you get more people subscribe to your newsletter list? Where do you use these lead generators? How often do you have to promote it?

These are questions that many bloggers and content marketers are struggling with every day.

Kissmetrics put together in a blog post a compelling article with the 10 commandments of a lead-generating website.

But I found that using these hero images as lead generators are a great way to get your services to more people.

Paul Jarvis

Paul Jarvis is an entrepreneur who invites people to “Hop On” his list where they can join over 29,153 folks! All these people are interested in what he writes about the intersection of creativity and commerce.

Paul has created a simple hero image where the focus is on the email subscription box. He is sending a newsletter once a week, documenting his journey on how he creates products, what are his opinions about productivity, creativity and commerce.

Jenn

Jenn is using the same approach on her hero image. She’s inviting people to join her weekly social media blog posts, monthly social media resources and other exclusive deals.

As you can see, the “Subscribe” button is different than the other 3 buttons that she uses to promotes her services.

Actionable Tips: Don’t overcrowd your hero images with lead generator, social proofs, your mantra and other stuff you believe that will make the user trust you. Use only 1 element that is your core factor of your communication.

Conclusion

Here are the 7 things that I’ve learned from top marketing and designers who have done a great job using hero images on their homepages.

The best way to use these elements on your homepage is to start testing and experimenting with them.

Now back to you, let me know what are the top 3 most important elements in a hero image for yourself?

Photo Source

Your turn to comment:

  • Zeno Popovici

    Very informative 🙂

  • Thank you @zenopopovici:disqus 🙂

A picture of the post's author

Robert Katai

Visual Marketer and Content Strategist

"Content isn’t king. Usefulness is. Robert does this in the online marketing and social media space with ease."

Ram Castillo
Close