Improve Your School Web Design and Style Guides

Improving your web design and style guides is an easy way to sharpen your school identity, personality and authenticity. Here’s some tips and tricks to get you started!

Schools can achieve great web design by refining or creating a great style guide.

Style guides ensure consistent standards of quality and consistency in the look and tone of your website. Briefly touched upon in previous blog posts, here is what you need to think about when creating your district/school style guide: 

1. Typography – This is the base for harmonious style guides. Provide the name of the typeface that will be used across your entire website for everything from headings to small print.
2. Colour palette – Provide hex codes for your colours. Define primary and secondary colour information. Make sure they look pleasing when combined.
3. Logo and orientation – Provide vertical and horizontal logos / logos for limited space. Give guidelines on where your logo can be used and where it can’t – E.G. can not be layered over another image, can be layered over solid colour backgrounds.
4. Imagery – Imagery is extremely important for your site. Have some stock images / an image library of high quality pictures ready for staff to use. Low quality images = low quality website.
5. Tone – The tone of your site is all about the words you choose and the way you structure them. Types of tone could include: professional, informal, personal, enthusiastic. You could have contrasting types of tone in your style guide, such as formal for parents and friendly for students. Below is an example of a tonal guide:

6. Voice – Voice is about your website’s overall personality and will always stay the same.  A blog post for students, for example, may hold a different tone to an email geared towards parents, however the voice (your school and its philosophies) will stay the same. Outline this clearly – what message/image does your school want to convey, what type of language can be used to achieve this, what must always stay the same regardless of audience.
7. Social Media Guide/Policy – Outline the rules of social media articles/posts. For example, no pictures of student’s faces without consent or no personal pictures of staff outside school. Again, set a tone and voice for your social media –  this may be different to the tone and voice of your website as social media is less formal.
8. UI Components – This relates to elements such as buttons on your website. What size, colour and state (ie shadows/transitions) should they be?

Take Note: Do not be afraid to begin your style guide from scratch. Sometimes it’s easier to start fresh than trying to modify. Use all the information on your live website to create the guide.

Next Up! Your Web Design:

5 Scholantis must-haves for your school web design:

1. Visual Attraction
One of the most important features of your website is how it looks. This heavily depends upon graphics and colour pallets. Use your style guides (see above) to use complimentary colours that fit with your brand and make your website stand out. Also, be sure to put high quality images on your site.

Hero images are the first, main photo or graphic that you see at the top of a webpage or email. Your hero image needs to be visually appealing and enticing. Think high-res, sharp and slick, and don’t forget about those colour palletes – if your branding and logo is black and white, you probably don’t want to put a big yellow header image on your site.


2. A Useful Homepage
When you go to an interview, how you dress and present yourself helps create that first impression. Think of your homepage like an interview. In the first 20 seconds, users are going to form an impression of your site and how useful it is to them. This not only includes visual impressions, but also content. Make sure your homepage includes: mission statements, news, events, e-newsletter and signup, staff directory, bell schedules, curriculum guides etc.

3. Responsive Design
Think smaller! Test your site on desktops, laptops, Ipads and mobile devices. You can test your website quickly here at Responsive Design Checker.

4. Web Accessibility Requirements
WCAG requirements lay out a series of guidelines, which for school districts and divisions, ensures you are doing your best to remove any technological barriers that prevent people with disabilities from accessing or interacting with your website. Read more here.

5. Organized Navigation
Think like a user. Can you find what you need, and can you find it quickly? Be descriptive with your navigation and limit the number of menu items to seven.

We hope you have found this article helpful. If you would like any help modifying your website, please don’t hesitate to contact our team of experts at

Guide to better