Transcript PowerPoint Presentation - SM5312: Web Design Basics

Web Design Principles
Nick Foxall
SM5312 week 2: web design
1
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
2
Visual Design for Usability
QuickTime™ and a
TIFF (Uncompressed) decompressor
are needed to see this picture.
SM5312 week 2: web design
3
Visual Design for Usability
QuickTime™ and a
TIFF (Uncompressed) decompressor
are needed to see this picture.
SM5312 week 2: web design
4
Gestalt Principles
QuickTime™ and a
TIFF (Uncompressed) decompressor
are needed to see this picture.
SM5312 week 2: web design
5
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.
TIF
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.
SM5312 week 2: web design
QuickTime™ and a
TIFF (Uncompressed) decompressor
are needed to see this picture.
6
Design Chaos
Failure to observe basic
Gestalt principles will result
in design chaos like this.
Or this:
renttoownrealestate.com
QuickTime™ and a
TIFF (Uncompressed) decompressor
are needed to see this picture.
SM5312 week 2: web design
7
Navigation Bars
Common types of navbars, such as tabs…
and multi-level lists…
…owe their concepts to Gestalt principles.
SM5312 week 2: web design
8
Visual Consistency
Visual coherence or
consistency in type
may seem obvious.
Monday
Heavy Rain
Tuesday
Heavy Rain
Wednesday
Heavy Rain
But notice the
confusion in the mind,
created by typesetting
“Heavy Rain” in
different fonts for
each day of the week.
Thursday
Heavy Rain
Friday
Heavy Rain
Saturday
Heavy Rain
Sunday
Heavy Rain
SM5312 week 2: web design
9
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
10
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 a
TIFF (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
11
Colour
SM5312 week 2: web design
12
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
13
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
14
The effect of Background Colours
QuickTime™ and a
TIFF (Uncompressed) decompressor
are needed to see this picture.
SM5312 week 2: web design
15
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
16
Colour Combinations
The same colour can also be perceived differently when
viewed against other colours.
SM5312 week 2: web design
17
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
18
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.
SM5312 week 2: web design
19