Monday, November 14, 2005
Task B: Comment on one of the four principles of Web Design
CONTRAST
For this task, I have chosen to comment on the importance of contrast in web design.
What is contrast?
Contrast is the use of differences in a web page. It may be any two characteristics of a page that are different. For example, orange text against a blue background may be considered a contrast. It makes use of two variations (blue and orange) of one element (colour).
It would be ridiculous to say that a size 12 font and left alignment is a contrast. Contrast must be something in relation to something else. The use of a certain sized font against a certain alignment does not compare variations of one element; rather, it compares two completely different elements (font size and text alignment).
Why is contrast important?
Contrast is important for about three major reasons:
It helps us see better, e.g. dark text against a light background would allow us to easily make out the writing.
It allows us to distinguish between different parts of a website. If a different colour is used for the text of different parts, our minds differentiate between the two.
Contrast is also used to highlight certain aspects of a page. If all the text is in a certain font and size, and one word or sentence is different from the rest, it stands out, establishing its importance or significance compared to the rest.
What is good contrast, and what isn’t?
Good contrast is the use of contrast effectively and appropriately. The aim of using contrast in web design is to make things clear and comprehendible. We may want to create a contrast between the colours or alignments to emphasise certain parts of a webpage. However, we would not want to create a contrast between layouts of webpages in a series. If the first page had photos at the very top and the second had the photos at the very bottom, it would confuse viewers. Contrast, like anything else, is only effective in moderation. Constant change and the emphasis of everything will overwhelm viewers and ultimately desensitize them to the contrasts used.
Examples:
For the first example, I did not use a website available on the Internet, so I have included sreenshots.
The image on the left is a screenshot of a webpage I had created with partner Tahmid for a project in Grade 7. We had used a predominantly black background with white text, but the colour combination was still flawed. As can be seen in the picture below, certain parts of the text were illegible due to the white streaks in the background.
In addition, the blue hyperlink cannot be read against black.
An example of contrast used effectively would be:
On the right is a webpage from the UN News Centre. The titles at the top are in a different colour altogether. The heading of the article is in bold type and has a larger font size than the rest of the article. The links and related articles on either side have a smaller text size.
I had searched the News Centre for articles containing certain keywords. Notice that the keywords are highlighted and in bold type.
What I liked most about this page was that it used contrast in moderation. The entire page has about three colours (red, blue and purple) being used for all the headings, text links and even the logos. It uses those colours to make things stand out, but does not overwhelm the viewer with an unreasonably large array of colours.
URL:
http://www.un.org/apps/news/story.asp?NewsID=16422&Cr=nuclear&Cr1=&Kw1=nuclear&Kw2=iran&Kw3=
