UX Designer, Host of ‘Creator’s Block’ Podcast, Designer for 50+ Sites on HubSpot
February 22nd, 2019
At this point, you likely how important the hero space of your website is.
The hero is no longer just the start of your webpage or a place to put your value prop.
A powerful hero can start a journey, make a user feel something, or even communicate your product or purpose without words.
Quite frankly, it’s the “hero” of the story that is your page.
So, What Makes a Great Hero?
A great website hero can accomplish many things.
Depending on the page, it can convey what your company is and does or what your product will solve for the user. It can identify who your audience is and help them relate to your mission. It can even evoke emotions, but overall, a successful hero grabs your attention and sets the tone for your whole website.
By best practices a good hero typically has a header, some supporting text, and a call-to-action button (or some kind of next steps). These can be accompanied by an image, video, or illustration that support the mission of the page.
So, let’s take a look at 10 websites that are doing just that in beautifully creative ways.
I think Renderforest is doing a really strong job of using color to direct focus as well.
Though most of their hero is in a monochromatic blue palette, they use orange to draw the user’s eye to the “Get Started” button as well as the cute little creature directing you with an animated point to the explainer video.
Renderforest gets bonus points here for not only including a video in their hero (it really is the way of the future), but giving it a direct title that lets their users know what to expect.
Where I think this hero could use a little work is in the secondary text. The combination of tones behind the font and the lightness of the font make that text a bit hard to read.
Current haus is another site with a very limited color palette, but that uses color to strategically draw the user’s eye (yes, I know I have a type).
I think the strongest element of their hero is their illustration. I could almost tell exactly what they do, just by looking at that picture and in a world where we have about 5 seconds to grab someone’s attention on the web, this is brilliant.
The imagery also perfectly aligns with their copy. You can actually see a project going from idea to finished product.
Creddy opens with a bold and beautiful custom illustration that is more to evoke emotion and tone of their product rather than what it actually does.
Home equity loans aren’t really the sexiest product offering, but this creative hero really grabs your attention.
The brevity of the content stands in stark contrast to the more detailed illustration, which, in just four short words ,tells you what creddy is, which is then seamlessly transitioned into possible next steps for both of their personas.
Although on first glance, OpenNode’s hero appears in stark black and white, I actually find it quite clever as it strategically draws the user’s eye to a few key players here. The blue highlight guides you first to the “Start for free” button and then the chat bubble, which I assume are their focuses of where they want to drive traffic.
Another piece of this hero that I love is this custom illustration. It truly helps paint a picture of what they do, allow you to accept bitcoin easily for a whatever it is you sell.
It is also subtly animated with the different items bobbing and the QR code scanning. This enhances the user’s viewing of this image, by helping them digest what they are seeing through small clue.
Even Heroes Have the Right to Dream...
Yes, I did just reference Five for Fighting, but let’s not dwell on it.
We’ve just looked at 10 pretty awesome hero sections that I hope you geeked out over as much as I did.
Not all of these are practical, but we do have the opportunity to take some pieces from heroes like these and use them to inspire our own sites.
My best advice to you is to start with a crazy dream of a hero section and figure out how you may need to change it/simplify it/rebuild it to make it work for your audience.