Grid System for Web DESIGN

960 Grid System

Introduction The grid is the most vibrant expression of the ‘will to order’ in graphic

design

Grid-based designs brings about strong visual and structural balance

Offer more flexibility and enhance the visual experience of users

Consistency of the page enhances the experience

Adds an order to things and control the user’s behavior towards the site

Grid can also be described as a consistent system to place objects on a

surface

History The practice of using a grid to guide design and page layout is nearly a

century old

In the 1910s and 1920s, ornamental design gave way to rationalism and

new objectivity

This shift in design was part of a much larger movement towards function

over form

After World War 2, a number of graphic designers, influenced by the

modernist ideas of ‘The New Typography’, started questioning the relevance

of the conventional page layout of the time.

They devised a flexible system to help designers achieve coherency in

organizing the page

Modernists looked at building a new aesthetic by deriving beauty from the

innate qualities of machines which brought in standardization

Today Web designers have turned to grid-based design in order to derive beauty

from the innate qualities of the browser again bringing in standardization

16 years after the invention of the web, we are finally embracing a century-

old design philosophy the Grid Based Design and that too on Web

What is a grid? Grids are all uniform

Units are the basic building blocks for a grid

Columns are the grouping of these units that form the grid. Column may not

necessarily be uniform

Grids work at 2 levels. At the units level of cells (eg.: 20 px X 20 px) and at

column level (eg.: 3 columns, 4 columns right upto 24 columns for more

flexibility)

Why use a Grid System? Grids save time, saves money & reduces frustration

It brings about solid visual & structural balance in a website

Grid based layout structures offer more flexibility and enhances the visual

experience of a user (UX)

A user can follow the consistent structure easily.

A developer can update the layout in a well thought out consistent way

A balanced and consistently implemented design will increase readers

confidence in your site

Embrace constraints All modern displays support at least 1024x768 resolutions.

Despite the many advances in web technology, it’s all just rectangles

Understanding someone else’s design is much easier when a standard grid

system is used

How? Making grids on the layout First step is to establish the basic layout grid with this as a reference one

can determine how the major blocks/elements will regularly occur in your

page

You often can’t do much about the vertical content as it is dynamic these

days. The focus is usually on the horizontal rhythm

Most grid systems contain 12 & 16 columns however one can also have a

24 column grid system for extensive content

Elements of a grid system Columns {A single page consist of a header, content, sidebars, footer etc.

these sections can be defined by column width. (eg.: the header is eight

column wide)}

Margin {A margin or padding are used to create space alongside the

canvas (canvas; area used to design)}

Gutter {A gutter provides margin between the canvas}

Grid system sample

Tec Specs for 960 Grid System 960px wide with a 940px usable are

Two versions: 12 column & 16 column primarily used, also have a 24

column version

These can be implemented separately or simultaneously

Each column has a 10px margin on the left and the right, which created a

20px gutter between columns

12 Column Grid

16 Column Grid

24 Column Grid 24 column grid system can be used for extensive content

Tec Specs for a 24 column version;

10px margin + 30px column + 10 px gutter

Thank You!

Proudly Presented byLeading

Website Design Company

http://www.cbil360.com/