School website design: 29 lessons to bring your educational brand online


Schooling often gets the reputation for being the most formative time in someone’s life. That’s a pretty big deal. A school website must communicate the establishment’s ability to provide that experience for each potential student.

But what information do you need to include in these niche digital designs? What kind of features should be present on a school website? And how do you set yourselves apart from the competition? Big questions, but we’re here to answer…

What makes a good school website?

A good school website does justice to what the school offers in terms of academics, teachers, range of co-curricular activities and the facilities available. Achieving this means adding all the relevant info to your site in the most engaging, appealing format for your intended audience.

What info do you need to communicate about your school? How will you present it? Illustration by OrangeCrush

Monopolise on site interactivity with features such as:

  • effective, concise copy
  • appropriate, high-definition imagery
  • curated videography
  • structured, consistent and accessible layout

We explore what it means to have a great school website in 2021, feature by feature.

Keep the audience in mind

A school website caters to prospective students, nurtures existing student and parent communications and their ease of access. By keeping parents up-to-date about school events and reports on the child’s progress, a school keeps the parents in the loop of their children’s education.

This can be done by showing details of up-and-coming events, providing links to newsletters and redirecting parents to external course management portals where they can keep a track of their children’s assessments, examinations and grades.

School website showing school events
Parents can be kept informed about the events happening at the school via Accra Academy
Information about distance learning and COVID 19 on a school website
Information about COVID 19 practices of school by Week of the Website

Adapt to current trends

One domino effect of the pandemic was to bolster the need for a school’s online presence. It’s the first point of call to keep parents and students updated with any changes in policies, learning formats and exams.

Many classes have gone online, meaning it’s imperative to include a section on your school website detailing how your establishment is adapting.

This design combines the sentiment of ‘togetherness’ with the concept of ‘distance learning’, to comfort users who may be anxious about this dramatic change in teaching styles. By including a picture of graduates at ceremony and using 1st pronouns in discussing “our students and families”, the school implies their values of trust, intimacy and a promise that no matter what happens, they will support their students to succeed.

Communicate your ideals

About page showing mission, vision, values and principles of school
School website that has clearly mentioned their mission, vision and principles via Pinehurst School

Every school has its own story and unique qualities. These differences can significantly impact the decisions of potential students. By assigning space on your website to communicate your vision, mission, heritage and history, you successfully manage to give an essence of what your institution stands for.

You can also talk about your accomplishments, educational standards and affiliations in the same section; add photographs of your students and the administrative committee to make your content more relatable.

Many parents and students are keen on the spiritual growth that comes with religious affiliations of their desired school. If your school is a madrasa, Adventist, Catholic or another type of religious institution, make sure to mention it on your website’s “about” section with more details regarding how faith is followed, taught and celebrated.

Keeping the information next to other important headers like the principal’s message, publications, community on your website, as shown below, you can boldly announce your spiritual stance.

School website showing that they’re Christian
School page that talks about Christian affiliation via Presbyterian Ladies’ College

Showcase your facilities

A big factor that influences prospective students and job applicants at your school is your infrastructure. Facilities impact student morale, well-being and learning pace, which is why you need to boast about them on your school website!

Galleries, video and infographics are your friends in this matter. Even showcasing your cafeteria menu is a great idea to communicate your values and dedication to enriching student’s diets.

Infographic showcasing numbers and statistics of school’s campuses, exchange trips, languages taught, etcetera.
Using infographics to show statistical data of your school can be insightful via Dwight School

Creative ways such as infographics, data visualization techniques like charts and graphs, are becoming more and more popular to showcase statistical and quantitative data relating to your school.

Introduce virtual tours

Another way to show your school’s infrastructure is through providing images and virtual tours directly on your website. It grants users an opportunity to explore the school campus as if they were actually there, in person.  This makes their experience using the site memorable and, if it’s done well, can be a really positive and exciting experience, which reflects the sophisticated and professional reputation of the school.

So to do this, you’re going to need to implement virtual tour software using HD footage. This will give users a panoramic view and enable them to direct how they move around the tour. Keep in mind loading times when implementing this onto your site; of course, if you’re working with a designer, they should be doing this anyway.

