british columbia institute of technology
comp 1955 | introduction to web interface design
lecture four
agenda
- the surface plane
- colour & typography
- graphic design principles
- readings
the surface plane
- skeleton plane was concerned with:
- interface design - the arrangement of elements to facilitate interaction
- navigation design - the arrangement of elements to enable movement through the site
- information design - the arrangement of elements to communicate information
- the surface plane is concerned with how these arrangements are presented visually:
- design decisions should support decisions made in previous planes
- design should help to clarify distinctions in architecture
- users should have a clear understanding of functional and content options
- important elements should draw the eye:
- design of the page encourages the eye to flow smoothly around the page
- provides a guided tour of what's available without unnecessary detail
- visual techniques allow us to attract attention:
- contrast - visual attraction
- repetition - unity
- alignment - uniformity of layout
- proximity - reduce clutter
- a successful design is a system of well-designed objects that operates as a cohesive whole
colour, typography & graphic design principles
- general guidelines for using colour:
- too little colour can be boring or dull - too much can be garish, confusing
- try to establish a colour scheme: a consistent system of matching hues, or non-matching hues used in a consistent fashion (different colours for different sections)
- use your lightest colour as the background for body copy
- use intense colours to attract the eye, but use them sparingly
- avoid using too many different colours
- try using colour schemes inspired by nature
- keep in mind that colours can convey meaning:
- red = warm
- blue, green = cool
- pastels = light, airy
- dark = powerful, oppressive
- ensure that there is enough contrast between your foreground and background colours
- use colour consistently across all pages (repetition)
- draw colour schemesfrom imagery associated with the site (logos, photographs, subject matter)
- colour, typography & graphic design principles from Andrew Mundi (SWF)
- aditional tips for effective web design from yours truly (PPT)