The School Website Design Showcase

School websites can really lack in creative flair when it comes to design.

Possibly one of the reasons for this is that they have lots of things to consider and let’s be honest, money is probably better spent on actually schooling the students.

But some schools and universities have really excelled with their websites, making them not only look beautiful, but making them simple and easy to use.

We have picked 13 examples below that really work in our eyes, some with great design, some with great functionality, and some a little quirky.

So let’s see what we have:


Credit to HHX Aarhus Business Gymnasium

HHX Aarhus Business Gymnasium

The HHX Aarhus Business Gymnasium has a great homepage, big, blue, and straight to the point with a stand out menu on the left.

You can’t scroll down the homepage, which I think is a great feature, you don’t feel like you are lost in a mass of information, it is clear you have to pick one of the options.

Once you’re deeper into another page, for example the Main Course page, you are confronted with a scrolling page with plenty of information. Some may think this is busy and crowded, but I like the fact it is displaying course information in a totally different way, it’s more interactive and intriguing.

This website for me breaks away from a basic and methodical way to view course details. They have pushed the boat out and I think have been successful in doing so. This unconventional approach can make you stand out from the crowd and aid the school in recognition.


Credit to Cornell Tech

Cornell Tech University

As web designers, we have seen video become a massive part of content for people’s websites, becoming more accessible to clients. Along with this we have seen a trend to replace a big hero “image” with a hero “video” at the top of a website.

We have seen some really good ones and some really bad ones, and we think a hero video is a project in itself nevermind just the website. Cornell Tech University have nailed theirs, with beautiful footage of the University and the surrounding area. It doesn’t so much explain all about them but more accompany the text, which goes into more detail.

I think this is key to think about when you are pondering on a video for your hero.

Is the video going to do the talking or the supporting? The answer to this question can dramatically change the design.

Now you’re starting to see why we think a video is a project in itself. But don’t let this put you off, just make sure you really think it through.

The rest of the Cornell Tech Website does the talking but the video is a crisp and professional introduction to the University.


Credit to St James Catholic School

St James Catholic School

With technology constantly on the rise, it is now touching every industry and trying improve everything as it goes. Education is no different.

St James Catholic School has a few simple quick links on their website, that go to; “Parent Pay”, “Parent Portal” and “Show my Homework”.

This may not seem like much, but integrating your school website design with some technology that makes it a more engaging and useful site for both students and parents can only be a good thing.

We are currently working with a client who has software for nurseries and schools that allows you to log a students progress online rather than by paper and allows parents to engage more in the child’s learning. Keep your eyes peeled for this project!

A website can be a great tool for any business, but you need to use it properly. St James is a great example of how with some thought this can be achieved, for all it is a subtle menu, the site is transformed into a hub for both parents, students and staff alike.


Credit to Harbour Space

Harbour Space

Harbour Space has a website that really pushes the visual aspect of web design. There are interactive elements animating all over the place, but it doesn’t seem to be “too much”, even though there’s sometimes a great big blob of purple coming onto the screen.

As a web designer, making a website look great on a flat design is all well and good, but knowing how the website and its users are going to interact while actually live on the web is key. For all the big animations on Harbour Space, it also has some subtle ones, like the slight increase in size of the apply button when you hover over it.

These micro interactions may seem a little irrelevant but these small subtle changes can make it easier to navigate a site, letting you know what is clickable and where you are.

We recently shared some website ideas that touch on this sort of thing.

These user experiences on a website are a bit of a thing in design now, so much so you now have User Experience designers. Now I would say if you are any designer you should be designing for the user’s experience but I can see how many things can be done in that particular aspect of design now.


Credit to University Of Sydney

University of Sydney

Recently I wrote a post about school prospectus design and I featured the University of Sydney as their prospectuses were great.

Along with its prospectus, their website is also lovely.

It’s clean, easy to use and it looks great. Unlike a couple of examples I will go through on this post, the University of Sydney has not tried to reinvent the wheel or break the boundaries of design. Instead they have created a stunning and completely functional site.

Now this may not seem worth a mention, but this is really satisfying to me, if you have read any of my other posts you will constantly hear me say functionality and purpose over anything else. This approach is often overlooked for a more exciting design that maybe doesn’t work well on mobile, or is hard to navigate.

But think about this decision before you opt for a design that reinvents the wheel.


Credit to The University of California Humanities Research Institute

The University of California Humanities Research Institute

The UCHRI uses their jagged brand visual beautifully through their website, bringing in shapes throughout the website to outline important information, house imagery or simply just to book end the footer.

This is a great example of pushing your brand identity through into your website and not just the logo mark. This is what creating a visual style and identity system for your whole brand is all about. It’s not just a logo design, but everything else encompassing this visual style.

As I mentioned in my post about school branding examples they have ditched the usual path for schools, representing their core values of collaboration and industry changing ideas, translating this into there website very well.


Credit to University of Technology Sydney

University of Technology Sydney

Along with the University of Sydney, there is also the University of Technology Sydney. They’ve used a data visualiser to create their brochure covers and brand visuals.

They have taken this style and applied it to their website, using assorted shapes and colours throughout the site with a clean, easy to navigate design on both desktop and mobile. Your mobile website design is a very important part of your school website, but even more so for universities and higher education facilities.

The base of users will be using their mobiles to view your site and to view the important information about courses and your institution. Now if they have a bad experience and can’t find what they are looking for, they could already discount you as an option.

Sound fickle?

Think about it. We’ve all had a bad experience on a website and never went back.


Credit to UPTEC

UPTEC Science and Technology Park of University of Porto

I pondered for a while on whether to include this example or not. It is quite amazing how good just navigating around the site feels and looks, using various animations and interactivity, some subtle and some very noticeable.

I imagine some of these would take a while to load on some slow internet connections and some of them are a little temperamental on mobile.

For example:

I had a little trouble on the landing page when it asks you to hold to continue, if it wasn’t in the correct position it was just prompting me to save an image.

This is an incredible looking site, but could be confusing for some people, but I think the fields and industry this school is in merits the more far stretching design.

I think it is important to stay true to yourself and your brand strategy.

If you are a high end university and your potential students expect nothing but that, then steer into it. Or if you’re a creative college, you need to find a more creative solution for your brand and website!


Credit to MIT

MIT

MIT is renowned worldwide for their industry changing students and ideas.

They have created a website that matches this status with a different approach to the usual website layout. Normally a website would have the big hero, with a statement that explains what the place does.

MIT have opted for a search bar and a testimonial from a current student. This has been thought about and designed specifically to help a user find what they are looking for, and gain a sense of ambition from the testimonial.

If you are wanting to become a student there, what better way to get some involved and excited that having a current student telling you what their big idea is and how MIT is enabling them to pursue this big idea?

The search bar to the left also can’t be overlooked. If you know what course you want and just want the information, this is a great way to get to it quickly.

In my eyes this design may not have the typical hero video with beautiful spanning shots (that can work really well by the way!) but it has a sense of function, which considering MIT is all about building a better world, works perfectly.


Credit to Cambridge International School

Cambridge International School

Similar to MIT, the Cambridge International School has a slightly different layout, although they do have a hero image. They have also identified the four main sections they think people will want to drop into, and have them visible and clickable on the main hero.

They use a four column grid for the layout. Now all websites tend to be designed to some sort of grid, whether that be a basic twelve column grid or something else. This style of visually showing a grid on the front end is something that seems to be happening more and more, giving a certain level of structure to the website.

Using this structured approach in an education environment is quite a nice touch. Considering the education system is quite a structured system no matter what country you are in.

One thing I struggle with is how this partner of Cambridge University can have such a designed and functional website, when the original university site appears to be somewhat lacking.


Credit to Westbourne Grammar School

Westbourne Grammar School

One thing I kept thinking about when doing my research for this post, was how when it came to non-higher education institutes, mainly anything under University or College in the English structure, I realised a lot of the target audience probably had to be at parents rather than the students.

Yes the students could jump onto the website, but if parents are wanting to make a decision on where their kids go to school, then the information would have to be tailored towards them.

The Westbourne Grammar School website does this very well.

It keeps everything incredibly professional, while getting across exciting or important information about terms dates, enrolment, student success, and the culture of the school. But I can also see a potential student being able to navigate this site and be engaged by the content.

When designing a school website, you have a tough job of balancing the content and visual style to appeal to a varied target audience. But with plenty of thought and persistence, you can create something that is engaging for all your users.


Credit to Ravensbourne University London

Ravensbourne University London

Ravensbourne University is a leader in creating opportunities in the digital media and design industries for their students. So if you are a leader in a creative industry, your brand and website surely has to be creatively fueled as well?

Ravensbourne’s website is just that, it is big and bold with big chunky text and buttons, bright colours and moving gradients. In a creative industry there is a need to be able to make a statement and Ravensbourne definitely do that, even on mobile, everything is still chunky and in your face.

The menu on Ravensbourne in particular, is almost overkill but it works right on the edge. Functionally, it navigates really well through the many pages and sections of the site. With screen sizes only seemingly getting bigger and desktop sizes getting smaller, and meeting them in the middle, sizing can be a little hard to make sure it looks right on each device.

Ravensbourne do this well. From desktop to mobile, so make sure you have an impactful design, but make sure in doing so, you aren’t overdoing it on another device.


Credit to University of Essex

University of Essex

Similar to Ravensbourne the University of Essex have went with a bold striking visual style, mixing bold colour gradients with big chunky text in an almost protest fashion. This protest type visual is also carried through into the language used. This can really help your brand values and strategy being pushed through into your website.

For example:

If you are a more casual business, coming across more conversational might work well.

So for “contact us”, maybe change that to “let’s talk”. Or for a more serious business you will want to keep it clear like “get in touch” or “contact us.”

The University of Essex use a language that is almost boasting and arrogant about who they are and what they do, they ask the question, “We are Essex! Are you?” which makes it out to be this exclusive group, and you need to have what it takes to be part of it.

Now you have to be careful that you don’t take this type of language too far, but being confident in what you do and letting people know why they should be investing in you is a great way to engage users through language and not just images.

Conclusion: The School Website Design Showcase

Looking through these examples will hopefully give you plenty of inspiration and ideas of how you can build or revamp your school website.

Using interactive elements, engaging language and storytelling through images, videos, and content can all come together to appeal to your target audience, whether that be potential students, current students, parents, or others.

Does your school website appeal to the right people? And does it appeal in the correct manner that matches your brand values? If not or you want to discuss it, let’s talk.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *