Further Development

Home Page



















I thought the grey boxes were quite plain and boring and didn't add anything interesting or fun to the text so I experimented with adding a dotted line for something a bit different. Although it is better than just a grey box the dotted line doesn't stop the page from looking boxy. I will also have to change the styling to move the text to the middle of the box because this will look more in proportion if there is equal white space around the text and will also improve legibility and make a clear heading.

I tried the same for the main text and I think it works better on this larger space of text than the heading because I can easily give it an equal distribution of white space around the edges making it look centered and better proportioned but again it doesn't take away from the boxiness of the page so I will try other options.

I had previously decided that I wanted to try out another slideshow option and this is the one that I found. The dots are visible even without hovering over it which overcomes the problem I had with the previous slideshows where it was not obvious that they were a slideshow so this slideshow is a lot clearer and therefore has better usability because the purpose of it is immediately clear. I tried out switching the layout by placing the slideshow at the top of the page because this is something I saw done in my research and I thought it was quite effective. I will experiment with putting the about box underneath to see if this layout will also be effective for my page.

This is the arrow that appears when the image is hovered over. I think gives a clear and simple navigation method because as soon as you hover over the image it is immediately clear that you can move to the next image and it is big and clear and bold so should be understood by all users.

I increased the gap between the top of the slideshow and twitter feed and then bottom of the navigation bar because I think there was not enough space between making it look quite crammed. I also added in a textured background and I think this looks a lot more interesting than the plain white but doesn't take anything away from the page elements as its very simple so they still stand out and aren't over shadowed. I decided to leave a white background behind the header because I wanted there to be a clear boundary and divide between this and the content of the page and the contrast between the white and the background helps it stand out.

I then tried to create some more interesting borders to add some more interesting styling to the text. I tried the dotted borders like above but this time on both the heading and the text. I think this would still be okay for body text but I think the header would benefit from something a bit different and bolder to make it clear as a header. I also think the dotted lines are still too boxy so would like to experiment with different shapes.

I created this border on illustrator and instead of using the same front as the rest of my web page I found a bold bubbly font that I think adds some fun and personality to the page which suits the company better and would appeal more to the target market. I think the new font is effective but I think the border is a bit too much and overpowers the rest of the page and just doesn't blend in very well so I will try something simpler next.

 For the title I decided to go relays simple and keep it as just the font but I think this is still effective as the font is very fun and the bold bubbly style of it stands out so doesn't really need a border. Because of this I experimented with giving the text a border just so it has something to contain it and to make it look more interesting than just a big chunk of text. I tried out hand drawing a rounded edged box border on illustrator but although this fits with the handrawn style of my logo and speech bubble graphic, I think the main elements of the page work better with cleaner and neater graphics for a more professional and clearer finish so I will leave the border for now and try to develop something simpler later.

I wasn't sure about the layout of the page so I experimented with moving the text and header around the page to find the most effective position for it. First I tried a left alignment in line with the slideshow but I think it just looks a bit out of place and lost in all the white space.

I then tried it in the middle to fill some of the white space but it still gets lost in all the empty space and just doesn't fit in with the rest of the page as the amount of text is small and just doesn't need that much space so I decided to revert back to the original layout and place it above the slideshow.

I think it works a lot better above the slideshow because there isn't masses of white space around it like when it was below the slideshow and it slots in nicely. I think the header looks better with the bold font and no border because removing the border makes sure it doesn't over do it and overpower the rest of the page but it still stands out as the focal point. The text is clear and legible but I still think it needs something to contain it as the page looks quite plain at the top compared to the bottom.

I experimented with placing the speech bubble over the header to try and incorporate the two but I dont think it was that effective because the page now looks very squished in at the bottom and I think having the clean footer was a nice way to end the page and make a clear end to the page elements.

Because of this I placed it back in the original position and I think this works better because the page looks more evenly spread out and not crammed like it did with it in the footer.

I then experimented with the size and position of the header because it originally stretched almost across that whole section of the page and I think it would look more effective if the length was shorter than the paragraph. I centred it here but since my page has mostly left alignment I thought it looked out of place and didn't blend with the other elements.

I then aligned it to the left and I think this was a lot more effective because it makes the overall page flow better if that side is all left aligned and gives a more coherent look to the page.

As mentioned before I wanted some sort of box or border around the text to split it up from the rest of the page and make it look a little more interesting so I decided on a coloured box. I rounded the edges to help away the boxy look that having a square background had given it before. I chose this blue colour because it is bright and fun and bold and gives a good contrast against the purple but as they are both cool toned colours they still compliment each other. I think adding another colour gives a more fun and young vibe to the website and this will suit my target market as they are looking for a service that appeals to children.

I moved the text and heading up the page a little as the gap was a little too large and this makes the page flow better by creating more equal spacing.

I made the heading slightly smaller as it was still a little overpowering to the rest of the page so this keeps it as a focal point whilst letting the other elements still have an impact.

