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.

Development

Development


























As development from my initial template I added in a basic search bar above the navigation bar. I decided to add a search bar in so that if the user has a specific thing that they are searching for they dont have to go though the whole website and can quickly type it in here. I added it at the top because if someone is looking for something specific they will usually want the search bar as soon as they load the website so it needs to be quick and easy to access. The original web page did not have search bar so I think this is a nice feature to add to improve usability. I would like my navigation bar to stretch the whole way across so this will be moved further along to the right when I have done this to give the page a more balanced look.

This code shows my links and part of my search bar.

Next I created a gradient image on photoshop and used it as the background for both the header and the footer. I think this worked okay for when I had the page title/logo in white because it had a strong contrast but when I created a developed logo that worked best in black it was too dark and I think it gives the page a much darker look than I wanted to create as the website should be fun and bright to suit the theme of the poetry slam.

I then took out all of the colour giving me a white background and I think this works best because it gives a good contrast against the black making the elements stand out and easy to read and will also work well to give a good contrast when I start to add colour. I also lengthened the navigation bar to stretch across the whole page and I think this gives a nice clear separation between the header and the body. I also changed the search button on my nav bar by creating a black version on photoshop and placing it in as an image because this goes with my colour scheme of purple and black. I then moved the bar to the far right to balance out the elements of the header. I also changed the font to something simpler and cleaner but it is also quite bubbly which makes the page look more welcoming. I think this logo font suits the company because the handwritten style is fun and artistic which is what slam poetry is about. I think it also suits the target market because as said by the client the target market are most likely teachers looking into the company for their school age classes so they will be looking for something that looks fun and interesting and would appeal to children but still with a professional edge that would appeal to them too. I think my webpage still has a professional edge because of the clean and organised layout.

I then changed the colour of the footer and nav bar to the purple colour that I wanted for my colour scheme and I think this gives a nice contrast against the white and links back to the companies colour scheme of purple whilst adding a bright and fun touch to the page. It really makes the nav bar stand out and this should be a main focal point of the page so that the user can instantly see it and find where they want to go.

I stretched out the logo because it was all crammed in to the left corner and left a lot of empty white space on the header and I think it looks more balanced against the other side when it is stretched out. I also added my first paragraph and header as an introduction to the page. I decided to style this by adding a background to the header and paragraph boxes to give clear boundaries around the text. I think boxing them in makes each separate element clearer and gives a neat and tidy finish. I made the header in bold to give it a clear contrast against the paragraph text and to create an inital focal point to the page. I used a grey background to box in the text to give a clear divide between each element and make it clear where each element starts and finishes.

Next I added in my twitter feed by creating a widget on the twitter website and copying the code into my html page. I styled it to be in the right corner on each page leaving room for all other content on the left and this also helped give my website a consitent look as it was in the same place for each page. Having a twitter feed on every page helps drum up interest for the companies twitter account and by allowing the user to see the tweets they can also be taking in current information as they browse the page and having the follow button increases the chances of them following.

 This is the code for my twitter widget.

Next I added in a slideshow as requested by the client created using html and css. I decided to place in under the welcome message so that the user can see the introduction to the website and then the images giving them a clear idea of what it is about.

By hovering over the slideshow arrows would appear to go the next slides.

Although this slideshow was functional it was quite small and was drowned out by other elements on the page and could be confusing for the user as the arrows only appear on hover. I would like to try out a different slideshow that has clear navigation without having to hover so that it is obvious to the user that they can change the slide and also one that I can increase the size of to take up more of the page so that its in proportion with the rest of the page.

I found another slideshow that could be made a lot larger as that it takes up more of the page and looks more in proportion. I think this slideshow works a lot better because I could size it to take up the majority of the page as I wanted it to be the focal point.

When you click on the slideshow you get a pop up window that allows you to scroll through the photos and I think this is a nice feature to have because it allows the user to see enlarged versions of the picture and also to see them clearly without having all the other elements surrounding the images to distract them. Although I like the popup element of the slideshow the look of it on the main page doesn't really merge well with the rest of the elements because of the white box that surrounds the images. This box doesn't seem to be able to be removed so If I can I would like to find a slideshow that looks better on the main page. It also still has the problem of having no visible arrows which gives navigation problems because not all users would think to click on it and some could think it is just a still image.

I added the copyright to the footer as done on their orignal website as I thought this might be important to keep for copyright reasons.

About Page

For my about page I created a header and paragraph styled the same way as with my home page with the same font and and grey background for continuity and to keep a constant theme but just enlarged the paragraph to extend past the header and I think this gives a nice seperation between them.

For the biographies I decided to place the original text and images from the website inside a table, so that each person was on a seperate row giving a clear and organised biography sections that is clear to read and understand. I also had to extend the container on the page and lower the footer to allow the full table to be contained. The layout of this is similar to the original but I tried to style it a lot cleaner and nicer by not having unattractive table lines. The reason I kept to a similar layout is because I think this is a clear and easy to understand way of displaying each person and their bio and it doesn't make the page massively long as there aren't too many people so the length isn't an issue.

