Great Ideas for School Website Design

Published: January 18, 2018

Your school website design is an important part of your school’s presence in the world. It’s a line of communication with parents, a way of celebrating your achievements, and a tool in attracting both pupils and staff. So how can you make the most out of the design?

Clear Navigation

It may not be glamorous, but the first thing you should think about is making your website easy to navigate. It affects the structure of the website, and so is fundamental to its design.
To do this, group pages together in a logical hierarchy that fits what people are used to seeing on the internet. Address, phone numbers, email, and a map to find the school should all come under “contact us”. Information about subjects can go together under “curriculum” or “what we teach”. Information about events should start with what’s coming next. A calendar with links to individual event pages can be a great way to tell people what’s going on.
Minimise how much effort it takes to find information. Whenever possible, visitors should be able to find the information they want within three clicks.


A few simple measures can make your website more accessible for a variety of users.
Use font colours that stand out well against the background. Black text on a background that’s white or pale is usually best. When making text stand out through different colours, avoid those that might be indistinguishable to the colour blind.
Use alt text for images. Make it describe what you want the picture to convey, as blind or partially sighted users will rely on this text.
Use clear, descriptive text for links, to help those using screen readers.
Some website providers, like School Jotter, include a translate option. If your school serves a diverse community then this can be a huge help by communicating with parents in their first language.

Use the Layout

Use the layout of each page to make it clearer and more accessible. For a page with lots of content, include jump links to each part at the top of the page, so that users with limited mobility can get down the page without much mouse use. Include drop down menus and links to break up text and provide extra options.
Because of the way people read, more information is absorbed from what’s at the top and left of each page. Focus the most important information here, to make sure that people see it.

Pick Your Font

The font you use can make a huge difference in how easy your website is to read. Avoid quirky choices like Comic Sans or old-fashioned ones like Times New Roman. The best fonts for online reading are sans serif fonts like Arial and Verdana, which are easy to read while looking elegant and modern.
Size matters. The best font size for online reading is 16px. You’ll also want to use other sizes for headers. With these, keep to the same font and to no more than three different sizes, to avoid mess and clutter.

Get Visual

Images are great for getting people’s attention and creating variety. You can use them to make pages more attractive and to draw readers to important parts of the page.
When using photos, take care in your choices. To keep them safe, children should not be identifiable from photos, so be careful with faces and don’t match them with names. Photos of eye-catching work can provide an interesting alternative.
Slideshows are another way of making the site more interesting. The movement they provide draws the eye, and they can show visitors a variety of images and text without taking up lots of screen space.
Bright colours create an emotional response and so can be good for drawing attention to important information. Use them sparingly so that they have more impact when they appear.

Use White Space

As you try to make the website more eye-catching, it can be tempting to fill it full of images and text. But too much can be overwhelming. Don’t be afraid to leave plenty of empty background space. Then, the text and images you provide will stand out better, and it will be easy to see what’s important.

Clear Writing

The content of your website is as important as the way it is presented, so think carefully about what you’re saying and how you say it.
Wherever possible, use plain English to make your message understandable. If you can choose between two words with the same meaning, pick the simpler one.
Break the text up into small paragraphs. It might feel odd as you write it, but simpler, shorter blocks of text are easier for a reader to take in. Where possible, limit paragraphs to around three sentences and don’t let those sentences run on.

Break it Down

Divide the writing up with headings and subheadings. Like small paragraphs, this makes the text less intimidating and easier to take in. It also makes it easier for users to navigate the page, skipping to the relevant heading to find what they want.

Keep it Relevant

It can be tempting to cram in a lot of information, just like it’s tempting to go overboard on the visuals. This might seem like a good way to tell people more, but in reality it’s often overwhelming.
To avoid this, think carefully about what the important part of your message is and how you can get it across. What do you want people to know after each page? How much extra is going to be interesting or useful?
If you want visitors to do something after reading a page, make this clear through a call to action. For example, a page about an upcoming school trip might end by suggesting that parents fill in the booking form, and then provide a link to the form.

Learn by Example

You don’t need to reinvent the wheel. Check out other schools’ websites and learn from what works for them. For some examples, check out our School Jotter website. There, you can also find out how School Jotter can help you make your own great website.