SM5312 week 2: web design 1

Web Design Principles

Nick Foxall

SM5312 week 2: web design 2

Visual Design for Usability

Usability is concerned with function, structure, accessibility, and visual presentation.

Neglect of visual design is one of the main factors that lead to Web sites being hard to use.

Familiarity and memory play an important role in usability; visual design can ensure that page elements are familiar or memorable.

Page elements must be presented in a way that makes each one easy to find, identify or use.

SM5312 week 2: web design 3

Visual Design for Usability

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

SM5312 week 2: web design 4

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

Visual Design for Usability

SM5312 week 2: web design 5

Gestalt Principles

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

SM5312 week 2: web design 6

Gestalt Principles

Gestalt principles of visual design are derived from theories about how the human brain organizes visual information.

The perception of patterns and structures is determined by the grouping of objects in a visual field.

Proximity, similarity, symmetry, the distinction between figure and ground, and closure all contribute to our perception of grouping.

Closure is the brain’s ability to infer a complete visual pattern or image from incomplete information.

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

SM5312 week 2: web design 7

Design Chaos

Failure to observe basic Gestalt principles will result in design chaos like this.

Or this: renttoownrealestate.com

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

SM5312 week 2: web design 8

Navigation Bars

Common types of navbars, such as tabs…

and multi-level lists…

…owe their concepts to Gestalt principles.

SM5312 week 2: web design 9

Visual Consistency

Monday Heavy Rain

Tuesday Heavy Rain

Wednesday Heavy Rain

Thursday Heavy Rain

Friday Heavy Rain

Saturday Heavy Rain

Sunday Heavy Rain

Visual coherence or consistency in type may seem obvious.

But notice the confusion in the mind, created by typesetting “Heavy Rain” in different fonts for each day of the week.

SM5312 week 2: web design 10

Semiotics

Semiotics is the study of systems of signs.

The relationship between the signifier and the signified is arbitrary, and can only be understood through knowledge of the system within which the sign operates.

Web pages incorporate signs, such as underlining for links, whose meaning depends on convention.

SM5312 week 2: web design 11

Semiotics in Web Design

Arrowheads, often used on the web and for a variety of user interfaces, have come to mean different things:

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

Web designers must rely on a combination of convention, context and user experience to convey the meaning of signs accurately to the user.

SM5312 week 2: web design 12

Colour

SM5312 week 2: web design 13

Web Safe Colour

In the early days of the web, computers could only display up to 256 colours.

A set of 216 “web safe” colours were developed for use in browser display.

Today, this limited colour palette has been rendered somewhat by modern 24-bit computer graphics cards, capable of display up to 16.7 million colours.

SM5312 week 2: web design 14

Colour on the Web

Because of the characteristics of computers, computer monitors and Web pages, precise control over colours is still not possible.

Compare the colours of the same website on the monitor in front of you, with those on a nearby monitor

(or compare a website on a PC, then on a Mac)

SM5312 week 2: web design 15

The effect of Background Colours

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

SM5312 week 2: web design 16

Colour Combinations

Combinations of colour affect the way the size of coloured objects and colour itself is perceived. The same colour will not look the same in every context.

SM5312 week 2: web design 17

Colour Combinations

The same colour can also be perceived differently when viewed against other colours.

SM5312 week 2: web design 18

Tonal Contrast

Good tonal contrast makes pages more accessible and usable, but tonal values are not always easy to see.

Tonal contrast can be checked by converting to greyscale.

SM5312 week 2: web design 19

Colour Affects Response

Colour may influence users responses to Web pages; an individual’s response to particular colours may be emotive and/or determined by cultural conventions, personal taste and fashion.

There is therefore wide personal and cultural diversity among the responses to any particular colour or combination of colours.

However, overriding issues of usability still play a role.