Events Page

The client said in the brief that they wanted a different way of showing events than the very long table that was on their page so I first experimented with the idea of using a calender. I thought this could be a solution because they could scroll back through the dates to find past events and forward for upcoming events. The issue wight he calendar is that to fit on the page the boxes have to be quite small so there was not very much room to right in details of events and although its good at keeping everything in one place it could be confusing for the user as they may not realise you could go back to past events and look at more information about them so these might easily have been missed. Because of the small space I would have linked the images and quotes as a pop up but again this could easily have been missed as it wouldn't be clear to the user that you could do this by clicking on the links.

I decided to take a new approach to the events page by having the same effect as a calendar with the date and location but doing it in a list form. I think this is a lot clearer and more effective because as soon as you access the page you can see the event that is coming up next and I created the dates in a bold calendar inspired box that will stand out the user and hopefully make the date stick in their mind. Having it in the list also allowed me to make the locations large and bold making it clear and legible for the user. I added grey boxes behind the elements to give the dates a contrast against the background because it otherwise would have been white on white. I think it also helps to separate the elements nicely and gives clear divisions in the page making it clearer for the user.

This is the finished upcoming events box.

I then used the same layout and idea for past events. Having the past and upcoming events separated makes it a lot easier for the user to find what they are looking for - if they are interested in coming to an event they can look at upcoming and if they want to read about previous workshops they can go to past. This is a feature that was not on the current poetry slam website and I think this improves usability by making it quick and easy for the user to find what they are looking for without having to scroll for miles.

I wanted to incorporate images and details/quotes about the previous events into the page as requested by the client but I didn't want to add them to the list on the main events page because this would make it become cluttered and unorganised and would have the same issue as with the current poetry slam page where you were bombarded with information all in one place and the page was much too long. To solve this I decided to add linked pop up boxes so that when you click on the link over the writing it pops up with photos from the event along with any extra details and quotes that had been provided on their current website.

This is the box after I added in the code. I think this is effective and works well because the rest of the page gets shaded so that the users focus can be on the box but it also allows me to add extra images and information that would have otherwise have cluttered the page.

This is how the box looked once I had added in the image sand text. I kept the layout simple with a heading, images in the middle, and then any extra information and quotes at the bottom. This makes it easy for the user to understand and all the information is gathered into one place so they can easily find the information about each event.

The client had requested that quotes were visible on the main pages of the website so I thought having them just on the pop ups wouldn't be enough as you would have to access that specific page to see them so I decided to create a quote box above the footer. I decided to place this on every page so that there can be positive quotes about the company on each page that they visit which will help reinforce a positive message about the company which is something they wanted. I made a hand drawn style speech bubble because this fits with the style of my logo and the theme for the whole website which was professional but with a hand drawn style to it to give it an artistic and fun touch to appeal to the target market who would be most likely be looking for something that will suit a younger audience of school age children.

Bookings Page

The client had asked for ways to encourage bookings so I thought creating a bookings page would be a good way to do this so that they could enquire and this will encourage more people to enquire if they can do it straight from the website. I chose a simple and clear form that is easy to understand as the purpose is for the client to send a message so I dont think any fancy styling is needed because it needs to be clear and simple for them to understand. I separated the elements with the grey boxes to match the rest of my website to give a clear and coherent theme and to also help divided headings and content up.

Contact Page

I also made a contact page as this was a feature on their current website and although I have the contact form on the bookings page I think this is still necessary because not all enquiries that users have will be about booking so this gives them an easy way to ask a quick question without having to go through their own email websites so I think this will encourage people to ask questions as it is quick and easy. I chose the same simple layout for the same reason as the bookings page - the purpose of this page is for the user to send a message and not to advertise the company like other pages so it just needs to be clear and simple to understand.

On the current website I also found postal and phone contact details and I thought it was important to include these so that the user can use other forms of contact if they need to. Again I added these in in a  clear and simple font with the grey box to divide so that its easy for the user to understand.



I am happy with the pages and basic layout of my website at this stage and everything is functional and clear and easy to understand and I think that the website meets the brief as far as basic elements are concerned. Further development that I would like to do is styling and appearance based because I think the website is quite basic and plain looking especially all the grey filled pages with basic headings. It also looks quite boxy as I used grey boxes to divide the page up so I would like to experiment with finding new ways to contain text to give a more interesting layout. I would like to take inspiration from my events page for the design of the rest of the site because I think the little calendar graphics are really effective and give a more fun, colourful, and interesting look to the site and this is something I would like to carry on throughout. I think this will help me meet the clients brief style wise as they wanted something fun and creative as this is what the poetry slam is all about so by adding more individual touches such as graphics, borders, and more colours plus improving the slideshow and trying the remove the boxiness will really help my site to suit the clients needs more.