10x great examples of school website designs

As part of our regular review of school websites we’ve had a look at some design trends that are taking place in 2013.

School websites are following many of the web design trends that we’re seeing in other sectors. Good User Experience (UX) is key – with large images, clear calls to action and maximum visual impact. Good engaging content remains a priority, social media is playing a greater role – and many school websites are now being optimised for mobile and tablet users.

Simon Verrall, Creative Director at Wisetiger took a look through the top 50 independent schools, ranked in 2012 by their A-Level performance. Here’s a selection of some of his favourite school websites which are setting standards 2013.

Click on any of the images below to see a larger version.

Eton College

Eton’s website is perhaps the most traditional of the examples highlighted here but it stills feels contemporary. There’s a lot of history associated with Eton which is captured nicely in the content and photography on the site. The main calls to action are a Message from the Head”, “Admissions” and “School Diary”.

City of London School for Girls

The City of London school website is modern and vibrant. Gritty, black and white photography and bright colours create a compelling impression of the school. The primary call to action is the “Headmistress’s Welcome” and information for prospective parents.

Queen’s Gate

The Queen’s Gate website is a good compromise between information for parents and as a marketing website for prospective parents and admissions. There’s a real sense of what it’s like to be part of the school from this website through good images and content.

Highgate

The Highgate School website is primarily focussed on Admissions. As a website, it makes great use of stunning photography which is used successfully to illustrate day-to-day life at the school. Whilst parents like to see great photos, it’s worth remembering that children engage particularly well with good images.

Latymer Upper School

Latymer’s website is a good example of school website that strikes a balance for the different users of their website. There are quick links to “Admissions” and “Parent Portal”, plus room has been left for other important information such as “Alumni” and “Donations”.

Tonbridge School

Tonbridge is another good example of a school website which achieves a good balance of marketing and information. Video is used successfully on the website, with good calls to action about school life and “Admissions”. There’s a clear login to the Parent Portal on every page of the website.

Merchant Taylors’ School

Merchant Taylors’ School website is a great example of a website that addresses the needs of the different audiences that visit the site. There are quick links for “Information” and “Admissions”, as well as old boys, friends and a “Development” section of the website. Although Taylors’ is steeped in history, the website style and tone of voice is very much in the present – and there is a wealth of content on the site.

Magdalen College School

Magdalen College School’s website features large pictures which capture the atmosphere of the school, school life and it’s history. In addition to information about the school there is very clear navigation for “Current Parents”, “Prospective Parents” and “Supporting MCS”.

Roedean

Roedean’s website is another example of site that meets the needs of the different types of website user. There are quick navigation links for “Book a visit”, “Choose Roedean”, “Request a Prospectus” and “Parent Login” – and the overall feel of the website is straightforward yet welcoming.

St Swithun’s Winchester

The St Swithun’s website is very visual – the photography is very engaging. From the home page, web visitors define their journey into the website by selecting from just six pieces of navigation – “Junior School”, “Senior School”, “Old Girls”, “Facility Hire”, “News” and “Parent Portals”. Thereafter the content is tailored to the user – with good signposts for admissions and school life.

Summary…

Over the last few years school websites have evolved. Schools are now adapting their websites to account for their different target audiences, providing specific content and information that these different groups need. Broadly speaking, the different audiences are:

Prospective parents and their children – information about the school, pastoral care, exam results, admissions, open days, etc.
Existing parents – day to day information, school calendar, closures, parent portals, news, events, etc.
Visitors to the school – information, contact details and directions to the school for visiting teams, suppliers, etc.
Alumni – networking, calendar, donations and news.
Philanthropy – giving, legacies and gifts.

You’ll see from the examples above that Design and User Experience are very important in the independent schools sector. All of the examples here are visually engaging, using good photography and clear calls to action to make the website experience as good as possible. And of course, all of the websites deliver good written content right across their sites.

On a final note, it’s worth remembering that different audiences access school websites in different ways. Using analytical tools we know for example that existing parents often take a brief look at the school website from their smartphones or tablets, to check the school calendar or to look at news. Prospective parents on the other hand spend longer on the website, visiting more pages and typically view the site from a desktop PC or tablet device. Optimising websites for smartphones and tablets will become increasingly important for schools in 2013.

11 years ago

School websites, User experience, UX, Web design

schools and education

stripey

The blog from Wisetiger

The blog from Wisetiger.

Recent Posts