The document discusses the 960 grid system, a popular framework for building responsive web designs. It has been used by web designers for over a century to bring order, balance, and flexibility to page layouts. The 960 grid establishes a grid of columns and gutters that allow elements to be placed consistently across pages. It helps designers organize content, save time, and provide a better user experience through a structured visual hierarchy.
2. 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
3. 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
4. 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
5. 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)
6. 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
7. 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
8. 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
9. 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}
10.
11. 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.
13.
14. 24 column grid system can be used for extensive content
Tec Specs for a 24 column version;
10px margin + 30px column + 10 px gutter