Presentation8

Web design principles

Surface plane:Visual Design

Strategy plane

Scope plane

Structure plane

Skeleton plane

Surface plane

gestalt laws, layout of design comps, page grids, consistency, style guides, usability issues

Laws of gestalt theory

Law of proximity

• Items in close proximity to one another tend to be grouped in a similar way.

Law of similarity

• Items of similar size, shape or color tend to be grouped together by the brain, and a semantic relationship between the items is formed.

Law of symmetry

• we tend to perceive objects as symmetrical shapes that form around a centre.

CSC Finland's logo

Symmetric balance

Asymmetric balance

Law of continuity

• Items arranged on the page in alignment are perceived as belonging together.

Law of figure and ground separation

• (= Law of prägnanz, or emergence): for a figure or concept to be perceived it must stand apart from the background. Thus some objects must take a prominent role, others fade into the background. In this way, a clear hierarchy amongst page elements can be established.

No contrast

Key elementsstand out

cluttered

Use of contrast

Use of whitespace

Law of closure

• the brain tends to fill in missing information when it perceives an object as missing some of its pieces

Law of common fate

• Objects that move together are grouped together by the brain.

http://vimeo.com/2020930

Walking Person ->

3 basic layouts

1: Left column navigation

Looking room

2: Right column navigation

2: Right column navigation

3: Three column layout

Header

Footer

Page grids

Page grids

Page grids

Grid based layouts can allow for flexibility whilst ensuring uniformity across the site

Page grids

Advantages:• Ease of organization• Economy• Ease of communication

Iterative design

Squared can be the grid

Example:

Alternative: rule of thirds

often the most interesting and dynamic compositions are those where the primary

element is off center

Using triangles to move elements off centre

maintaining visual balance between the corner elements

consistency

external consistency: the site is consistent with the client’s other [off-line] products

internal consistency: different parts of the site adhere to the same design approach

“A successful design is not merely a collection of small well-designed objects; rather, the

objects should form a system that operates as a cohesive, consistent whole.”

Jesse James Garrett, p.150

Style guide =A document that defines every aspect

of a site’s visual design

• Global definitions: design grids, colour palettes, typography and logo specifications

• Local definitions: standards for parts the site (e.g. ‘product catalogue’)

• …• …• Interface elements• Navigation elements

Example:

http://www.bbc.co.uk/guidelines/futuremedia/desed/visual_language.shtml

Sources

• http://www.interaction-design.org/encyclopedia/gestalt_principles_of_form_perception.html

• http://articles.sitepoint.com/article/develop-style-guide-site• http://www.alistapart.com/articles/writingainterfacestyleguide/

• Mullet, K. and Sano D. (1994) Designing Visual Interfaces: Communication Oriented Techniques, Prentice Hall