Web Design
Stage 2 Coursework
There are many aspects which need to be thought about when creating and designing a website. Often, people try to create visually impressive sites without thinking about how the user will navigate around the site.
The key in creating a good website lies in thinking about what information you want the user to get from the website, and then positioning that information logically.
The key in creating a good website lies in thinking about what information you want the user to get from the website, and then positioning that information logically.
Space/Screen size
Space Division
The first issue to look at when talking about design is space division. Whether you are working with a computer screen, magazine, or movie screen, there is the concept of space. A computer screen is wider than it is tall and has a ratio of 4:3. This space should not be divided down the middle as the eye keeps switching from one side of the screen to the other. An example of bad space division can be found at http://www.helptheendorly.co.uk/.
It is generally better to make the division closer to one edge of the screen.
Space Division
The first issue to look at when talking about design is space division. Whether you are working with a computer screen, magazine, or movie screen, there is the concept of space. A computer screen is wider than it is tall and has a ratio of 4:3. This space should not be divided down the middle as the eye keeps switching from one side of the screen to the other. An example of bad space division can be found at http://www.helptheendorly.co.uk/.
It is generally better to make the division closer to one edge of the screen.
The rule of thirds means that you divide the screen into three divisions, both top and bottom. The idea is to put the centre of interest at the intersection of the lines. A good example of this is the home page of http://www.rotary.org/ where the organisation’s main project is displayed in the top third of the screen. This creates a nice composition.
Scrollbars
Another instant when the space design of a page affects the user is in scrollbars. Horizontal scrolling is extremely annoying. Online journals and social networking sites are prone to this problem. http://www.myspace.com/
(e.g. http://www.myspace.com/radarnottingham)
A good example of a design fitting the size space is http://www.hicksdesign.co.uk/
Colour Scheme
The colour scheme in websites, and indeed all types of design, is integral to the feel and function of the design. If the colours used don’t compliment one another, the design will fail. A good example of bad colour scheme can be found at http://www.helptheendorly.co.uk/. The red ‘upcoming gigs’ section of the page is eye-catching and always in the same place, which makes reading the black section difficult.
A good example of a well-designed colour scheme can be found at http://www.ntu.ac.uk/.
The colours are mainly used in the middle section which draws the eye to the most important information. The other colours in the page compliment each other and are not too vibrant, and so aid the user, whereas http://www.helptheendorly.co.uk/ detracts from the information on the page.
Another instant when the space design of a page affects the user is in scrollbars. Horizontal scrolling is extremely annoying. Online journals and social networking sites are prone to this problem. http://www.myspace.com/
(e.g. http://www.myspace.com/radarnottingham)
A good example of a design fitting the size space is http://www.hicksdesign.co.uk/
Colour Scheme
The colour scheme in websites, and indeed all types of design, is integral to the feel and function of the design. If the colours used don’t compliment one another, the design will fail. A good example of bad colour scheme can be found at http://www.helptheendorly.co.uk/. The red ‘upcoming gigs’ section of the page is eye-catching and always in the same place, which makes reading the black section difficult.
A good example of a well-designed colour scheme can be found at http://www.ntu.ac.uk/.
The colours are mainly used in the middle section which draws the eye to the most important information. The other colours in the page compliment each other and are not too vibrant, and so aid the user, whereas http://www.helptheendorly.co.uk/ detracts from the information on the page.
File Size
Tables
An important consideration when creating a website is file size. A large file size loads slower and costs more to host. “Using tables to create a website makes the file size of pages unnecessarily large, as users must download this presentational data for each page they visit.” – (http://www.hotdesign.com/seybold/)
http://foxie.ru/ is an example of a table-based design. The long load-time of the home page is annoying for users on a slow connection and suggests an inefficient organisation.
Cascading Style Sheets
“By using structural markup in our HTML documents and Cascading Style Sheets to lay out our pages, we can keep the actual content of our pages separated from the way they are presented.” - (http://www.hotdesign.com/seybold/)
This makes it easy to change the layout of the site, by changing the style sheet, without editing the pages themselves. The main advantages for using CSS is faster load times of pages, easier to redesign, and more accessible to everyone. An example of a website which uses CSS is http://www.csszengarden.com/.
Accessibility
“Good web site accessiblity isnt just about achieving the highest accessibility ratings, it's about making sure your site meet all of your visitors' needs.” – (http://www.nvisage.co.uk/).
http://uk.yahoo.com/ is an example of a site which has the ability to re-size the text. This makes it more accessible to users with visual disabilities. http://www.thefwa.com/ is an example of a website which has a fixed text-size.
The contrast between the text and the background of a page should be sufficient enough to be accessible by users with colour blindness. I couldn’t find an example of a website with an insufficient contrast, but they’re out there! Most likely on someones page on http://www.myspace.com/.
Using Web standards also makes pages much more accessible to users with disabilities and to viewers using mobile phones and PDAs to access the Web.
Tables
An important consideration when creating a website is file size. A large file size loads slower and costs more to host. “Using tables to create a website makes the file size of pages unnecessarily large, as users must download this presentational data for each page they visit.” – (http://www.hotdesign.com/seybold/)
http://foxie.ru/ is an example of a table-based design. The long load-time of the home page is annoying for users on a slow connection and suggests an inefficient organisation.
Cascading Style Sheets
“By using structural markup in our HTML documents and Cascading Style Sheets to lay out our pages, we can keep the actual content of our pages separated from the way they are presented.” - (http://www.hotdesign.com/seybold/)
This makes it easy to change the layout of the site, by changing the style sheet, without editing the pages themselves. The main advantages for using CSS is faster load times of pages, easier to redesign, and more accessible to everyone. An example of a website which uses CSS is http://www.csszengarden.com/.
Accessibility
“Good web site accessiblity isnt just about achieving the highest accessibility ratings, it's about making sure your site meet all of your visitors' needs.” – (http://www.nvisage.co.uk/).
http://uk.yahoo.com/ is an example of a site which has the ability to re-size the text. This makes it more accessible to users with visual disabilities. http://www.thefwa.com/ is an example of a website which has a fixed text-size.
The contrast between the text and the background of a page should be sufficient enough to be accessible by users with colour blindness. I couldn’t find an example of a website with an insufficient contrast, but they’re out there! Most likely on someones page on http://www.myspace.com/.
Using Web standards also makes pages much more accessible to users with disabilities and to viewers using mobile phones and PDAs to access the Web.
Navigation
“One of the key rules of design is that form follows function. Although most obvious with industrial design, it is also a very important principle for Web Design and interactive applications. No matter how brilliant the design, if the user cannot navigate easily and intuitively through a Web site, the designs a failure.” - (Digital Creativity, Bruce Wands)
A good example of this is http://www.amazon.co.uk/. This site uses a hierarchical structure with the most important options being in a horizontal menu at the top of the page.
“One of the key rules of design is that form follows function. Although most obvious with industrial design, it is also a very important principle for Web Design and interactive applications. No matter how brilliant the design, if the user cannot navigate easily and intuitively through a Web site, the designs a failure.” - (Digital Creativity, Bruce Wands)
A good example of this is http://www.amazon.co.uk/. This site uses a hierarchical structure with the most important options being in a horizontal menu at the top of the page.
A bad example of this is http://www.improve-education.org/. The unclear links used in the vertical menu (left) are not helpful to visitors.“Designers are experts in typography, space, colour, composition and form. Information architects are experts when it comes to the look and feel of a Web site and the factors that influence navigation through it.” - (Digital Creativity, Bruce Wands)
For individuals creating Websites, they must display all of these skills in providing the user with a website that both looks good and is easily to navigate.
Audio
http://www.improve-education.org/ is a badly designed website for many reasons. Its audio content is particularly bad. When the page first loads there is a sound file (with a glitch) which automatically plays in the background. This music is on a loop and gets very annoying after a short time. Also there is no way to turn the music off and so the user is resorted to muting the volume on their computer or, as I did, exiting the page as quickly as possible!
Visually impaired users of the internet can use audio screen readers to view websites. I haven’t been able to find any examples as you need special software to hear the audio, but the most common screen readers are compatible with Internet Explorer and Netscape browsers, so in effect most website will support screen readers.
Typography
The most important consideration when choosing a typeface is readability. Certain typefaces lend themselves better to titles, than they do to body text.
The four major fonts used in web design are Helvetica, Ariel, Times New Roman, and Verdana. “A good general way to work with type is to isolate the most important concepts and ideas and place them in the heading or subheading.” – (Digital Creativity, Bruce Wands). http://www.smashingmagazine.com/ is a good example of text that is clear and concise.
www.smo.uhi.ac.uk/~oduibhin/mearchlar/fonts.htm uses an italic font at the top of the page which is hard to read.
http://www.improve-education.org/ is a badly designed website for many reasons. Its audio content is particularly bad. When the page first loads there is a sound file (with a glitch) which automatically plays in the background. This music is on a loop and gets very annoying after a short time. Also there is no way to turn the music off and so the user is resorted to muting the volume on their computer or, as I did, exiting the page as quickly as possible!
Visually impaired users of the internet can use audio screen readers to view websites. I haven’t been able to find any examples as you need special software to hear the audio, but the most common screen readers are compatible with Internet Explorer and Netscape browsers, so in effect most website will support screen readers.
Typography
The most important consideration when choosing a typeface is readability. Certain typefaces lend themselves better to titles, than they do to body text.
The four major fonts used in web design are Helvetica, Ariel, Times New Roman, and Verdana. “A good general way to work with type is to isolate the most important concepts and ideas and place them in the heading or subheading.” – (Digital Creativity, Bruce Wands). http://www.smashingmagazine.com/ is a good example of text that is clear and concise.
www.smo.uhi.ac.uk/~oduibhin/mearchlar/fonts.htm uses an italic font at the top of the page which is hard to read.
Graphics
Favicons
“Favicons are mini graphics for a particular web-site which can be displayed in the browser’s URL bar, next to the site’s name in lists of bookmarks, and next to the page’s title in a tabbed document interface.” – (www.smashingmagazine.com). Favicons are normally th
e logo of a company so that it’s recognized immediately. Favicon are much under-used in bookmarks where users can easily find the link to the website. http://www.yahoo.com/ has an easily recognizable favicon, as shown here.
Websites that don’t have favicons appear as explorer graphics. Favicons are designed to stands out.
Favicons
“Favicons are mini graphics for a particular web-site which can be displayed in the browser’s URL bar, next to the site’s name in lists of bookmarks, and next to the page’s title in a tabbed document interface.” – (www.smashingmagazine.com). Favicons are normally th
e logo of a company so that it’s recognized immediately. Favicon are much under-used in bookmarks where users can easily find the link to the website. http://www.yahoo.com/ has an easily recognizable favicon, as shown here.Websites that don’t have favicons appear as explorer graphics. Favicons are designed to stands out.
User Experience
The user experience of http://www.travelersinsynch.com/challenge_popup.html is excellent. “The website is an interactive 3D experience for risk managers to test your knowledge of safety, security and maintenance issues in relation to your home and business.” – (http://www.thefwa.com/). The site is fun, immersive and educational.
http://www.improve-education.org/ is probably the worst website I have ever visited. Ironically called ‘Improve Education’, most of the links I clicked on the page lead to a blank page! The site is rubbish, basically.
The user experience of http://www.travelersinsynch.com/challenge_popup.html is excellent. “The website is an interactive 3D experience for risk managers to test your knowledge of safety, security and maintenance issues in relation to your home and business.” – (http://www.thefwa.com/). The site is fun, immersive and educational.
http://www.improve-education.org/ is probably the worst website I have ever visited. Ironically called ‘Improve Education’, most of the links I clicked on the page lead to a blank page! The site is rubbish, basically.
No comments:
Post a Comment