What are the first things you notice when perusing a website? Is it the imagery, the color scheme, or maybe the way a brand communicates to its audience? These are a few important website design components that can make a visitor continue browsing, or look to a competitor for their desired products or services.
When it comes to designing your brand’s website, the hero section (sometimes called a banner) occupies prime real estate – typically at the top of your home page – and is your first opportunity to capture your visitor’s attention. This makes it a key and worthwhile element for marketing your brand and/or product.
Why include a hero section?
A hero section adds visual appeal and lets you get creative with your marketing. This design feature provides endless possibilities for highlighting your brand and products – from capturing leads and converting visitors into customers, to showcasing your brand’s personality, promoting your products, and building relationships through sign-up forms – the list goes on.
The effectiveness of your hero section depends on the text, call to action (CTA) links, and type of imagery you choose to include (whether it’s a static photo, illustration, video, or animation). If you’re choosing an image that is beautiful but doesn’t quite relate to your brand or product, this could lead to confusion and a misunderstanding of your brand.
Each piece of your hero section is an opportunity to add value to your website.
Designing your hero section
While the options for creating a hero section may seem endless, keep in mind that some choices may drive viewers away from your website. You want to be deliberate when designing this section to ensure it not only looks great but is an effective marketing tool. We’ve provided a few tips to take into account when designing your website hero, followed by examples to help inspire you along the way.
Set goals
- What marketing goals are you trying to achieve through your hero section? Are you going for a product-forward approach in hopes of capturing leads? Do you want to build your email list? Will your website hero be showcasing your brand’s personality to generate awareness? Defining a goal will help you stay focused on the effectiveness of your design.
Create your design structure
- How will your design look and feel? Will you use an image with text overlay? Or maybe an illustration with bulleted text to explain your product or service features? Outline your design and write out your text before you dive deep into the design. Knowing what look you’re going for will help you stay efficient and guide your process.
Source design elements and software in advance
- What software will you use to design your hero section? Where will you source your images? Luckily many free resources provide easy-to-use design templates, illustrations, images, etc. Check out our list of graphic design tools to find what works best for your brand.
Call to action (CTA)
- Including a CTA button in your hero section is an effective way to capture leads and help with conversions. This can be anything from a link for current product promotions to an email sign-up form that continues the relationship with your visitor.
Image sizing
- Choosing a file that’s too large can take what may seem like an eternity to load – detracting from the purpose of the hero. Google’s PageSpeed Insights tool analyzes the content of a webpage and offers improvement tips. Optimize your image to best fit the capacity of your website platform and be sure to consider both desktop and mobile screens.
- Ideal sizing for a full-screen desktop hero image: 1600 x 500 pixels
- Ideal sizing for a mobile hero image: 800 x 1,200 pixels
Clarity
- Prioritize image clarity and if you’re including a text overlay, ensure that the words are easy to read and the color choices are accessible.
Cohesiveness
- Ensure that your hero section is cohesive with the other aspects of your website design, including your menu bar, other pages, and items that fall below the hero.
If you’re feeling ready to create or improve your website’s hero section, sign in to your Margo dashboard (or sign up for your free trial) and we’ll help you tackle the job.
Examples to help inspire your creation
The following examples show different approaches that you can use when creating your hero section. Though some of these are large brands with full design teams, don’t be intimidated. Looking to these examples for inspiration can help you get started in creating your unique hero section. And if you are feeling a bit unsure about where to begin, remember, we’re always here to assist.
Hireology displays headshots of people alongside text describing their HR software platform. They include two buttons that allow the visitor to either request a product demo or navigate to their platform details. This hero section incorporates brand colors, product information, and provides a cohesive feel to their product and brand.
Stumptown Coffee Roasters uses creative imagery and bold typography to highlight their current promotional offer. They also include a CTA button that allows visitors to click through to shop for their products without having to scroll or navigate the menu bar.
TERRA-TORY Skincare has a product-forward hero image alongside a close-up of their packaging that offers a quick description of their clean skincare. These pictures provide visible details for the potential customers to quickly become aware of the brand’s aesthetic while enticing them to learn more about the products. The straightforward display of products and ingredients can help establish trust with the visitor.
Spotify utilizes its hero section to capture new Premium users with its promotional offer and CTA button. They pair the bold text with interesting artwork to capture the attention of the viewer, then include a call to action to “Get 3 Months Free”.
Peloton uses an image of their product and a user in action. They include bold, easy-to-read text, followed by a link to shop or view a cost comparison. This use of a simple website hero design doesn’t detract from their clear message.
.png)
.png)
.png)
