We're celebrating summer with five webinars based on design-related goodness. This week we discuss how to create a hero image for your site that will attract clicks and conversions. Watch it now!
Can't watch the video right now? We have the transcription right here:
In today's design DIY video, we're going to learn how to create a hero graphic. You might be asking yourself: what exactly is a hero graphic? A hero graphic is the main image directly below the header or top navigation of website. It goes by many names: main graphic slide, main promo and plenty of others. But for the sake of this video, we'll be sticking to hero graphic or just "hero" for short.
Usually, a hero graphic contains a compelling lifestyle or product image, an engaging call-to-action and great copy with hierarchy. From our experience, high-quality, professional-looking hero images with clear, prominent call-to-action buttons help immensely with conversions.
A good hero draws your visitor's attention and creates a focal point as they arrive on your home page. It also provides a place of action for your shoppers to click further into the site. The hero image or slideshow should help set the tone of your site and speak to your brand. So, let's jump right in.
First, we'll talk about the main components of creating a hero graphic, and I'll show some helpful tips along the way. We'll be discussing software, dimensions, photos, colors, fonts and calls-to-action. Then we'll at how we can put it all these elements together to create a compelling hero for your site.
A couple of simpler design programs that you can still create a compelling hero graphic with are Canva and PicMonkey.
There are few programs, both paid and free, that you can use to create your hero graphics. The most powerful among them would be Photoshop, which comes with a bit of a learning curve. Photoshop is what I use as a professional designer on a daily basis. A couple of simpler design programs that you can still create a compelling hero graphic with are Canva and PicMonkey. They don't have all the bells and whistles of Photoshop or more powerful tools, but they'll definitely get the job done.
Once you decided on the software you'll be using to create your hero graphic, the next most important aspect is knowing the dimensions you want to use so that your hero image fits appropriately into your homepage. Do you want it to be a full-width and stretch to the edges of the home page? Or do you want to be fixed with and to just expand the content area?
Another important part of your hero graphic is the image or photo that you use. It's a good idea to keep a few things in mind in order to find a perfect photo. Think about the tone of your brand, what you're selling and your demographic. You also want to think about the emotion and tone the photo has. Do you want to use cool tones like the image shown here or warm tones that add life and warmth to your site?
Do you want to use a product photo to showcase what you're selling, or a lifestyle image that creates a more emotional connection with your target audience, or do you want to use a combination of both?
If you're taking your own photos, having a nice image of a person using your product would be the most engaging. Also, if you're going that route, be sure that your photo is high resolution and well photographed. If you're going to use stock photos, like we are today, it's most engaging to use a lifestyle image. We'll be using a photo from Unsplash. This is a great site from modern high-quality free images that you can use across your website or marketing channels. You can also check out sites like iStock or Shutterstock for even more options.
Now that we have our image, we can figure out which font to use. Today, we'll be using a Google Font. You want to choose a font that you're either using with your homepage design, or you can choose a font that is complementary to what you have on your current site. You can even mix fonts as long as they mix well together.
Once you have your font and you know a copy you want to use on the hero, you have to think about hierarchy of texts. You want the most important information to be at a larger font size and the secondary information to be at a smaller font size. You can also establish hierarchy by playing with font weight, color and text treatment.
So, we have our image, font, copy and next we need to establish a call-to-action or CTA for your hero. Essentially, this is a button that prompts a user to click. The most common used CTA in e-commerce is "Shop Now" but, we can create a CTA that is a bit different. Maybe something like "Browser products," "Check Out Our Selection," or "Shop our Latest Arrivals."
For your CTA, you also want to use a color that pops and stands out within your hero image. Usually the CTA is a different color than the default buttons on your home page. Sometimes I use the hover color of the default buttons as a color for the hero CTA. For example, if all the prominent default buttons are black with the light purple hover, I may use the light purple button for the hero to help it stand out on the page.
So now that we've gone through what's needed to create a hero graphic, let's put it all together and make one of our own. I'll be using a Volusion theme as the starting point and style inspiration for my hero. Now, we're going to jump in the Photoshop and start designing our hero graphic. Here we go.
Here is what finished hero looks like after following all of our DIY rules. The hero we created follows the branding, tone and styles used in the Volusion themes we picked. The hero also contains the key components which are a compelling lifestyle, a product image, an engaging call-to-action and great copy with hierarchy. That's just about everything you need to create a compelling hero graphic of your own.