Become a Member
Proudly Sponsored By
articles / advertising know-how and fearless opinions
IHAVEANIDEA.ORG > articles >  Big Is Better: How To Rock A Hero Image


Big Is Better: How To Rock A Hero Image

Posted on December 2, 2011 and read 2,223 times

Big Is Better: How To Rock A Hero Image thumbnail

This article was originally featured on iStockphoto.com, IHAVEANIDEA’s partner in all things related to stock imagery.

“In my eyes, using a hero image can be a very emotional, activating or even story-telling way to welcome people onto your site. And as we all know, humans are much more image- than text-orientated.”

— Kai Heuser, Creative Director of Jung von Matt/Neckar GmbH

Since we humans started communicating with each other, images have always been very important to us. As early as 5,000 BC pictures, pictograms and logographs were used by ancient Chinese cultures to communicate with primarily illiterate societies who better understood pictures and the ideas they represented. Fast forward from the Stone Age to our internet-immersed culture today. Web designers are starting to popularize the use of giant hero images above the fold with little or no copy. Designers are leaning heavily on the age-old premise that we like our eye candy, especially when it’s the first thing you see on a homepage.

Hero images like Apple’s homepage have been gaining popularity in web design lately for a number of reasons. First, higher bandwidth over the last few years has allowed designers to serve up bigger, more complex images without browsers stalling or crashing as often to load the images. Second, along with faster processors and bandwidth designers are experiencing more freedom from a functional and programming point of view as CSS and other coding languages become more flexible, sophisticated and accepting of all the crazy things designers want to do with a site. Some say we’re entering a golden age for web designers as the stars continue to align with better technology and smarter design tools.

There are many things to consider if you want to use a hero image on your site. Placing crucial information above the fold has always been important but there are studies supporting the power of hero images on homepages vs. copy overload. In 2009, Omniture Digital tested two university homepages: one with a hero image one with more content. The results came in contextually and users coming to the homepage for the first time engaged more with the hero image design, but users coming from inside the site preferred more content.

Usability testing aside, let’s talk to some designers.

Kai Heuser
Creative Director of Jung von Matt/Neckar GmbH based in Stuttgart, Germany. Kai’s site caught my attention right away for its use of a hero image featuring strange, quirky rock n’ roll cartoons accompanied by gentle classical music.

Ian Harding
Senior Designer, iStockphoto

Mikael Lindh
Information Architect, iStockphoto

Julie Tran
Art Director, iStockphoto

Kara Yerex
Senior Designer, iStockphoto

iStockphoto’s Creative team knows a thing or two about designing around hero images as you can see in some of our articles, Hot Shots newsletters and certain areas of the site. Here’s what all these creatives have to say about the hero images design trend:

Why on earth do you think the use of giant hero images at the top of a website has become trendy?

Kai: In times of higher bandwidths it’s not a problem anymore to use images with a bigger file size. I guess that this is one of the major reasons for the high popularity of huge image headers. In my eyes, using a hero image can be a very emotional, activating or even story-telling way to welcome people onto your site. And as we all know, humans are much more image- than text-orientated.

Julie: Web design has been trying to look more and more like print and hero images are a part of that. The hero is the first focal point, visual reminder and brand reinforcement tool people encounter. Our designs have always been contingent on what will or won’t work but with the speed of the internet and computers increasing, those restrictions are going away.

Are you a fan of hero images? Tell me why or why not?

Kai: As a visual designer I really like big image headers! As I already mentioned, they can be a very emotional and active start into a site journey and make it easier for the user to become familiar with the site and its content. What I really like is when big image headers are nicely animated and/or interactive and you can play around with them. This can add a little extra flavour.

Mikael: I like it. To me, it’s all about the purpose of the site or page. I think hero images work best for sites that have one clear message. They work great for fashion, products or a single, strong brand. It sets the message of the page, and users who like it will scroll, others might not.

Ian: I like hero image designs, but they can hurt you as well. If someone doesn’t like what they see, they may not be willing to move to the primary content. They’re just going to leave. You run the risk of people judging your site like a book: by its cover.

Kara: I think it has made people lazy, both designers and users. Apple has done a great job with hero images but the challenge is to communicate either one message, like their new iPad, or a few messages. On the other hand, a hero image offers huge impact and it can be changed often with little effort.

What factors go into the decision to use a gigantic hero image at the top of a site?

