• International Schools
3 Inspiring International School Website Designs
Angelo Otterbein

Ok! My favorite time of the year, or at least one of them: picking out some of our best websites for international schools and talking about them. Forget the fluffy intro. Here we go:

Inter-Community School Zurich

Maybe I’m just psyched about Halloween, but when has orange been so awesome? What a great, simple opening animation to stop the user in their tracks, lay out the brand, and encourage you to dig in more. It’s like the red carpet at a black-tie event, except orange.

Inter-Community School Zurich Homepage Screenshot

Here’s another thing about that orange: they help raise the awareness of the two calls-to-action on the homepage, which to me are perfect: “Arrange a visit” and “Request info”. That’s all we want at this point. We’re not expecting someone to apply or give money right now. Visit or ask for more information.

Inter-Community School Zurich Homepage

Top right, there’s a “Chat” button. We get questions about this function with some frequency and, to be honest, I’m never quite sure how to answer if having a chat “works”. So I tried it. I immediately spoke with Fiorella, who began a conversation with me, and guess what? We had a lovely “chat”. She explained (in the chat): “Many parents are working during the day and it is easier for them to chat with us, than call us.” Fiorella handles many jobs at the school, website updates being one of them, and finds the chat very useful and easy to monitor. She explained that the chat had also been a good resource for current parents understanding how to use the portal when the new website launched. The Chat Bot/virtual assistant has also proven handy, she added.

I’m going to confess I didn’t get much past the homepage because it was so good at doing the most important thing: drawing me in. I had a video that told an amazing story; I had a “real” person answer my questions; I had a search option; and I had a next step at every turn. As I scrolled down, I learned more and more vis-a-vis unique and visual content elements just what ICS had to offer and what was happening at the school —and I knew that the homepage was just scratching the surface. If the purpose of a school website is, at least initially, to help an anonymous parent take a next step, this site can’t do a better job. Then, when I’ve taken the next step, the website is there to provide me with a lot more information, which this site also does. Great job ICS!

Shanghai American School

Every time I visit this website, I can’t help but be mesmerized by drone shot of the marching students leaving the building. Whoever shot the video has an eye for balance, symmetry and movement — it’s a small work of art. I’d like to see more! There’s also only 3 big words: “Excellence since 1912”. Even the school name is tucked away, a brave move from a branding perspective, but a risk a school like SAS can take. As one of the most recognized international schools in Asia, they can spare the masthead and pronounce their core value and history in 19 characters.

Shanghai American School Homepage

But what fun! There’s a tone of academic seriousness with the video, and then as you scroll, facts and figures, pictures and testimonials, seem to emerge from everywhere, giving those short bursts of “wow” and “cool” as the breadth and depth of the school become so clear. This sense of purpose combined with fun plays out in the color palette with muted grays and blacks paired with saturated blues and reds; and even the typography picks up this balance, with a funky stylized face for the info graphics and a stock, heavy sans serif face for headers. All together, the site conveys a sense of very intentional design and graphic decision making, while serving the purpose of telling the story of a school with lots to say. The design evokes the school in every way: a serious place making room for fun.

Shanghai American School Slideshow with Photos

The site is also a rare example of line art used well; it literally comes out of nowhere, and the surprise is nice. Take a walk through the “Our Story section to see what I mean. It’s elegant, appropriate and in the context of rigid boxes and lines, a little coffee break for the eyes.

Shangha-School our story page on website with photos and text

Navigation is easy and strategic: four items cover the ground well and point you in the right direction; there just isn’t much to “figure out”, and that’s nice. Thank you site architects!

Shanghai American School Navigation on Website

Here’s another thing: the grid. We common users don’t think much about grids — after all, it’s the kind of thing that you only notice when it’s not used correctly, like seeing a picture slightly crooked — but some designers obsess. In the case of the SAS website, the grid is uniquely implemented on the interior. It’s subtle, but, as one example, if you look at the relationship between the horizontal primary navigation, the second tier vertical navigation and the body copy, you’re left with a nice amount of white space, and a column width for content that’s approachable — perhaps the most important end result of this setup. There’s a respect for space, which doesn’t come easy on the web.

Shanghai American School Leadership page on website with text

There’s more to say about this site — I love it — but I’ll leave you with this: check out this picture on the Leadership page. Clever, funny and a straight punch in the “aw shucks” gut. This school gets it.

Students smiling in photo

Singapore American School

Here’s the thing about Singapore American School: it’s huge. Like 3,970 kids from 56 nationalities huge. Like have-your-own-two-acre-rainforest huge. Six-hundred and sixty-five employees and 388 faculty huge. But, get this: a student-teacher ratio 10:1. An average mean SAT score of 1200+. Ninety-nine percent college matriculation. It’s one thing to be big, but big AND awesome?

Such is the spectacular achievement of SAS: massive scale yet successes all the way through to each and every student. There’s an entire SAS library of playbooks we could all take a page from in how organizations are run.

But back to the website. Let’s start with the photography. But not the hero-image stuff. How about this one for parent night?

Lego people standing in picture for parent night photo

Pretty fun for something like a parent night, right?

But what about this?

A Universal Lagnauge Description for School with photos of students

In the broad, high energy buzz that emanates from this school of thousands, just this one example captures just about everything: learning, engagement, global experience, and a classroom (few of us) have been in. This is how SAS makes it happen.

And could you get any cooler on the student photography front? I mean, camels? This is like a page out of National Geographic.

Student photo gallery with pictures around the world

I thought I’d dig deep and see if they were so good to make even the “Food and Nutrition” page on their website exciting. Here’s what I found:

School recipes photo in the kitchen

Naturally I clicked on “Our Secret Recipes” only to find a searchable database using Finalsite Posts! How cool! I understand if you’ve now left this blog and started checking them out.

Secret recipes posts with images of food and text

There are other reasons to get inspired with this website. This team is all about inbound. Check out this very clever version of what some of us corporate types call the “buyer’s journey”:

Join the SAS family images with call to action buttons and photo of students

Very smart. What they’re doing is asking prospective families to choose their path based on their commitment and where they are in their relationship to both the school and the admissions process as a whole.

Further down this page the school does a nice job with an interactive “10 reasons to join SAS”. I’m a big fan of schools who can articulate what makes a school special, in marketing-ese, their value proposition.

Inspiring Teachers reason to join SAS text

This one in particular is interesting, directly addressing the independent SAS enjoys compared to some of its peer schools who are privately owned.

Trust School reason to join SAS with text

And while I could go on and on about this site, I can’t help but mention a particularly excellent example of a tuition page. Here’s the content you get at the top of the page, before you see the tuition. Value first, then cost. There isn’t a better example out there I’ve seen in recent memory. This page also is lengthy and very informative, with a level of transparency that is reassuring. Great job!

Best investment text and infographic

So there are three to get you inspired. We love working with these schools and seeing the power of great collaboration. If you aren’t part of the Finalsite family by now, you should be!

Download My Copy

angelo otterbein headshot

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.

  • International Schools
  • Web Design
  • Website Redesign
There are no news posts to display

Explore More Blogs

Parish Episcopal School website homepage
Andrew Martin

Courtney Joyner, Webmaster at Parish Episcopal School in Dallas, Texas, joins Lorrie Jackson for this special episode of Apply Yourself to discuss Parish Episcopal's website redesign and rebranding to deliver content more efficiently with a larger focus on mobile visitors, Blackbaud integration, and their school's entrepreneurial spirit and unique campus.

Read More about [PODCAST] Website Redesign and Blackbaud Integration with Parish Episcopal School