Leveraging branding in footers is a key approach that colleges and universities can take to discern themselves from rival institutions. Elements like color scheme and logos, visual content and tone are all just a few branding elements that need to be considered in higher education web design. This kind of branding plays a huge role in the delivery of messaging for programs and experiences that are offered at your institution.
Footers often use a common arrangement in their design. Most higher education websites have their site contents organized into multiple columns where the information is categorized for users to intuitively find what they are looking for. Many higher education websites have been designed in a way where the footer uses a color that is distinctly darker than the rest of the page. This is done to indicate that users have reached the end of the page. Although many higher education websites use a similar design for their footers, there are a few ways to stand out. By including social media links and engaging calls to action, along with creative layouts and color patterns footers can be as unique as their respective institutions are.
The University of Arizona for example has its web content organized into 5 columns. This website went as far as grouping specific audiences like “Future Students” and “Alumni & Donors” to make it as simple as possible to get what you need out of your visit to their website.
Boston University has categorized in a different way than what most universities do. The BU site footer includes three clickable components that lead visitors to different web pages for athletics, the educational hub and a donation page. Below these three blocks are different resources for their different audiences.
The University of Toronto uses dark color contrast well in its design. UofT uses its trademark navy blue for its footers and a variation of their branded blue in a separate block for their social media directory, separating the website content and social content.
The University of Pittsburgh website also used color contrast to make their footer stand out. The majority of the homepage uses a white background and its branded colors light blue and yellow. The footer, however, is dark grey with yellow and white font.
Separating Social Media
Social media is another huge channel that your audience will use to acquire more information about your school. Make it easy for them to find you on each social media medium. Ensure that when your footer is being designed, there is a section that enables visitors to click and quickly check you out on social media. With this, your audience is able to gather all of the information that you need in one place.
North Carolina Central University has included links to each of their social channels directly in their website footer to make it as easy as possible to find
The University of Kansas includes links to their social media profiles in a block that is separate from the footer content. This makes it visible and easy to distinguish web pages from social media.
Bucknell University separates their social networks from the website content in a way that is noteworthy. Above the footer containing content, there is a separate block pointing users in the direction of the university social channels with a call to action encouraging the audiences to join the conversation on their social platforms.
The examples in this article are just a few ways that higher education websites have used footers as a way to engage with their audiences and guide them through their entire journey on an institution's website.
OPIN partners with the leading higher education institutions, helping them break through the noise and create industry-leading designs. OPIN’s data-driven and user experience approach to design has played a key role in all of our work.
To learn more about how your digital landscape can be transformed, contact OPIN Digital. If your organization has already implemented these design aspects, our team would love to chat about how to take your design even further.
Thanks for reading!