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.

Evaluation of Template

The first thing I did to the basic template was to add in my title at the top and change the names of the links to fit with the website.

Next I adapted the navbar by changing the font on the style sheets and adding a black border with a black background fill inside it. I aligned it in the center and widened the width of the boxes to make it spread further across the page. I also changed the colour scheme to fit the current scheme of the website and logo.

Next I removed all the content that was originally on the template and coloured the background white to leave space for my content.

I removed all the existing divs and borders in the body and created my own by making new divs and adding a border on the style sheet. I then placed the logo text on three separate lines so to recreate the space my final logo will take up and positioned the navbar into the header, aligning it towards the right. Finally I added social network icons and positioned them in the top corner of the header by aligning them to the left and placing them in as images.

Overall I am happy with my final template because I think I have pretty much got the basic layout sorted out and have a good basic code to develop further. I managed to get my links to work and they all redirect to separate pages and I have got the basic positioning of everything sorted out except for the slideshow which will be below the about and welcome. I also need to move these boxes further into the page before putting the actual elements into them because I think it will look more appealing if all of the boxes have some white space around them. I also need to make my social media links clickable because I had issues adding a link to them so this will need to be sorted. I would also like to develop the design side of the website further by improving the fonts and colour scheme, adding a logo, adding a rollover to the navbar and social media links and playing around with the size and positioning of these. I would also like to add a search bar underneath the social media links to make the website easier to navigate. I found this challenging because I have never worked with websites and coding html/css before so I had to learn everything from scratch but because of this I have learned a lot and I now have an understanding of how html/css work and how they relate to building a website. I now understand that html is the coding for the actual element e.g. divs, headers, paragraphs and CSS is the styling of these elements e.g. colour, alignment, padding.

Poetry Slam Initial Thumbnails

For my first set of thumbnails I did the basic layout and content for each page that I want to create. Doing this helped me to organise which page I wanted each bit on content to go on which then made it easier to further develop the individual pages as I already knew the main content that needed to go on there.

 Next I began to develop my ideas for the homepage. I experimented with lots of different ways of laying out the content, logo, and navigation bar to find the best and most effective possible layout by taking the best bits from all of my designs so I could put them into one at the end.


This is some more development of the home page.

Finally I laid out all the best elements from my thumbnails into one design on a 960 grid layout. This grid is the dimensions of the webpage and doing this was very helpful as I found it was a lot smaller in width than I was expecting so it was helpful to find this out in the early design stages than when I had everything made up and couldn't fit it on. I think my design for the homepage is effective because it is clear and organised, with clear navigation and easily visible social media links and clear branding with the big logo at the top. I have also managed to put everything the client requested on my homepage and more by adding the twitter feed and updates but these still link back to the brief as the client wanted upcoming events and updates to be clearly advertised so they can see basic details on the homepage and for more information go to the events page.

Poetry Slam Prototype

Mind Map

Before making the prototype we created a mind map of what the client requires for the new poetry slam website. We took the main points from the brief and expanded on them to work out the main features our websites should contain. From looking at the brief we decided the client was looking for an update of their current website that looks more modern and professional, and an improvement on the layout and content of their pages, especially the events page. They also wanted a focus on social media and showcasing their past work with slideshows and videos to spread the message of what they do.

Prototype

Taking all of our research into the brief into account we created a basic prototype of the website. Doing this helped us to create a basic layout for the website that was functional and easy to use. We tested all of the pages by asking other members of the class to go to certain pages on the prototype and after doing this test for all of the pages we found the layout worked well.

For the homepage layout we added the logo in the top left corner with social media links and a search bar in the right. I think this works well as the brand identity in the form of the logo is visible on every page so will be reinforced in peoples minds as they click through to pages and the social media is obvious and easy to see which will encourage more people to click through to it. We added a twitter feed and I think this is a good add on the have on the homepage as it can give up to date updates and events along with encouraging more traffic to the companies twitter page. We also added the rotating image banner as requested in the brief.

For the events page the client had requested quite a lot of information to be on it so we decided to make it one long page with links to certain parts of the page in the navigation bar for quick and easy navigation. I think this is more effective than having it in all separate pages because all the information is in one space so if you want to read everything about the events you can but if someone was looking for specific information it is still easy to find. We added an image and video gallery as requested by the client along with rotating testimonials. We also added past and upcoming events to the page again as requested by the client.

For the bookings page it wasn't particularly clear whether the client wanted an online booking form or a booking enquiry form so for the time being we decided on a click through link to an enquiries form. We also added the PDF brochure the client requested on to this page as it links in to bookings along with their email address.

