Grid Systems Building Blocks To A Better User Experience

Presented by:

Andrew Klein & Dustin DiTommaso

Grid Systems improve usability and inform your design decisions.

Interaction Design Designing Systems / Screens / Modules / Controls

Grid Design Grid System / Framework / Templates / Modules

Clarity Efficiency Economy Continuity

Multiple Sections Maintaining Continuity

Grid Design Grid System / Framework / Templates / Modules

“Attractive things work better.” – Don Norman

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…”

“…

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

What is a Grid?

Columns

Gutters

Margins

Baseline Grid

Flowlines

Modular grid

Fields & Spatial Zones

Proportional Systems

Rule of Thirds

Mathematical Logic

Golden Section

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

1.

2.

Sketching

Iterate Evaluate Resolve

Sketching

Sketching

Digitizing

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

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

Resources http://960.gs/

http://gridulator.com/

http://grid.mindplay.dk/

http://www.apple.com/downloads/dashboard/calculate_convert/goldenratiocalculator.html

Thank you, Andrew Klein andrew@madpow.net

Dustin DiTommaso dustin@madpow.net @DU5TB1N