Designing With Hero Images – Smashing Magazine

webberoDesign0 Comments


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 wireframing your own designs a bit more differently, you can download and test Adobe XD7370391 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 content6, 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.

7
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 Eyewear8‘s hero image: It clarifies the message of the website. The image’s content is representative of the brand.

9
(View large version10)

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.

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

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.

Slack13
Slack14 uses a hero image with app’s interface (View large version15)

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 images16:

  • 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.

17
(Image credit: Breitling18) (View large version19)

3. Select Emotionally Persuasive Images Link

Emotion 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 Cola20
(Image credit: Coca Cola21) (View large version22)
Adobe23
(Image credit: Adobe24) (View large version25)

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 Metrics26,” 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="http://www.smashingmagazine.com/hero.jpg" onload="performance.mark('hero1')">
<script>performance.mark('hero2')</script>

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

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 images29 has got your back (possible with client hints30, too!)

31
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.

32
(Image credit: Theme Forest33)

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 XD7370391 (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 XD7370391 on Behance71, and also visit the Adobe XD blog72 to stay updated and informed. Adobe XD7370391 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)

  1. 1 https://adobe.ly/2rmjBRi
  2. 2 https://www.smashingmagazine.com/2017/01/how-functional-animation-helps-improve-user-experience/
  3. 3 https://www.smashingmagazine.com/2012/04/building-emotion-into-your-websites/
  4. 4 https://www.smashingmagazine.com/2013/07/choosing-a-responsive-image-solution/
  5. 5 https://www.smashingmagazine.com/2016/11/a-quick-guide-for-designing-better-buttons/
  6. 6 http://www.ojr.org/070312ruel/
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/05/08-Best-Practices-for-Hero-Images-preview-opt.png
  8. 8 https://luneteyewear.com
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/06/lunet-eyewear-large-opt.jpeg
  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/05/05-Best-Practices-for-Hero-Images-large-opt.png
  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/06/slack-preview-large-opt.png
  14. 14 https://slack.com/is
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/06/slack-preview-large-opt.png
  16. 16 http://www.threedeepmarketing.com/blog/visual-marketing-7-persuasive-factors-hero-shot-images
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/05/16-Best-Practices-for-Hero-Images-large-opt.png
  18. 18 https://www.breitling.com/en/
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/05/16-Best-Practices-for-Hero-Images-large-opt.png
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/06/coca-cola-large-opt.png
  21. 21 https://www.worldofcoca-cola.com
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/06/coca-cola-large-opt.png
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/06/adobe-creative-cloud-large-opt.jpg
  24. 24 http://www.adobe.com
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/06/adobe-creative-cloud-large-opt.jpg
  26. 26 https://www.stevesouders.com/blog/2015/05/12/hero-image-custom-metrics/
  27. 27 http://www.w3.org/TR/user-timing/
  28. 28 http://stevesouders.com/tests/image-custom-metric.php
  29. 29 https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/
  30. 30 https://www.smashingmagazine.com/2016/01/leaner-responsive-images-client-hints/
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/05/14-Best-Practices-for-Hero-Images-800w-opt.png
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/05/02-Best-Practices-for-Hero-Images-800w-opt.png
  33. 33 https://themeforest.net/item/nextbiz-responsive-multipurpose-wordpress-theme/4489458
  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



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *