Graphic design 2
Introduction
This lesson covers colour, consistency, the technique of sketching page layouts, and general graphical professionalism.
Colour
Colour is often used as part of a design. We consider:
- Aesthetic choice of colour
- Readability of colour
- Specifying colours on the Web
Consistency
Consistency is very important in graphic design. Generally, every departure from consistency can be be perceived to have a meaning or reason; it's important that you don't unintentionally give these cues.
Layout sketching
You can usually achieve a better page layout if you take a step back from the HTML/CSS creation process. For example, many people begin by sketching possible layouts on paper, or in a graphics program.
Professionalism
Some people think that using free "clip art", or Web page templates provided with their web page creation software, can enhance the look of their page. However, such attempts almost invariably result in graphic design that is at odds with the content of the page and screams "amateur".
Colour schemes
Any Web site should have a colour scheme, used consistently through the site. Schemes can vary in complexity from "black for text, white for background", through black-and-white plus an additional colour for highlights, to full colour schemes or those that specify colour-coding for sections of the site.
Although most people choose colour schemes "by feel", this is not quite an arbitrary process and it's possible to give a few suggestions or guidelines. Hopefully these can be helpful, especially if you are not confident in your use of colour.
Meaning of colour
Like fonts, colours contain meaning and can give impressions that should suit the content. Reds convey warmth, blues and greens are cooler. Pastels can give a light, airy feel to a site. Dark, strong colours can encourage a claustrophobic or powerful impression.
As well as these "inherent" meanings, colours and colour schemes can also give certain impressions based on common uses of those colours; for example, pastels might suggest hospital walls, and dull "earth colours" (greens, browns) can hint at a natural setting.
The colour wheel
The most understandable way of describing colour uses three values:
- Hue - this represents the actual "colour", for example red, green, or purple.
- Saturation - saturated colours are stronger. As saturation of a colour decreases, it gets closer to grey.
- Brightness
It's possible to represent two of these (normally hue and saturation) on a colour-wheel. Hue changes around the circle; saturation increases from the middle of the circle (which is grey) to the outside.
Key-colour schemes
One easy way to design a colour scheme is to use black and white, plus a single "key colour" to highlight important information such as hyperlinks, headings, or emphasised text, or to include graphical elements like rules or background shading.
This is quite easy to do well. You simply need to choose one colour which is reasonably appropriate for the site, and make sure not to overuse the highlighting to the point where it's diluted.
Monochromatic colour schemes
You can create a colour scheme using variations of a single hue (with different brightness or saturation). This can be useful, for example, if you need to use a coloured background to set apart some text; you can use a low-saturation, bright (near-white) version of the colour as a background.
Complementary colour schemes
Complementary colours - hues opposite on the colour wheel - can provide a striking, distinctive colour scheme. Sometimes a better effect can be achieved by using not-quite-opposite colours.
Adjacent colour schemes
Using colours near to each other on the colour wheel can produce a more subtle impression. Wider ranges of colours give a more dynamic, striking effect.
Lots and lots of colours
In general it's a good idea to restrict the number of colours used (as with fonts). However sometimes you need to use many colours (perhaps five or more), usually if you decide to colour-code sections of the site.
If you do this, you can usually avoid unpleasant clashes with several techniques:
- Restrict the varied colours to small areas of the screen, and keep other parts of the screen neutral (black, white, and greys).
- Use low-saturation colours (pastels or dark colours) for the colour-coding, because they are weaker.
Colour readability
Backgrounds
Most Web sites look best with a white background and black text.
If choosing different colours, it's important to be sure that the contrast between colours is sufficient that reading is easy.
- Be careful of using similar colours (for example, light and dark blue).
- Avoid background graphics since these are often rather "busy" and distract the eye from text.
- Don't use a black background. If you must use a dark background, choose a fairly dark colour (or dark grey) instead; although this has slightly lower contrast than (for example) white on black, it is easier to read.
Obviously these rules apply to main text. Headings and other display text can be more varied.
Distraction
If you use particularly striking colours or colours that often indicate warning (for example, yellow on black), even for small areas of text, these may distract attention from the main text. Be careful not to create too many strong, distinctive colour effects that draw the eye in this way.
Web colours
Colours on the Web are not specified in terms of hue, saturation, and brightness, but in terms of red, green, and blue. They are also given in a hexadecimal numbering system.
Some Web sites will help you work out colour codes, or you can obtain them yourself. To initially choose colours, it's best to work within a graphics program so that you can use the more logical HSB selection.
RGB
Colours on the Web are usually specified as mixtures of red, green, and blue. This is the way colours are actually created on computer displays, but it isn't a very convenient way to think about colour or to develop colour schemes: hue, saturation, and brightness (with the colour wheel concept) are more natural for that purpose.
RGB values range from 0 to 255, with 255 meaning "full brightness" and 0 meaning "none". For example, if red, green, and blue values are all zero, the resulting colour is black. 255,255, and 255 produces full brightness of all three colours, which then mix to give white. 255,0,0 would be bright red; 128,0,0 would be red at approximately half the brightness.
Choosing colours
You can choose colours using HSB selection (or picking by eye) in a graphics program. Most graphics programs will then be able to show you the RGB values (often using an eyedropper tool).
Hexadecimal colour codes
On the Web, colours are specified as hexadecimal numbers (base 16, in the same way that decimal numbers are base 10).
Specifying a text colour within a stylesheet looks something like this:
color: #rrggbb;
where rr, gg, and bb are two-digit hex numbers controlling the amount of red, green, and blue.
You can work out a hex number from a decimal number using the following method:
- Divide the number by 16, taking note of the result and also the remainder. (Example: 139 is 8 16s with a remainder of 11.)
- The first digit of the hex number is the number of 16s. If it would be two decimal digits (i.e. 10-15) you need to write it as a letter; "a" is equivalent to 10, "b" to 11, and so on. (Example: 8)
- The second digit is the remainder, written in the same way. (Example: b)
- Our example, 139, is "8b" in hex.
There are utilities available on web pages that can do this conversion automatically.
Web-safe colours
Some older computers can only display 256 colours on screen at a time. Of these, 216 are used for web display (in Netscape Navigator). Any colours that are not in this 216 will be replaced by the nearest equivalent.
"Safe" colours that remain the same even on 256-colour displays are those with hex colour values of 33,66,99,cc, or ff for all three digits.
It is no longer really necessary to stick to these colours (relatively few people are stuck with that kind of display now), but you should try to test your pages using Netscape in 256-colour graphics mode just to make sure that none of the colour shifts are critical.
Consistency
Consistency is very important in graphic design. Any departure from consistency tends to indicate some kind of meaning. You can take advantage of this to convey information (e.g. highlighting a particular on-screen element), but you should be careful to avoid unintentional inconsistency.
Colour consistency
As discussed, all pages on the site should share a consistent colour scheme. Colour should be used consistently on all pages; if on one page, titles are a particular colour, then they should be that colour on all pages (unless there is a particular reason why not, such as colour-coding for sections).
Font consistency
As mentioned last time, there should only be a few fonts on the site, and each font should be used for a consistent purpose. For example, all level-one headings should generally be in the same font.
Positional consistency
Graphical elements tend to be "lined up" with each other where appropriate. For example, the top of a news story, and the top of a related photograph, might be lined up.
This also applies between different pages. If the left margin on one page is 100 pixels, it should be 100 pixels on other pages too.
Generally, you can achieve this kind of design consistency by sketching a grid-based design.
Graphical consistency
Sites also look more professional if they are graphically consistent. For example, if a site uses a certain graphic for bullet points, then this should be consistent. Many sites use a graphical motif to give a more distinctive design, with regular repeated elements. (For example, all pages on this site contain a variant of the 'good Web sites' logo from the title page.)
Layout sketching
Trying to design a web page directly in an HTML editor usually results in problems. It's better to consider the visual design of the page first, before coding it. You can do this in a drawing program or by sketching on paper.
Often people sketch a rough "grid" that indicates where elements will be placed on a page. This same grid will apply to all similar pages.
When you have sketched a page, you can use the design to better imagine the site's navigational facilities, location information etc., and re-evaluate those aspects as well as the site's visual design. You can do repeated sketches until the result is good enough.
Images
Using images (photographs, drawings, etc.) can add some interest to a site. However it is not essential and many good-looking sites do not use images like this. Any images used should be appropriate to the content of the page, which means that borrowing images from other Web pages (usually illegal) or from free image libraries is not usually a good idea.
Creating appropriate images
Images should be included on a site to serve a purpose - either purely functional (for example, a picture of the organisation's building) or contributing more subtly to the page's meaning (for example, a stock photograph of two people talking, to indicate that a company is friendly and communicative).
Generally this means that images have to be specially created for a site, or else carefully chosen from high-quality image libraries.
Images should also fit in with the site's colour scheme and general graphical style. For example, if a site has a hard-edged, ultramodern look, then friendly pencil-sketched cartoons are likely to be inappropriate.
Use of "borrowed" elements
Some people use "standard" pictures or graphic elements, e.g. from free libraries, because they think it will liven up a site. This generally looks bad for several reasons:
- The pictures are not usually very appropriate for a site's content, because they were not designed specifically for it. Normally they are obviously out of place and serve no purpose.
- Such pictures tend to be of low quality.
- If several pictures from different sources are used, they will not have a consistent style.
- The pictures may not fit in with the site's colour scheme, graphic navigational elements, etc.
A few page creation programs come with templates that can be used to add some kind of graphical style to a page. This is also a bad idea for all the same reasons.
Summary
Consistency
Consistency is vitally important in all areas of graphic design. Any lapses from consistency will tend to create a meaning. This can be used intentionally (e.g. the currently-selected section title could be highlighted in a bold font or in a different colour), but it should be avoided at other times.
Colour schemes
You should choose a colour scheme for the site and stick to it. Colour schemes can be quite simple, with only a single colour plus black and white, or more complex. It's important that your main text is easy to read, which usually means sticking with black on white or something similar.
Images
Any images used on a page should add to the content or style of that page, and fit in with the colour scheme etc. They should be appropriate for the page; arbitrarily-chosen images that are simply there to make the page "more interesting" just look amateur. For this reason, most good images are created or very carefully chosen specifically for a site.