Grid Systems: Building Blocks to a Better User Experience
-
Upload
dustin-ditommaso -
Category
Design
-
view
107 -
download
0
description
Transcript of Grid Systems: Building Blocks to a Better User Experience
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 [email protected]
Dustin DiTommaso [email protected] @DU5TB1N