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.