I also added a rollover effect on my nav bar using the same blue as in the first paragraph of the about page for a bold contrast against the purple to make the hover clear and to be in keeping with the rest of the page and colour scheme of the site. I think having a hover is effective because it improves usability by allowing the user to see the area of the nav bar they are selecting and also adds more colour to the page which makes it more interesting and appealing to use because the page becomes interactive with the users actions which will hold their interest for longer.


About Page

I wanted to improve the appearance and usability of my about page because they block of text and plain title with the grey box background was very dull and wasn't very eye catching and I wanted the page to draw the user in and make them want to read the information. I first decided to remove the grey boxes to help combat one of the issues my website had which was boxiness and then I experimented to create a bolder and more interestingly styled heading to catch the users attention. I used the same font as with previous headings for continuity and experimented with a hand drawn border to go with the hand drawn graphic style of my website. Although this separated the header nicely, I think it didn't flow with the rest of the page because the rest of the layout is quite sleek and professional looking and this is quite abstract.

Next I tried just increasing the size of the font as I had with previous headers and I think this was far more effective because it is very bold and eye-catching because of the thick stroke on the font and is clearly separated from the body text but it still blends in nicely with the rest of the page and complements the chunky text style used throughout. The size here stretches across the width of the paragraph and I think this is too large and bold compared to the rest of the text on the page and it stands out far too much and crowds over other elements so I will make it smaller to improve the flow of the page.

I decreased the size and I think this works better with the other elements because it remains a focal point and stands out as a heading but doesn't crowd over the other elements and the page flows better. I think I could still get away with having it a bit smaller because it still looks a bit out of proportion against the main title of the page in particular.

I decreased the size again and I think this works best because it is now only slightly larger than the page title so works as a heading but doesn't over power the page and take attention away from the head of the page.

Next I went about styling the main body of the text because it looked quite dull and uninteresting when just laying flat on the page. To do this I decided to add a background colour to bring the text up off the page making it look more attractive and appealing and to hopefully draw the users eye in encouraging them to read it. Because of the problem I had with my first outcome where the website looked very boxy I decided to round the corners to balance out the boxiness of the lines of text and I think this works well. I chose the same blue as my homepage and link hovers for continuity.

I then moved the header up to balance the space out better on the page so that the gap is now even between the header, main text, and nav bar which gives the page a more balanced look.

Next I updated the biography section of the about page because this had the same basic layout as the previous text boxes with the square grey background that didn't draw any attention to the text and looked quite dull along with the very basic heading. I started off by experimenting with colour by adding a background in the same colour as my colour scheme and changing the text to white to make it contrast and stand out improving legibility. I also rounded the edges to try and avoid it looking too boxy. I dont think this was very effective because the size of the table of text meant that it still looked boxy because of the long block of straight colour and as this colour is also used on the nav bar and footer it was too much of the same purple on the page. It also didn't work well next to the blue text box because the blocks of colours were too close together and this made them clash. I will try removing the colour and maybe adding a border instead to keep the text contained and the page looking more interesting whilst keeping it all legible and coherent. I also changed the header to match the top header to keep the page looking consistent and the boldness of the header gives a clear break between the two sections.

I used a dotted border and I think this was a lot more effective then using the block colour background because although it worked well on smaller paragraphs of text it becomes very boxy and block when used on a large section and the dashed line helps break up the box making it look less boxy. It also adds a hand drawn style touch that fits with the theme of my website and will appeal to my target market. The edges are all straight and although the dashed line breaks it up it does still look quite boxy so to try to remove this issue completely I will try curving the edges.

Here I curved the edges and I think this solved the problem because it no longer looks so square and boxed in but the text is still neatly contained.

Events Page

I added borders around the content on my events page because the icons and text are quite small so looked like they were just floating around the page so I think it was more effective to contain them and keep the page looking neat and organised but also adding an extra decorative touch that fits with the style of my other pages keeping my website looking consistent. I also changed the header to the same style as on my other pages for consistency and to clearly label each section making the pages easier for the user to understand and navigate around.

I decided to add a hover over the links because although they have underlines it may not have been completely obvious that they were clickable so this helps improve usability by hinting to the user that these are rollover links and encouraging them to click on them. I chose the same blue colour that I used in my nav bar rollover and some of the background fills for smaller text boxes to keep a consistent look throughout my site.

I then styled it the same as the upcoming events section to keep the page looking consistent and coherent.

Enquiries

The booking enquires page was very plain and dull with just a basic header and form boxed in with a grey background. I decided to make it look more appealing and interesting as well as keeping it in style with the rest of my website by adapting the heading to the same as on my previous pages. This gives the page a much clearer title than before and is also more aesthetically pleasing.

I then removed the background and replaced it with a dashed border as with my other pages to stay in keeping with the style and also add a decorative touch around the simple form. I think this is effective because the page still looks clear and simple and the form is easy to use and understand but the styling helps make the page more interesting to look at.

