5 of the Best Grammar School Website Designs

With the recent launch of the new and improved Mirfield Free Grammar Academy website, we started looking through some of the Grammar School website designs we have launched in the past few years. Here are a few of our favourites!


The Mirfield Free Grammar Academy

This website incorporates the school colours of maroon and yellow, and the striped pattern from the school tie into the design, which helps to bring out the school’s branding. A full-screen photo background, overlaid with a subtle, transparent maroon gradient, fills the screen when first visiting the website. As you scroll down, the Welcome section and Latest News and Diary Dates slide in from the side of the screen.


Antrim Grammar School

Packed with features and flourishing touches, the design for the Antrim Grammar School website is one that we are really proud of. At the top of the homepage is a full-screen photo background, which is overlaid with a changing quotes box. The website also features enhanced animations; target boxes such as “read more” and “all news” change colour when hovered over. School performance statistics are presented in animated shields. The shields fill up to match the percentage displayed.

Grammar School Website Design Gif

Grammar School Website Design


Bangor Grammar School

This Grammar School website uses a panelled design, with each panel presented in a different colour. The Bangor Grammar School website is another site packed with features. For instance, on the right side of the home page is a social wall; clicking the blue tab will reveal a selection of the most recent tweets from the school. The homepage also features a curriculum section, linking to individual pages about each subject taught at the school. The school opted to show their exam performance statistics in animated wheels on the homepage, as they are incredibly proud of their students’ GCSE results.

Bangor Grammar School Website Design


Perth Grammar School

Perth Grammar School chose to feature their school values, “Pride, Respect and Ambition”, prominently on the homepage of their website; after all, the homepage of a school website is a great place to demonstrate what sets your school apart from the competition. The school values are centred over a two-tone full-screen photo background, and further down the page, a panel is dedicated to discussing the school’s Vision & Values.

Perth Grammar School Website Design


Batley Grammar School

The design for this Grammar School website has the menu bar displayed at the very top of the webpage, with a large photo gallery below that. Changing quotes about the school are displayed over the top of the gallery. Meanwhile, the school can leave important notices for parents using the scrolling ticker. The school also opted for a social media wall, which displays their most recent tweets.

Batley Grammar School Website Design

Is your school website overdue a new design? Get in touch!

Have you been thinking about your school’s identity? Do you feel it’s a little lost in a stale website design? We would love to apply our expertise to tease out some of your school’s core, principle strengths to shine through on a new website. It’s easy to make an initial enquiry and we can get the ball rolling with a quick chat.

Need some more inspiration?

Take a look through our extensive school website design portfolio for some ideas. Or, take a look at a selection of colourful school website designs, or some of the school website designs we launched in March 2019.

You may also like...