Menu Search
Jump to the content X X

Sponsored Article When Large Isn’t Large Enough: Designing With Hero Images

When users come to your page, they’ll feel some kind of reaction. Whether it’s positive or negative, that reaction is determined in large part by what they see. Because vision is perhaps the strongest human sense, a hero image is one of the fastest ways to grab the user’s attention. Bold, graphic and intentional imagery engages the user. It draws the user in immediately and makes a perfect centerpiece for a minimalist app or website.

A hero image is more than just a pretty picture. It’s a powerful communication tool. In this article, I’ll give you a few tips on using hero images. Also, if you’d like to get started and take a go at prototyping and wireframing1 your own designs a bit more differently, you can download and test Adobe XD7370392 for free.

Further Reading on SmashingMag: Link

1. Make It Relevant Link

Think of the hero image like an introduction: It gives users a sense of what to expect from the rest of your website. The whole purpose of a hero image is to tell the visitor immediately what your website is all about and what idea it wants to convey. When a hero image doesn’t accurately contextualize the website’s content7, it provides no value to the user. It wastes the precious vertical space of the screen and sometimes can even cause confusion. Visitors are easily confused when an image doesn’t accord with their preconception of the brand or product.

8
A prime example of poor image selection — not everyone will understand how this image relates to loans.

Be picky with the photo. Choose one that fits the theme, purpose or campaign of the experience you’re creating. Check out Lunet Eyewear9‘s hero image: It clarifies the message of the website. The image’s content is representative of the brand.

10
(View large version11)

If you are using your website to promote or sell a product, the hero image should show off its benefits. Consider using contextual hero images for products — showing not just what a product looks like, but how it works in a real setting.

12
The best way to sell products is to let them sell themselves. A hero image demonstrates the benefits of a product. (View large version13)

The same is certainly true of digital products and services. Give people a taste of what they can expect from your app or service by mocking up a screenshot on a compatible device.

Slack14
Slack15 uses a hero image with app’s interface (View large version16)

Of course, designing and choosing a hero image is difficult; it is as much art as science. To simplify the task, you can use a framework to guide your decisions. Angie Schottmuller created a seven-point framework for judging hero images17:

  • Keyword relevance
    Does the image visualize the targeted keyword?
  • Clarity of purpose
    Does the image clarify the message of the website?
  • Supportive of design
    Does the image support and make more seamless the flow of the page leading to the call to action?
  • Authenticity
    Does the image represent your brand in a credible way?
  • Added value
    Does the image increase relevance or demonstrate benefits?
  • Desired emotion
    Does the image portray emotions that will help to trigger the desired action?
  • Customer as hero
    Does the featured image depict the customer as the hero once they are equipped with the product?

2. Make The Image The Centerpiece Link

A hero image is the perfect container for one bit of information. You want something that’s distinct and that stands out. It should make the user stop and examine the website each time they visit. But this doesn’t mean that the image needs to say everything. Rather, the image just needs to visually reinforce the message in a relevant way.

18
(Image credit: Breitling19) (View large version20)

3. Select Emotionally Persuasive Images Link

Emotion21 should be baked into the design. Your images should have an emotional impact, generate inspiration and reinforce the feeling you are trying to instill. After all, emotion often overrides logic when people are making important decisions. Positive emotional stimuli can build a sense of engagement with your users.

Coca Cola22
(Image credit: Coca Cola23) (View large version24)
Adobe25
(Image credit: Adobe26) (View large version27)

4. Load And Render As Soon As Possible Link

Because hero images are critical design elements, they should render quickly. Unfortunately, many designs that feature a hero image suffer from HID (hero image delay), mostly due to blocking scripts and style sheets.

Designers need to focus on when a hero image will be viewed. But this is trickier than it sounds: Today’s browsers have no hooks that can be used to know when content becomes viewable. Steve Souders, in his article “Hero Image Custom Metrics28,” proposes adding a custom metric to any page that features a hero image to determine how quickly (or slowly) this important content gets displayed.

One simple example is an inline script timer, a script that records the time and that is placed immediately after the img tag. Here’s what the code looks like:

<img src="hero.jpg" onload="performance.mark('hero1')">
<script>performance.mark('hero2')</script>

The code takes advantage of the User Timing API29, and you can see how it works on Steve’s test page30.

5. Use High-Definition Visuals Link

Images should not appear pixelated or blurry. Nothing is worse than a large low-quality image. If you’re going to use this technique, the image is everything, and a positive first impression is vital. Include high-quality images to make sure this happens, however, don’t actively penalize people with low-resolution screens — they are your customers after all as well. For critical images, it’s as critical to provide a variety of image variants using the <picture> element and srcset and sizes — a detailed guide on responsive images31 has got your back (possible with client hints32, too!)

