Pixels To Print: Designing Your Hero Banner

A hero banner is the first image, photo, or graphic that you see at the top of a website, which consequently implies that it has the capacity to have a large impact on your viewers.  When you first open a website, the hero banner typically sits at the top of the page and provides a space to make a first impression on your visitors.  With that being said, the first visual element on your website should be something that hooks the visitor and makes them want to scroll or view more.  What they see will directly influence how they first interpret your brand, which is why a hero banner is so important to the design of your site!

Below are a few tips and ideas to help in designing your next hero image:

1. Choose the right photo

Photos are great assets to use in your hero, and they can be a great tool to give a glimpse into your brand from the start. However, a clear, high resolution photo is much more impactful than a low quality, fuzzy image.  Make sure that you have a photo sized correctly for your hero banner to avoid any blurry imagery! It is also important to consider your hero design before you are taking or choosing a photo for your design.  You are likely going to be using text in your banner in addition to the photo, so keep in mind where elements will sit in your image, if there is enough white space, and how other graphic elements will fit over the image.

2. Appeal to your audience

The goal of a hero image is to quickly portray your brand and gain interest for your site visitors, so choosing an image or graphic that accurately represents your brand will successfully help you to achieve this.  If you are a coffee company, use an image that shows the quality or the experience of drinking your coffee that will make your audience want to be a part of it.  Add text that aligns to this image, whether that’s a call to action or a brand tagline, and you are good to go!

3. Create balance & contrast

Hero banners shouldn’t be too crowded with information, or your viewers will be overwhelmed and confused on your main message.  Keep it simple, clean, and balanced so that your message is clear when you first enter the site.  It is important to balance out the elements in your banner in a functional and aesthetically pleasing way, which is done through things like scale, positioning, and color to make sure that your design is not overly heavy in one area.  If you your image or graphic on the right side, add your text to the left to even it out. 

4. Use color to grab attention

Your hero banner is the perfect space to use your brand colors in full force. Color is a powerful tool that directs attention even on its own and can be used to evoke emotion, create a focal point, grab attention, or add visual appeal. Check out our blog on How Color Affects Emotions to grab some ideas on which colors might be beneficial for your brand! If your site is more on the simple side, use your hero banner to add a pop of color that will create the perfect contrast on your website.

5. Go graphic

If photography isn’t your brand style, fill your hero banner with relevant and unique graphical elements or illustrations! This could mean anything from a brand pattern to icons and drawings.  Check out these examples below for some inspiration.

6. Set a scene

As we’ve been saying from the start, a hero banner is your opportunity to give your viewers immediate insight into your brand in just one image. Setting a scene with your design is a great way to provide your audience with a taste of what your brand stands for and the experience that comes along with it.  This can be used by any type of business from a restaurant wanting to show off an image of their food, to a marketing agency wanting to demonstrate the collaboration that goes on within the company.

Whether you’re building your website for the first time or are in need of a hero banner refresh for your current site, consider these tips and ideas to help make the most of your design! Want to create a fresh and visually appealing hero banner for your Swag Store too? Connect with NorthPoint’s design team, and we will work with you to create a banner that stands out.