"Don't judge a book by its cover." That phrase is so commonplace place it has become an American proverb. Yet, it is not applicable to your website! Your website is most certainly judged by it looks, which becomes a reflection of who you are as a school and institution. Every website is judged by its visual appeal (typically in less than a second). This means the first thing people see on your website becomes the most important thing. Enter the aptly named "hero image" to the rescue.
TABLE OF CONTENTS
- What are they?
- What is their purpose?
- What are the strategies?
- What are the basic elements?
- Let us be your hero!
- Examples
What are they?
In website lingo "Hero images," sometimes called splash images or banners etc., are highly visible design elements at the top of a site or page. Their job is to capture the attention of your visitors, communicate an essential idea or message, and keep your visitors from leaving (bouncing from) the page. Such images or banners are placed "above the fold," meaning at the top so they are immediately visible without scrolling down the page. Not all hero images are actually just images; an animation or video can also be used. A hero image is the "splash section," or first row of content on a website or page and will often contain a call-to-action.
What is their purpose?
Regardless of the finer technical points or language, hero images are used for a specific purpose and will fit into one or more following categories or uses cases:
- Impress: Make a strong first impression of your school identity/brand
- Inform: Inform your visitor of who you are, what you do, what you offer, and why you are unique
- Engage: Engage your visitor emotionally with imagery that strikes a chord.
- Entice: Entice the visitor to stay longer and interact (scroll or click to learn more)
- Convert: Boost conversions like more applications or donations for the school
What are the strategies?
Here are three surefire strategies to increase the effectiveness of the hero image. An effective hero image can use more than one of these strategies.
- Showcase - Treat it as a showcase of what is new, unique, or special at your school. Is there something special about your school you want to showcase? For example, new or renovated state of the art classrooms, sports stadium, high-tech STEM lab, library, theater, chapel, etc. Great shots of such gems would be a great thing to showcase in the hero image. If your Fine Arts program is a big-deal, and a focal point of your branding and story, then your hero image should showcase that.
- Emotion - Use it to tell a mini story with images or video clips. Imagery of students engaged in daily life, for example, in your school's chapel, or at an energetic pep-rally, will help create an emotional connection. For our parochial schools, the hero image could help show the strong faith community of your school and evoke spiritual emotions.
- Proof - Nothing builds interest more than actual numbers or quotes! Providing stats like the number of service hours completed by your students, or the amount of college scholarships awarded to your students, both can serve as evidence of how amazing your school is. Perhaps some quotes from current students or alumni.
What are the basic elements?
The elements of a hero section will typically include:
- An Eye Catching Visual
- A Big Idea Headline
- Support Text
- Call-to-Action
An example right from Rediker.com:
- Visual- Large background image of school children
- Headline - A short headline (5-7 Words)
- Text - A short sentence summarizing the theme of the site
- Call-to-Action - Bright obvious buttons calling the visitor to do something.
This hero image serves to inform and showcase to people of our primary product and to entice them to dive deeper.
Let us be your hero!
Hero Images, seem simple enough, right? However, there are more technical aspects of hero images that go pretty deep. There are tons of technical considerations like:
- Dimensions
- File Size
- Readability
- Responsiveness (making sure it looks good on all device types)
- Accessibility
- Search Engine Optimization
- And more.
This is why Rediker is here to design your site, whether it is a small project like sprucing up your home page, or building an entirely new site, we are here to help. We even offer a library of designed sections, many of which can make for a great hero image on any page or site. Below are a couple of examples from the available library. See this article for more details on Designed Sections.
Need help with your hero image? Contact your account manager today!
Examples
https://www.redisite.com/preview/3637b3bb
https://www.redisite.com/preview/ff0c518a
https://www.redisite.com/preview/c22f23c3
https://www.redisite.com/preview/49ab2c29