33
A degraded versus an appropriately sized image.

6. Consider Different Screen Sizes Link

Make sure your images are sized appropriately for displays and across platforms. Optimize images for all devices, even if that means resizing or swapping out a large image for a smaller one on a small device.

Developers of responsive websites, even of the most modern ones, often struggle with selecting image resolutions that best match the various devices. It’s quite clear that one image for all screen resolutions and devices isn’t enough. A website must adapt to look perfect on all of the different devices and in all of the various resolutions, pixel densities and orientations. Managing, manipulating and delivering media — specifically images — is one of the main challenges developers face when building responsive websites. Thankfully, there’s a solution to this problem. Responsive Breakpoints Generator34 is a free open-source web tool that helps you to generate breakpoints for images interactively.

35
Responsive Breakpoints Generator helps you to manage multiple sizes of images, enabling you to interactively generate responsive image breakpoints. (View large version36)

7. Emphasize The Call To Action Link

While the hero image is the centerpiece, you will still need to include essential elements, such as a call to action. A call to action shouldn’t compete with the image. Color is very important for emphasis. A call-to-action button should shine even brighter than usual.

37
The visual weight of the button should be proportional to the oversized visual. (View large version38)

Test Your Call to Action Using a Blur Effect Link

Use a blur effect to test your page’s visual hierarchy. A blur test is a quick technique to help you determine whether the user’s eye will truly go where you want it to go. All you need to do is, take a screenshot of your site and apply object blur effect in Adobe XD7370392 (Add blur effects in XD40)(see the example of Charity Water’s page below). Looking at the blurred version of your page, which elements stand out? If you don’t like what’s being projecting, go back and revise.

41
The blur test is technique to reveal a design’s focal point and visual hierarchy. (View large version42)

8. Design For Contrast Link

Make sure the typography on top of the image is legible. Choose bold, easy-to-read typefaces that mesh with the visuals but that stand apart from them. If you plan to lay text over the image, ensure that the main part of the image is still visible and understandable.

Overlay Link

Perhaps the easiest thing to do would be to put the plain text directly on the image. However, if the contrast between text and image isn’t sufficient, you could overlay the whole image with a semi-transparent colored block.

43
Outlines44 uses a colored overlay. (View large version45)

You can use your brand’s colors to enhance the hero image. If you’re designing for a product or brand, chances are that certain colors will already be associated with it. Identify the primary color and try bringing it to the fore of the image.

46
The hero image for Clique plays heavily on the blue tone of the app’s interface. (View large version47)

Scrims Link

Alternatively, you could add text contrast in the form of a scrim. A scrim is a visual design aid that softens an image so that overlaid text becomes more legible.

48
The opacity value will depend on the context. (Image credit: Material Design5249) (View large version50)

Choose the gradient’s opacity based on the environment. Some hero images call for a darker gradient, such as the image displayed below, which has a 60% gradient.

51
(Image credit: Material Design5249) (View large version53)

You’ll find practical advice on how to implement various such techniques in the CSS-Tricks article “Design Considerations: Text on Images54.”

9. Show Real People Link

Using images of humans is a very effective way to engage users. When we see people’s faces, we feel connected with them, and we don’t feel like we’re just buying a product. However, many corporate websites are notorious for the overuse of insincere photography, employed to “build trust.”

Usability tests show55 that purely decorative photos (like the one shown below) rarely add value to a design and harm more often than improve the user experience. Thus, avoid generic-looking business people smiling for no apparent reason.

56
Inauthentic images leaves the user with a sense of shallow, false pretense. (View large version57)

A very simple rule of thumb is to use high-quality photographs of people who match your app or website’s character. Imagery should be an authentic representation of your product, company or culture.

Daniella Draper58
(Image credit: Daniella Draper59) (View large version60)
The Renovator61
(Image credit: The Renovator62) (View large version63)

Here are some tips:

  • Try to avoid crowd shots. Use photos that have a single main subject.
  • Strive for images that have genuine stories. Take photos of your people doing interesting things. If you have a product, consider ways they can interact with that product.

10. Consider Illustrations, With A Personal Touch Link

A hero image is merely a visual — any type of image could fit the bill. Illustrations are quickly becoming a popular alternative, sometimes lending more personality than photos. They give you more control over both the image’s content and technical details. Using a unique custom-made illustration, you can distinguish yourself from the crowd and create better brand recall.

64
Dropbox uses easily understood illustrations to clarify messaging and communicate complex ideas. (View large version65)
66
Illustrations appeal to the imagination and establish a strong personal connection with the viewer. (Image credit: Basecamp67) (View large version68)

