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.

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