- General Best Practices
- Independent Schools
- International Schools
- Public School District
While the end of the year and beginning of a new decade is just around the corner, we here at Finalsite wanted to take one last look back at 2019 as we spotlight some of the exceptional website launches from November and December to inspire you with new ideas for a new year.
Wow! This school website is one that will knock anyone’s socks off. Aside from the elegance -- which is a derivative of tasteful typography, generous use of white space, beautiful multimedia, and a spare color palette -- the site’s depth of design is outstanding. The homepage draws you in, but you can go three layers into the page hierarchy and still get layouts and pictures that resonate, all with strong content and intuitive UI. “Find Your Merchiston” right on the homepage is an excellent example of allowing prospective families to choose a path that makes most sense, followed by content that is personalized to that entry level. The academic departments section is a showcase example of how to bring curriculum, teaching and learning to life.
Virginia Episcopal School
An uncommon left-oriented sidebar to anchor a stunning video montage sets this site apart; but opening up the navigation, which then fills the page, places the user front and center to choose their path. So easy. The Visiting VES page is a good example of using tabbed navigation to accomplish a lot with a little -- in this case, maps, accommodations, directions and contact information. Meanwhile, the “I Am A…” constituent navigation at the top helps someone pre-select their journey more easily while the calls-to-action on the left enables prospective families to connect quickly. The utility of the calendar is particularly nice, with a simple list, downloadable option, search and navigation via the mini-block view.
Farnborough Hill School
A scenic opening landscape shot of girls sitting on a hill, combined with the sage green and gold palette, conveys a warmth and subtly that drives much of the overall design aesthetic in the new website for this all-girls independent school in England. A compelling welcome from the head, followed by updated news and events and a grid of programmatic features, lead the user to any number of logical next steps. The news page does an impressive job of sharing a lot of stories and images in an accessible layout, all of which communicates a school with a lot going on.
Changchun American International School
You could probably get away with just watching the opening video to want to visit this school -- the abbreviated clips, perfectly stitched together, gives you a taste of just about everything, and everything is a lot in this international school website. The color palette, introduced subtly with the school logo at the top, comes to life as you move through the homepage; it’s a nice combination of oranges, greens and blues. Important secondary pages, like the Middle Years Program (MYP), take advantage of these colors in organized pages that combine video, full-width images and multi-column content in well-developed layouts.
The quick “Welcome to Oakham'' that precedes the beautiful full-screen image that follows sets an inviting tone for this independent school in the UK. But no other website (in recent memory) does such a nice job of story-telling using animated visuals that sequentially guide the user -- while also integrating sepia-toned images that communicate history and legacy: this is a school that’s been here a while and knows who it is. What’s more, these pictures are not from the past, but simply provide a compelling backdrop for the full-color action shots that bring the school to life. To that end, sections like the news page, with a filterable, full grid of stories, showcase a school with a broad swath of offerings.
Download our FREE webinar to learn about the biggest website design trends for 2020!
Opening a new international school presents its own kinds of challenges, but the TASIS approach to its latest addition in Portugal shows just how to do it, presenting a school that looks ready for business. The website is full of great content -- profiles, programmatic features, short and compelling nested videos -- all within a great design and anchored in the TASIS philosophy and ideals, giving the site weight and credibility even before the doors have opened. Historic shots combined with a strong narrative also drive the message home that this is a school that has everything important figured out.
St. Paul Christian Academy
Having an opening statement like “Values that endure” emphasizes that an independent school education provides more than just college admissions when thinking about student outcomes. The mission -- well crafted -- follows directly below, and then the key question every website should answer: “Why St. Paul?” It’s always impressive when a school can narrow down the answer to that question into just a few key areas, like they do here. The “Get Started” panel at the bottom literally has a picture of an entrance to the school, and the calls-to-action make it easy to take the next step. Social proof around “Meet Our Community” provides a range of people -- students, teachers, parents and alumni -- who bring a rounded perspective on the St. Paul Experience.
St. Paul Academy and Summit School
So, first, this homepage features perhaps the best first 5 seconds ever of an opening video. How welcoming is that little girl? SPA’s signature blue and gold are nicely placed in a design that communicates a lot in every panel on the homepage. Including each division in the main navigation is an interesting move, but it works -- this is a big school with a lot to communicate to a broad range of prospective families coming in wanting to know primarily about just one of those areas. This approach also allows for a more shallow navigation within the academic section. I like the hanging call-to-action buttons on the right with a tried-and-true set: Inquire, Visit and Apply. In light of the fact that St. Paul is not an uncommon name, the top tagline is particularly smart: “An independent day school serving grades K-12.” Never hurts to bring it home!
American International School of Johannesburg
Finalsite designers invariably -- and quite often -- get asked to design something “different.” And why shouldn’t they? That’s also what makes the work interesting. But it also takes a school to be prepared to try something different -- and certainly in terms of first impression, that’s what AISJ did with their site. The chalky, slanted type, combined with icons that aren’t vector creations -- conveys a school that is okay with being out on the edge. The design straightens up as you scroll, which works well in creating a comfortable and inviting user experience. The interactive map on the homepage showcases a point of pride and distinction: 107 nationalities. Think about that: 107! Even the search bar is fun, and the hamburger menu makes quick work for navigating the site.
There’s no question about the strong brand for this independent school in St. Louis -- the small deep green blocks square up nicely throughout the design, but it’s also the clear messaging -- starting with a panel of values a user can easily navigate through: Citizenship, Leadership and others. The introduction of a solid black background for the “Why Whitfield” panel sets this important section apart, and the interactive accordion treatment lets the user understand just what makes this school unique. The athletics homepage tells as much of a story as the homepage -- this school has lots to be proud of -- just like the equity and inclusion page does, which uses a mix of layout options to convey a lot of important information.
Vaughn Next Century Learning Center
Charter school websites hold a unique challenge in the world of school websites with their combined challenge to recruit prospective families like an independent school while communicating the message of a public school district. Vaughn does a nice job of doing just that with a compelling design that makes the most of its bold, deep red and high contrast black, along with photography and videos throughout to tell a story of who they are. The Schools drop-down simplifies access to its campuses, with each one leading to a unique substitute that contains a primary navigation specific to the school, allowing a family to bookmark for easy reference later.
Methodist College Belfast
The recent website launch of Methodist College (“Methody”) in Northern Ireland, takes a liberal use of its royal blue to frame the design and create nice contrast opportunities for strong photography, infographics and call-to-action buttons. A nice aerial shot of the campus serves as a base image for an interactive map, helping orient the user to the buildings while also providing a useful perspective on how Methody is tucked into the city proper. The Useful Information page is a terrific example of using Finalsite’s content management system, Composer, to implement accordion treatments to expand and collapse content into a very functional, comprehensive resource for current parents.
Maui Prep Academy
What it must be like to go to a school with a view like that! What works best about the coastal landscape shot in Maui are the subsequent shots of kids being kids in school. This is a very nice implementation of one of Finalsite’s custom designed themes, with good use of the built-in infographics, upcoming events, news and calls-to-action that match up with Maui Prep’s existing brand and aesthetic.
Hanford Elementary School District
You can see how this district is using its homepage to convey a critical issue (at the time of writing!): a shortage on school bus drivers. Today, it’s around top teaching careers. Having a site that is easy to update is key, and it’s nice to see a sign that the district is taking advantage of that. The district did a nice job leveraging the theme with its own brand, and the structured layout that visually distinguishes navigation for district and school is clear. Each individual school picks up the district design, with variations in navigation and content that are tied to what’s important for their users. And you can’t help but love the Tumble Book Library icon halfway down the Hamilton Elementary homepage!
Kirby Preparatory School
By minimizing the size of the header and type, this theme design opens up the homepage for great pictures, and Kirby School, an independent day school in Santa Cruz, has great shots to make the most of that space.The overlay of social media on a beautiful campus building shot is a nice juxtaposition that conveys an active school with a solid footing. While pages like the tuition and fees area aren’t design-heavy, the content is thoughtful and, in this particular case, acknowledges that affordability is top of mind; the school knows to share how it helps parents make this work for their children.
Finalsite launches hundreds of new websites every year, each as unique and exceptional as the schools they represent. While we showcased just a small sample of the many websites launched near the end of the year, there are still over a hundred more from this year alone. To see a selection of other 2019 launches, read about the more than 50 websites launches earlier this year, or browse a larger collection of our recent launches in our ever-growing portfolio.
ABOUT THE AUTHOR
Angelo graduated valedictorian from St. Paul's School in Baltimore, MD and from Princeton University. Despite getting his degree in creative writing and English Literature, it generally takes some doing to keep him from programming and breaking websites. Just after graduating, he started Silverpoint, and grew it to over 300 schools worldwide before merging with Finalsite in 2013.
- Web Design
- Website Redesign