From doing this activity I learned the main pages that my web page should contain and also the key features that need to be placed within them. I also found the for the webpage to work constant tests need to be carried out to ensure all links end up in the right places and doing early prototype stages of the website will save time in the long run as it will be easier to correct basic webpages than the finished product.

Good and Bad Websites

Good Examples of Websites

Louder than ten is a company that runs workshops for companies. I think this an example of a good website because it was fast to load, looks good, but is also simple to use. The homepage is very long and scrolling down gets you to different sections that are separated with different lines and colours. I think this is an effective way of navigation because it cuts down the number of tabs needed for separate pages and means all the important information can be in one place. One thing I would change about this is to have links at the top of the page that scroll you to that specific part of the page as it could be annoying for the user to have to scroll through the whole page to find what they are looking for. The fonts used are clear and have good legibility, and the colour scheme is basic so that it doesn't overcomplicate the site but also keeps a brand identity with orange, cream, and grey used throughout and the website is very consistent by using the same fonts and colours. I think it suits the target market of business owners as it is clear and professional but it also has a quirky touch with the images and borders e.t.c. which would draw the user in and keep them interested.

Adobe muse is an adobe computer software product. I think this is an example of a good website because it is fun and creative without being over the top and is still easy to navigate and understand. As with louder than ten the homepage is very long but this one has navigation tabs on the left hand side to that you can quickly access the section you are looking for. Scrolling down the page animates it and the different sections pop up in front of you. This makes the website more fun and interactive although I think it could be confusing for the user as you have to scroll very slowly not to miss things. The colour scheme is effective because it has been kept to about 4/5 main colours as any more would be too much with all the graphics and animation. It was fast to load even with all the animation and I think this is because instead of having the animation constantly moving, it is animated by the motion of scrolling down. The target market for this would be creatives and designers and I think it suits that target market well as it is fun and original and a bit different which is what that target market would be looking for.

Boards of freedom is a website that sells clothing. I have listed this as a good example of a website because of its easy navigation and good usability and branding. I think the home page is very effective as it mainly consists of an interactive slideshow with navigation at the bottom so you can manually choose a slide making it easy to use and control yourself. It has been kept very simple with a basic nav bar at the top and I think this works because you aren't overloaded with links so it is easy to get to where you want to. I think the branding of this website is effective and consistent throughout with the same typeface and black lines used throughout the website and a basic colour scheme of black, white and grey. For some of the pages they have also added more creative and bold headings to give the website an urban edge. I think it works well for the target market which would most likely be young urban men/woman because it has a simple but bold urban feel to it with the monochrome colour scheme and urban fonts which would draw them in.

Go food is a company that serves italian street food across the UK. I think this is a good example of a website because of its clear layout that is easy to navigate and understand and the basic but effective styling of the colours, type and images. Just two fonts have been used- a sans serif for headings and a script font for body text. I think this is effective because it is easy to pick out headlines making it easy to find what you are looking for and using the same fonts make the website consistent throughout. The colour scheme is simple and consistent throughout with only black, white and brown used. I think images have been used well in this website because they have been placed throughout the page separating blocks of text making it less overwhelming to read and keeping the user interested. The website only consists of one page but I think this works because they have everything you would need on it making navigation easy as you know all the information is already in front of you. They have made this work by separating it into blocks. I think it suits the target market of businessmen/women and commuters that would be stopping by the company for lunch as they dont usually have much spare time and want everything to be presented with no fuss and easy navigation and having it all on one simple page caters to them.

Bad Examples of Websites

The mercia tourist board website is a tourism travel guide for visitors to wessex and mercia. I have chosen this as an example as a bad website because it is very busy with a wide mix of fonts, colours, backgrounds and no quick or easy way of navigation other than scrolling through masses of bold text and images. There is no organisation to the layout just blocks and blocks of text and pictures with no clear headings to tell you what the information is about. I found it very confusing to find the actual purpose of the website as it is full of such a wide range of information that shouldn't belong together on the same page (it consists of just one very long page). It does not have good usability or accessability because some of the images and graphics would not work for me meaning not all users could access the whole website. There is no set colour scheme which gives the website no brand identity and makes it very confusing to read as so many colours are being thrown in your face all at once. There is no consistency in the website with different colours, fonts, borders, and backgrounds used throughout. I dont think it works well for the target market of tourists because they need to be able to easily navigate the page to find the information they are looking for especially since some tourists may not speak good english and this is not very accessible or simple for them to use at all. It has also tried to give me a virus each time I have clicked on it which is not something that anyone is looking for in a webpage!

