960 Grid System
   The grid is the most vibrant expression of the ‘will to order’ in graphic design   Grid-based designs brings about st...
   The practice of using a grid to guide design and page layout is nearly a century old   In the 1910s and 1920s, orname...
   Web designers have turned to grid-based design in order to derive beauty from the    innate qualities of the browser a...
   Grids are all uniform   Units are the basic building blocks for a grid   Columns are the grouping of these units tha...
   Grids save time, saves money & reduces frustration   It brings about solid visual & structural balance in a website ...
   All modern displays support at least 1024x768 resolutions.   Despite the many advances in web technology, it’s all ju...
   First step is to establish the basic layout grid with this as a reference one can    determine how the major blocks/el...
   Columns {A single page consist of a header, content, sidebars, footer etc. these    sections can be defined by column ...
   960px wide with a 940px usable are   Two versions: 12 column & 16 column primarily used, also have a 24 column versio...
   24 column grid system can be used for extensive content   Tec Specs for a 24 column version;       10px margin + 30p...
Proudly Presented byLeading Website Design Company
Grid system- cbil360.com
Grid system- cbil360.com
Grid system- cbil360.com
Grid system- cbil360.com
Upcoming SlideShare
Loading in …5
×

Grid system- cbil360.com

875 views

Published on

Useful tutorial about grid system from experts of web design- http://www.cbil360.com/

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
875
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Grid system- cbil360.com

  1. 1. 960 Grid System
  2. 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. 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. 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. 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. 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. 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. 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. 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. 10.  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
  11. 11.  24 column grid system can be used for extensive content Tec Specs for a 24 column version;  10px margin + 30px column + 10 px gutter
  12. 12. Proudly Presented byLeading Website Design Company

×