504 - Design for Screen - Processes and Procedures

For the brief it is vital that I considered the processes and procedures involved in designing for screen, as a lot of the terminology and rules that have to be considered are new to me and are varied from design for screen. For this part of the brief I looked at different elements that may inform my design decisions for designing for screen such as typographical elements like font use and line length, icons, colours and grids.

For line length, generally speaking, shorter line lengths are better than longer line lengths and optimal lengths are given as 35 - 75 characters per line. In studies of legibility and line length, a number of inquiries have demonstrated that longer lines can provide better legibility than short lines while most tend to suggest that text is read more efficiently when presented in a compact fashion. Most browsers, however, enable users to choose the length of the displayed line so readers are often able to create a line length that suits themselves.

The following guidelines provide some general rules about font and size for screen designers.

- Minimum 12 or 14 point size. For example, if the font has relatively small characters compared to other fonts of that size (e.g., Times), choose 14; if the characters are relatively large (e.g., Bookman), 12 pt may be better.
- Use plain (Roman) style, rather than bold, italic ,outline, shadow, or other style sans-serif or with serifs that are not too fine to render well on-screen
- Use a proportional font (unless it is necessary to choose a non-proportional font for some reason)
- For headings and titles on-screen, a general guideline is to choose a font with the following characteristics: 18-36 point size (assuming 12- or 14-point body text)

There are many options for colour in modern Web applications. Some designers recommend that screens should be designed in shades of gray, black and white first, with colour built in afterwards. The reasons for this are as follows:

- Many people suffer from some type of colour deficiency ranging from weakness in certain colours, mainly red and green, to full loss of colour (it is estimated that 8% of the population experience some type of colour deficiency)
- Older users can often have some problems discerning and perceiving colours
- The monitors that are used to access Web pages may have differing colour capabilities which can lead to unexpected variations in colours.

Grids and tables can be used to establish that certain areas of the screen are to be used for specific purposes (eg. navigation buttons or hyperlinks are found on the top, bottom or left side of the page, text information is placed in the centre half of the screen with white space found on either side). Since HTML makes no allowances for margins or white space, tables/grids with invisible borders have to bee used for designers to construct their layouts.

Icons are very useful when designing navigation aids, advantages of icons include:

- To help users work smarter by improving productivity and reliability (road signs can read at twice the distance and half the time as word sign);
- To represent visual and spatial concepts such as shape, colour, position, angle, size, texture, and pattern
- To save space in crowded screen displays
- To speed search (we can recognise icons much more quickly that reading a list of words)
- For better recall and immediate recognition
- To allow illiterate or semi-literate users to function more easily
- To increase global access to a web page or multimedia product