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.
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.
