A successful website is made up of many components, but perhaps none more important than those that provide a great first impression. For example, you’d certainly want your website to feature a clean and useful footer area–but what good is it if no one bothers to scroll down in the first place?
For this reason designers often put plenty of thought and energy into the “hero area” (also referred to as the “hero section”). This is the prime space at the top of the page, often containing key messaging or calls to action. It’s one of the first things visitors will encounter and thus sets the stage for everything that follows.
Why is it Known as a “Hero Section”?
The term arguably originates from theater and film, where the “hero prop” (sometimes simply called the “hero”) such as a lamp, or a wine bottle for example, would play a vital role. The connection is pretty clear:
“Hero props are the more detailed pieces intended for close inspection by the camera or audience.” – Wikipedia
One way to make the most of this area is to use a compelling background hero image. The right image can grab a user’s attention and convey a clear message even before they’ve read a single word of text. Paravel’s illustrated hero image (see above) does exactly that; showing personality and demonstrating style, whilst allowing for text and pertinent information to be placed on top.
With that in mind, let’s explore what makes for a great hero background image and the different approaches you might take. Along the way, we’ll show you some terrific images available with your subscription to Envato Elements. Its ever-growing library of design assets includes over 4,000 background images and textures to enhance your projects.
1. Keep Content at the Forefront
First and foremost, a hero background image needs to allow users to easily read the content that sits on top of it. This is a delicate balance, as you’ll want something that both looks striking and also preserves the readability of text.
One simple way to accomplish this is by utilizing backgrounds with the bokeh effect. City Lights | Bokeh Backgrounds | Vol. 01 offers twelve distinct urban images that are blurred to perfection. Each image provides a unique and interesting look, while still keeping the focus on your content.
2. Introduce Yourself
While using a background image solely for its sharp looks is just fine, finding one that is relevant to your site’s mission is even better. It’s an opportunity to introduce visitors to what you do. However, you have some flexibility as to how you approach things. You can implement something generic (high-tech imagery, for example) or very specific (like a photo of your office building).
That’s where a niche package like Foodie can come in handy. It includes 65+ hi-res images of food and beverages that would be the perfect fit for a restaurant or food service company. They work perfectly as a hero image and will help you make an immediate impression on users, who will more easily connect with your subject matter.
3. Create the Right Mood
If you’re looking to create a certain vibe for your website, a more intricate image may be just what you need to make your hero section stand out. Highly conceptual vector images are often a great option in this situation. They provide a compelling visual for users and tend to work best with minimal amounts of larger text.
50 Abstract Grid Backgrounds is a great example of this technique. These 3D landscapes look amazing and could be used to enhance a geography-based app or even a website that offers complex statistics. They’re sure to be attention-getters that set the tone for what’s to come.
4. Showcase Products and Services
Websites that sell products or services can utilize the hero area to great effect. It’s akin to visiting a car dealership’s showroom, where big ticket items are front and center. In this case, look for a simple background image that helps you put the important things in a most positive light.
Using one of the six available options within Abstract Spotlight Backgrounds will ensure that your products are the star of the show. Their clever use of shading helps to set the focal point, where your product image or messaging can shine.
5. Add Some Personality
Sometimes you just want to add a bit of color and fun to your hero section. For example, a local retail shop or a personal blog can often benefit from displaying some unique personality. Use illustrations to create a not-too-serious mood while, at the same time, adding some seriously-interesting scenery.
There are a number of great options to fit just about any subject matter and personality type. Whether you’re looking to add a city skyline, summer landscape or some fun on the farm, the right illustration can decorate your hero area accordingly.
Making the Right Choice
Your website’s hero section is vital to make a great first impression. Therefore, every detail is worth thinking about, including the background. But it can be difficult to decide which direction to take.
In the end, it’s all about knowing both the mission of your website and your desired audience. Think about what you want to accomplish within this space and choose an image to complement it.
If, for example, you plan on including a good bit of text, look for a background that doesn’t distract from reading. For sites with a more minimal approach, a complex image that stands out might be a good pick.
Whatever you choose, keep in mind that the right approach is vital for gaining a user’s interest and encouraging them to explore the rest of your site.
Read on..
- Exploring the Hero Image Trend in Web Design on the Envato blog
