RESOURCES  UNSW EDUCATIONAL DEVELOPMENT & TECHNOLOGY WEBSITE
Flexible EducationWeb & Media ProductionWebCT @ UNSWLearning Resource Catalogue
Web & Media Production
UNSW Educational Development & Technology Centre RESOURCES home RESOURCES home
 
    

 

Producing Content for the WebWeb Design & ConstructionAccessibility in Web Design

Visual content

Issues for visual content
Image production
Image acquisition
Image manipulation
bullet Image creation

Design principles & using colour

Transparency

  • Design elements should be 'transparent' ­ that is, enhance the functionality of the site without being intrusive or distracting.

Less is more ­ dare to be boring

  • Avoid overuse of special effects such as drop-shadows, bevelling and texturing. Apart from the potential for 'effect overkill', they will add considerably to your file sizes.
  • Avoid using multiple fonts, or fancy display fonts, or 'warped' fonts.
  • Leave space in your design ­ every spare centimetre does not have to be filled in.

Consistency matters

  • Maintain a look, colour scheme and style consistent with related material.
  • Follow established web conventions for the placement and style of elements such as navigation ­ it will help to make your design more transparent for the user.

Know your user

  • Design for the lowest common technological denominator ­ using a two year old browser on a four-year old computer with a 14" screen and dial-up access, unless you know for sure that users will be more technologically up-to-date (accessing material in computer labs etc).

Using colour

Appropriate

  • Select the most appropriate colours by deciding what the visual look of your site/course should relate to. School logo colours? Program identity? Colours should ideally have some logical link to the course content or provider.

Harmonious

  • Use colour harmony principles to create a pleasant visual experience. All the colours of the components - the navigation system, banners, buttons, and text - as well as graphics in the content (if they exist), should all work well together.

Functional

  • Use colour to create the most functional user-interface design. For example, use colour to direct the eye to the most important areas on the page.
  • Keep colours minimal - too many colours and shapes make it difficult to focus and find anything. The user's attention needs to be focused on interacting with the content, not distracted by unusual design elements.
  • Ensure adequate contrast between foreground and background elements, particularly when using text. This not only assists legibility on screen, but also promotes accessibility, and allows pages to be legibly printed.

Efficient

  • Convert images to the correct file format. This not only delivers the best colours and the best images possible but it also lowers file sizes and shortens the download time.

Some basic rules are:

  • Use similar colours to minimise distraction, use contrasting colours to grab attention.
  • Use cool, pale colours in the background; warm, dark colours in the foreground.
  • Avoid using complementary colours, particularly with text (eg red text on green button) ­ they severely inhibit legibility.

Summary

  • Design elements should be 'transparent'
  • Avoid cluttering your design by over-using effects and decorative fonts
  • Be consistent ­ follow conventions and conform to established style elements
  • Design efficiently ­ for low-end computers
  • Use colour appropriately and harmoniously, while ensuring adequate contrast for legibility. Keep colours minimal to avoid distraction
  • Save images to the most efficient format.

ACTIVITY
Web colour theory ­ interactive exercises:
http://www.mundidesign.com/webct/webct.html

EXPLORE

Basic colour theory: http://www.colourmatters.com/colourtheory.html

Colour theory for web design:
http://www.wpdfd.com/wpdpal3.htm
http://www.webdesignclinic.com/ezine/v1i1/color/

Graphic design theory:
http://www.usask.ca/education/coursework/skaalid/theory/cgdt/designtheory.htm

ACTIVITY
Graphic design - interactive tutorial: http://www.mundidesign.com/presentation/index2.html

 

 
 
 
 

 

UNSW Educational Development & Technology Centre RESOURCES home RESOURCES home