Kai: What is important, in my eyes, is that you have topics and content on your website that require this type of image. It has to be relevant to your content. Also, the images themselves should have relevance for the user. You should also make sure to check if you can guarantee the quality of the images for a longer time (if you are using them as news teasers like Apple, for example).

Kara: Depending on the purpose of the page, heroes can work quite well. You have to juggle things like calls to action, marketing priorities, entertainment value and layout. On iStockphoto, our articles often have hero images but those pages can afford to spend a large portion of the top real estate on images because we want it to look like a print article.

How do you justify or accommodate the search engine optimization (SEO) needs of a site when a giant hero image takes centre stage?

Julie: Hero images can be a nightmare for internationalization because SEO doesn’t like embedded text. There’s a lot of weight in the metadata, which if you don’t capture higher up, you’ll have to repeat it a lot on the page. You can always render a typeface in javascript so you’ll have live text, which can help, but it’s not the perfect solution. I’m a big fan of Typekit for javascript fonts.

What should designers keep in mind to successfully rock the hero image?

Kai: What you should keep in mind is that users with mobile devices might not be fan of giant images due to their bandwidth limitations. So it’s a very good idea to have a fallback solution for mobile users that works with smaller images. The Apple website, for instance, is a really beautiful website if you are viewing it with a fast connection. If you are on a mobile device and you don’t have a 3G connection, the loading process is quite annoying.

Another important aspect for designers to keep in mind is to use images of high quality. This becomes very important when using bigger images as the stage is much bigger then when using smaller images.

Kara: iStockphoto makes it easy to find those pixel-perfect high-resolution images you’ll need for a hero image. Make sure it suits your content and catches the eye. Check out our Vetta Collection.

What are some of your favorite examples of hero image sites and why?

Kai: Apple, of course, is a great and probably also the most popular example for giant image headers. But I also really like the slideshow on Mercedes Benz (German) and on the Nike websites, like Nike Sportswear (German) because they add interactivity to a static image – and interaction is what the web is all about.

istock generic 125423 Big Is Better: How To Rock A Hero Image

istock generic 125424 Big Is Better: How To Rock A Hero Image

istock generic 125425 Big Is Better: How To Rock A Hero Image

Mikael: Examples of good use of hero images can be; Diesel because it’s all about the brand and Spotify for introducing new products.

istock generic 125426 Big Is Better: How To Rock A Hero Image

istock generic 125427 Big Is Better: How To Rock A Hero Image

Ian: Reading For New Times Magazine is a magazine-style website with articles that each feature a giant hero image. I like it because, well, it looks like a magazine. I don’t skim-read the articles like I do news articles on the web. I sit back, relax, and enjoy these articles with the intent of fully reading them. Also, similar to Apple, there is the Canon Professional Network. They use a big hero image/Flash element and I like it because it showcases the topic of the page in a very visual manner. By using Flash/Javascript, a lot of sites are able to implement multi-page heroes or even animated heroes as well.

istock generic 125428 Big Is Better: How To Rock A Hero Image

istock generic 125429 Big Is Better: How To Rock A Hero Image

Kara: Jason Gray Music is cool because it’s a portfolio-style site and it allows him to show off his style instantly and it integrates navigation. One by Four Studio is able to give a lot of impact with the brand and I love how minimal it is. New to York is just cool.

istock generic 125433 Big Is Better: How To Rock A Hero Image

istock generic 125431 Big Is Better: How To Rock A Hero Image

istock generic 125432 Big Is Better: How To Rock A Hero Image

 

Image credits

Mixed Race Tilt Shifted Neighborhood Hand Holder Couple by kevinruss






RELATED ARTICLES


LATEST JOBS

ALSO IN THE NEWS

Moving Millennials thumbnail Moving Millennials
Thoughts from a Cannes Creative Effectiveness 2013 Jury member thumbnail Thoughts from a Cannes Creative Effectiveness 2013 Jury member

MORE ARTICLES

Agency Profile: Advico Y&R thumbnail Agency Profile: Advico Y&R

IHAVEANIDEA ARCHIVE

Copyright © 2001-2014 IHAVEANIDEA inc. All rights reserved. No material contained in this site may be republished or reposted.
IHAVEANIDEA™ is a trademark of IHAVEANIDEA inc. Terms and Conditions | Privacy Policy

Copyright © 2009 ihaveanidea inc. All rights reserved.

No material contained in this site may be republished or reposted. Terms and Conditions | Privacy Policy