Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this


  1. 1. Web design principles
  2. 2. Surface plane:Visual Design
  3. 3. Surface planeSkeleton planeStructure planeScope planeStrategy plane
  4. 4. gestalt laws, layout of design comps, page grids, consistency, style guides, usability issues
  5. 5. Laws of gestalt theory
  6. 6. Law of proximity• Items in close proximity to one another tend to be grouped in a similar way.
  7. 7. 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.
  8. 8. Law of symmetry• we tend to perceive objects as symmetrical shapes that form around a centre. CSC Finlands logo
  9. 9. Symmetric balance
  10. 10. Asymmetric balance
  11. 11. Law of continuity• Items arranged on the page in alignment are perceived as belonging together.
  12. 12. 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.
  13. 13. Use of contrastNo contrast clutteredKey elementsstand out
  14. 14. Use of whitespace
  15. 15. Law of closure• the brain tends to fill in missing information when it perceives an object as missing some of its pieces
  16. 16. Law of common fate• Objects that move together are grouped together by the brain. Walking Person ->
  17. 17. 3 basic layouts
  18. 18. 1: Left column navigation
  19. 19. Looking room
  20. 20. 2: Right column navigation
  21. 21. 2: Right column navigation
  22. 22. 3: Three column layout Header Footer
  23. 23. Page grids
  24. 24. Page grids
  25. 25. Page grids
  26. 26. Grid based layouts can allowfor flexibility whilst ensuringuniformity across the site
  27. 27. Page gridsAdvantages:• Ease of organization• Economy• Ease of communication
  28. 28. Example: Iterative designSquared can be the grid
  29. 29. Alternative: rule of thirds
  30. 30. often the most interesting and dynamiccompositions are those where the primary element is off center
  31. 31. Using triangles to move elements off centre
  32. 32. maintaining visual balance between the corner elements
  33. 33. consistency
  34. 34. external consistency: the site is consistent with the client’s other *off-line] products
  35. 35. internal consistency: different parts of the site adhere to the same design approach
  36. 36. “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
  37. 37. Style guide =A document that defines every aspect of a site’s visual design
  38. 38. • 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
  39. 39. Example: desed/visual_language.shtml
  40. 40. Sources• http://www.interaction- ml••• Mullet, K. and Sano D. (1994) Designing Visual Interfaces: Communication Oriented Techniques, Prentice Hall