The site is now online, available at anitagunnschoolofdance.co.uk
Overall, I am happy with this project. The end result was a responsive website that I feel is also beautiful, minimalist and informative.
The following was taken directly from my project plan:
To create a website to replace the existing, inadequate design. It will need to attract new clients, and inform existing ones of term dates, exam dates etc. It will also be a showcase for the school’s successes.
In respect to the project aims, the website I have designed will attract new customers (when Google Map Maker is back online). It also contains all the information necessary for prospective and existing customers, organised in an efficient way. The business will surely benefit by having a more up-to-date online presence.
There were some issues with gathering imagery, with regards to parental consent forms and the time scale of the project was put back due to unexpected delays with gathering content.
However, the site will be ready to go live within the next two weeks, and the client was very positive about the outcome. The following email shows her response:
I then completed another competitor analysis, to see how the site has developed from when I compared the business’ old site to others in the same sector. The results are below.
The content has had a complete overhaul, so is definitely all relevant. The whole website was designed with the user in mind, to make it as easy to navigate and as appropriate as possible. I think from this point of view, the project has been a resounding success.
To download the bibliography for this project, click the link below.
I conducted a navigation stress test, as outlined here by Keith Instone, on the website prototype.
The following shows the table of questions I asked as described by Keith Instone, and my annotated web page.
The navigation is clear and the information is organised efficiently. The navigation is at the top of the page where users will expect to see it, and every page is consistent. The links in the navigation describe exactly what is going to be on each page, so users can navigate directly to the page they need.
Before testing, I completed little detail tasks such as creating a favicon using a generator to match the company branding, and writing the PHP to action the email form on the contact page based on this code.
I ordered the domain name “anitagunnschoolofdance.co.uk” to upload the site when the consent forms have all been signed and the site has been tested and approved by both me and the client.
I tested the website on different devices, including an iPhone 5s, a MacBook Pro and an iPad 2.
Sample screenshots are included below.
Every project has different obstacles that need to be planned for and considered. When undertaking this website project for a dance school, it was important to be prepared for the complications surrounding using images of children online.
In this case, every parent whose child’s image is to be used in the project will have to sign a consent form. The project is (as of 20/05/2015) not currently online.
I created the branded consent form below based on this one used by Merton Council.
Also, I made sure that the code was going to be easy to maintain in the future by adding comments. It was important to my client that she would be able to edit timetable dates at regular intervals, so comments to highlight sections, along with instructions on how to use an FTP client were a real benefit to her.
My research for this project highlighted to me just how much this business relies on location.
Location-based searches are going to be the first port of call for most prospective clients. The best way to ensure this business shows in search is to use the Google Map Maker tool, and to place the dance school on Google Maps.
Unfortunately, within the last week Google Map Maker has been temporarily suspended due to misuse of the tool.
When the tool is back up, I will add the business to the map to raise the profile of The Anita Gunn School of Dance.
Until then, I have just added a map to the website so users of the site can find the school with ease, using this Google Developers tutorial. The following shows my code with the specific latitude and longitude of the business.
The image below shows how it looks when embedded into the website, after I also added a simple marker using this example code as a guide.
I decided to experiment with Skeleton, a responsive CSS boilerplate.
It is extremely simple to use, and comes with a 12-column grid making it a perfect fluid layout template.
I was able to quickly put together a starting layout, based on some sketches I mapped out previously. My initial sketches are below (taking the grid layout into consideration) followed by the initial desktop layout and a mobile version created starting with Skeleton.
I developed a system of blocks, that include a ‘border’ section of colour, and a white section to hold the text. As you can see, it is an extremely quick way to get together a responsive design. I’m going to work on gathering and creating the content with the client before I progress much more with the coding, but I’m happy that this is going to be a viable tool to build on and develop further.
The first thing I did was write down all the different elements of the proposed website.
I then sorted them into logical categories, to get a rough idea of content and navigation. The result is below.
I then created the following mind map on Mind42.com (a free online mapping tool) to sort these into something I could work with.
There isn’t a huge amount of content to sort, but allowing the user to get to the information they need quickly and easily increases satisfaction, and could ultimately be the difference between someone booking or choosing somewhere else.
I created the following style tile to give my client a clearer impression of the site than the mood board. (I downloaded the template from styletil.es).
I looked at quite a few different websites and blogs to get a feel for what I wanted. The following is a list of where I took my inspiration:
- Classic/elegant site font suggestion
- Browse through Google Fonts
- Style tile design process
- Pink polka dot texture
- Hi-res canvas texture
I also decided on a very minimalist style, with a 3-colour accent palette. I also begun to experiment with drawings and illustrations in this style using Adobe Illustrator. Figures like these can be possibly be used on the site to add interest:
The following shows some of my logo experiments alongside the dance school’s existing logo. My client was happy for me to redesign and rebrand, which gave me a lot of freedom to create something fresh and exciting.
Choosing how to create a website demands a fair amount of research and reasoned decision-making. This will ensure that I don’t waste time, energy and money further down the line.
Initially, there are two different ‘paths’ that spring to mind; some sort of Content Management System (CMS) such as WordPress or to hand code the website. There are lots of interesting ideas about how to go about choosing the technology/language/framework on various blogs, but ultimately it varies from project to project.
The best way to decide is to research into some of the advantages and disadvantages of each method, and see how this particular project fits into this. This post on 7Host’s blog highlights some of them, which I based the following table on. It shows the reasons why I have decided hand coding will be better for this project.
|Benefits||Easy programming, easy user management, templates, great for blogs and larger-scale projects.||Complete control, greater understanding, quick, clean and efficient.|
|Disadvantages||Customisation/modifying can be tedious, loading times/bigger websites.||More work initially, knowledge required, debugging time.|
|Project specific notes||Only necessary if client wanted to blog. Project is small-scale, not enough to warrant database backing.||Made-to-fit code, efficient and a better method for a mainly static site.|
Even after deciding on hand coding instead of CMS, there are a few different options I could chose to progress. Either begin coding from scratch, using a simple text editor, or start from a CSS framework such as Bootstrap, Foundation or Skeleton. I created my portfolio site from scratch, so I know roughly what I am currently capable of coding (obviously, there is always more to learn!).
In comparison, this article on Mashable shows a list of some popular frameworks that I can begin to research, but aside from looking at some examples and reading about them, the best way I can determine what will be most suitable is to try them. Experimenting in this way will only improve my skill set and allow me to build up my own personal web designer’s toolkit.