Images of different parts of the school
Having a gallery of different parts of the school that can be clicked to view its 360° tour can also be a quick way to look around via Suzanne Cory High School

Bring assurance through your faculty

The most valuable asset of a school is its teachers. Being truthful about their expertise and credentials can create trust and personal connection between the viewer and the school. This can be done by creating an effective faculty information area within your school website where people can view and read more about the teachers, their qualifications and expertise.

teacher section on landing page of school website
An overview of the teaching staff on the school’s website to give a personal touch by Tushar K∎

Entice visitors with clubs and activities

Apart from the physical attractions, a school brings value to its students through the events, clubs and activities they offer. These activities inculcate values such as teamwork, responsibilities, healthy competition, cultural awareness and diversity. Hence, extracurriculars are considered vital for any school. Clearly mentioning them on your website can attract students who are specifically interested in them and also attract faculty for different specialities.

Images of different parts of the school
Having a gallery of different parts of the school that can be clicked to view its 360° tour can also be a quick way to look around via Suzanne Cory High School

If your school specialises in a specific activity or skill, giving details relating to that area can really help give the attention it deserves. If athletics is your school’s forte, flaunt your medals, student achievements and sport fields on a dedicated section on your website. The following example glorifies their antique collection of varied violin, viola and cello models in their music and arts section of the website. Doing this helps students wanting to hone those skills get more enthusiastic and willing to join in and learn!

Instrument Collection of school showing different types of violins, cellos and violas available
A collection of instruments shows the school’s musical heritage via Amandeus

Invite applications for admissions

Choosing and enrolling in schools go hand in hand. Your school website must have details regarding admissions in order to convert prospective students into future students. The website below is a great example of how you can be transparent and clear about your admission process, while using visual tools like collaging and infographics to keep the mood light, friendly and creative.

Website header that says “Admission process” showing different steps of admission
Giving visitors clarity regarding your admission process is a good idea by Tushar K

Upon giving this information on your website, make sure to mention the requirements for entry, eligibility, pre-requisites, fee and a link to the application form. With digitalization happening at a speedy rate, school applications are also transitioning to digital forms that store your student information in digital databases for easier access in the future. These forms can either be built by web professionals using code or you can add them yourself by using online form builders like Typeform.

Application and Inquiry form on a web-page
Provision of different admission and inquiry forms within the school’s website via Horizon Japan International School

Simplify contact methods

There could be multiple reasons for someone to contact your school. These include enquiries regarding admission, boarding facilities, complaints or simply seeking more information. To make it simpler for your visitor, it is best to have a contact form, a location map to your physical location, and a number to call on your contact page.

web page with location marked on map
Showing your school location using an embedded map gives an overall idea of the location of the school by  Tushar K
Application and Inquiry form on a web-page
Provision of different admission and inquiry forms within the school’s website via Hale School

Ensure to keep your “Contact us” button explicitly visible to make it simpler and less intimidating for your visitor to contact you. Welcome communication with users and invite conversation by allowing them to see your location or fill in a simple form on your page. This is also a great opportunity to encourage readers to sign up to your mailing list!

Foster an alumni community

A school highly benefits from its alumni as they embody a model community and representation of your brand or school.

Alumni create a culture of conducting reunions, bring in business partnerships and investors to the school and create career opportunities for the existing students. Therefore, it is important to foster communication between your school and its graduates. This can be done by dedicating an alumni section or page on your school website, providing them with current school updates and hosting events that are specifically tailored for them.

Alumni page of a school containing links of their alumni website, playlist and information
A well made alumni page linking to separate alumni  website and playlist, along with information via Hale School

Alumni are prime candidates to give glowing testimonials for your school. This adds credibility, strengthens reputation and allows student voices to be heard for your educational brand.

Testimonials of students with a header “Out happy students”
Testimonials of happy students on school’s website via krstatzar

Show off career opportunities

Acquiring high-quality teachers and staff can be difficult for schools, which tend to take additional efforts to recruit staff. Make it easy for any potential staff that lands on your website to apply by giving clear information about any available, current positions in a dedicated “recruitment” area of the site.

