I Don’t Need a Hero Image: Alternative Above the Fold Web Designs

Graphic. Collection of screenshots featuring websites without hero images above the fold.
Share on facebook
Share on twitter
Share on pinterest
Share on linkedin

Hero images are a hot web design element these days. Yet, are hero images becoming cliché? While hero images are efficient, they are pervasive. As a result, some web designers and users are unimpressed with this popular web design trend. However, there are many alternatives to the hero image in web designs that are just an effective and might even recapture people’s attentions.

What Is a Hero Image?

Hero images are the full-width often full-screen graphic content. They can be static images, motion graphics, or videos. Designers further like to lay text, such as a headline, kicker, and Call to Action (CTA) button on these. The most popular spot to place a hero image is at the very top of a web page design, especially the home page.

Screenshot. This homepage web design for Ramotion uses the usual hero image layout.
Credit: Ramotion.

Why Hero Images Work

Hero images earned their spot as a popular design element, because overall they are rather effective. Hero images work to:

  • quickly grab viewers’ attention,
  • explain what the company does, and
  • invite the viewers to engage with the CTA.

For instance, user studies show that users only sometimes view material below-the-fold (Nielson Norman Group, 2018) and that “not knowing what a company does” is a common user complaint (Huff Industrial Marketing, KoMarketing, & Buyer Zone, 2015, pp. 15).

On the other hand, hero images dominate the above-the-fold web design space. They also add the company’s most important information right in the most popular viewing spot.

Consequently, hero images not only immediately any user questions about who the company is and what they do, but also suggest a next step for the user to take. Additionally, popular Content Management Systems (CMS) like WordPress and Drupal make it easy even for non-developers to add hero images.

Finally, because of their popularity, hero images are a comfortable, familiar pattern for web designers and users alike.

Why Hero Images Don’t Work

Hero Images Are Growing Unmemorable

Since CMSs do make it so easy to add hero images, hero images exploded across websites everywhere. Yet, although hero images are effective design elements, websites with hero images are becoming boring, unmemorable, and “just like everyone else.” As a result, the company brand might even grow stale, a dangerous user perception for any company.

Misused Hero Images & the Illusion of Completeness

Additionally, designers can misuse hero images. Although the point of the hero image is to capture the most important content above-the-fold, more content generally follows. The content may not be as important as the other. Nonetheless, that below-the-fold web content may still provide valuable information for users and other opportunities to interact with the company brand.

However, if a hero image is completely full-screen, both in width and height, users might not notice any additional content on that web page. Prominent user experience (UX) research group Norman Neilson Group calls this UI/UX pattern the “illusion of completeness” (Flaherty, 2016). Basically, this illusion of completeness can devastate below-the-fold content. Although web content encounters the usual loss of visibility that occurs when users must scroll, the illusion of completeness takes that average odds and reduces them substantially.

Making Hero Images Work Better

Yet, a simple solution fixes the hero image illusion of completeness problem. If there’s content besides the hero image on web page, then structure the hero image within a layout that hints at further content below.

Firstly, and perhaps most simply, some designs include a downward arrow in the hero image inviting users to scroll.

Another method is overlapping some content over the hero image that isn’t completely visible to users without scrolling.

Additionally, consider reducing the height of the hero image. A full-width hero image can accomplish many of the same tasks as the full-size hero image while also foreshadowing further content.

For example, my old website design for Avian Design overlaps three call-outs on top of the hero image to disrupt the illusion of completeness and invite scrolling.

Screenshot. This homepage web design for Avian Design uses a modified hero image layout.
Credit: Lara Lee, Avian Design.

For example number two, Apiumhub adds a down arrow to its hero image as well as stopping the hero image just short of full-height.

Screenshot. This homepage web design for Apiumhub uses a slightly modified hero image layout.
Credit: Apiumhub.

Making Hero Images…Not Hero Images?

Finally the last solution to both the boringness and illusion of completeness problems is perhaps not using a hero image at all! Moreover, web design is limitless. There are several creative solutions to presenting graphic and text content on a website besides hero images.

So check out these hero image alternatives below!

Hero Image Alternatives in Above the Fold Web Designs

Screenshot. This homepage web design for NJI Media uses a modified hero image layout.
Credit: NJI Media.
Screenshot. This homepage web design for Verse Journal uses an alternate layout to a hero image.
Credit: Nguyen Le, Verse Journal.
Screenshot. This homepage web design for Fruita Blanch uses an alternate layout to a hero image.
Credit: Fruita Blanch.
Screenshot. This homepage web design for 54 Brands uses an alternate layout to a hero image.
Credit: 54 Brands.
Screenshot. This homepage web design for AAF DC uses an alternate layout to a hero image.
Credit: AAF DC.

For more information about hero images and their different types, check out Conversion XML’s excellent article, “Your Hero Image Probably Isn’t Converting” (Birkett, 2016).