Sorry to disappoint but no, I’m not talking about a new Marvel movie.
We see a lot of design trends come and go in our line of work. One trend that looks like it’s here to stay is what we call the Super Hero. The Super Hero might also be referred to as a full-screen or full-width Hero image.
The Hero image has long been a staple of web design, and for good reason. The Hero is your first chance to introduce your company, your first chance at “Hello”. Our clients put a lot of emphasis on choosing just the right image to accurately portray their brand. By using a Super Hero, you ensure the Hero image becomes the main thing visitors see when they first land on your site. I really like this trend but there are a few things to keep in mind when implementing a Super Hero.
Make sure any content that accompanies your Super Hero clearly directs visitors to where they should go next. Include a call to action, encouraging your visitor to learn more or specific action you’d like them to take.
Often, the Super Hero is only the beginning of the homepage with more content below as you scroll. One important thing to remember when using a Super Hero is to offer “breadcrumbs” for your visitor to follow. If you want your visitor to scroll, I recommend adding a feature like an arrow, reducing the size of the Super Hero so people can easily see there is more content below, or adding text encouraging the visitor to scroll.
One thing we’ve found with our research is that website visitors are inherently lazy. If it’s not clear that they need to scroll, they probably won’t. One such effect is the “false bottom effect”. What this means is your visitor may assume there is no content below your Hero because the fold in the page creates a false bottom. If the content below your Hero is important to you, don’t let the false bottom effect keep site visitors from engaging with information below the fold.
Finally, make sure you test your Super Hero design on a variety of computer resolutions and smartphone sizes. I recommend using an online emulator to make sure your contents lays out how you expect, no matter the screen resolution.