Designing With Grid-Based Approach

Advertisement

The main idea behind grid-based designs is a solid visual and structural balance of web-sites you can create with them. Sophisticated layout structures offer more flexibility and enhance the visual experience of visitors. In fact, users can easier follow the consistency of the page, while developers can update the layout in a well thought-out, consistent way. However, it’s quite hard to find your way through all the theory behind grid systems: it isn’t easy at all. Some important notions and related key-facts can help to learn basics and keep essential techniques in mind.

And this is what this article is all about. Inspired by Khoi Vinn’s and Mark Boulton’s presentation Grids are Good1, we’ve decided to take a deep look in the articles about grid-based designs. We’ve read through over 50 articles and selected some of the most important and interesting facts web-developers should know about the grid-based approach. Besides, we’ve listed the most useful references, tutorials and tools we found – with precise descriptions of what the articles are about.

Examples of Grid-based design

But first few examples of grid-based designs to make clear what the article is about.

Grid-based Design2

Grid-based Design3

Grid-based Design4

Grid-based Design5

Grid-based Design6

Grid-based Design7

Grid-based Design8

Grid-based Design9

Things You Probably Don’t Know About Grid-based Design

  • “The grid is the most vivid manifestation of the will to order in graphic design. [...] Units are the basic buildung block of a grid. They’re all uniform. Columns are the grouping of units that create the visual structure of the page. They are not necessary uniform.”
    [ Grids are good10 ]
  • “A grid is a consistent system for placing objects. It works on two levels: At the unit level of cells (e.g. 20×20 pixels) and at the column level (e.g. 4 columns).”
    [ Grid-based Layout5211 ].
  • “A balanced and consistently implemented design scheme will increase readers’ confidence in your site. [...] Your first step is to establish a basic layout grid. With this graphic “backbone” you can determine how the major blocks of type and illustrations will regularly occur in your pages. [..] To start, gather representative examples of your text, along with some graphics, scans, or other illustrative material, and experiment with various arrangements of the elements on the page. [...] Your goal is to establish a consistent, logical screen layout, one that allows you to “plug in” text and graphics without having to stop and rethink your basic design approach on each new page.”
    [ Web Style Guide12 ]
  • “One of the larger problems in working with grids in web pages is that you often can’t do much about vertical proportions. Often your content is dynamic, so the best you can do is approximate. [...] So the focus is usually on the horizontal layout, which usually means columns.”
    [ Dave Shea13 ]
  • “On the Web, vertical rhythm – the spacing and arrangement of text as the reader descends the page – is contributed to by three factors: font size, line height and margin or padding. [..] The basic unit of vertical space is line height.”
    [ Richard Rutter1514 ]
  • “In order that typographic integrity is maintained when text is resized by the user we must use ems for all our vertical measurements, including line-height, padding and margins.”
    [ Richard Rutter1514 ]
  • “Designing Grid Systems in Graphic Design, 1. figure out the page size, 2. divide it into a grid, 3. start designing”.
    [ Josef Muller-Brockmann's "Grid Systems in Graphic Design" ]
  • “Use the canonical grid to adjust the sizes and positions of elements across rows. Short elements are extended to begin and end on grid boundaries, while long elements are allowed to span multiple grid units or are shortened to fit within the standard unit. In this way, the grid is merely being used to help establish consistent alignment relationships. [...] For dynamic layouts, identifying the minimum size that can be accomodated by the layout is usually a better solution than trying to recompute the layout for arbitrarily small display sizes.”
    [ Module and Program ]
  • “One of the most effective principles in grid design is called the Rule of Thirds, also known as the golden grid rule. The Rule of Thirds is a technique which is applied by dividing a space into thirds, both vertically and horizontally, creating a grid of rectangles.”
    [ Mark Boulton1716 ]
  • “The Golden Section, Golden Ratio, and the grandiose Divine Proportion are all names for the same thing; a ratio of 1.618. Nodding off? Not yet? Good! Bear with me. Here?s the maths: the Golden Ratio is the ratio between two segments so that the ratio between point ac/bc is 1.618.
    [ Mark Boulton1716 ]. You can also use Phiculator18 for your grids.
  • “The Golden Section is a ratio which is evident throughout the universe as the number Phi. You can use this ratio to good effect in design by making sure that elements of your grid conform to this ratio. Using the Golden Section can ensure a natural sense of correct composition, even though it is based in mathematics it will ‘feel’ right.”
    [ Mark Boulton2419 ]
  • “Grid Structures: Once you have answered most of the questions regarding the content, format and typography, you should begin sketching out grid structures based on the appropriate page sizes and formats. You should first begin by defining the Type Area. The Type Area is the area where your grid will be contained. It is surrounded on all sides by margins and in some cases running heads and page footers, numbers, marginalia, etc.”
    [ Typographic Grids ]
  • “The main principle of the baseline grid is that the bottom of every line of text (the baseline) falls on a vertical grid set in even increments all the way down the page.”
    [ Wilson Miner2120 ]
  • “You can use relative sizes, but it quickly becomes a lot more difficult to maintain as the math becomes more complicated. It’s easy to get 12 out of 18 (just set the line-height to 1.5em), but when you want to adjust the text size but keep the same line-height, the fractions start to get messy”.
    [ Wilson Miner2120 ]
  • Table layouts are great for grid designs. The markup itself reproduces a specific grid, and the tendency is for us to just fill up the boxes with the images, type, and interface elements that make up our design.”
    [ Molly Holzschlag22 ]
  • “Ratios are at the core of any well designed grid system. [..] By using the size of the paper as a guide we can divide using that ratio to begin creating the grid. You can see this through diagrams 1 – 6 that we begin by simply layering division upon division to slowly build up the grid.”
    [ Mark Boulton23 ]
  • “Well designed grid systems can make your designs not only more beautiful and legible, but more usable.”
    [ Mark Boulton2419 ]
  • “Gutters are the gaps in between columns. They are there so text, or image, from different columns don’t run into each other. In grid system design sometimes, depending on what theory you read, gutters are seperate to the columns.”
    [ Mark Boulton282625 ]
  • “The thing about designing to grids is that in order for the grid to work you must consistently align items on the grid lines.”
    [ Mark Boulton282625 ]
  • “One of the most useful ‘tools’ for creating pixel-perfect grid systems for the web is Khoi’s superb idea27 of using a grid as a background-image element on the body tag. To summarise: Using the grid I designed in photoshop, I save it out as a gif and then apply that to the background of the body tag. This provides me, throughout the build of the site, the grid so I can align all the content elements accordingly.”
    [ Mark Boulton282625 ]
  • “In your page layout, you’ve probably set margins. These margins often show up as light solid or dashed lines on the screen. These top, bottom, left, and right margins create a box in the middle of your page. Stop there and you have a single unit grid. Further divide the page into uniform parts and you’ve created a multiple unit grid.”
    [ Jacci Howard Bear3029 ]
  • “Grid units are the primary locations on your page where you will place text and images. They determine placement not necessarily size. That is, if you have a graphic image that is larger than your grid unit, it doesn’t mean you can’t use it. ”
    [ Jacci Howard Bear3029 ]
  • “1, 2, and 3 column grids are common. Each can accommodate lots of text, especially long articles. [..] 4 or more columns offer greater flexibility for publications with text, photos, and other graphic elements and a mix of long and short articles. [..] Grids based on an even number of grid columns can suffer from too much symmetry if text and graphics are confined to individual or double grid columns throughout.”
    [ Grids - Flexible Options31 ]
  • “A grid is made up of vertical and horizontal lines and is the foundation of nearly every type of visual media. The structure is there to shape the content into proportions that are pleasing to the eye.”
    [ Anne Van Wagener343332 ]
  • “To add flexibility you can break the grid down into 10 or 12 columns. Half-columns are a good place to anchor mug-shots, refers, and other info.”
    [ Anne Van Wagener343332 ]
  • “You can have more than one grid. Your front page could be based on a five column grid while inside pages with ads on a six column. There is no one right way.”
    [ Anne Van Wagener343332 ]
  • “The grid is the mannequin and the comp is the pattern. [..] Using the grid-based design comps provided me with units of measurement that I could easily turn into divs for the style sheet. I figure out the areas of content in the same way I would work with a wireframe to block out content and graphics. I come up with a naming scheme for these blocks and turn them into CSS elements. Next, I measure out the blocks of content or graphics in the designer’s comp and record measurements for my style sheet.”
    [ Michael Angeles35 ]
  • “You can use the grid like a wireframe (page schematic) by selecting areas of content and blocking them out, labeling them as you go.”
    [ Michael Angeles36 ]
  • “Basic Outline for Grid-based Design: Content, Audience, Illustrations / Photography / Icons, Format, Typography.”
    [ Feeling your way around grids5037 ]

Articles about Grid-based Design Approach

  • Columns & Grids38
    Grid-based Design39Dave Shea talks about the difficulty of grid systems in web pages and the compromise of columns.
  • Subtraction: Oh Yeeaahh! – “Grids Are Good”40
    Download the “Grids are Good” presentation (8 MB PDF) created by Khoi Vinh and Mark Boulton. Layers Cake41.
  • Compose to a Vertical Rhythm42
    On the Web, vertical rhythm – the spacing and arrangement of text as the reader descends the page – is contributed to by three factors: font size, line height and margin or padding. All of these factors must calculated with care in order that the rhythm is maintained.
  • Design grids for Web pages43
    No one design grid system is appropriate for all Web pages. Your first step is to establish a basic layout grid. With this graphic “backbone” you can determine how the major blocks of type and illustrations will regularly occur in your pages and set the placement and style guidelines for major screen titles, subtitles, and navigation links or buttons.
  • Developing the grid that supports your design44
    Just a few months ago when I created any design, I didn’t practice a grid system. I didn’t know much about it so I thought that I can live without it. Yes it’s true. You can live without a grid system, but should you? Why is the grid important? I will try to answer to all of your questions in this article.
  • Grid-Based Design
    Grid-based DesignFew basic rules and techniques in grid-based design.
  • Typographic Grids
    Grids, Ratios and Typography. Theories, such as the golden ratio (also known as the golden mean, golden number, golden section, golden proportion, divine proportion and section aurea) arise from natural patterns and they are applied in the visual and creative fields to create “beauty” by way of considered composition. The Golden Section is derived from a naturally occurring number, called Phi (1.618), which has intrigued humanity for thousands of years.
  • The Grid: The Structure of Design45
    Using a grid is one of those basic design principles. Most news designers are working with a grid someone else designed. No matter what you think about it, you need to understand how to use it. And, at some point in your career you will likely be called upon to create a grid for a new section, or to do a re-design for a paper.
  • Cutting and sewing grid-based design: Part 1,working with other people’s comps46
    Grid-based Design47“In this article I’m going to discuss the steps I take when measuring and cutting a comp layed over a grid and turning that data into CSS. The point is to demonstrate the steps to site developers who are new to grids.”
  • The Principles of Design48
    We can group all of the basic tenets of design into two categories: principles and elements. For this article, the principles of design are the overarching truths of the profession. They represent the basic assumptions of the world that guide the design practice, and affect the arrangement of objects within a composition.
  • Grid-based design: Designing blog theme templates49
    The previous grid article dealt with how to come up with a CSS strategy when you’re working with another visual designer’s comps. Now I’d like to discuss doing grid-based theme design for open source content management systems, e.g. Drupal and WordPress….
  • Feeling your way around grids5037
    Grid-based Design51Designing grids carefully and thoughtfully, using simple compositional theory, such as the Rule of Thirds or the Golden Section, increases the legibility of your designs. By using a grid a designer shows an understanding of systems within visual communication and a sympathetic knowledge of conventions..
  • Grid-based Layout5211
    Grid-based Design53A grid is a technique that comes from print design but easily be applied to web design as well. In its strictest form a grid is literally a grid of X by Y pixels. The elements on the page are then placed on the cell border lines and overall aligned on horizontal and vertical lines.
  • Grid Computing… and Design54
    A look at the layout grid behind the Subtraction’s 7.0 redesign.
  • Adobe Web Tech Curriculum – Page Layout Grids55
    Introduction to Layout Grids. On each page layout grid, you’ll want to decide placements for main content, branding or logo, page title, global and local navigation elements, copyright or contact information, etc.
  • Setting Type on the Web to a Baseline Grid56
    We web designers get excited about the littlest things. Our friends in the print world must get a kick out of watching us talk about finally being able to achieve layouts on the web that they’ve taken for granted for years. Let’s face it: it’s easier these days to embed a video on the web than it is to set type consistently or align elements to a universal grid….A List Apart Article by Wilson Miner
  • The Funniest Grid You Ever Saw57
    Grid-based Design58An in-depth look at the complicated layout grid behind The Onion59.
  • Using a Background Image Grid to Lay Out Your Web Site60
    “Simply put, you apply the grid to the body of your page as a background image so that it displays behind your site. Thus you can use it to precisely line up your layout.” Article by Christian Watson.
  • Why use a grid?61
    Grid design is a fundamental skill of any designer. Understanding proportional relationships, white space and composition are all vital in constructing a grid for any delivery platform – web, print & real 3d environments.
  • Wikipedia: Grid (page layout)62
    A typographic grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axis used to structure content. The grid serves as an armature on which a designer can organize text and images in a rationalist, easy to absorb manner….
  • Thinking Outside the Grid63
    Grid-based Design64“There is a new kid on the block, and her name is ‘I’ve never designed with a table in my career.’” An article by Molly E. Holzschlag
  • Grids: Show ‘em if you got ‘em65
    Grids are a topic that’s rarely discussed or disected in the online community, yet is one of the fundamental components of good design. Why is it that many designers have a hard time with the grid?
  • Grid systems in Web Design66
    An overview of grid-based techniques. Every design you make should have a clear grid system whether its print or for the web because they help to organise information into a clear easy to follow layout. Here we roundup the best articles and resources on the subject.

Tutorials

  • Five simple steps to designing grid systems – Preface67
    In the context of graphic design, a grid is an instrument for ordering graphical elements of text and images. The grid is a child of Constructivist art and came into being through the same thought processes that gave rise to that art movement.
  • Five simple steps to designing grid systems – Part 168
    The first part of this Five Simple Steps series is taking some of the points discussed in the preface and putting it to practice.
  • Five simple steps to designing grid systems – Part 269
    Grid-based Design70In part one of this Simple Steps series I talked about how to use a simple ratio, that of the paper size you are using, to create a symmetrical grid on which to create your designs. This, the second part in the series, will deal with other ratios and how they can be combined to create more complex grid systems.
  • Five simple steps to designing grid systems – Part 371
    The third installment to this series is going to be a little different. The previous installments have been talking through some of the basics of grid construction using ratios as the primary device.
  • Five simple steps to designing grid systems – Part 472
    Grid-based Design73For the purposes of this article, I’m going to be focussing on the theory of creating the grid rather than the implementation. I did mention in the last series that I would cover implementation using CSS, well I’m not going to.
  • Five simple steps to designing grid systems – Part 574
    Flexible vs Fixed. Which one to choose? Why choose one over the other? Well you won’t find the answers to those questions here. What I’m aiming to do with this article is to investigate how the theory of grid design can be applied to a flexible web page.
  • Grids make eyes happy: how to use Grids75
    An example on how to create effective grid systems.
  • Grids: Order Out of Chaos76
    Invisible Structures: When and Why to Use Grids in Page Layout. Many of the pages that you see everyday have a grid. You may not see it but it is there, holding up the design, establishing structure, guiding the page elements.
  • Designing Grid Systems for Flash77
    I’ve decided that I’m going to write a little something up for those people interested in grids. I’m going to walk you through the process of creating a grid for a Flash based site that will work for screen resolutions of 1024×768 and up.
  • How to Create Page Layouts in GoLive CS2
    GoLive CSS-based or table-based layout grids enable you to create designs by freely positioning objects anywhere on the page. You can convert a CSS-based layout grid to a table-based layout grid. You can also convert a table-based layout grid to an HTML table.

Useful Tools for Grid-based Designs

  • Adaptive Grid System based on the Golden Section78
    The Columns are defined using em to keep line length consistent and varying text size using javascript to make the web page fill the browser window.
  • Layout Grid Bookmarklet 79
    Inspired by Khoi Vinh’s post about using a background image of a grid for layout, and a subsequent post over at Smiley Cat about the same thing, I decided to knock up a quick Photoshop style Layout Grid Bookmarklet….
  • Grid Overlay Bookmarklet80
    Just a quick note to share my version of Andy Budd’s Layout Grid Bookmarklet81.
  • WPDFD Browser Grid82
    This grid represents the maximum safe sizes for the three main monitor sizes in use today (June 2001). It takes into account such things as browser menubars and scrollbars and assumes that the browser window has been maximised. 640 x 480, 800 x 600, 1024 x 768
  • Free Online Graph Paper / Grid Paper PDFs83
    Downloadable and very printable
  • Gridding the 96084
    Grid-based Design85Background image grid + pixel ruler + column divisions for 960px-width layout, all in one mean little package.
  • Web Page Layout Grid86
    Add this image as a background to the body of your page to help you lay it out.
  • Position is Everything – Vertical Grids87
    A method enabling the vertical positioning of elements across grids/columns
  • CSS Grid Calculator88
    Use the CSS Grid Calculator to quickly visualize page layout and draw grids in a variety of ways. It provides accurate visual feedback on how text blocks and page divisions will appear within a browser window, and returns style declarations for divisions and text to copy and paste into style sheets.
  • TypoGridder89
    To get to the heart of it: a baseline grid is added. You initialize the TypoGridder and it automatically gets the lineheight of an element (by default p, but you can choose any jQuery selector). Then it queries a little PHP script which creates a very simple image which is used for tiling. The result is an opaque layer with a tiling baseline grid. [via Praegnanz.de90 ]
  • Grid Ruler91
    Grid-based Design92A simple image that can be applied as the background to most block level elements that will help you get an idea what’s going on between browsers and platforms without the need for another application.
  • YUI: CSS Grid Builder93
    A simple interface for Grids customization.
  • YUI Grids CSS94
    The foundational YUI Grids CSS file offers three preset page widths, seven core templates, and the ability to nest subdivided regions of one to four columns..
  • How to play with Yahoo Grids CSS95
    Yahoo released their Yahoo! User Interface. One part of which is their webpage templates, the Grids CSS. To follow along you will need to download the YUI library, a working test Drupal install and a text editor of some sort.
  • Page Grids96
    Successful web page design often leverages methods rooted in print design by utilizing an underlying grid system. First, establish a grid, or system of grids, that take into account advertising needs, dynamic elements, etc. Next, create templates and code to support designers and developers..
  • Hacking Technique: Yahoo’s Grid System (Part 1)97
    “And what Yahoo! UI CSS Grid has to do with us? Well, I tried to integrate Yahoo! Grid into Blogger Beta, and the result was sweet. By injecting some additional CSS code and some div tags into the simplified version of the Beta template, one can rearrange one’s layout without any CSS knowledge. This article will show you how to do that.”
  • Hacking Technique: Yahoo’s Grid System (Part 2)98
    In this post, I get into some technical details, and it also serves as a note for myself in finding interesting things about the Yahoo! CSS Grid system. Read on if you curious on how 3, 4, or 5 columns can be achieved.
  • OS3Grid – Grid for Web Sites99
    OS3Grid a JavaScript component allowing you to create and use powerful grids in your web sites.
    As you can see from the Examples OS3Grid is both flexible and powerful, with a rich set of features and an easy to use API for the developer.

Grid design-related books

  • “Grid Systems in Graphic Design” by Josef Muller-Brockmann
  • “Geometry of Design: Studies in Proportion and Composition” by Kimberly Elam
  • “Grids for the Internet and Other Digital Media” by Veruschka Gotz
  • “Geometry of Design” by Kimberly Elan
  • “The Elements of Typographic Style” by Robert Bringhurst
  • “Making and Breaking the Grid: A Graphic Design Layout Workshop” by Timothy Samara

Footnotes

  1. 1 http://www.subtraction.com/pics/0703/grids_are_good.pdf
  2. 2 http://yeeaahh.subtraction.com/enlargements/home/
  3. 3 http://www.uxmag.com
  4. 4 http://www.nytimes.com
  5. 5 http://www.timesonline.co.uk/tol/global/
  6. 6 http://www2.jeffcroft.com
  7. 7 http://ryanbrill.com/archives/i-kissed-dsl-goodbye/
  8. 8 http://commentisfree.guardian.co.uk
  9. 9 http://www.subtraction.com
  10. 10 http://www.subtraction.com/pics/0703/grids_are_good.pdf
  11. 11 http://www.welie.com/patterns/showPattern.php?patternID=grid-based-layout
  12. 12 http://www.webstyleguide.com/page/grids.html
  13. 13 http://www.mezzoblue.com/archives/2005/05/13/columns_grid/index.php
  14. 14 http://24ways.org/2006/compose-to-a-vertical-rhythm
  15. 15 http://24ways.org/2006/compose-to-a-vertical-rhythm
  16. 16 http://www.markboulton.co.uk/articles/detail/feeling_your_way_around_grids/
  17. 17 http://www.markboulton.co.uk/articles/detail/feeling_your_way_around_grids/
  18. 18 http://www.thismanslife.co.uk/main.asp?contentid=phiculator
  19. 19 http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_21/
  20. 20 http://www.alistapart.com/articles/settingtypeontheweb
  21. 21 http://www.alistapart.com/articles/settingtypeontheweb
  22. 22 http://www.alistapart.com/articles/outsidethegrid
  23. 23 http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/
  24. 24 http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_21/
  25. 25 http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_4/
  26. 26 http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_4/
  27. 27 http://www.subtraction.com/archives/2004/1231_grid_computi.php
  28. 28 http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_4/
  29. 29 http://desktoppub.about.com/od/grids/l/aa_gridsorder.htm
  30. 30 http://desktoppub.about.com/od/grids/l/aa_gridsorder.htm
  31. 31 http://desktoppub.about.com/od/grids/l/aa_gridsflex.htm
  32. 32 http://poynteronline.org/column.asp?id=47&aid=37529
  33. 33 http://poynteronline.org/column.asp?id=47&aid=37529
  34. 34 http://poynteronline.org/column.asp?id=47&aid=37529
  35. 35 http://urlgreyhot.com/personal/weblog/cutting_and_sewing_grid_based_design_part_1_working_with_other_peoples_comps
  36. 36 http://www.urlgreyhot.com/personal/weblog/grid_based_design_part_2_designing_blog_theme_templates
  37. 37 http://www.markboulton.co.uk/articles/detail/feeling_your_way_around_grids/
  38. 38 http://www.mezzoblue.com/archives/2005/05/13/columns_grid/index.php
  39. 39 http://www.mezzoblue.com/archives/2005/05/13/columns_grid/index.php
  40. 40 http://www.subtraction.com/archives/2007/0318_oh_yeeaahh.php
  41. 41 http://www.subtraction.com/archives/2007/0402_layers_cake.php
  42. 42 http://24ways.org/2006/compose-to-a-vertical-rhythm
  43. 43 http://www.webstyleguide.com/page/grids.html
  44. 44 http://www.emanuelblagonic.com/2007/02/16/developing-the-grid-that-supports-your-design/
  45. 45 http://poynteronline.org/column.asp?id=47&aid=37529
  46. 46 http://urlgreyhot.com/personal/weblog/cutting_and_sewing_grid_based_design_part_1_working_with_other_peoples_comps
  47. 47 http://urlgreyhot.com/personal/weblog/cutting_and_sewing_grid_based_design_part_1_working_with_other_peoples_comps
  48. 48 http://www.digital-web.com/articles/principles_of_design/
  49. 49 http://www.urlgreyhot.com/personal/weblog/grid_based_design_part_2_designing_blog_theme_templates
  50. 50 http://www.markboulton.co.uk/articles/detail/feeling_your_way_around_grids/
  51. 51 http://urlgreyhot.com/personal/weblog/cutting_and_sewing_grid_based_design_part_1_working_with_other_peoples_comps
  52. 52 http://www.welie.com/patterns/showPattern.php?patternID=grid-based-layout
  53. 53 http://www.welie.com/patterns/showPattern.php?patternID=grid-based-layout
  54. 54 http://www.subtraction.com/archives/2004/1231_grid_computi.php
  55. 55 http://www.adobe.com/education/instruction/webtech/CS2/unit_planning2/pd_page_layout_id.htm
  56. 56 http://www.alistapart.com/articles/settingtypeontheweb
  57. 57 http://www.subtraction.com/archives/2005/0901_the_funniest.php
  58. 58 http://www.subtraction.com/archives/2005/0901_the_funniest.php
  59. 59 http://www.theonion.com/
  60. 60 http://www.smileycat.com/miaow/archives/000264.php
  61. 61 http://www.markboulton.co.uk/articles/detail/why_use_a_grid/
  62. 62 http://en.wikipedia.org/wiki/Grid_(page_layout)
  63. 63 http://www.alistapart.com/articles/outsidethegrid
  64. 64 http://www.alistapart.com/articles/outsidethegrid
  65. 65 http://applestooranges.com/blog/post/grids-show-em-if-you-got-em/
  66. 66 http://tutorialblog.org/grid-systems-in-web-design/
  67. 67 http://www.markboulton.co.uk/journal/comments/simple_steps_to_designing_grids/
  68. 68 http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/
  69. 69 http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_21/
  70. 70 http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_21/
  71. 71 http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_3/
  72. 72 http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_4/
  73. 73 http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_4/
  74. 74 http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_5/
  75. 75 http://crowdctrl.com/2006/11/09/grids-make-eyes-happy
  76. 76 http://desktoppub.about.com/od/grids/l/aa_gridsorder.htm
  77. 77 http://www.aisleone.net/?p=301
  78. 78 http://nickcowie.com/other/golden_section.html
  79. 79 http://www.andybudd.com/archives/2006/07/layout_grid_bookmarklet/
  80. 80 http://subtlegradient.com/articles/2006/07/27/grid-overlay-bookmarklet
  81. 81 http://www.andybudd.com/archives/2006/07/layout_grid_bookmarklet/
  82. 82 http://www.wpdfd.com/browsergrid.htm
  83. 83 http://www.incompetech.com/beta/plainGraphPaper/
  84. 84 http://cameronmoll.com/archives/2006/12/gridding_the_960/
  85. 85 http://cameronmoll.com/archives/2006/12/gridding_the_960/
  86. 86 http://www.smileycat.com/miaow/archives/layout_grid.php
  87. 87 http://positioniseverything.net/articles/onetruelayout/verticalgrid
  88. 88 http://www.gwhite.us/downloads/css_grid_calc.html
  89. 89 http://milianw.de/projects/typogridder/
  90. 90 http://praegnanz.de/weblog/einfuehrung-raster-im-webdesign#Kommentar
  91. 91 http://www.airbagindustries.com/archives/airbag/ruler.php
  92. 92 http://www.airbagindustries.com/archives/airbag/ruler.php
  93. 93 http://developer.yahoo.com/yui/grids/builder/
  94. 94 http://com1.devnet.scd.yahoo.com/yui/grids/
  95. 95 http://www.blkmtn.org/node/336
  96. 96 http://developer.yahoo.com/ypatterns/pattern.php?pattern=grid
  97. 97 http://hoctro.blogspot.com/2006/09/tweaking-new-blogger-yahoo-ui-librarys.html
  98. 98 http://hoctro.blogspot.com/2006/09/follow-up-exercise-on-yui-css-grid.html
  99. 99 http://os3grid.sourceforge.net/website/index.html

↑ Back to topShare on Twitter

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

Advertising
  1. 1

    Why grid-based? What about semantics?

    -2
    • 2

      Because first and foremost, human beings use their eyes to read. Typography and layout are not just “style” they are inherent to how information is understood. Five centuries of printing knowledge stand up for more than a group of “techies” setting the visual parameters for an entire generation.

      9
    • 3

      Grid based layouts can be semantic. See grid960.css or baseline.css. There is no requirement to use crappy HTML tables.

      5
    • 4

      There’s more flexibility in using Word/LibreOffice styles than with structured content like DITA or DocBook. Styles are semantics, but they’re not naively handed over to the user to sort out. The same lesson is in JSON vs XML. JSON won because coders could just plug it in.

      0
  2. 5

    Delicious, great resources for us.

    3
  3. 6

    Truely an amazing list! Didn’t know grids had that much an inpact on webdesign. Thanks for the enlightning!

    -1
  4. 7

    Great Job Guys, Thanks

    -1
  5. 8

    Great list! Finally, a one stop shop for getting started with grid layouts.

    -1
  6. 9

    Exelent work again, thank you for looking after us .

    0
  7. 11

    Скакунов Александр

    April 14, 2007 8:16 am

    Not very interesting…

    -8
  8. 12

    Thank’s , as always very nice research .

    1
  9. 13

    Very nice list , as always you guys are doing a perfect job :)

    1
  10. 14

    @Igor: grids and semantics aren’t mutually exclusive. Using a grid shouldn’t have any effect on what elements you use to describe the content; all the grid is doing is giving you a construct along which to align those elements.

    1
  11. 15

    Awesome : ) thank you guys so much.

    0
  12. 16

    mmmmm, grids. Brings me back to my newspaper days.

    0
  13. 17

    excellent stuff. comprehensive and interesting. Why do people post negative comments about articles like this? Its a listed resource that must have taken allot of research. If everyone doesnt learn at least one tiny nugget id be very surprised. All knowledge is important, no matter how small. Get over yourselves!!!

    3
  14. 18

    Thank you so much! I just started to conceptualise layout for new web site of my college, with grid based ideas in mind. This article just made my life so much easier :)

    0
  15. 19

    That quote from Molly is so out of context :P

    For the rest, great as usual.

    0
  16. 20

    barbarianbanana

    April 15, 2007 4:25 am

    Even for lame web 2.0 blogs this takes the cake. Those of you that found this article informative might want to check out two other sources. First is a company called Google, which among other things produces a search engine. Google will allow you to reproduce the entire contents of this site by searching for ‘crappy list grid design quotations’. The second is your local newspaper. Find someone in your neighborhood with a job and they will likely have one of these in their front yard most mornings. The entire layout is grid-based, providing you with ready-made example you don’t even have to print out. You’re welcome.

    -6
  17. 21

    Hmm… Being a designer with a good solid background in fine arts, my degree involved aspects of design in multiple media – visual, print, and web.

    Grids are a good thing because they help a composition to come together… BUT, they are meant for print (newspapers, magazines etc…) – and don’t always make for visually interesting websites…

    The way I see it – grids are good for corporate documents and websites. Not all clients want this cold structured feel. The web is it’s own medium – and should be treated as such… It allows us to break from old archaic traditions and bend the rules… web design, to me, is an art form unto itself.

    Without trying to sound smug here, I use grids to layout text in relation to surrounding elements – but as an artist first and foremost – I trust my own sense of composition more than a mathematical equation.

    3
    • 22

      Perhaps you should start painting or another navel-gazing craft activity and leave design to designers. There is enough self-indulgence on the web.

      Fine Art is not design, did you miss the 20th century? Fine art is a sad 19th century cast off left behind by the design pioneers of the last century.

      Communication is what is most important, not your feelings.

      It is all in the word really DESIGN. DE – SIGN. This word means “Without signature”. That means your doing it for somebody else or society not yourself. Why not read Eric Gills book “ART” I think it will help you understand why a shift in career will help all of us.

      As for bending rules. In design? Why not really bend rules and take up law, politics or join the military. Good luck.

      -6
      • 23

        Boy Dave. Your reaction to Ron was utterly smug. I thought Ron made some very astute points, which I’m inclined to agree with. It didn’t sound like he was dissing grids, just noting that they’ve seen their time and day, and shouldn’t always apply to the web.

        Good grief, I hate abusive responses like the one just above mine. Talk about a new world…

        4
  18. 24

    I have run major SF-based web design companies (with Macromedia and HP as our major clients) and have taught design at university including Stanford and now elsewhere. Grids? You are kidding. Grids are awful. Just look again at the images above at the websites examples, they are mechanical, cluttered and confusing. Please do not fall for a the newest (probably) short lived fad – like grid based design. Design is not about fads. Think experience design – like what is the experience you want the user to have and then design it.

    -steve

    -6
  19. 25

    Ok, steve, stop bashing grids just because you think you’re all that and a bag of chips. But this article isn’t BS. “Grid-based” layouts have been used in pages since the table tag was added to html very soon after its creation. In fact, why not call them “table-based layouts”. Oh yeah, cuz then everyone would figure out it’s just BS. How about this: in some cases it’s best to use a grid, other cases not so much, sometime a mix is proper.. Every site is different, you know.

    This article reminds me of knuckleheads who either design 100% “flowing layouts” and 100% fixed-width pages. Lame.

    0
  20. 26

    Wow..you guys really don’t leave out a thing.

    Very impressive material over here.

    Always a favorite at my site..

    0
  21. 27

    Captain Obvious to the rescue

    April 15, 2007 5:52 am

    steved, you call that… thing there, linked through your name, a website?

    I call that ugly, and something that has been beaten to death with the ugly stick until there was nothing left of it. Macromedia and HP both have really strict grid-ridden pages. If they weren’t, they’d look and navigate like HELL.

    IF you are to have an opinion, at least have something to build it on, something that can give weight to your arguements. In this case, you fail hard.

    -1
  22. 28

    Uh — Steve who supposedly taught design at Stanford… how can you teach design and not incorporate grids? Classic graphic design, visual heirarchy requires grids. Enough of this wild-west web design where anything goes and text expands across the whole browser width.

    Grids are for more than newsprint. This should be a no-brainer. Steve may have taught at Stanford, and now “elsewhere”. He’s teaching “elsewhere” because he’s not a designer. You can’t be a desinger and not use grids. A great designer uses a grid and knows when to break it.

    2
  23. 29

    It scares me half to death that people like Steve are teaching design. How in the hell did this happen? The guy is basically an engineer let loose with HTML and photoshop. Egad. I feel bad for SFU and other universities. Goes to show how far being middle class, white, male and over-educated gets you these days. *He* is a design professor?

    (hanging my head and quietly weeping for the industry)

    2
  24. 30

    Kate, I agree with you. It is perhaps as scary as having Baghdad-Bob in charge of communications.

    0
  25. 31
  26. 32

    Ewww. For a prime example of why we need more real designers on the web and why grids are important, look no further than Steve DiPaola’s “the stanford design teacher” website. Good God.

    0
  27. 33

    I wont judge on whether someone has or not to use grids and what role they play in constructing websites, but the format of this article is almost impossible to read.

    A huge amount of information strangely arranged. I would have made a stand-alone article not a mash-up of 50 others…

    1
  28. 34

    Once again, a great article1 This time about one of my favourite topic. Thank you very much! Greetings from Germany (to Germany) ;)

    0
  29. 35

    I’m just missing some semantics.. but I’ve got to say: A real nice list. Have read for some hours and I think I’m totally in this topic.

    Was really interesting, keep it up :)

    -1
  30. 36

    It’s nice to have a bunch of links tied together like this, but I don’t care for the grids personally. Among the example pictures given they are all horrible to look at. I hate sites that go beyond 3 columns and even 3 can be too many. Those pages just have no flow to them. I’m sure grids could be used for a good design, but the examples here are very much lacking.

    -1
  31. 37

    What a great page… Thanks alot.
    /Dennis

    0
  32. 38

    perhaps if steved had stuck to a grid he wouldnt have what is a horrible site on his hands! (btw our new company site is being rebuilt, will link when fixed). Tables are for form and structure, how a designer interprets the grid shows the strength of your ability and understanding of the brief. A grid could just be a rough from which to deconstruct.

    ie for interestings personal websites, we know who not to ask.

    0
  33. 39

    Best post in a long time!

    -1
  34. 40

    Thanks a lot for your great job about this topic from germany/ dresden.
    I take my hat off to you, respect. I like works about a topic with a lacking in content.
    Another side, if you work so hard for us, we lost many hours to read this amazing list with so much great resources.

    Thanks a lot, again.

    RALPH

    0
  35. 41

    marianne mcdougall

    May 24, 2007 11:34 pm

    I have been working as a graphic designer in the packaging division of
    G3 Creative for 6 years and even I learned a bit from the above articles.

    Thank you guys.

    0
  36. 42

    i am agree about grid from education basic and professional ..

    0
  37. 43

    That steved guy cannot be for real! He must be trolling. He is blissfully (or ignorantly) unaware of the fact that grid based design has been around for decades before the web was even conceived. Yet he considers himself to be a designer.

    Ok, if you want to be all artsy-fartsy and discuss creating “user experience” rather than a good design, then the experience I have when viewing your site is one of nausea, confusion and incredulity. If that was your goal…well done!

    2
  38. 44

    Very informative. I’ll try to implement some of the suggested grid technique rules from now on. Cheers!

    0
  39. 45

    LOL

    People dissing grids, thats like a painter saying he prefers painting on rocks instead of a canvas.

    A grid just helps creativity because “gasp’ websites are a lot like newspapers. Are you here reading this article because you love the background color of one of the ads or did you actually read text?

    Here’s another question, the sites you visit on a daily basis, are you reading material or just basking in the art and graphics. Hell if your not reading then your watching youtube and thats also grid based.

    Grids are just a way of organizing what you wantto convey, they can be as creative or a dull as you permit.

    1
  40. 46

    Great article, lot’s of good info.

    However, Molly Holzschlag is 100% wrong:

    DO NOT, EVER, use tables for layouts, tables are for the display of data only. Its not just about semantics either. Table based layouts have a tendency in some browsers to render slowly, they are a nightmare to maintain, and if you need to ‘tweak’ the layout, you’re in for a headache. Instead, use CSS to layout your designs, whether grid-based or otherwise.

    If you “just can’t” get away from using tables for your layouts, you need to relearn a few things in the web design world.

    2
  41. 47

    However, Molly Holzschlag is 100% wrong

    Please read her article and see the quote in context before you start bashing her.

    0
  42. 48

    Whimsy Collective

    May 1, 2008 7:17 am

    This might be of use for this post and also related within the following site:


    GridControl: A Grid Overlay System for Design Development.

    Enjoy!

    0
  43. 49

    Grids are pretty good when it comes to designing magazines
    but its also good to stray from the grid from time to time.

    Kelsey

    G3 Creative

    0
  44. 50

    goodnewscowboy

    June 1, 2008 6:09 pm

    In a word, “Wow”. What an awesome collection of useful links to propagate grid based design.

    I never knew there was such a science behind the art of design. I can “feel” what looks good and what doesn’t but to learn about designing with grids opens a whole new world for me.

    Many, many thanks for your comprehensive post. I’ll be viewing your links for many days to come.

    0
  45. 51

    Not that this is even that important, I’m sure everyone gets the point either/or, but, in the first sentence “…..buildung block….” yeah. Comma splice, anyone?

    0
  46. 52

    Fantastic article. A long read but definitely worth it. I’ll be sure to come back to this article in the future.

    Cheers.

    0
  47. 53

    this is a very good post indeed! i also enjoyed very much all the discussion it generated which is a true reflex of individual experiences, some with more knowledge than others.
    I believe in a well used grid system that fits the final product.
    This post shows very well the flexibility of a grid system. You may not like some but there is one for every taste! :)

    Thank you!

    -1
  48. 54

    Thanks for this great information!

    0
  49. 55

    Great article

    0
  50. 56

    IT’s Official!!! a mixture of grid, and free flow is needed. This Website provides a medium for people to open there eye’s to new experiences , so just accept knowledge and use at your own pace.

    0
  51. 57

    @Igor
    While grids may be good, I think you are talking about all of the premade css frameworks that implement grids with a complex list of classes that have no meaning. I looked at the Blueprint css grid example page and it had things like <div class=”span-6 prepend-3 last”>. I agree that the html should use meaningful class names (navigation, content, footer, product, etc.) and then implement a visual grid, rather than being locked in to some css framework. Because class names should not describe layout/presentation, otherwise, how are they any better than tables? Just a thought, and I’m wondering if anyone else is using something like YUI, Blueprint, etc. with an opinion on this.

    0
  52. 58

    Great article. Thanks, as usual, for compiling this information for everyone to read.

    It can never be understated how important, whether you agree with the concept or not, it is to know every facet of the web design process. For example, I would never use table based layouts but I sure as hell want to know everything about it just incase I need to help a client with their pre-existing website (a client that doesn’t necessarily want to pay for a full redesign).

    @Steved: Good lord, man. Do yourself a favor and redesign your website, it is seriously (and I am being 100% honest here) the worst looking “designer” website I have ever seen. Really.

    Thanks again for the article!

    0
  53. 59
  54. 60

    Benedikt Roßgardt

    July 18, 2009 7:17 am

    Way too much ressources. Who should read all this stuff?

    But the introduction is pretty interesting.

    0
  55. 61

    Thanks for a great list of articles and tutorials. I went through everyone of them!

    0
  56. 62

    Great Article, for me I think seeing a site that has been structured properly and defines hierarchy well is a sign of a good designer and successful design solution. For those who say grids are lame or not necessary need to go back and relearn their craft. Joseph Muller Brockman is one of the most influencial swiss designer of his time and he used complex grid structures with great success. You can only break rules once you understand them and what they achieve.

    @Steve, I make a point of not bashing anyones work but your comment has opened you up for reactions. It is a really poor example of 1980′s hyperlink heaven with no understanding of how information should be presented

    0
  57. 63

    Ashely Adams : Sticker Printing

    September 14, 2009 9:12 pm

    You know what makes grids such a hot idea? They address a basic desire in humans, viz. to find logic and order in everything that we encounter.

    Well, I’m no Sigmund Freud. But this is something I remember having read somewhere. We always try to size things down to certain rules and norms. That way, we perceive and understand things better. Chaos or any apparent lack of order disturbs us.

    So when it comes to web design, a grid-based approach is more easily perceivable.

    0
  58. 64

    The “Five simple steps to designing grid systems – Part 2″ link is malformed.

    0
  59. 65

    Have you done any other good stuff lately? ,

    0
  60. 66

    Assuming no one has posted since I am reading this article and all subsequent comments, I am #60 :). Sorry, onto my comments.

    Grid layouts and non-grid layouts have thier purpose much like how a .tar file has it’s purpose, you don’t use archive files to hold your everyday files do you? No, you use them in special situations where you need to transfer data, or store large amounts of compressible files. The thing to remember here, is that you need to Evaluate what your client/you need and Act based on that. If you think a Grid layout/framework is what you need, by all means do it. If you need a more free flowing site, then by golly do it.

    @Steve, My goodness sir. I have greated some bad websites in my day but not as pitiful as what you have created there. Have you ever heard of a style sheet, or do you find updating all 10,000 of your inline styles manually fun? The only successful thing you did was make me want to leave (and puke, oops did that slip out…)

    I have put it far more than my two cents…

    0
  61. 67

    Hi,

    I am looking for a table based grid framework. Any links??
    At the moment i am using 960 and blueprint for making websites. But for html newsletters i am still using tables. So a grid-table framework would be awesome.

    regards

    -1
  62. 68

    http://www.grid-based.com

    The gallery showcases some of the world’s best websites designed with grid-based approach and beautiful web typography.

    0
  63. 69

    Great overview of grid design and compilation of links. Thanks for all of your research and hard work.

    Just a quick FYI that the first link (above) to Mark Boulton’s site may have changed a bit since this was posted. You can get to the tutorial via the link to a main menu, below (which seems to be missing the preface), or via the direct link to the preface, which also follows below.

    The other links in the above post are working.

    By the way, Mark’s tutorial is also a great read and highly recommended.

    Five Simple Steps to Designing Grid Systems:
    http://v3.markboulton.co.uk/articles/detail/five_simple_steps_to_designing_grid_systems/

    Direct link to the preface:
    http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-preface

    -1
  64. 70

    Correction – first link to Mark Boulton’s site goes to a “Not Found” page but the others in the above post are working. (Sorry ~ only clicked the Preface initially but didn’t try the others.)

    1
  65. 71

    well Done, thanks for sharing

    -1
  66. 72

    wow that’s lots of links, would be nice if there was a more in depth description because most of the links sound the same

    -1
  67. 73
  68. 74

    For any jQuery developers out there, I have just completed a jQuery Plugin that supports the CSS grid layout system, the plugin is called “{css} designerGrid”, you can view it in action at http://www.kromosome.net/cssdesignergrid/. It’s similar to the background grid image theory but it uses the HTML 5 element to dynamically draw the grid and the specified columns, it provides many overrides even allowing various document sizes to be emulated. I would love to hear if anybody finds this tool useful.

    0
  69. 75

    hi
    i saw dream in which i play wd colors in which i fly f.16 …i am spreading colors in sky

    i live in my world

    but my friend say me mad guy why they say?

    -1
  70. 76

    If you’re looking for a simple, fluid grid system, please check out Flurid — http://archive.kflorence.com/projects/flurid/

    Sorry for the spam, just trying to get it out there: )

    -1
  71. 77

    Mispelling in section titled: “Things You Probably Don’t Know About Grid-based Design”

    First paragraph reads: The grid is the most vivid manifestation of the will to order in graphic design. [...] Units are the basic buildung block of a grid.

    basic buildung block of a grid ( I think you mean: basic building block of a grid)

    0
  72. 79

    The Flurid project has been moved, just thought I would post the new location here:

    http://projects.kflorence.com/programming/flurid/

    And remember, you can always find the project on gitHub:

    http://github.com/kflorence/flurid

    0
  73. 80

    Grid is really good.

    0
  74. 81

    Mark Boulton :
    “The Golden Section is a ratio which is evident throughout the universe as the number Phi”
    … are you sure of that? ;-)

    0
  75. 82

    You forgot http://www.grid-based.com, its the first site I check when in need of grid inspiration.

    0
  76. 83

    i saw dream in which i play with colors in which i fly f.16 …i am spreading colors in sky.

    -2
  77. 84

    Here at Templamatic we encourage designers to use a grid based approach when developing a web design theme. Thank you very much for a great article!

    0
  78. 85

    Eddie Gomez di Moncasandro

    May 4, 2011 3:32 am

    symen nerren – you have a very cool name…

    is it real?

    0
  79. 86

    This is fucked up. You need a grid layout at 200,000×1,000,000 to make a map to play around with. So fuck this.
    With Bungie’s grid, where I can make a whole fucking game if I want.
    So that’s what I’ll do.
    I’m going for high resolution screen models, and making my own game for xxP.
    So yeah.

    -5
  80. 87

    Excellent post! I wish i had the writing abilities you had. Anyway, thanks for Iyour challenging work, please maintain it up.

    0
  81. 88

    how i can make fullbackground templates using grid system, any tutorials please?

    0

↑ Back to top