Continuing from last week the group has to now begin creation of a new project. a website focusing on the top ten events each month in hull. The events will be selected from 10 categories of event types to give the user a choice in what to see.
Also this week we were given a lecture on usability for web design and in particular how it is now enforced by the law to makes sure websites are useable for disable users. In the UK this usability issue is represented in the “disability discrimination act 1995” in which it states:
2.2 (p7): “The Disability Discrimination Act makes it unlawful for a service provider to discriminate against a disabled person by refusing to provide any service which it provides to members of the public.”
This then means that service providers had to make there websites useable for disabled users or face penalties from the law. This requires web designers to keep in mind how their websites will be made usable for those who are blind, have motor problems, deafness, learning difficulties, to list a few.
But actual guidelines to what web designers and service providers need to consider is located on the World Wide Web consortium web page. These guidelines outline the areas to be considered for example guideline 6 which governs about using new technologies on old browsers. A web designer creates a website using the most up-to-date technologies for a website but the features can only be used if one is using the newest browsers. Users using older browsers cannot access the features or the web page because they do not support the new technology. This is in effect excluding a vast majority of users from accessing the web page and can be seen as discrimination. Guideline 6 gives guidance by suggesting that one should take into account older browsers and give them the option of turning the new features off for access purposes.
By understanding these documents and incorporating their points into the design phase will mean the final website will take into disabled and discriminated users.
Bibliography:
http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/#gl-color
http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/uk-website-legal-requirements.shtml
http://www.legislation.gov.uk/ukpga/1995/50/contents
Wednesday 30 March 2011
Tuesday 22 March 2011
Another Presentation, Another Project, More Competition
The past two weeks the group has been preparing for a formal presentation for a group project.
The group project is to design and create an events website for arts scene in hull. This website would have to list all the events in hull related to the arts scene. To come up with the idea for the project the group was split into two separate groups, the plums and peaches. The plums (of which I was a member) was tasked with coming up with the idea and providing the research to back it up. This would then be passed onto the peaches that would be responsible for creating a style board and once this was done it would be passed back to the plums to create the mood board.
My role within the plums group was to help come up with the idea and to research the current competition. This research was important as it would influence the final idea by looking at what trends competitors were in and what type of content they were uploading. In short by examining the competition it would help define our website from competitor websites.
The 5 main competitors online are:
1. What’s on in Hull
2. Hull Unleashed
3. Visit Hull and East Yorkshire
4. Skiddle
5. Brit Events
Looking at what’s on in Hull website first it was apparent that this was the City Council’s main event page as it was linked to the council website. This suggests that it is aimed at people who live locally to the area of Hull, but also because it lists all the events going on in Hull whether big or small. One feature that was very noticeable was that each event had its own google maps link at the bottom of the page allowing users to visually understand where the event is being held. This saves the user from using real life maps or having copy and paste the address into google maps itself.
Looking at the hull unleashed website it was apparent that the design of the site was confusing. There to many advertisements and the typography does not stand out. Analysing the content however it is noticeable that this site mainly focuses on the tourism sector of Hull as it lists bar’s, cafes, hotels, etc and lists very few events.
Visit hull and east Yorkshire website again was mainly aimed at the tourism sector in Hull. Events are listed on the site but these are also few in numbers excluding a lot of the events actually available in Hull. One lesson to be learned from the site itself was the use of iconic imagery in that the webpage had constantly changing imagery that was iconic to Hull (and the east Yorkshire). This should be included in the final idea.
Looking at skiddle and brit events webpage’s it was immediately apparent that these were national event websites where hull was only a sub page or venue. Also when going on the hull page the only events were either big music events, theatre, and comedy shows again excluding the large amounts of events in hull.
What is also apparent in all the competition is that they all focus on search engines or event categorization instead of simply displaying the content.
The group project is to design and create an events website for arts scene in hull. This website would have to list all the events in hull related to the arts scene. To come up with the idea for the project the group was split into two separate groups, the plums and peaches. The plums (of which I was a member) was tasked with coming up with the idea and providing the research to back it up. This would then be passed onto the peaches that would be responsible for creating a style board and once this was done it would be passed back to the plums to create the mood board.
My role within the plums group was to help come up with the idea and to research the current competition. This research was important as it would influence the final idea by looking at what trends competitors were in and what type of content they were uploading. In short by examining the competition it would help define our website from competitor websites.
The 5 main competitors online are:
1. What’s on in Hull
2. Hull Unleashed
3. Visit Hull and East Yorkshire
4. Skiddle
5. Brit Events
Looking at what’s on in Hull website first it was apparent that this was the City Council’s main event page as it was linked to the council website. This suggests that it is aimed at people who live locally to the area of Hull, but also because it lists all the events going on in Hull whether big or small. One feature that was very noticeable was that each event had its own google maps link at the bottom of the page allowing users to visually understand where the event is being held. This saves the user from using real life maps or having copy and paste the address into google maps itself.
Looking at the hull unleashed website it was apparent that the design of the site was confusing. There to many advertisements and the typography does not stand out. Analysing the content however it is noticeable that this site mainly focuses on the tourism sector of Hull as it lists bar’s, cafes, hotels, etc and lists very few events.
Visit hull and east Yorkshire website again was mainly aimed at the tourism sector in Hull. Events are listed on the site but these are also few in numbers excluding a lot of the events actually available in Hull. One lesson to be learned from the site itself was the use of iconic imagery in that the webpage had constantly changing imagery that was iconic to Hull (and the east Yorkshire). This should be included in the final idea.
Looking at skiddle and brit events webpage’s it was immediately apparent that these were national event websites where hull was only a sub page or venue. Also when going on the hull page the only events were either big music events, theatre, and comedy shows again excluding the large amounts of events in hull.
What is also apparent in all the competition is that they all focus on search engines or event categorization instead of simply displaying the content.
Friday 11 March 2011
Tweaking Design
Over the previous week I have been amending the design on my personal webpage. Due to this I have created multiple drafts of the original design each with qualities that I find aesthetically pleasing.
During my lecture with the tutor they have pointed out a few aesthetic flaws in my design. Firstly the flaws in my typography were most notable, in that it was all the same font which meant that my logo did not stand out from the menu bar or text. This design flaw meant that the logo was noticeable and the user’s eyes would lose on what to focus on. Secondly the size of my typography was to big giving to much visual input at one point.
To sort this it was recommend a different font should be used and the size should be scaled down. Also any special effects on the menu bar and text should be removed. This helped to highlight the logo and made the text for visually pleasing.
Then next area to sort was the home page as from this photo shows that it was clogged up and was not very easy on the eyes. The tutor amended this to the following.
The text is more clear and shows up better than before where it was lost in the image. Also the image is more controlled and easy on the eye by becoming smaller. The two white lines help with that and also put the home page into perspective. These lines have also been included onto the other pages to keep everything similar. The end product looking like this:
Overall I am pleased with end product of the re-design. It has shown me important key areas in design such being careful with typographies size, font, and place as these can detract from the sites original purpose. Think of using photo’s carefully and how they will fit into your design whether they are the focus or simply aesthetic as both will be displayed differently. And finally consider continuity over the overall product. Does each page match and give an idea of continuous flow/structure.
During my lecture with the tutor they have pointed out a few aesthetic flaws in my design. Firstly the flaws in my typography were most notable, in that it was all the same font which meant that my logo did not stand out from the menu bar or text. This design flaw meant that the logo was noticeable and the user’s eyes would lose on what to focus on. Secondly the size of my typography was to big giving to much visual input at one point.
To sort this it was recommend a different font should be used and the size should be scaled down. Also any special effects on the menu bar and text should be removed. This helped to highlight the logo and made the text for visually pleasing.
Then next area to sort was the home page as from this photo shows that it was clogged up and was not very easy on the eyes. The tutor amended this to the following.
The text is more clear and shows up better than before where it was lost in the image. Also the image is more controlled and easy on the eye by becoming smaller. The two white lines help with that and also put the home page into perspective. These lines have also been included onto the other pages to keep everything similar. The end product looking like this:
Overall I am pleased with end product of the re-design. It has shown me important key areas in design such being careful with typographies size, font, and place as these can detract from the sites original purpose. Think of using photo’s carefully and how they will fit into your design whether they are the focus or simply aesthetic as both will be displayed differently. And finally consider continuity over the overall product. Does each page match and give an idea of continuous flow/structure.
Monday 28 February 2011
The Colour of Design
Over the past two weeks I have been tasked with creating an informal presentation looking at what I personally feel is good web design. For this I chose three examples of what I felt was good design.
1. The Heritage Craft Association
The heritage craft association website was created in mid 2009 to give online support to the charity. The web page itself is very simple in its function as when accessing it the first thing the user will notice are the 6 clickable image buttons located on the right hand side of the screen. The buttons firstly add a form of aesthetic that is visually pleasing as it combines both image and text to create a button instead of text only. This offers a contrast to the left side of the screen which is dominated by text.
Secondly the home pages colour scheme is visually pleasing as it fits in with the images (though the images may have been chosen to fit in with the colour scheme). The colours that can be seen are green (top menu and text), brown (strip below top menu), khaki (main page), Black (background), and white (text and logo). A total of five colours does make it visually striking but could also be making it rather bunched. Possibly one too many colours.
However the function of the website is to represent the scale of craftsmanship in Britain today. The way it does this effectively and simply is by creating a map of Britain and have little pins placed on the map representing known craftspeople.
This simple map gives the user a visual representation of how many craftspeople are in Britain, but also allows for users to contact them via the information located on the pins when clicked.
A simple approach to something functional.
2. My Starbucks Idea
This web site allows users to rate and talk about their personal experiences from Starbucks coffee stores whether it is from the experience or to the drink products offered.
From the initial outlay the webpage is simple. It is not cluttered with advertisements and is easy on the eyes because of this. Also there is only use of 4 colours white, green, black, and orange. The way in which the colour is used in the typography is very useful in the clickable buttons are coloured in orange and the un-clickable buttons are black. This is continued through the whole website and visually explains to the user what is clickable and what isn’t.
Also the top menu bar is simple in that it lays out the options available to the user. Whether the user wishes to submit an idea, view ideas, or view successful ideas the option is available from the top menu bar allowing quick an easy access.
3. For Dummies (Brand)
The “For Dummies” brand is a recognisable brand of how-to books that were published for beginners or novices in there field to understand better the field. The brand itself has become recognisable due to its success.
However looking at it from a design point of view one can see aspects of design that can be incorporated into a website.
Firstly the colour scheme is most apparent. It uses 3 main colours being black, white, and yellow with the yellow being most striking. This is beneficial to the design of a book as for example a user walks into a library looking for the “dummies” series, they will instantly recognise it when they see the bright yellow from the spine of the book and when seeing the dummie sign.
This colour scheme and design is so simple that it has been incorporated into the official “For Dummies” website.
This is a testament to how simple cohesive design can be used on a variety of mediums to still be effective.
1. The Heritage Craft Association
The heritage craft association website was created in mid 2009 to give online support to the charity. The web page itself is very simple in its function as when accessing it the first thing the user will notice are the 6 clickable image buttons located on the right hand side of the screen. The buttons firstly add a form of aesthetic that is visually pleasing as it combines both image and text to create a button instead of text only. This offers a contrast to the left side of the screen which is dominated by text.
Secondly the home pages colour scheme is visually pleasing as it fits in with the images (though the images may have been chosen to fit in with the colour scheme). The colours that can be seen are green (top menu and text), brown (strip below top menu), khaki (main page), Black (background), and white (text and logo). A total of five colours does make it visually striking but could also be making it rather bunched. Possibly one too many colours.
However the function of the website is to represent the scale of craftsmanship in Britain today. The way it does this effectively and simply is by creating a map of Britain and have little pins placed on the map representing known craftspeople.
This simple map gives the user a visual representation of how many craftspeople are in Britain, but also allows for users to contact them via the information located on the pins when clicked.
A simple approach to something functional.
2. My Starbucks Idea
This web site allows users to rate and talk about their personal experiences from Starbucks coffee stores whether it is from the experience or to the drink products offered.
From the initial outlay the webpage is simple. It is not cluttered with advertisements and is easy on the eyes because of this. Also there is only use of 4 colours white, green, black, and orange. The way in which the colour is used in the typography is very useful in the clickable buttons are coloured in orange and the un-clickable buttons are black. This is continued through the whole website and visually explains to the user what is clickable and what isn’t.
Also the top menu bar is simple in that it lays out the options available to the user. Whether the user wishes to submit an idea, view ideas, or view successful ideas the option is available from the top menu bar allowing quick an easy access.
3. For Dummies (Brand)
The “For Dummies” brand is a recognisable brand of how-to books that were published for beginners or novices in there field to understand better the field. The brand itself has become recognisable due to its success.
However looking at it from a design point of view one can see aspects of design that can be incorporated into a website.
Firstly the colour scheme is most apparent. It uses 3 main colours being black, white, and yellow with the yellow being most striking. This is beneficial to the design of a book as for example a user walks into a library looking for the “dummies” series, they will instantly recognise it when they see the bright yellow from the spine of the book and when seeing the dummie sign.
This colour scheme and design is so simple that it has been incorporated into the official “For Dummies” website.
This is a testament to how simple cohesive design can be used on a variety of mediums to still be effective.
Useability "Rule number one"
This past week for digital collaborative practice I have been looking into usability to understand how this may affect the design of my personal website.
In Steve Krug’s “Don’t Make Me Think” (2006) he explains that his first rule of usability is simply, don’t make me (the user) think. He explains that a user who accesses a website should be able to access what they want without having to expand their thinking capacity to access it. In other words the website content and navigation should be clear so that the user is not baffled with questions on how they can access the content they want.
An example of this is websites that search for books. This image below is from browns books online shop. Notice the search engine in that if the user wishes to search for a book (in the example World War 2) one has to think how they want to search for the book.
This make the user think of whether they need to search for a paperback, hardback, e-book, etc when all they want to do is find books relating to World War 2. Amazon’s version of this is simpler in that the user simply selects “books” from the menu and can search straight away making it simple for one to search the content they need.
Thought one may see this as something small and minor, it should be kept in mind that the competition are only one click away and that if your website frustrates users then they will go somewhere else.
Considering this my website should be functional and useable for users to access content whether it is by shortening the amount of pages or highlighting used on click-able buttons. To make the user think less is a rule that must be taken into consideration.
Bibliography:
Krug, S. (2006) Don’t Make Me Think a common sense approach to web usability. 2nd ed. California: New Riders Publishing.
In Steve Krug’s “Don’t Make Me Think” (2006) he explains that his first rule of usability is simply, don’t make me (the user) think. He explains that a user who accesses a website should be able to access what they want without having to expand their thinking capacity to access it. In other words the website content and navigation should be clear so that the user is not baffled with questions on how they can access the content they want.
An example of this is websites that search for books. This image below is from browns books online shop. Notice the search engine in that if the user wishes to search for a book (in the example World War 2) one has to think how they want to search for the book.
This make the user think of whether they need to search for a paperback, hardback, e-book, etc when all they want to do is find books relating to World War 2. Amazon’s version of this is simpler in that the user simply selects “books” from the menu and can search straight away making it simple for one to search the content they need.
Thought one may see this as something small and minor, it should be kept in mind that the competition are only one click away and that if your website frustrates users then they will go somewhere else.
Considering this my website should be functional and useable for users to access content whether it is by shortening the amount of pages or highlighting used on click-able buttons. To make the user think less is a rule that must be taken into consideration.
Bibliography:
Krug, S. (2006) Don’t Make Me Think a common sense approach to web usability. 2nd ed. California: New Riders Publishing.
Tuesday 15 February 2011
I am now in the second week of the module and have finally begun creating my website using the Wix site. Having used it finally I have found that creating a website is easy however the content of the website is the difficult part.
The first problem is finding a colour scheme for my website. Considering the last post, I used one of the images from there and uploaded it to http://www.cssdrive.com/imagepalette/ which created a colour palette with all the colours that would suit that image. However after using some of colours suggested the website looks rather dull and dingy. Perhaps it would have been better to include image itself to give the webpage colour and depth or use some brighter colours to add some contrast. This aspect needs to be experimented with further.
Also further I am finding that the layout of the site is difficult. This is due to myself being unfamiliar with website layout and what works and what doesn’t. However further research into other websites would be beneficial for this.
The first problem is finding a colour scheme for my website. Considering the last post, I used one of the images from there and uploaded it to http://www.cssdrive.com/imagepalette/ which created a colour palette with all the colours that would suit that image. However after using some of colours suggested the website looks rather dull and dingy. Perhaps it would have been better to include image itself to give the webpage colour and depth or use some brighter colours to add some contrast. This aspect needs to be experimented with further.
Also further I am finding that the layout of the site is difficult. This is due to myself being unfamiliar with website layout and what works and what doesn’t. However further research into other websites would be beneficial for this.
Tuesday 8 February 2011
Generation of Ideas
The first lecture for the Digital Collaborative Practice module was basically an introduction to the module and the tutor. This introduction comprised of a general look at web design, why websites are created, and a brief look at certain tools/programs used to create them. One point that was noted during the lecture was that the tutor stated that we should be generating ideas for the design of our particular websites.
Generating an idea for a website seems to be the first and one of the most important stages of design, as with out any form of idea or materials to contribute an idea, the websites look or feel will not exist. This requires one to generate ideas for the general outlook of the site.
“Before setting to work with your web page design software, switch off your PC, get pen and paper and note down your initial ideas: what you want to achieve from your website” (Austin, 2004, p13).
Whilst we are not creating a site for a particular use we still need to generate ideas for the design, colour scheme, typography, and layout of the site. Methods of idea generation can differ from each individual but certain methods exist, one that would be most useful for an individual would be a mood board. A mood board is a collection of real world stimuli that the individual feels would be appropriate for their design. It can include images, photographs, magazine cut-outs, colour schemes, material samples, drawings, doodles; anything that one feels is suitable for the design.
To begin gathering stimuli for ideas I decided to walk around town and with my camera and photograph any stimuli that I preferred the look of. Some of the results can be seen below:
Bibliography
Austin, B (2004) Web Page Design in Easy Steps. United Kingdom: in easy steps.
Generating an idea for a website seems to be the first and one of the most important stages of design, as with out any form of idea or materials to contribute an idea, the websites look or feel will not exist. This requires one to generate ideas for the general outlook of the site.
“Before setting to work with your web page design software, switch off your PC, get pen and paper and note down your initial ideas: what you want to achieve from your website” (Austin, 2004, p13).
Whilst we are not creating a site for a particular use we still need to generate ideas for the design, colour scheme, typography, and layout of the site. Methods of idea generation can differ from each individual but certain methods exist, one that would be most useful for an individual would be a mood board. A mood board is a collection of real world stimuli that the individual feels would be appropriate for their design. It can include images, photographs, magazine cut-outs, colour schemes, material samples, drawings, doodles; anything that one feels is suitable for the design.
To begin gathering stimuli for ideas I decided to walk around town and with my camera and photograph any stimuli that I preferred the look of. Some of the results can be seen below:
Bibliography
Austin, B (2004) Web Page Design in Easy Steps. United Kingdom: in easy steps.
Subscribe to:
Posts (Atom)