SM5312 week 2: web design1 Web Design Principles Nick Foxall.
-
date post
21-Dec-2015 -
Category
Documents
-
view
213 -
download
0
Transcript of SM5312 week 2: web design1 Web Design Principles Nick Foxall.
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.