The presentation by Andrew Klein and Dustin DiTommaso discusses the importance of grid systems in enhancing user experience through improved usability and informed design decisions. It emphasizes problem-solving and aesthetics, outlining key principles and elements of grid design, such as columns, gutters, and spatial zones. The document also references various resources and literature on design and grid systems.

1. Presented by:
Andrew Klein &
Dustin DiTommaso
Grid Systems
Building Blocks To A Better User Experience

2. Grid Systems improve
usability and inform your
design decisions.

3. Interaction Design
Designing Systems / Screens / Modules / Controls

4. Grid Design
Grid System / Framework / Templates / Modules

5. Clarity
Efficiency
Economy
Continuity

6. Multiple
Sections
Maintaining
Continuity

7. Grid Design
Grid System / Framework / Templates / Modules

8. “Attractive things
work better.”
– Don Norman

10. “…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…”

11. Solve problems once
Improve workflow
Add new content consistent
with the overall vision
Facilitate collaboration
among designers

12. What is a Grid?

13. Columns

14. Gutters

15. Margins

16. Baseline Grid

17. Flowlines

18. Modular grid

19. Fields &
Spatial Zones

20. Proportional
Systems

21. Rule of Thirds

22. Mathematical
Logic

23. Golden Section

24. Guiding Principles to consider:
1. A grid should focus on problem solving
first and aesthetics second
2. The simpler the grid, the more effective

25. Sketching

26. Iterate
Evaluate
Resolve

27. Sketching

28. Sketching

29. Digitizing

37. Use a grid system to increase usability
by creating more aesthetic compositions
through crafting a well considered
framework on which to build a system
of screen templates

38. References
Design Elements: A Graphic Style Manual Timothy Samara
Making and Breaking the Grid: A Graphic Design Layout Workshop Timothy Samara
Layout essentials: 100 design principles for using grids Beth Tondreau
The influence of prototype fidelity and aesthetics of design in usability tests: effects on user
behaviour, subjective evaluation and emotion. Sauer J, Sonderegger A.
http://www.ncbi.nlm.nih.gov/pubmed/18691696
http://usabilityfriction.com/2010/03/30/aesthetic-usability-effect/
http://www.slideshare.net/kylemeyer/grids-in-modern-web-design
http://www.slideshare.net/fluxus/understanding-interaction-design

39. Resources
http://960.gs/
http://gridulator.com/
http://grid.mindplay.dk/
http://www.apple.com/downloads/dashboard/calculate_convert/goldenratiocalculator.html

40. Thank you,
Andrew Klein Dustin DiTommaso
andrew@madpow.net dustin@madpow.net
@DU5TB1N