SM5312 week 2: web design1 Web Design Principles Nick Foxall

SM5312 week 2: web design2 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 design3 Visual Design for Usability

SM5312 week 2: web design4 Visual Design for Usability

SM5312 week 2: web design5 Gestalt Principles

SM5312 week 2: web design6 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.

SM5312 week 2: web design7 Design Chaos Failure to observe basic Gestalt principles will result in design chaos like this. Or this: renttoownrealestate.com renttoownrealestate.com

SM5312 week 2: web design8 Navigation Bars Common types of navbars, such as tabs… and multi-level lists… …owe their concepts to Gestalt principles.

SM5312 week 2: web design9 Visual Consistency Monday Heavy Rain TuesdayHeavy Rain WednesdayHeavy Rain ThursdayHeavy Rain Friday Heavy Rain SaturdayHeavy Rain SundayHeavy 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 design10 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 design11 Semiotics in Web Design Arrowheads, often used on the web and for a variety of user interfaces, have come to mean different things: 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 design12 Colour

SM5312 week 2: web design13 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 design14 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 design15 The effect of Background Colours

SM5312 week 2: web design16 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 design17 Colour Combinations The same colour can also be perceived differently when viewed against other colours.

SM5312 week 2: web design18 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 design19 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.