Design and Development of Dawlish School Websites

Dawlish School Website re-design

We recently gave you a teaser in our ‘Back to School’ post about the work we have been doing for the Dawlish Learning Partnership and a group of schools in Dawlish. If you haven’t read the post I’ll fill you in…

Back in April we were approached by the DLP to develop websites for a group of schools in the Dawlish area. DLP required the sites to be visually linked somehow so users could see that they were indeed a group of schools working together in partnership. However, the design of each of the websites would need to reflect the schools own individual style. The sites would need to link to and show posts from the DLP site. The sites would need to have a CMS so the schools themselves could maintain the site adding news and updating pages.

The objectives specifically for the schools was to ensure their sites acted as a sales tool to attract new pupils and to ensure existing parents and pupils were informed of the schools events and news etc.

Outline

Once we had the sets of objectives from the DLP and the schools we were able to formulate a plan. We decided the most efficient way to move forward was to create a template to which all of the sites would work from. This template would have to include all elements / features that each of the schools would require. We sat down with each of the schools and thoroughly discussed what their current sites had to offer as well as their ‘wish list’ of things they would like their new site to do. We compiled the following list:

Google calendar showing school events
Revolving header image
Social media ‘Likes’
Twitter integration
RSS subscription

Each of the sites would use this template for layout, however we would address the individuality of the sites by giving them different styles and designs within this template structure.

Of course the sites would be built within WordPress, we still think it’s by far the best off the shelf CMS solution.

Wireframes

Once we had the objectives and template elements it was time to design the wireframes for the template which all the schools would adhere to.

We decided the homepage needed to give current parents and pupils attending the school instant access to up and coming events, contact details and latest news. To address prospective parents of pupils a welcome message needed to be on the homepage. The navigation would need to be a ‘one click’ menu, so users can reach the page required within one click. The footer would feature a ‘fat footer’ so full contact details can be viewed on any page.

DLP Dawlish Schools website wireframes

The sub pages would have the events box and RSS section removed. Blog pages would have a blog sidebar linking to posts and categories on the right hand side.

Design

This was another challenge. For us it was all to do with balance. The sites had to be individual enough to show the schools own sense of style, however had to adhere strictly to the main template. As well as this there are the two very different target markets the websites had to accommodate – parents as well as pupils.

Westcliff

DLP prioritised the schools and Westcliff was the first to have a re-design. The old website had a beach theme to it and we decided that it might be a good idea to base the new site on a beach theme too.

Westcliff School Dawlish - original website

As the design needed to appeal to both parents and children we decided that the website would carry an illustrative background whilst the content be delivered on a white background with little interference from graphical elements.

Westcliff School, Dawlish, Devon, website design

The site carries a basic colour palette of blue, red and grey with a particularly vibrant background. The icons and decoration are all beach themed to coincide with the schools location and reference to the previous website.

Starcross

Starcross’s previous website was themed on the estuary.

Starcross School Dawlish original website design

We decided to keep the estury theme, but use it in a much more vibrant and illustrative way.

Starcross School Dawlish new website design

The icons and decoration all reflect an underwater, maritime feel. The back drop to the Starcross site is particularly vibrant whilst the information is still presented on a plain white background.

Kenton

The original Kenton site was particularly dark and didn’t have a distinct theme to it.

Kenton School Dawlish original website

Kenton liked the theme designs of Westcliff and Starcross so we discussed how to style their site. As Kenton is more of a rural school we discussed several themes, but settled on summer fetes and maypoles whilst incorporating the colour palette of their original site.

Kenton School Dawlish new website design

Kenton requested that icons and decoration were kept to a minimum within the field / fete theme.

Cockwood

The original Cockwood site was similar to Kenton, it wasn’t themed and was very traditional.

Unfortunately, the old site had all it’s news posted onto the homepage, meaning it didn’t load very well, and for us often looked like this:

Cockwood School Dawlish original website design

Cockwood liked the look of their current site and didn’t want to move away from the design. They requested no icons or decoration as this wasn’t present on their original site.

Cockwood School Dawlish new website design

Building

Once the visuals were signed off they were then sliced up and placed into the template to create their individual sites. We were able to source plugins to handle each of the elements:

Google Calendar Events

Google Calendar Events allows you to pull through events from your Google Calendar through onto your website. You can request how many events and how much information to show (ie date, event title, time, finish).

Check out the Google Calendar Events Plugin

Easing Slider

Easing slider allows the user to add images to their header using a simple upload function (no code knowledge required). You can style the slider transition and upload and delete images at will.

Check out the Easing Slider Plugin

Really Simple Facebook and Twitter Share Buttons

This plugin gives you ‘Like’ and ‘Tweet’ buttons at the bottom of each page allowing users to push your page onto Facebook or Twitter. It also allows each school to decide exactly which social media buttons they would like to feature.

Check out the Facebook and Twitter Share Buttons Plugin

Twitter Tools

Twitter Tools pulls through your current Tweets onto the website. You can pull through as many Tweets as required and link back to your Twitter page.

Check out the Twitter Tools Plugin

Page Links to

We required a plugin which would directly link one page to another. For example the Cockwood website has all it’s ‘Achievements’ posted in the ‘Latest News’ section but the school would like this as a separate page as well so the ‘Achievements’ don’t get lost within the other news posts. So all the ‘Achievement’ posts are categorised under ‘Achievements’ and the ‘Achievement’ page links to the category page ‘Achievements’.

This plugin gives you a box at the bottom of pages with an option to link a page to another page. You simply click the ariel button and insert the link to the page required. Simple but very useful!

Check out the Pages Links to Plugin

Populating

Once the sites were built they were ready for populating. I love to watch clients populate their sites for the first time and watch their concern about ‘working on their website’ wash away. I’m always a little relieved and pleased to hear ‘I’m not very good on computers, but yes I use Facebook and Word all the time’ as I know they’ll then get on well with WordPress.

Live

The site launches went pretty smoothly and by the beginning of October all sites were launched. It’s now great to see the Latest News being updated regularly and new pages popping up! I think it’s safe to say the schools feel liberated being able to edit their own sites and having control over their own content. We are proud to have worked on this project and feel that the objectives were achieved. Each of the sites have their own individual look whilst being part of a larger group of schools. The balance between appealing to prospective pupils and informing current pupils has been struck as well as appealing to parents and pupils alike.

You can visit each of the school sites below:

Westcliff Primary School

Starcross Primary School

Kenton Primary School

Cockwood Primary School

Thoughts

So what do you think of the Dawlish school websites? Are you a fan of the illustration? What do you think of WordPress as a CMS? And what are the best WordPress plugins you have used?