Grids in Web Design

Short presentation on the use of grids in web design

Transcript

1. Grids in Web Design by Gary Pigott
2. Overview • Examine the use of Grids in web design • Concepts behind the use of the Grid System • Benefits of use of grids • Real world example
3. Introduction • What is a Grid? • Design mechanism (street design, architecture, graphic design, and websites) • Architecture – where does the door go? windows? does it make sense? (visually & practically) • Web – content placement framework
4. Basic Wireframe • Typical layout (or anatomy) for a web page • All the right bits – header, nav, content, footer • Layout meets user expectations • Is it a Grid design? • Where is the Grid?
5. Basic Wireframe (contd) • 3 column layout • Page border • Gutters (margins) • Columns = multiple grid units to form containers • Where are the grid units?
6. 960 Grid System Grid unit size = (960 – (2* page border) – ((N-1)*gutter) ) / N e.g. 12 column, with 10px border, 20px gutter => (960 – (2 * 10) – (11 * 20)) / 12 = 60px
7. Sketch Book Grid units: placement not size
8. Expectations • Web conventions • Expect pages to look consistent • All the expected elements in the same place • Consistency = improved user experience • Consistency = improved readability • Consistency = professional • Professional = brand promotion
9. Baseline Grids “a smooth rhythm in the typography within a design” (Brian Miller, Above The Fold)
10. Visual Hierarchy • Outside the Grid • Whitespace
11. Why Use Grids • Grids add order, continuity, and harmony • Grids help users predict where to find information • Grids make it easier to add new content • Grids facilitate collaboration on the design • A tool to help you design a better site
12. Real World Example www.civica.co.uk