When to use
The hero image area is a great way to create a more visually appealing page. This area can be enabled on any page, however it might not always be best. Reserve the hero image/video for site homepages, top level pages, or single page sites. Doing this can help establish a level of pages, letting the user know they are deeper into your site.
Use the available buttons and secondary text in the hero area for a secondary heading, short message, and to provide users with immediate actions they can take. This is a great way to inspire a user to register, sign up, contact, or whatever action is the main goal of that page.
The hero section includes a title that is seperate from the normal Page Title. This title is displayed in bold, italics, and in a different font over the hero image. Use this title exactly like the page title to welcome the user to the page, often times you can use the same text as the page title unless you wish to abbreviate.
This field is shown as optional but we STRONGLY recommend that you include the title so that the hero area is not blank and consistent
across all sites.
The description is displayed below the title in the regular font. Use this area to
relay extra information about the page or as a subtitle. For example a page about
student activities and organizations could be titled "Enjoy WKU" and include a description such as "Engage in student activities and organizations"
The buttons in this area can be used to provide a call to action or something that you want to inspire the visitors of your page to do. There are two optional buttons in the hero area. Use the red button style for your primary action, and the gray button for your secondary action. A good example of this would be a page titled "Work at WKU" having a primary button for "Apply Today", and a secondary button for "Benefits". This might inspire a user to get started applying immediately, or learn more about the benefits, both with the end goal of inspring the user to apply for employment.
A collection of hero images has been placed on the university share drive at:
S:\\CUSTOM-SHARED\UNIVERSITY-PHOTOGRAPHY\Photos\_Web Hero Images
If you need help creating or finding specific hero content, contact Creative Web Services.
When selecting an image to use try to keep these things in mind.
- Recommended Size:
1200 x 650
- Recommended Format:
- Use photographs.
Avoid using graphics, logos, branding, or images with text. Try to use photographs of content that is related to your page. For example a page related to commencement might use a photograph of a student in cap and gown or at the ceremony. Landscapes and photographs of campus often work the best for this area.
- Darker images work better.
By default hero images are darkened 35%. When using a brighter image you may want to edit it to appear darker so that text displayed over it is more legible.
- Keep subjects in the center.
The hero image is attached to the background and covers the entire area. On mobile devices the area is much less wide. If your photograph contains subjects like people or something specific you wish to show on all screen sizes, keep the focus in the lower section and centered in the image. This ensures that on mobile devices your subjects still show. Consider using a photograph of campus or landscapes otherwise.
- Blurring is a great technique.
Using a photo editor you can apply a slight blur to your hero image. This makes it appear slightly out of focus and keeps the users attention to the content.
Large images can result in a large file size. To reduce your file's size and make your page load even quicker, consider using a file compression service such as tinypng.com, compressor.io, or compressjpeg.com.
Note: you must have approval before using videos in your hero area. Contact the IT Helpdesk to learn more.
If you need help finding video content, contact Creative Web Services.
- HD Quality.
Use videos that are 720p. You may use a higher quality clip if it is very short (<3s). Remember to keep the file size as small as possible.
- Try not to be distracting.
Videos with fast moving content or jarring edits can be distracting from the page and in some cases even make users feel nauseous. Keep content and movement in mind when selecting a video. Clips with subtle movements, slow motion, or timelapses are a great way to enhance a page.
- Keep it short.
Edit videos down to <10 seconds.
- Darker Videos work better.
By default hero videos are darkened 35%. When using a brighter video you may want to edit it to appear darker so that text displayed over it is more legible.
- Remove Audio.
Remove any audio from your videos to reduce file size.
Use a compressor to reduce the file size of your video. Try to keep files as small as possible, < 5mb, the smaller the file the faster your page will load. Clipchamp is a compression service that allows 5 free videos per month, and can export to the specified mp4 filetype. Handbrake is a free video compression application for Mac computers.
Hero videos autoplay on a loop. Use a video editor to add a transition such as fade to black at the beginning and end of the video, or duplicate and reverse the playback to create a seamless loop.
- Fallback Images.
Videos do not display on touch or mobile devices. Instead a fallback image is provided. Use a screenshot of the video's first frame or similar content to prevent a jump when the video is loading on slower connections.
Hero Video Standards