Enhance Your School Website

Site enhancements are what really interests your website visitors. It has the obvious benefit of making them stay longer and even increasing your conversion rate. So learn to enhance your school website and apply design improvements that look good and can make learning about your school an engaging, eventful experience.

Here’s a list of improvements that would look good on your school website:

Interactive Elements

Interactive elements are any piece of your website that move or change as a user scrolls or hovers, adding more of a dynamic and colourful feel to pages without compromising the school brand. There are different types of interactive elements. Among these are animations, transitions, and microinteractions.

dehavilland_frontpage An example would be De Havilland Primary’s frontpage center section which has a colorful version of its menu that when hovered on produces subtle effects to catch the user’s attention.

Modular Layout Panel

Also known as cards or tiles, modular layouts break up panel designs using stacked blocks. They’re a great way to showcase media, mission and values, and news. Since they’re designed in a grid format, they also look awesome on tablets and smartphones. An example would be Tring School’s Parents and Curriculum pages, where each section has an area of its own in an organized grid.

tring_parents_grid

Interactive Flyouts

Flyouts are areas of the page that live out of the viewport until a user taps or swipes the appropriate area. They not only save space but also make finding information fun and refreshing for the user. Inquiry forms, admissions processes, recent news, upcoming events, related links are some of the information you can place on flyouts.

onslow_flyout_links

A great example of this enhancement is Onslow St Audrey School‘s frontpage menu for useful links as shown above.

roundwood_twitter_res

Another way of using flyouts is for showing a direct feed to your website’s social media. An example of this would be Roundwood Primary School’s live Tweeter feed where the button remains a sticky bar on the left side of the website until the user hovers on it.

Section/Page that sets your school apart

Do you have opportunities that no one else does? Does your school offer a unique program? Dedicate an entire page on your site to highlight it. You could include something similar to a House System that Tring School has. It consists of their own vertical tutoring system where students are grouped into tutor groups who then compete against each other.

tring_house_system

Another example would be Roundwood Park School’s frontpage accordion slider where each site section opens up smoothly and presents the whole picture on hover:

roundwood_accord

Social Media Feed

The purpose of web design is to provide an experience to keep visitors on your website. Let prospective and current families know you’re active on social media by using a mash-up page that brings together your most recent posts from your networks into a single, visually appealing page or panel. Manshead School’s front page has a twitter feed instantly on display above their blog posts.

manshead_twitter_feed

Sticky Menus

While most websites keep their navigation permanently place at the top of the page, sticky navigation can mean that the navigation moves with the user as they scroll down the page. So, no matter where they are in your website, they can easily choose where to go next. Another great way of making use of sticky menus are to place simple call-to-action buttons in them.

Examples:

marriotts_sticky
Marriotts School’s sticky navigation

ralphsadlier_menu
Ralph Sadleir School’s sticky navigation

Interactive Campus Maps and Virtual Tours

Show off your beautiful school grounds whenever possible and prove that your school is worth the trip by using an interactive campus map or an immersive virtual tour.

Examples of virtual tours:

Roundwood Park's Virtual Tour
Roundwood Park School’s virtual tour

manshead_virtual_tour
Manshead School’s virtual tour

williamedward_virtual_tour
William Edward School’s virtual tour

Tailor-fit your content to go hand-in-hand with your design. You can either choose to follow trends or follow the ones above. By combining some, if not all, of those tips together, you can come up with a website that best fits what your school actually offers and represents.