OUGD504 - Design for Screen - Design for Screen Principles

Colour

Where the application of colour to screen based design is concerned, there are multiple options available dependant on the range and accuracy required - these being:

• 5 digit hexadecimal code - '#' followed by 5 digits, being letters and numbers. These are typically web colours.
• 3 digit hexadecimal code - similar to the above however providing a smaller range of colour.
• RBG - Red, green and blue - the values of light a screen uses to create colour. Details of each colour quantity provide colour information. e.g - 100% red = (255, 0, 0) [RGB].
• RGBA - Red, green, blue and alpha channel. More advanced proving opportunity for use of altered opacity/transparency. e.g. 50% opaque red overlay = (255, 0, 0, 0.5)

FACT - Blue is the most commonly used colour on the internet.

Typography

When designing for screen, a point size of 12 is the smallest a designer can use before legibility issues would ensue.

Web/screen safe fonts

The fonts that are most safe to use are:

• Arial / Helvetica
• Times New Roman / Times
• Courier New / Courier

Alternate options that work cross-platform are:

• Palatino
• Garamond
• Bookman
• Avant Garde

Fonts that work exclusively on Windows and MacOS:

• Verdana
• Georgia
• Comic Sans MS
• Trebuchet MS
• Arial Black
• Impact

Grids

For larger screens, Massimo Vignelli and other masters of design say a 12 column grid should be used to create and produce and broad range of layouts while still maintaining consistency.