Presentation8

366 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
366
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Mark boulton
  • Mark boulton
  • Emerged from working in golden sections but hard to do.
  • Jason santamaria
  • Jason santamaria
  • Jason santamaria
  • Jon hicks design
  • Advantages
  • Alternative way of thinking.Emerged from working with golden sections but hard to do in practiceimportant compositional elements should be placed along the lines or their intersections
  • Emerged from working in golden sections but hard to do.
  • Mark boulton
  • Mark boulton
  • Presentation8

    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 -> http://vimeo.com/2020930
    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:http://www.bbc.co.uk/guidelines/futuremedia/ desed/visual_language.shtml
    40. 40. 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

    ×