When it comes to website design, large images make powerful statements. Hero headers — full screen images used with text or navigation elements at the top of a website — work because a great visual draws in visitors while simple text, navigation and branding help keep them looking at your site. Here's how you can make the most of a hero header in your next website design.
Opt for Sharp, Clear Images
A hero header starts with a great image. While a full screen image does not have to be a photograph — videos and illustrations work as well — it is the most common option. You need a sharp, crisp, easy-to-read image to make it work.
A hero header starts with a great image. While a full screen image does not have to be a photograph — videos and illustrations work as well — it is the most common option. You need a sharp, crisp, easy-to-read image to make it work.
- Go through your personal or company images and find the three best photos to start.
- Look for images that are horizontal, have good color and represent your business well.
- Opt for images that showcase your work or products and show positive emotion.
- Check the resolution of each image and make sure each can be used at a large size – aim for at least 1,200 pixels wide.
Remember to think about how you will use the image with other elements such as text, navigation and branding. Is there room to integrate these elements with the photo? Wendy Harrop Events uses sharp photography with a simple logo and text to accomplish this perfectly. Note the effectiveness of using a contrast of light colors in the image with black text and an outline-style logo.
Integrate Branding Into the Image
Make the most of your hero header by integrating your brand into the image. Traditionally a logo or insignia appears in the top left corner, but it can be used in a variety of other ways as well.
It is important to think about how a logo or branding fits into the image. Consider pairing a black or white version of the logo with an image that is bright and colorful or a color version on black and white images.
When it comes to branding, consider integrating your product into the full screen image. Square, maker of the credit card reader, does an excellent job of this. Every image on the site contains the product. These visual branding cues connect users to your product.
Use Bold Typography
Typography is one of the most important factors in the design of a hero header. It should be bold, straightforward and contain only a few words. Lettering should also have enough weight to work with the oversized image it accompanies.
When it comes to big text in hero images, sans serif typefaces are the dominant choice among designers. The typefaces tend to take on the mood of the image and are easy to read.
- Opt for a font that has a medium to thick stroke width for optimum readability.
- When it comes to color, black or white lettering is the safest bet.
- Don't be afraid to use size for drama and make the text very large or very small.
- Think carefully about the placement of letters so that words do not hide important parts of the image.
Plug and Play Design uses a full screen image with large white type to showcase its brand. The type is big enough to stand out from the image and white lettering remains easy to read even on light-colored parts of the image, showing why oversized typography is a major element when it comes to hero headers.
Consider Placements and Navigation Elements
Navigation can get tricky when working with a full screen image. Where do you put elements or calls-to-action? The key is to keep it simple with a single line of navigation across the top of the canvas or a hamburger menu in the corner.
Use a basic typeface for navigational elements — again sans serif is the popular option — and keep elements to a minimum. For other user interface elements, such as buttons, consider a ghost style — a button that is in the form of an outline on the image — that does not get in the way of your hero header.
Finally, design the hero header in such a way that users know what to do next. A hero header often fills the first scroll of a website, but what do users do next? Add plenty of visual cues so that users continue to interact with your website beyond the hero header. Sara Oliveria's site, is a great example of simple navigation, with links at the bottom of the hero header. Elements are easy to see and users know exactly how to use them.
Keep It Simple
A great full screen image is your design trick. The large image should have enough visual impact to sell the design without having to use a lot of other techniques.
Stay away from using too many other techniques, such as shadows or animation, when working with a hero header. What makes these designs work is a simple beauty in letting the image “sell the design."
There are a few trends that are the exception, mainly because they are designed for subtlety. Hamburger icon menus, ghost buttons and parallax scrolling can work nicely with a hero header. Use these techniques in moderation to create a highly visual website that users will want to interact with.
Carrie Cousins Carrie is a designer, writer and content marketer. She has more than 10 years of media and marketing experience.