To be functional, the illustration should be easily recognizable, and the information it conveys should be decoded similarly by different viewers. If you use multiple illustrations, they should look consistent, like they came from the same source — that is, like they were illustrated by the same person.

Conclusion Link

As long as it is high quality, interesting to look at and works well with the content, a hero image is a great option. Design with sufficient contrast and a clear call to action to make the most of this technique.

This article is part of the UX design series sponsored by Adobe. The newly introduced Adobe Experience Design CC (Beta) tool is made for a fast and fluid UX design process69, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app.
You can check out more inspiring projects created with Adobe XD7370392 on Behance71, and also visit the Adobe XD blog72 to stay updated and informed. Adobe XD7370392 is being updated with new features frequently, and since it’s in public Beta, you can download and test it for free74.

(ms, vf, yk, al, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2016/11/wireframe-perfectionist-guide/
  2. 2 https://adobe.ly/2rmjBRi
  3. 3 https://www.smashingmagazine.com/2017/01/how-functional-animation-helps-improve-user-experience/
  4. 4 https://www.smashingmagazine.com/2012/04/building-emotion-into-your-websites/
  5. 5 https://www.smashingmagazine.com/2013/07/choosing-a-responsive-image-solution/
  6. 6 https://www.smashingmagazine.com/2016/11/a-quick-guide-for-designing-better-buttons/
  7. 7 http://www.ojr.org/070312ruel/
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/05/08-Best-Practices-for-Hero-Images-preview-opt.png
  9. 9 https://luneteyewear.com
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/06/lunet-eyewear-large-opt.jpeg
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/06/lunet-eyewear-large-opt.jpeg
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/05/05-Best-Practices-for-Hero-Images-large-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/05/05-Best-Practices-for-Hero-Images-large-opt.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/06/slack-preview-large-opt.png
  15. 15 https://slack.com/is
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/06/slack-preview-large-opt.png
  17. 17 http://www.threedeepmarketing.com/blog/visual-marketing-7-persuasive-factors-hero-shot-images
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/05/16-Best-Practices-for-Hero-Images-large-opt.png
  19. 19 https://www.breitling.com/en/
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/05/16-Best-Practices-for-Hero-Images-large-opt.png
  21. 21 https://www.smashingmagazine.com/2012/04/building-emotion-into-your-websites/
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/06/coca-cola-large-opt.png
  23. 23 https://www.worldofcoca-cola.com
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/06/coca-cola-large-opt.png
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/06/adobe-creative-cloud-large-opt.jpg
  26. 26 http://www.adobe.com
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/06/adobe-creative-cloud-large-opt.jpg
  28. 28 https://www.stevesouders.com/blog/2015/05/12/hero-image-custom-metrics/
  29. 29 http://www.w3.org/TR/user-timing/
  30. 30 http://stevesouders.com/tests/image-custom-metric.php
  31. 31 https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/
  32. 32 https://www.smashingmagazine.com/2016/01/leaner-responsive-images-client-hints/
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2017/05/14-Best-Practices-for-Hero-Images-800w-opt.png
  34. 34 http://www.responsivebreakpoints.com/
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/05/04-Best-Practices-for-Hero-Images-large-opt.png
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2017/05/04-Best-Practices-for-Hero-Images-large-opt.png
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/05/19-Best-Practices-for-Hero-Images-large-opt.png
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2017/05/19-Best-Practices-for-Hero-Images-large-opt.png
  39. 39 https://adobe.ly/2rmjBRi
  40. 40 https://helpx.adobe.com/experience-design/help/background-blur.html
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2017/05/06-Best-Practices-for-Hero-Images-large-opt.png
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/05/06-Best-Practices-for-Hero-Images-large-opt.png
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/05/01-Best-Practices-for-Hero-Images-large-opt.png
  44. 44 http://www.outlines.pt/
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2017/05/01-Best-Practices-for-Hero-Images-large-opt.png
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2017/05/09-Best-Practices-for-Hero-Images-large-opt.png
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2017/05/09-Best-Practices-for-Hero-Images-large-opt.png
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2017/05/18-Best-Practices-for-Hero-Images-large-opt.png
  49. 49 https://material.io/guidelines/style/imagery.html#imagery-ui-integration
  50. 50 https://www.smashingmagazine.com/wp-content/uploads/2017/05/18-Best-Practices-for-Hero-Images-large-opt.png
  51. 51 https://www.smashingmagazine.com/wp-content/uploads/2017/05/10-Best-Practices-for-Hero-Images-large-opt.png
  52. 52 https://material.io/guidelines/style/imagery.html#imagery-ui-integration
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2017/05/10-Best-Practices-for-Hero-Images-large-opt.png
  54. 54 https://css-tricks.com/design-considerations-text-images/
  55. 55 https://articles.uie.com/deciding_when_graphics_help/
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2017/05/12-Best-Practices-for-Hero-Images-large-opt.jpg
  57. 57 https://www.smashingmagazine.com/wp-content/uploads/2017/05/12-Best-Practices-for-Hero-Images-large-opt.jpg
  58. 58 https://www.smashingmagazine.com/wp-content/uploads/2017/06/daniella-draper-large-opt.jpg
  59. 59 https://danielladraper.com
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/2017/06/daniella-draper-large-opt.jpg
  61. 61 https://www.smashingmagazine.com/wp-content/uploads/2017/06/the-renovator-large-opt.jpeg
  62. 62 http://therenovatorhq.com.au
  63. 63 https://www.smashingmagazine.com/wp-content/uploads/2017/06/the-renovator-large-opt.jpeg
  64. 64 https://www.smashingmagazine.com/wp-content/uploads/2017/05/17-Best-Practices-for-Hero-Images-large-opt.png
  65. 65 https://www.smashingmagazine.com/wp-content/uploads/2017/05/17-Best-Practices-for-Hero-Images-large-opt.png
  66. 66 https://www.smashingmagazine.com/wp-content/uploads/2017/05/11-Best-Practices-for-Hero-Images-large-opt.png
  67. 67 https://basecamp.com/
  68. 68 https://www.smashingmagazine.com/wp-content/uploads/2017/05/11-Best-Practices-for-Hero-Images-large-opt.png
  69. 69 https://adobe.ly/2rmjBRi
  70. 70 https://adobe.ly/2rmjBRi
  71. 71 https://www.behance.net/galleries/adobe/5/Experience-Design
  72. 72 https://adobe.ly/2rOmEi0
  73. 73 https://adobe.ly/2rmjBRi
  74. 74 https://adobe.ly/2rmjBRi

↑ Back to top Tweet itShare on Facebook

Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.

  1. 1

    Himanshu Gupta

    June 8, 2017 11:26 am

    Thanks for great article over Hero layout.

    I understood that you described here only about hero image designing but text/caption is also an important part of Hero Banner.

    So that would be really great, if you did explain about to design text/caption of Hero banner along with images. Because with image only, you can’t design a Hero Banner and as I am saying banner, this means that’s the combination of images and text.

    0
  2. 2

    “After all, emotion often overrides logic when people are making important decisions. Positive emotional stimuli can build a sense of engagement with your users.”

    This is exactly what disturbs me about the power of marketing; today it seems more sophisticated than ever at linking not just emotions, but aspirations, to a purchasing decision. There’s sometimes a very fine line between engaging and manipulating. Some companies use images to (as the article suggests) indicate what their business is all about, while others use it to create an impression that is actually in conflict with what they do.

    Anyway, a fascinating article, and some good advice and examples. :)

    3
  3. 3

    Really useful article. I like that there are a lot of examples. I tried to do this last year with this landing page. https://dribbble.com/shots/2705534-Landing-page-with-bonus-teasers

    0
  4. 4

    “This article is part of the UX design series sponsored by Adobe”

    You should mention this at the TOP of the article!

    Reporting this to Google so you lose your Google Juice!

    -23
  5. 6

    Thanks for your great article!

    While I’m totally with you that a hero banner might be the most engaging part of the website (especially for first time visitors) I find that most of them fail at being readable.

    From my point of view most of the time the contrast between text and background isn’t sufficient and/or the hero is too detailed so that text becomes really hard to read.

    3
  6. 7

    Nick, I really appreciate the research you do. I often visit your site to see your other articles. Keep up the good work!

    3
  7. 8


    Of course, designing and choosing a hero image is difficult; it is as much art as science.

    You’re damn right.

    2
  8. 9

    Very good your text. Helped me a lot. Thank you for sharing these insights..

    -3
  9. 10

    If applicable, a nice idea to speed up loading is to break the image “levels” introduced by blur on the hero image into multiple images. That way you could have the basic background tone color coded into a colored background div (being instantly loaded), have the blurry background in a space saving blurry image file and just the focal point in a sharp image (choose the loading order that you think fits better). As a plus you have more variety for responsive layout while showing a lot in the first few milliseconds. Now just hope for a widely supported image format that allows for compressed images but with alpha transparency. Still some way to go.

    1
  10. 11

    SherylRoger

    June 12, 2017 8:42 pm

    Very informative write up. It’s totally true that hero image is a powerful communication tool, so thanks for sharing these useful tips to make it right.

    0

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top