Grid Systems: Building Blocks to a Better User Experience

4,861 views
4,597 views

Published on

A structural design method benefitting both the designer and the end-user, grid systems have been used for generations in print design, architecture and urban planning to lay out and optimize spaces for readability and comprehension, wayfinding and navigation, utility and usability.

As a framework for screen-based design, grids enable efficiencies in the planning, execution and presentation of UIs and content and imparts a refined aesthetic and sense of order improving perceived usability and intuitive behavior.

Published in: Design, Technology

Grid Systems: Building Blocks to a Better User Experience

  1. 1. Presented by:Andrew Klein &Dustin DiTommaso Grid Systems Building Blocks To A Better User Experience
  2. 2. Grid Systems improveusability and inform yourdesign decisions.
  3. 3. Interaction DesignDesigning Systems / Screens / Modules / Controls
  4. 4. Grid DesignGrid System / Framework / Templates / Modules
  5. 5. ClarityEfficiencyEconomyContinuity
  6. 6. MultipleSectionsMaintainingContinuity
  7. 7. Grid DesignGrid System / Framework / Templates / Modules
  8. 8. “Attractive things work better.”– Don Norman
  9. 9. “…the user may be strongly affected by the aesthetic aspect of the interface even when they try to evaluate the interface in its functional aspects…”
  10. 10. Solve problems once Improve workflow Add new content consistentwith the overall vision Facilitate collaborationamong designers
  11. 11. What is a Grid?
  12. 12. Columns
  13. 13. Gutters
  14. 14. Margins
  15. 15. Baseline Grid
  16. 16. Flowlines
  17. 17. Modular grid
  18. 18. Fields &Spatial Zones
  19. 19. ProportionalSystems
  20. 20. Rule of Thirds
  21. 21. MathematicalLogic
  22. 22. Golden Section
  23. 23. Guiding Principles to consider:1. A grid should focus on problem solving first and aesthetics second   2. The simpler the grid, the more effective
  24. 24. Sketching
  25. 25. IterateEvaluateResolve
  26. 26. Sketching
  27. 27. Sketching
  28. 28. Digitizing
  29. 29. Use a grid system to increase usabilityby creating more aesthetic compositionsthrough crafting a well consideredframework on which to build a systemof screen templates
  30. 30. ReferencesDesign Elements: A Graphic Style Manual Timothy SamaraMaking and Breaking the Grid: A Graphic Design Layout Workshop Timothy SamaraLayout essentials: 100 design principles for using grids Beth TondreauThe influence of prototype fidelity and aesthetics of design in usability tests: effects on userbehaviour, subjective evaluation and emotion. Sauer J, Sonderegger A.http://www.ncbi.nlm.nih.gov/pubmed/18691696http://usabilityfriction.com/2010/03/30/aesthetic-usability-effect/http://www.slideshare.net/kylemeyer/grids-in-modern-web-designhttp://www.slideshare.net/fluxus/understanding-interaction-design
  31. 31. Resourceshttp://960.gs/http://gridulator.com/http://grid.mindplay.dk/http://www.apple.com/downloads/dashboard/calculate_convert/goldenratiocalculator.html
  32. 32. Thank you,Andrew Klein Dustin DiTommasoandrew@madpow.net dustin@madpow.net @DU5TB1N

×