Experiment with formats and tables to present technical information such as the required qualifications for such roles, any perks your company offers and information about the working culture. You can also link each open job opportunity to external application forms and job hiring websites like LinkedIn.

Recruiting web-page of a school
By giving details like job title, location and application links, you can make it easier for people to apply for a vacant position via Haileybury

Invite investment and funding

Flex your creativity when trying to attract new opportunities and charity funds for your school—just because it’s a school website doesn’t mean it has to be constantly serious. Show off your brand personality and add a light-hearted atmosphere to such spaces, while ensuring your CTA button is practically leaping off the page and into your target users’ palms.

Corporate Partnership program page of a website
Schools can have sections that invite investors and partners specifically to collaborate with them by UndoRedo

Describe your niche

Say you’re offering evening language classes, your school website needs to communicate this and sell its benefits. Show what you can offer students and how you can positively impact their lives. Video testimonials are really effective for this type of motivational purpose.

Language school’s landing page with a person holding a laptop
Showing interesting opportunities such as talking to people all around the world, the school’s website encourages people to apply for the course by Mica Porto

Experiment with a video landing page

Having videography on your landing page not only summarises your school’s services and values but it engages your audience positively and encourages them to create long-lasting memories on your site. In landing-page-position, this is the prime spot to impress visitors to your school website.

Landing page of a boarding school in switzerland that has video with supporting text
The landing video covers most important aspects of the school and is supported by relevant text in two languages via College Alpin Beau Soleil

Be consistent with branding

Your school needs to deliver a consistent message through its website that aligns with its brand and core values. This is best done by standardizing branding elements and creating design systems, which are followed throughout your website. Doing this will improve the experience of your visitors and make it memorable.

Your brand can be built upon various factors such as your school’s target age group, value proposition, religious and national affiliations and much more. The example below shows how a website can be branded to suit kindergarten and primary schools. It uses a vibrant color palette with adorable illustrations and carefree font that add its distinct childlike design style.

website with colorful illustrations, cartoons and fun fonts
A playful website theme made to target the audience of a daycare by Webwooter™

Great interactivity

To make your design memorable and leave a lasting impression on your visitors, consider adding interactivity to your page. Personalized marketing efforts and effective interactive elements like animated components that react to user’s input, interactive infographics and videography can create a great relationship with the visitor. It has a higher chance of them picking your school.

video of a mouse hovering over different kids doing different activities of the school
A clever way showcasing different activities of school through interactivity via The Alice Smith School

Accessibility

To make your website easy to navigate to people of all abilities, it is important to make it WCAG compliant.

There are numerous ways to increase the accessibility of your digital designs. One simple way is to ensure all your copy is designed with scalability and contrast in mind; this is to ensure it’ll adapt well to screen-magnifiers. Another super simple tip is to enable the keyboard navigation option, making your website easy to use without needing a mouse.

Ensure your designer is up to date on research and practices surrounding accessible digital designs. If your school website doesn’t transparently demonstrate and reflect your dedication to creating accessible learning environments for all, you’ll have a much harder job in gaining trust and respect from your audiences.

School website clearing stating their accessibility considerations
Making your website accessible is ideal for inclusivity via The Alice Smith School

Include language options

Offering multiple language options to visitors on your site welcomes them, no matter their culture or ethnicity, to your community. It creates a warm, inclusive environment and is pretty simple to achieve. Add a drop-down menu that lists all the languages that are available and ensure your translations are accurate and thorough.

School website that shows multiple language options
Website available in more than 40 languages via Boston Latin School

Great information architecture

Present information clearly by keeping hierarchy at the forefront of your mind throughout the design process.

Use a logical pattern across pages and keep your school website’s structure simple by reducing nested links, organising URLs and using design tactics to make CTAs stand out. Ideally, your site will be easy to navigate and scan, so make use of effective grid structures.

Grid menu on webpage with different sections of the website clearly marked
By segregating your content into visible sections you can make it easier to navigate via International School of Western Australia

Finishing with a gold star

By looking at what works in the above school websites, we understand how important it is for schools to have an online presence. It strengthens branding, creates a space for existing students and invites potential students and staff to check out the establishment.

Want to get the perfect website for your business?
Work with our talented designers to make it happen.



Source link

Leave a Reply

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