WebCT Design

1
WebCT Design

• Planning

2
Main Elements of Design

• Visual Elements
• colour
• contrast
• brightness
• on-screen text
• readability
• Others include
• space
• balance
• layout

3
Colour Details

• Colour Terminology
• Hue
• Wavelength of light reflected from or
  transmitted through an object
• Identified by colour red, orange, green
• Location on the standard colour wheel
• degree between 0 and 360

4
Colour Details (Continued)

• Saturation
• Strength or purity of the colour
• grey in proportion to the hue
• Decreases towards centre of Standard colour wheel
• Brightness
• Relative lightness or darkness
• 0 (black) to 100 (white)

5
Legibility

• Readability of Various Colour Schemes

Coloured text against a black background
Coloured text against a white background
Courtesy of Mick Walkedan IT Services
6
Legibility (continued)

• On a Black Background
• Coloured text is harder to read
• Light colours are much easier to read
• Blue text is near unreadable
• Black is invisible.

7
Legibility (continued)

• On a White Background
• Black test is easiest to read
• Blue is next best
• Yellow text is very hard to read
• White is invisible
• Summary
• The same text shown against a white
• background gives a reversed order
• of readability

8
Readability

• Contrast ratio at least 51 (textbackground)
• Coloured text larger and/or thicker than
  black-on-white equivalent
• Select font carefully

The black on white message is very clear.
The green on cyan is very hard to read.
Courtesy of Mick Walkedan IT Services
9
Readability (continued)

• RULE (1)
• For readable text (or graphics) always provide a
  significant lightness difference between the
  information and the background.
• A significant number of users will have defective
  colour vision.

10

• Text and Background Colour
• Saturated red/blue combinations exhibit
  Chromo-stereopsis
• (red and blue images appear to be on different
  planes)

11

• Text and Background Colour (continued)
• RULE (2)
• Do not use blue text on a red background or vice
  versa
• RULE (3)
• Use coloured backgrounds with neutral text
• Use coloured text on neutral background (white,
  black or grey)
• black or white text on a coloured background

12
Layout and Colour

• Plan layout carefully
• Consider
• Content
• Navigation
• Spatial and tonal design
• Colour
• Target audience
• Mood

13
Layout and Colour (continued)

• Conspicuous Colour
• RULE (5)
• Limit highlight colours
• Use one consistently

When I use a word. Humpty Dumpty said in rather
a scornful tone, it means just what I choose it
to mean (Lewis Carroll).
Courtesy of Sally Firmin
14
Layout and Colour (continued)

• Conspicuous Colour
• RULE (6)
• Keep number of colours used to a minimum
• Maintain contrast between icons or text and
  background

Courtesy of Sally Firmin
15
Layout and Colour (continued)

• Number of Colours
• RULE (7)
• Use only a few colours on any screen
• Application dependant- eg advertising
• Maximum 4 colours
• Complementary Colours
• red and green
• yellow and blue
• Avoid
• red and yellow
• green and blue

16
Contrast

• Smooth Contrast
• Black makes colour and white appear luminous.
• White highlights colour and black
• Grey makes colour appear more colourful
• Contrasting Colours
• black and white
• black and yellow
• blue and white
• grey and white

17
Brightness

• Brightness Varies
• Background colour varies colour brightness
• Stepped contrast drop
• black border, blue or grey background and white
  lettering rather than white on black

Courtesy of Sally Firmin
18
General Principles for Colour

• Avoid
• Using colours for no purpose
• Bright colours
• Hot colours
• Too many colours
• Try for
• Consistent meanings for colours.
• No more than 4 colours (except graphics)
• Pale, pastel colours
• An overall style
• Bright contrasting colours for diagrams and
  highlights

19
On-Screen Text

• Text
• Identify Titles, subtitles, headings and text
• Titles
• Strong, simple fonts
• eg. Arial, Tahoma, Verdana
• Stand out
• Accentuated
• Sub-title
• Same font smaller in size, italicised, or in a
  different colour.

20
On-Screen Text (continued)

• General Considerations
• Maximum per screen
• 2 fonts
• 80 words
• Maximum line length
• 10-12 words
• Text
• left justified
• 2 spaces after a full-stop or colon
• Indent
• Minimum 5 spaces
• First line of each paragraph
• Full line space between paragraphs

21
On-Screen Text (continued)

• Body text
• Font
• Small
• Clear
• Simple
• Easy to read
• Arial (for printing)
• Sans serif (electronic medium)

NB Thanks to Sally Firmin for the core
information for this presentation