Constellation seven is a christian website. I chose this for the list of bade websites because of the overuse of backgrounds and colour and the sheer mass of information piled onto each page that is very unorganised and difficult to read. There is no set colour scheme and it seems that every colour on the spectrum has been used. The text further down the homepage has been done in multicolours for each letter making it very difficult and overwhelming to read. There is a flash plug in that would not work on my computer meaning the web page would not be accessible to everyone. There is also no consistency when it comes to not only the colours but also the fonts as it seems to change constantly as you scroll down the page. Music plays when you open the page which can be very off putting and would make me want to click straight off to stop it. I dont think anyone would want to stay not his page for long as there is far too much being thrown in your face all at once and the mass of colours and shapes makes it hard to know where to look and where to find anything. I think the target market for this would be christians or potential christians and I dont think it would work for either as it is not a page I would want to stay on for a long amount of time so nobody would want to stick around long enough to read any of the content.

Lings cars is car hire website. I chose this as a bad example of a website because there is far too much going on with lots of bright colours and animations all competing with each other making it almost impossible to navigate and know where to look. There is music played on opening which made me want to click straight off. The animations flash constantly in your eyes which I found really distracting and off-putting and would make it hard for me to concentrate on any other part of the website. There is no continuity and the fonts constantly change as do the colours giving off no brand identity and making it very confusing for the reader to read and know where to look. They have also used far too many effects like glowing edges on the letters in tons of different colours which made it hard to read and took away legibility from what would have been a basic typeface. There are lots of different banners with ads and promotions and other information running down the side of each page and this was extremely distracting and I didn't really know where to look and felt overloaded with information. The target market would be adult drivers and I think they would not stay on this website for long as they would be very confused with the complete overload of colours and information.

Arngren (from what I can tell) is a site that sells gadgets and technology. I have listed this as a bad website because of the terrible organisation and mass of text, images, and colours that left me feeling very confused. The boxes with the images and prices in are all different sizes and are randomly scattered around the page making it impossible to know where to look, some have a box of their own and some share a box there is no consistency. The page took a very long time to load, it took a couple of minutes for every image to appear on my screen and I think this would put people off straight away when you usually expect a webpage to load within seconds. There is no set colour scheme and random coloured headings and text are scattered around the page, it is also sometimes hard to tell which text goes with which image as it is so unorganised. There are also random bits of animation on some of the images which I found very distracting. The font is the one thing that is consistent which at least makes the text legible. Navigation is confusing because there are far too many links around the page and the ones at the top have no real order. I dont think it would suit the target market at all because these are likely to be technology savvy people that would expect fast loading and professional looking websites that are easy to use and are high performance and I dont think this has any of those qualities.

HTML + CSS Tutorials

Description of HTML, CSS and JavaScript

HTML

HTML is a markup language used for describing web pages. It uses markup tags that describe the content of the document. It was designed for website creation. HTML is made up of a series of short codes typed into a text-file. Once the text has been saved as a html file it can be viewed through an internet browser. The browser then reads the file and translates the text into visible form. HTML stands for HyperText Markup Language. Hyper text is the method used to move around the web, clicking on special text called hyperlinks bring the user to the next page. 

JavaScript

JavaScript is the language for HTML, the web, computers, servers, tablets, smart phones, and more. It is a programming language used to make web pages interactive and runs on the visitors computer so that it doesn't require constant downloads from the creators website. It is also often used to create polls and quizzes. It is different to HTML in that HTML is a markup language designed for defining static web page content whereas JavaScript is a programming language designed for performing dynamic tasks. It is used for relatively simple functions e.g. popping up new windows or checking the information typed into a form to make sure it conforms to what the receiving database expects. 

CSS

CSS stands for cascading style sheets. Styles define how to display HTML elements. External style sheets can save a lot of work and are stored in CSS files. They define the layout of HTML documents allowing colours, margins, height and width to be changed along with many other elements. They were added to HTML to save a very large problem- HTML was created to define the content of the document and was never intended to contain tags for formatting it. Development of large websites where fonts and colour information were needed for every page became an expensive and long process. CSS was created to solve this meaning all the formatting could be removed from the HTML document and stored in a separate single CSS file.

Evidence of Codecademy Tutorial 

By doing these tutorials I learned the basics of HTML and CSS and the differences between them. HTML is the basic information for the website e.g. headers, text, tables and CSS is how this information is styled e.g. colours, borders, fonts. I learned the basic tags for making paragraphs, headers, lists, pictures, links and tables and how to style them using the CSS style sheets.