Web design and design theory

Content

Content is king to visitors and search engines. That’s why content should never be an afterthought – just something to fill in the white space between images and flashy multimedia presentations. Use informal and active language, be careful with humour and make your content informative.

Fonts and Typography

There are two types fonts to choose from, Serif and sans serif. Serif refers to the little ‘tails’ on a font. An example of this is Times New Roman. Sans serif fonts don’t have the ‘tails’ e.g. the font Ariel. Serif fonts are much easier to read in print as the little ‘tails’ are easier on the eye. For the Web, however, it doesn’t appear to matter and people are able to read both equally well so it’s a matter of personal preference and what suits your site best.

To make sure that your fonts are displayed correctly you need you choose a standard font that is installed on most computers. You can select a second or third font as an alternative in case the local computer doesn’t have your first choice. For example, if we choose Verdana, Arial, Helvetica and sans-serif the computer will look for Verdana first and if this isn’t available it will try for Arial and so on.

Fonts and Typography

There are two types fonts to choose from, Serif and sans serif. Serif refers to the little ‘tails’ on a font. An example of this is Times New Roman. Sans serif fonts don’t have the ‘tails’ e.g. the font Ariel. Serif fonts are much easier to read in print as the little ‘tails’ are easier on the eye. For the Web, however, it doesn’t appear to matter and people are able to read both equally well so it’s a matter of personal preference and what suits your site best.

To make sure that your fonts are displayed correctly you need you choose a standard font that is installed on most computers. You can select a second or third font as an alternative in case the local computer doesn’t have your first choice. For example, if we choose Verdana, Arial, Helvetica and sans-serif the computer will look for Verdana first and if this isn’t available it will try for Arial and so on.

Image Use

There are two main graphic file formats used on the web GIF (Graphic Image File Format) and JPEG (Joint Photographic Experts Group.) They treat picture compression in different ways. GIF format is for 8-bit (256 colour) images or less and JPEG works with 24-bit images. It normally takes 24 bits of data to describe the colour of each pixel on the screen. Eight bits each for Red, Green and Blue. This can give each of these colours a brightness level between 0 and 255 and by mixing them, 16,777,216 colours are possible.

It is generally best to use GIF for graphic images – icons, logos, buttons etc. and JPEG for photographic ones. It is also important to make sure the images are not too large, as it will take a longer time for them to display on the monitor and the viewer may become impatient and move away from your site. The use of Alt Tags (invisible text descriptions of images so that blind people using text readers understand what is on the page) make your site accessible.

Layouts

Traditional layouts were done through HTML and the use of tables. However, since the advent of CSS (cascading style sheets) things have changed.

One of the benefits of CSS is the ability to control page layout without needing to use html markup. CSS layout has a reputation of being difficult for those new to the language. Part of this is due to browser inconsistencies, but also due to a lot of different layout techniques. Today, one is left with little alternative other than to use CSS for an accessible and effective Website.

Colour

First, it’s a good idea to learn about colour. A good place to start is the colour wheel, including primary, contrasting and complimentary colours. A great website to assist in this regard is wellsyled.com.

Secondly, countless books have been written on the subject of colours and their meanings. Keep in mind, however, that different colours have different meanings in different cultures. What might be joyful in one can be sad in another.

On a computer colours are displayed in percentages of RGB (red, green, and blue) light using an additive method. That is, as more of each colour is added, you get closer to white light. Painters, on the other hand, use a subtractive colour method, as you add colours, you get closer to black.