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