churchtown-scool-of-music-banner

The Churchtown School of Music, located on Main Street, Dundrum, is a private, self-funding school of music. Its mission is to provide quality education in music in an environment that nurtures achievement and creativity.

website-devices-sample

I worked as both the sole designer and developer of the website, working closely with the owner of the school to fulfill the design brief. It went through a number of iterations before development of a fully responsive website using Bootstrap, which is available here.

The final designs feature 5 separate pages for key sections of the site: the home page, Classes, Fees, Calendar and a Contact page.

The Churchtown School of Music was a redesign of an existing website. It was outdated, old, and very sluggish, so needed to be totally redesigned and redeveloped.

Menu Structure

The first stage in the project was to redefine the structure of the site. The top nav was overpopulated, and needed to be simplified so that users would be more easily able to find what they need. Once the new sections were defined, each one was iterated through sketching to find its ideal layout.

Sketching allowed me to communicate ideas in a fast and simple manner, rapidly developing and testing different concepts.

With wireframes of each section drawn out, I began fleshing out the digital designs. The aim was to create common themes and patterns across the different pages; each page was designed with a different full screen image as a background, and the circular logo was employed as a title header on each page.

Client Feedback

At this point, feedback came through from the client that they would like the designs to be a little brighter, with the possibility of some throwback to the old scheme. I took that on board, and iterated through the designs again, this time to bring in more colour.

The design evolved with an infusion of colour, reflecting the brand of the music school.

The client was very happy with the rework. There were a couple of small changes implemented to the design and logo, like the banner across the home page, before the designs were deemed completed.

The website is fully responsive, and built using Bootstrap. There is very little Javascript used throughout the site - it is only used to rebuild the calendar on smaller device screens, and uses jQuery.

The code base is available to view as a GitHub repository.

Choosing a Development Technology

Ordinarily for a site like this, a content management system would be ideal. It would mean the client was free to update the site content without having to go through me, and would save me time in development not building a site from scratch. There are a number of contributing factors to not implementing a CMS here.

A big concern was creating a quality design. Many CMS templates lack the flexibility to create the custom design that was needed here, and sacrificing performance and quality was not an option.

Another concern was the clients ability to work with the CMS. If the sacrifice to the end product was made, the client would need to be able to maximise the value they get from a CMS. However, this was not the case with this client. It is likely that updates would never be made to the site, so there would be almost no benefit to the client from the CMS.

Finally, I wanted to take on the challenge of designing and building a fully responsive site, from scratch, myself. It was a huge learning opportunity, and I wanted to take as much as I could from it. It was an excellent way to get to grips with fluid layouts, and allowed me to get a hands on experience with percentage based grids.