1. Web design principles

2. Surface plane:
Visual Design

3. Surface plane
Skeleton plane
Structure plane
Scope plane
Strategy plane

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

5. Laws of gestalt theory

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

8. 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.

10. Law of symmetry
• we tend to perceive objects as symmetrical
shapes that form around a centre.
CSC Finland's logo

11. Symmetric balance

12. Asymmetric balance

14. Law of continuity
• Items arranged on the page in alignment are
perceived as belonging together.

15. 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.

17. Use of contrast
No contrast
cluttered
Key elements
stand out

18. Use of whitespace

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

21. Law of common fate
• Objects that move
together are
grouped together
by the brain.
Walking Person ->
http://vimeo.com/2020930

22. 3 basic layouts

23. 1: Left column navigation

25. Looking room

26. 2: Right column navigation

27. 2: Right column navigation

28. 3: Three column layout
Header
Footer

30. Page grids

31. Page grids

32. Page grids

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

34. Page grids
Advantages:
• Ease of organization
• Economy
• Ease of communication

35. Example:
Iterative design
Squared can be the grid

36. Alternative: rule of thirds

37. often the most interesting and dynamic
compositions are those where the primary
element is off center

38. Using triangles to move elements off centre

39. maintaining visual balance between
the corner elements

40. consistency

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

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

43. “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

44. Style guide =
A document that defines every aspect
of a site’s visual design

45. • 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

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

47. Sources
• http://www.interaction-
design.org/encyclopedia/gestalt_principles_of_form_perception.ht
ml
• 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