Designing your website

At skillbank we aim to create simple, effective and practical websites. You need to make some choices about your website, and this page provides the tools to help you make this choice.

Domain name, Key Terms and Titles

To make the most of your website it's important customers can find it, and most business comes from search engines like Google. Spend some time thinking about your company and the services it provides. Imagine you are a potential client - what search terms would you use? Your website needs to incorporate these terms. Page titles are very important, so are the actual words and phrases on your site. Suppose your company offers silver plating. The domain name, the page titles, and the text on each page need to reflect this, and you need to write the copy so that "silver plating" (and other terms potential customers would use) occur frequently. If your business focuses on a local area then this also needs to be clearly stated.

Colour

The colours you choose make a powerful and profound statement about your business. Its best to choose a maximum of three basic colours for your website; they need to be able to coexist without creating tension or visitors will click away. Huge amounts of money are spent by major companies in choosing the right colour for their advertising and you can benefit from this by reading about the psychology of colour here.
Once you have picked a colour or colours this page from Adobe will help you choose a palette of up to five colours for your site.

Type Style

Typography is another important factor in creating a suitable page to represent your business. There are five basic types of fonts: serif, sans serif, cursive, fancy and monospace. When a webpage is displayed the browser uses the fonts installed on your computer, so only by using a narrow range of "web-safe" fonts can you be sure what someone else's browser will show.

 

Images

Images are an important part of any website, but bring their own issues. Generally, unlike text, they will be a fixed size, which can interfere with the flow of text. Responsive images (which change size with the browser window) can become too small for text in them to be read. Images for use on a display need to have good contrast range, but will not normally exceed 1Mpx so images from simple digital cameras are suitable.

Serif Example

ABCDE abcdefghi O 01234

ABCD ijkl 0123

 

Serif fonts have tiny finishing strokes at the ends of the letters. Most printed material - newspapers, books etc - use serif fonts. They convey an impression of being warm, personal, artistic, stately, traditional, conservative or intellectual. They are effective as headings, and for documents intended to be downloaded and printed. They are more readable in small sizes in print but computer monitors are not able to show them clearly, so sans typefaces are generally preferred for body text.

Common web-safe serif typefaces include Times (Times New Roman), Palatino Linotype, and more recently Georgia.

Sans Serif Example

ABCDE abcdefghi O 01234

ABCD ijkl 0123

 

Sans Serif fonts like this one appear technical, cool, clean, crisp, youthful, modern or uncluttered. They are effective as sub-headings, for general text and for text with technical content. However, sans serif fonts can also be viewed as cold and impersonal. Sometimes the space between letters (e.g. hijk) can be small, and it can be hard to distinguish between similar characters l10oO.

Because they display well on-screen they are the best for webpage body text, but can be unattractive and "blocky" in larger sizes.

 

Monospace Example

ABCDE abcdefghi O 0123

ABCD ijkl 0123

 

Monospace fonts are used for displaying program code samples and number values only; each character takes the same amount of horizontal space, so letters and numbers stay lined up. Some letters, especially the i and l, are made to look wider with big serifs.
In reading code its important to be able to distinguish clearly between letters and numbers. When rendered in a sans typeface it can be hard to tell exactly what is written.

Example: 1Ili O0 - the zero and capital O can be particularly hard to distinguish.

When they are used for text they give an irregularly spaced and untidy appearance which can make it harder to read.

 

serif

sans serif

monospace