Contact Us Page

Finally I adapted the contact page header in the same style as the previous pages to stay consistent and also to make it stand out as  header because having it in the same font and a similar size to the text below meant it wasn't really a main feature and the bold font ensures that it now is. The text beneath still looks very plain and also un contained as if it is just floating around the page so I would like to adapt this with either a border or some graphic images.

I decided to create the images over a border because I was thinking of creating a border for the second part of the page and wanted to switch things up a bit, along with the fact there were not any images on the previous page either so I wanted to add some in to keep the site looking fresh and interesting and avoid having two pages that looked the same as the second half of the page is the same as the previous page. I created the images on illustrator in the same style as on the events page to keep a consistent and coherent look to my site and kept to my main colour scheme of purple and white. I did the images in a bold 2D style because the contrast between the two block colours mean they really stand out and will draw the users eye to the information on the page. The images also meant that the text could be aligned beside them keeping it looking more structured and organised so that it no longer looks lost in the middle of a page. I think having the visuals instead of just a page of all text will hold the users interest because having a mixture of text and images will hopefully keep the interested for longer because the page is more varied and they are not looking at the same style of information the whole time.

Finally I styled the form in the same style as the previous page because this keeps a coherent style and having the box helps contain the form so it doesnt look like it is just floating in the middle of the page.


Final Checks/Improvements

I embedded my typeface so that my webpage would have a consistent look on all machines and would show up the same regardless on whether the user has the typeface installed or not. This ensures everyone can view the same page and get an equal experience out of the webpage. I have embedded it so that it will work on internet explorer as well as safari, android and ios.

Browser Compatibility -
I tested my sites browser compatibility by opening it up on both chrome and safari which are the two browsers I have installed to check that it functioned on both and the look was consistent on both. I tested each page and found no differences between the two meaning that my page is browser compatible for these two popular browsers.

Other device/screen size compatibility -

I wanted to also check that if my site could not be opened to full size because the user was using a smaller screen or smaller device (tablet, smartphone e.t.c.) that the page could decrease in size without disrupting any of the elements. The outcome for this test was also positive because when the size of the page was decreased all of the elements stayed put nothing within the page changed meaning that my page is also compatible for smaller screens and devices making it accessible to all users.


Evalutation

In evaluation I am pleased with my final outcome for my website because considering I had never worked with html/css or dreamweaver before I managed to produce a working site that meets the clients requirements and that I think looks bold and appealing. Learning the new skill of website coding was challenging but I have learnt a lot from this project because I now understand the basics of coding along with how to create an effective website layout that is not only functional but is also styled to look appealing. I think my website fits the brief set by the clients because it has social media links and a feed on every page which will encourage users to follow interact with the company on social media which is a major requirement they asked for. I also think it appeals to the target market specified by the client because the quirky graphics and bold, fun headers show a young and fun approach that I think teachers will be looking for when looking for something to appeal to their students, but I think it will also appeal to the teachers as the layout is clear and structured and easy to navigate and I think this still gives it a professional finish which is what will appeal to them personally. I also adapted their events page as requested in the brief to make it more user friendly by cutting it down in length so that you didn't have a massively long page like the original and making it more interactive by adding the links and more attractive and appealing by adding in the calendar graphics. The client also requested a slideshow which I have placed on the homepage and quotes which I placed on the bottom of every page and also on the links on the events page so I met the brief on these areas as well. The clients wanted a page that was creative and more up to date than their current page and I think I have achieved this because of the bold and fun style of the graphics and headers and the bright fun colours used as backgrounds for text, the nav bar, and some of the graphics that I created. I think it has easy navigation and good usability because the nav bar is clear and simple so pages can easily be accessed, their is a search bar for quick and easy navigation to specific pages, and each section of each page is clearly divided with the headers making the layout clear and easy to understand. I think I also managed to avoid the website issues that I found in my research, one of which was cluttered and unorganised webpages where text and images covered the pages. I did this by having clearly organised pages because of the borders and headers and condensing the largest area of information (events page) by using the pop up links which conserved space and the page and kept it neat and tidy. Another issue was too many different fonts and colours which left the webpages looking inconsistent and messy. I avoided this by keeping to a basic colour scheme of grey, purple. and blue and carried this out across my whole website keeping it consistent throughout. I also used a single font for all body text and a different single font for all headers making my text consistent throughout as well. I kept the background very simple which allowed all the other elements to stand out off it as a loud background was another issue that I had found in my research. I also took inspiration from the good websites I found in my research by keeping to a clear and basic colour scheme to improve consistency, making the website interactive by adding pop ups and rollovers to make the users experience more engaging, and having clear and simple navigation so that the user can easily find what they are looking for without having to trawl through every page. Overall I am happy with my final website because it is functional, appealing, meets the brief set by the client, and avoids the web design issues that I specified in my research.