The Hero image is an innovation for the single-page style now popular in website design. It’s a photograph, video, or illustration that crosses the entire screen with crisp colors and resolutions. Witness below the way a menu overlies the full screen theme of Desert Rental Homes in Palm Springs, CA.
The image feels perfectly balanced and you suddenly feel like you need a vacation where there are both snow-capped mountains and palm trees. How did this happen? Well, you see, it works kind of like Super Man.
Fly with us while we break down how the Hero theme works and what makes it so successful with potential guests who are looking for a (super) vacation rental home.
Faster than a Speeding Bullet
A large photograph can convey so much of a brand’s story in just the blink of an eye. The design element of Web Design really comes through in a Hero image. By that, I mean that the intentional arrangement of a page has fast and specific results to make browsing a page intuitive and inspirational. The image guides the viewer’s eye up, down and across the entire website. A potential guest is welcomed before he or she looks any further.
The landing page of the South Padre Island Beach Condos is another great example of using the Hero theme. The horizon guides us to the sun-struck ocean. The menu is nestled in right there. The golden-lit beach gives a warm glow the overlain text.
More Powerful than a Locomotive
As you design your website, see things from your guest’s point of view. He’ll be seeing the site for the first time with fresh eyes. What might look normal for you may be distracting for him — perhaps costing you a conversion. Hero themes are conspicuously void of distractions. The simplicity of an image and a menu will set your website apart.
The focus is clear and the goal is to amaze — all the guest needs to do is envision her vacation. See how Villa San Lorenzo creates perspective by filling the entire screen, however it also keeps an intuitive banner across the top with menu options.
You may be asking, “How did we get on top of this mountain?”
But notice how simple it is. Villa San Lorenzo is an especially well-designed site and sustains itself with a simple color scheme. If you go to the website, you’ll see that every image in the photo slideshow matches the autumnal theme of the background.
That’s a super power.
Able to Leap Tall Buildings in a Single Bound
So even though Superman stands at an average man’s height and can jump over Metropolis skyscrapers, sadly an average-sized photo won’t cut it for a Hero image theme. Your dimensions will need to be about 1600 x 900 to really have the correct look.
It’s no accident that the Warner Bros movie Man of Steel uses the Hero image on its website. In addition to being awesome, the Hero theme lets you incorporate your branding in with the the image. As you can see, the Superman logo stands out nicely from the gray dramatic background. A light background with darker, thicker logo will give your brand some hop. (Enough to jump over an entire building!) Just make sure your image and branding showcase the positivity of your business.
This is How to Make Your Website More like Superman than Clark Kent
To be clear: there is absolutely nothing wrong with Clark Kent. Clark Kent is still cool. (I wear glasses too.) However, if you are interested in having your website be more like a Superman than a Clark Kent, please feel free to connect with us here at OneRooftop, where we have ready-to-go Hero templates as well as professional custom designed websites with Hero themes.