Learn How Your School Can Leverage Hero Banners

Hero banners are a great way to display what makes your university unique. It can be an image of a central hub and campus, a picture of students gathering in the library to study, or a picture from a homecoming celebration.

Higher education sites have begun to catch on to a few newer trends which include making headers interactive and adding a short video into the hero banner depicting different highlights. Designing a great header is all about getting creative and using different visuals in your banner that will show what your institution is all about. 

Making your college or university stand out can be done in a few different ways, but it is important that when a website is being designed or redesigned, the overall brand identity of the university or college is upheld throughout the entire process. And that the integrity of the content quality is maintained. 

Here are a few examples of awesome website headers to learn from. These higher education institutions have designed stellar headers using hero banners in various ways to grab the user’s attention from the very beginning of their journey and guide them through to optimize their entire visit.

1. RICE UNIVERSITY 

Rice University uses a hero banner that features one picture of a prominent building on its campus. The homepage has a clean design and the information is concise for users to find what they are looking for easily.  Users are able to follow the various calls to action and can begin to be guided through the site info. 

2. BOWLING GREEN STATE UNIVERSITY

Like Rice University, Bowling Green State University uses one high-quality image, but this website takes the design a step further by adding compelling, clickable icons to the bottom of the image where prospective students can click through the different areas of the website. 

3. UNIVERSITY OF CALGARY

The University of Calgary also uses a hero banner in its header. They have chosen a bold image and added a search bar directly in the middle of the banner. This allows visitors to search exactly what they are looking for, optimizing their visit making it efficient and productive.

4. THE UNIVERSITY OF TEXAS AT AUSTIN

The University of Texas at Austin has designed a header that is simple and sharp. With high-quality images that display different aspects of the university's culture. The banner has minimal information that encourages potential students to explore and take a tour through the website.

5. GEORGE WASHINGTON UNIVERSITY

In the case of George Washington University, their hero banner, underneath the navigation menu,  includes a short video. They took the opportunity to use this video to showcase what makes their university great, from their cultural programs, academics and athletics to community involvement. When a visitor leaves this website they will be able to formulate an idea of what it means to be a student at this university. 

6. BUCKNELL UNIVERSITY

Similar to George Washington University, Bucknell University uses a video in its header as an engaging visual aspect that captivates the audience. By using negative space along with clean website navigation users will find exactly what they are looking for. This simplifies the journey for users by eliminating areas of confusion and makes it simple to find the information that they need. 

7. UC SAN DIEGO

UC San Diego includes the use of a video in their hero banners too. This header stands out because of the use of whitespace and a specific call to action directly on the banner.  Their compelling copy speaks to their different personas including prospective high school students and those looking to continue their education. 

8. UNIVERSITY OF MARYLAND

The University of Maryland designed its header to be interactive. They have a navigation menu with five different categories. As website visitors scroll down the homepage the navigation bar automatically expands prompting users to click through and explore different areas of the website. 

9. DREXEL UNIVERSITY

Drexel University is another great example of how interactive a header can be. With a design like this, there is no need for visitors to click through dispersed pages aimlessly. Users can be guided through their journey and audiences can explore with a  greater purpose. The bold use of colour contrast and photography appeals to their future student demographic. 

Summary

Headers can tell a lot of information to users. When your audience visits your site they should be able to interpret what your institution stands for, they should be guided through a segmented journey, that enables them to envision themselves as a student at the school.    

Portage CyberTech partners with the leading higher education institutions, helping them break through the noise and create industry-leading designs. Portage's data-driven and user experience approach to design has played a key role in all of our work. 

If you are interested starting your journey towards a more inviting, personalized digital experience, reach out to us. 

Thanks for reading!