Grid system introduction


Published on

Introduction to grid system in web designing.

Published in: Design, Technology

Grid system introduction

  1. 1. Grid Systemin web design Multimedia Design
  2. 2. Instructional Goals• Understand about grid system in web design• Understand about CSS framework in web design• Apply grid system in web design
  3. 3. Designing Grid Systems for WebRatios are at the core of any well designed grid system. Some­times thoseratios are rational, such as 1:2 or 2:3, more complex ratios, such as thosebased on the Golden Section (1: 1.618), are called irrational ratios.The MeasurementsThe web designer is using fixed measurements, pixels mostly, toconstruct the grid and to position elements within the grid structureand a canvas which is based on a fixed size.The CanvasThe canvas size for fixed grid design on the web is determined by thebrowser window size, which is in turn determined by the user’s screenresolution. So, a designer should design to minimum requirements tomeet the mostly user’s need.
  4. 4. Fixed vs. Flexible or Fluid DesignFixed width designs are, well, just easier to produce. The designer has controlover the measure, and therefore the legibility (until the user increases ordecreases the font size that is). Flexible width designs scale to the user’s resolution, and therefore the browserwindow. There is less empty space, typically at the side of fixed width designs.However, they both also have the down sides such as fixed layouts generallyscale badly and flexible layouts tend to look very wide and short.
  5. 5. Fixed DesignWe begin by applying ratios to this canvas, in the same way we’ve done withdesigning grid system for print. This example uses a fix grid and sits happilybelow 760px wide.Once the grid sets up, then used photoshop to comp together the designspositioning any elements exactly on the grid lines. The grid was designed intially for acontent and navigation area based on the Rule of Thirds, the dimensions of which are250px and 500px respectively. The content area is then sub­divided into two 250pxcolumns. 
  6. 6. GuttersGutters are the gaps in between columns. They are there so text, or image, fromdifferent columns don’t run into each other.Generally the columns we create, using Web Standards, are ‘divs’ which are givenwidths and positioned and styled using CSS.
  7. 7. Creating The DesignThe thing about designing to grids is that in order for the grid to work you mustconsistently align items on the grid lines.The bulk of the design work, if you exclude sketching with a pencil, is done inPhotoshop. First of all, take great care in drawing the grid accurately, to the pixel,and then overlay content elements ensuring the alignment is precise.
  8. 8. From Photoshop to BrowserOne of the most useful ‘tools’ for creating pixel-perfect grid systems for the web isusing a grid as a background image element on the body tag.Using the grid designed in photoshop, save it out as a gif and then apply thatto the background of the body tag. This provides you, throughout the build ofthe site, the grid so you can align all the content elements accordingly.
  9. 9. Flexible DesignI’ll construct this adaptive grid using the Golden Section, which is an irrationalratio-1:1.618. So, first off we construct a simple two column grid system with thecontent areas being defined by the Golden Section ratio.
  10. 10. In order for a grid to be adaptive, we have to use scalable units of measurementsuch as 100% or Ems. Then, convert the column width ratio’s to percentages,which gives us 61.8% for the main column and 38.2% for the right column.
  11. 11. Constructing The Grid in CSSHere’s the CSS code including all the global stuff such as links, typographic stuffand general body stuff which is applied to a pretty basic XHTML structure.For those who can’t be bothered going through this code, here’s the example.
  12. 12. 960 Grid SystemGrid 960 is a CSS Framework that enables developers to rapidly prototypedesigns. They are excellent tools for creating mock ups.Making The GridGrid 960 works by using classes through inheritance. Grid 960 providestwo grids: 12 and 16 columns. The main container is always 960px wide.Every grid cell has a margin: 0 10px. This creates a gutter of 20px. Whencreating a row, the total width of all elements add up to 960. Take a lookat Grid 960′s demo page.
  13. 13. Sample of 12 column grid
  14. 14. Sample of 12 column grid
  15. 15. Sample of 12 column grid
  16. 16. Sample of 12 column grid
  17. 17. Sample of 16 column grid
  18. 18. Sample of 16 column grid
  19. 19. Sample of 16 column grid
  20. 20. Sample of 16 column grid
  21. 21. Reference: Grid System CSS Framework:
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.