Designing a Web site by the grid should be a rule, not a fad or trend
Looking back at branding and graphic design historically, we can see that there have been sets of rules that have been followed by the heroic figures in design. Paul Rand seemed to have his own signature style, but could that style be recognized better as a rule? Khoi Vinh has mentioned in his most recent interview in Print Magazine, that if you try and replicate print on the web, you are doomed for failure. I think this is really true when it comes to the over-use of graphics and background images. Often times I get very distracted and drawn away from a lot of rollover images and background tricks. I don’t like the way it makes my browser feel - sluggish, slow, and bloated.
But Khoi Vinh is also someone who believes a great amount in designing each Web site by the grid. It was something that Khoi seemed to have stumbled upon, but it has made a positive reaction among designers and web enthusiasts. The simple thesis can be said that everything must have a place and a purpose, and those things must line up. If you take a look at print work, often times you will see a large amount of careful alignment and specific placement. It can be seen in something as simple as the table of contents in Print Magazine. The line of white space that your eye automatically creates just represents how well the page has been designed by the grid.
Print Magazine’s table of contents for April 2008 issue - a good example of possible grid ruling in print. Concentrate on the left side content.
Well known designers have often times admitted to using grids in almost every single one of their pieces. Especially ones that have a large amount of information. Meaning, it is easy to see that there is some sort of relationship between web and print, and Khoi has even said in his interview with Print Magazine, that there will be a time when these two relationships either come together or clash. The best thing for web designers to do, is to understand this relationship, and understand the grid. Once you understand it, you will understand the benefit of making this your personal rule of design.
With all of that said, it is easy to see that there are plenty of rules for all designers. Your rule could be alignment, your rule could be colors, or your rule could be contrast. But specifically for web, examining a good majority of Web sites you can see that there are less rules. Standards of code come into place that distract people from learning about standards of design. Should grid layout be a standard? I think it is something that should be a rule, and less of the “fad” that it may have become. How does your eye feel while viewing this Web site? Is your eye stressed, or is it relaxed? Is it easy to read this information? If so, than I think the idea of grid layout has done the correct job.*
Apr 11th 2008
For content-based web sites, then adherence to a grid (there exist good and bad grid systems of course), is the simplest−and perhaps the most logical−way to present one’s content. It also means that as new content is published, it sits neatly into the existing design. Street systems designed on grid patterns are certainly easier to navigate than organic sprawls; the corners and intersections define blocks in much the same way as grid systems in graphic design and typography define content. That being said, there is room for breaking the grid, and there are times when we need go with what looks right; and what looks right doesn’t always sit on the grid.
I think this site is a fine example of designing to a grid. Finding my way around has been pretty easy. Nice to see so much white space too. it looks very clean, very nice indeed.
Apr 11th 2008
@johno That is a very good response, and you are very correct! In both mediums (Print / Graphic and Web) there are times where breaking the grid is okay. I think the designer just has to be very careful. Many times when I break the grid, I find myself not really liking the “broken grid” content, and I just wind up sticking it back. You are right about Grids being almost everywhere, and what you said totally reminded of roads or traffic systems. Also, thank you for the nice comments about the redesign and navigation! Much appreciated. For those who are reading, head over to http://ilovetypography.com to see an amazing Web site!
Apr 11th 2008
I am a grid affectionado as well, I think most web designers that avoid designing their sites without at least a loose grid system is due to a lack of traditional design education. Many web designers have become one without any sort of formal training and what you describe is a product of that.
You should check out the book “Making and Breaking the Grid” its a solid read.
Apr 12th 2008
Can you go into detail on “the grid”? I don’t think I’ve ever heard a designer mention that before… and now I’m interested. How can I use it to my benefit my designs? I’ve always made my designs by color and just what I feel looks right… never with a grid system.
I’ll check out that book Zinni recommended. But can anyone post some references to it that are on the web?
Apr 12th 2008
Hey Al:
Yeah there are a couple of resources, this post wasn’t put together to show grid resources, but more of a relationship analysis. But I can lead you in the right directions. First are foremost, http://www.subtraction.com/archives/2004/1231_grid_computi.php
Also, this design was helped using this tool:
http://gridlayouts.com/
I would strongly suggest reading everything about Grid Computing from Khoi Vinh and Khoi Vinh only. Many people seem to only understand a small portion of it and try and teach others.
Hope that helps.
Apr 14th 2008
I think the grid is a layout tool that can be used very effectively, and it’s unfortunate that so few web designers are educated on how to use it. But I think it’s a fallacy to believe that the grid is the magic solution to all of the poor layouts we see on the web today. It should be understood that the grid is merely a tool, and good design cannot be born from it without a skilled understanding of how to use the tool. I can give any Average Joe off the street a pipe wrench, but it doesn’t necessarily mean he’ll be a skilled plumber. Similarly, just because I design a site using a grid doesn’t guarantee that I won’t bungle up the layout.
Of course, I’m not going to discourage designers from learning about the grid—it’s a useful tool to add to one’s toolbox. The key is to understand the intricacies of using it to its fullest potential. There are lots of good resources on grid design, and your link to Khoi’s site is a good start. I’d like to add one more link, also referring to Khoi’s site, which has a link to a PDF of his presentation at SXSW 2007 with Mark Boulton.
http://www.subtraction.com/archives/2007/0318_oh_yeeaahh.php
There’s an MP3 file of the presentation somewhere on his site that accompanies the slides. It’s a good way to get introduced to grid layouts, while also covering slightly more advanced applications.
Regardless, Patrick, thanks for blogging about this. Any discussion about improving web design is better than none. It’s something that seems to be sorely missing from the web right now.
Apr 17th 2008
In the past before everyone started using div tags and now information can just be placed and overlapped anywhere on a page, people used tables. There was no other way to design a webpage without getting away from tables or even frames. I believe there is a natural grid set within the coding of pages. However, the grid is just a basis to work from, the goal from that point on is to break it.
May 7th 2008
Good subject. I teach web site design and graphic design. It’s difficult sometimes to get all of the younger students to buy into a grid system.
Grid systems started in printing.
Jan Tschichold wrote a book called The New Typography in 1928 that started the change in design systems for print that led to what has been referred to as the modular Swiss grid system in the 1940’s.
When scientists need a tabular cell system to send information on the new Internet a table system was created in the 1990’s to be used. Designers recognizing that the table html coding fit into grid systems quickly started developing web sites with grid patterns.
More information on grid systems in print media (which work the same as on a web site) can be found by researching Tschichold, Joseph Muller-Brockman, Grid Systems in Graphic Design and Karl Gerstner, Designing Programs.