Designing an Effective Hero Banner

October 01, 2015

Everybody uses hero banners, which gives Web designers a golden opportunity to create a hero that makes the client’s website stand out from the crowd. Here are a few hero banners I really like, along with a bit of commentary. Please share your favorites in the comments.

1. Talquin Electric Cooperative

Talquin Electric Cooperative gets the message across about what it does and what makes it different, using a brief headline and subhead, along with powerful imagery. The call to action, “view our services,” gives visitors something to do. Additionally, the spare content frees visitors from the burden of reading an entire paragraph (or more) to figure out what the company does.

2. Kin Workplace Solutions

Kin Workplace Solutions also does a nice job of keeping it simple. Even though (or because) its business model is somewhat complicated, Kin doesn’t distract users by trying to cram everything important above the fold. Had it done so, visitors would feel overwhelmed and not know where to go next.

3. TPS

For our client TPS, we used video instead of a traditional slideshow for two main reasons: First, to stand out from the crowd and immediately capture the visitor’s attention; and second, to communicate TPS’s business focus quickly, without forcing the visitor to read anything more than the headline overlays.

4. 96 Elephants

96 Elephants uses powerful imagery to capture the attention of visitors in a way stock imagery could never come close to. Given the emotional impact of the organization’s message, anything less than strong, customized imagery would defeat the purpose of the entire website. This is a great illustration of why image selection is the key of keys to making a strong hero banner.

Over to You

What hero banners do you find especially strong or weak? Any design tips for hero banners you’d like to share?

We deliver! Sign up and we’ll send our valuable content right to your inbox.