A few myths and misconceptions about grids exist in the design community that can be detrimental, especially to designers who are new to the subject. I recently read an article, which is no longer online, claiming that grids have disadvantages and it listed the reasons why. As you can guess, I very much disagreed with the entire article and felt that it was providing a lot of bad information on grid systems. All of the listed “disadvantages” were distortions derived from the lack of understanding on how a grid works and functions.
In response to that article, here’s my attempt at clearing up this mess.
Grids are a design trend.
Grids have been in use long before graphic design became a discipline. During the 13th- and 14th-centuries, scribes used the Villard Diagram to organize their handwritten manuscripts. In the 15th-century, Gutenberg and others divided their pages using the Van de Graaf canon.
The use of a grid is not a trend, it’s a fundamental skill that designers should possess. Grids have been around a very long time and are an important part of the design process.
Grids can impede creativity.
Definitely the most ridiculous of the bunch, this myth suggests that a grid will cause a designer to be less creative. A grid should never define a design, it should work with it. To suggest that a grid can hinder creativity is the same as suggesting that a music tempo can as well. A grid is a building block that can never, and should never, impede creativity.
The legendary designer, Josef Müller-Brockmann, explained it well:
“The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.”
Another outrageous claim is that grids are confining. When used properly, a grid will never limit or confine a design, it will grow and adapt to your liking. If someone tells you a grid gives you no freedom, that person doesn’t fully understand the purpose of a grid or how it should be used. Grids are flexible and allow for an infinite number of possibilities.
Graphic designer and writer Ellen Lupton explains:
“To say a grid is limiting is to say that language is limiting, or typography is limiting.”
Where people get confused is with the notion that a design utilizing a grid should look “grid-like”, giving a clear indication of columns. Fortunately, that isn’t true, and this poster by Brockmann is a great example. The text clearly falls on a grid but the concentric shapes have more of an organic feel, making the grid invisible.
Grids only benefit certain designs.
A grid can be used for ALL designs. I’ll repeat that. A grid can be used for ALL designs.
To suggest that only certain designs can benefit from using a grid is to suggest that a structural foundation can only benefit a certain type of building or that grammar is only useful for a certain style of writing. A grid is a foundation, and like with any architectural structure, it’s a vital part of the process.
Grids also do not satisfy a specific aesthetic. They do not require the use of Helvetica or the omission of images. A grid can be applied to any style of design, no matter if it’s scrapbooky, or clean and minimal. You don’t have to design like Brockmann to use a grid.
Here are two sites that exhibit completely different styles of design, but both make use of a grid.
Example 1 is predominantly white, doesn’t feature many colors or textures and uses a sans-serif typeface.
Example 2 uses a larger variety of colors, textures and a serif typeface.
Grids require a lot of content.
The amount of content in no way dictates whether a grid is required or not. A design needs to visually communicate an idea or message, whether it’s a 250 page story, or a 5 word sentence and an image. A grid helps achieve that goal through structure, organization and hierarchy.
Grids slow down the design process.
The opposite is actually true. A well-designed grid, used by a competent designer, can help solve a design problem in less time. A fully designed grid system will also provide a consistent structure and organization across a multi-page design, like a web site, making the process more efficient.
Grids only work in a fixed layout.
This is specific to web design. Many people believe that a grid needs to be fixed and as a result can only generate a fixed layout.
Not true.
A grid can be designed to be fluid and change with the viewport size, scaling itself proportionately.
A few articles have been written on the subject and there are even a few CSS frameworks available:
Fluid Grids
The Fluid Grid system
Fluid 960 Grid System
Conclusion
Hopefully this article has helped clear up a few myths and misconceptions about grids, and has allowed you to better understand the purpose of them and how they should be used.
If you’re interested in learning more about grid systems, visit my site The Grid System for helpful links to articles, tools, books and templates.
I totally agree. I was fine with that article until it got to the disadvantages points. This is my problem with web design these days. Most of the HTML/CSS folks don’t have a print background and probably never learned about grid systems. Or typography for that matter. It’s ridiculous to think a grid is a trend or that it gets on the way. I think the only trendy thing is that people are making their underlying grid structures visible as background images.
Great post Antonio.
This quote was the one that really baked my noodle: “reative designs should stick to more freedom and not use a grid”.
Well done on spending the time to write an excellent well researched (and much better informed) response.
Bravo Antonio!
This post belongs to the immutable bylaws of design.
To the designers that don’t use grids: please hang your head and crawl quietly through the service exit.
Theo
Great post Antonio. Totally agree with you.
Dave
Thanks for spending some time answering to the original article. It’s really sad to know that unclear and diminishing articles are being published. It’s not fair for all of those who worked hard to show how much a grid can help without restraining your creativity.
Excellent article, Antonio. I agree wholeheartedly with every point you made.
To those who think that grids somehow impede creativity: I don’t buy it. It’s a selfish, stubborn and subjective stance against something that, in the end, has nothing to do with creativity at all.
Also, Antonio, it’s nice to see a lengthier post here on AisleOne. Don’t get me wrong, I love the daily inspiration, but I always enjoy an article that can get a good dialogue started. Keep up the great work, man.
God Save The Grids!
Thank you for writing an elaborate answer to that post. I was hoping someone would do it.
It only ever seems logical to use a grid, it comes naturally.
Agree completely, the mentioned article was truely terrible.
Having confines inspires creativity, not constrains it.
Thanks so very much for writing a solid response to that article. 🙂
Another misconception, also fueled by articles like that one, is that a grid is only ever made up of even-width vertical columns. There are in fact many different kinds of grids, and the grids being pushed by the CSS frameworks are just one kind.
I totally agree with you on every single point.
I find it really infuriating to see articles like the one that you pointed out, stating that grids hinder creativity RUBBISH!
Great read!
Thank you for a brilliant post.
It is about time mis-information is dealt with it on the web.
This was a great response to that awful article, I honestly thought it was some kind of sick joke.
I really liked your comparisons of the grid system to other ways of adding structure to something, such as the foundations of a building or the written language; when you put it like that it’s crystal clear.
I feel another thing that fuels misconceptions is the prevalence of stock grids of (say) 960 pixels, somehow the web has stumbled upon the idea that 960 pixels is a magic number that renders everything aesthetically pleasing. The reality is (as was noted in Cameron Moll’s original article) that 960 just happens to divide easily, but this goes out the window once you start varying things like gutters.
If a grid is analogous to grammar, then the 960 mentality is analogous to one person’s writing style. It’s fine and dandy, but you have to seriously consider your reasons for imitation.
I can’t tell you what I thought of the original article without using some very rude words. Thank you for another great, concise post that champions grids without being dogmatic.
Great response, I felt a little bit of revile when I read the original article.
I think the only disadvantage is if you’re using an out of the box grid solution and trying to force your content into it. I think tools like 960 are great for learning and prototyping, but how many websites actually need a 12 column grid?
A good design should start with a solid grid, not try to force all it’s content into a grid while writing CSS.
On grids and creativity: “Grids don’t make dull layouts—designers do.” (Timothy Samara)
Enough said.
Nice Clarification.
And thanks for the links in there.
Excellent rebuttal, Antonio!
I’m surprised WebDesignerDepot would allow such crap to be posted on their website. Glad someone like you took a stand against it.
Thanks for this post.
These designery blogs just seem to come to the conclusion that every thing is a design trend.
I think a lot of these people see ‘grid design’ as a trend which comes along with using Helvetica and white and black in the design – and that’s just not right.
Good to see more people slamming these trend blogs – WDD, Smashing Magazine etc.
This is exactly the same for the so called trend of art direction in blogs – and Smashing Magazine looked a bit stupid for that last week.
Excellent response Antonio.
Great article!
Learning the grids is long process. Projecting the grid is even harder because the grids are not stand alone solution. If the grid contains text you first resolve the type and the typography issues and than the grid. Grids are just one way of organizing your content.
Unfortunately today we have many blogs that do copy paste content or something like “Top Ten Awesome Super Cool …”
Other thing that disturbs me in general if Jason Santa Maria says something like “Don’t use the grids in every occasion” the people will interpret “Don’t use the grids at all”.
@people: Use your head, damn it !
+1 on the “completely agree, what a brilliant article” bandwagon
Like many other tools that designers (or anyone else for that matter) have come up with, grid systems can both be helpful in the right set of hands, and unhelpful in the wrong ones.
Thanks for write this excellent article. People normally confuse design process and they think first you create a random grid, and then you try to put elements inside, and it’s a wrong conception. Grids are here to help us, and we should manipulate, distort, and create grids to “contain” our creative work. Grids are not a jail, are, like you said, foundations.
Yes, yes, it’s all true… But the article didn’t (or wouldn’t) comment on de problems about grid systems… Well not actually on the systems, but around ppl using it.
And yes, it’s becoming trendy… The bigger problem there is overusing things most so called designers are not ready to… The trend, unfortunately, is screwing with grids, not using them properly.
I’ve been using grids since someone showed me what it was all about, in the mid 90’s, and I’ve really screwed things up now and then, but it was all part of the learning process, and I didn’t start thinking I new every little thing about grids jus’couse I found a small piece about it…
Mastering ANYTHING in life takes lot’s of studying and practicing, not only pushing some guide lines on some software and saying: “LOOK! It’s Swiss!!!”
Not saying it was not a great article, not at all, but the margins it leaves for “those ppl” to fuck things up using all the theory here to defend they’re pieces of humongous craps is just way too wide… And I’m just posting it because it already begun…
@Vladimir Carrer:
Hey! Don\’t put words in my mouth, I would never say such a thing.
Interesting article, would be interested on your thoughts as you when it is (or not) ok to break the grid as per http://www.smashingmagazine.com/2009/11/27/designing-websites-for-kids-trends-and-best-practices/
“Grids are a design trend.”
There’s really no reason to read anything past that line.
I too read that article on Webdesigner Depot just the other day, and was also concerned with its perception of grid systems. Thank you very much for pointing out the misconceptions.
Great concise article. This is proof that article-foundry blogs like wdd, smashing & all other ad-friendly sites can find their match with simple yet superior blogs like AisleOne. Good thing!
Refreshing content. Great work!!
@Jason Santa Maria: Sorry, for took you like an example. I was not intended to put words in your mouth. I have great respect for your work and your one of my favorite web designers.
The try story is one guy told me that doesn’t make sense that I use “the rule of thirds” or “the golden proportion” for some of my web projects because he read on your blog. That is why I took your name like an example. Well known designer who influence other designers.
But, the point was that people can misinterpret other words and thoughts.
Let’s change the statement: If some important designer says: “Don’t use the grids in every occasion” the people will interpret “Don’t use the grids at all”.
Webdesignerdepot seem to have pulled the article curiously enough
Great write-up. the whole issue of the fixed grid misconception is a very interesting one indeed. Thanks for the resources and additional info on that.
I’ve heard individuals complain that grids hold you back but what most people don’t realise is that we create invisible grids all the time in our minds when designing to help align content even in the most radical designs. Grids do not mean that all content is going to look like a newspaper… Use it as a guide thats what its there for.
A very thorough and compelling post. Grids should be worked with, not against.
As ever a great article Antonio and great response, unfortunately the original post has been pulled now so would of liked to of seen the writers shortsightedness for myself!
The best explanation for a using a grid was by Wim Crouwel over at Design Assembly’s blog
““(For me) a grid is like a football pitch. You see a beautiful game of football, and then you see a not so beautiful one, but it all takes place on the same pitch”.
Good article. I would, however, include a caveat regarding the CSS frameworks you pointed out: most require a developer to use non-semantic class names within the code. This is generally A Bad Thing. A designer basing a design on a grid is certainly not a problem (and should indeed be encouraged!), but the frameworks’ that implement a given grid do absolutely cause issues.
I think that this is possibly where some of the “they impede creativity” and
“it’s a trend” arguments come from; a site based on a grid *framework* can become cumbersome to develop and/or redevelop for when “span_8” et al. is used all over the place instead of proper, descriptive semantics.
I know there are compilers for some of the frameworks that attempt to work around this problem, but they’re not widely implemented and require extra work after the fact.
Just sayin’ 🙂 Yeah for Grids! BUT select your grid frameworks carefully!
@oisin prendiville
more than that – it looks as if the article’s author (who was a prolific contributor to many amateur design ezines) has nuked her entire online presence. Her twitter and facebook accounts are gone and her websites are down. She must have been incredibly embarrassed.
If diamonds are a girl’s best friend, grids are a designer’s best friend.
Unfortunate article and the author has obviously felt the wrath of the design community.
Grids are indeed often misunderstood and misrepresented. They’re a very useful tool for graphic design and can be invaluable for production.
I’ve come across designs that were made with a conceptual grid and a different grid for production for that very same design. The difference between the types and uses of grids causes all kinds of confusion.
Most graphic designers that have done a little of their own DTP (quark/indesign) work would have experienced this to some degree.
If a designer has only worked on the web than they may have missed a trick or two. The front-end doesn’t need to follow the exact same grid to recreate the design. Production usually has its own rules.
Just remember, design is all around and every design discipline uses grids, they come in all shapes and sizes. They certainly don’t need to be strait lines. They can be two points on screen or a clotheshorse.
Can’t “grids” just be a well laid out page? I don’t understand what CSS has to do with it, besides positioning elements on the page that is pleasing to the eye.
The grid article by Kayla Knight that we posted wasn’t up to standard. I’ve listened to all the feedback and decided to remove the article.
As Stephen Covey says: Don’t argue for other people’s weaknesses. Don’t argue for your own. When you make a mistake, admit it, correct it, and learn from it–immediately.
WDD & Kayla Knight: If your article is the one that was mentioned above, I applaud your response. Not necessarily for pulling the article, but for having the strength to engage in the conversation.
Graphic design is not a mystical black box. All its possibilities can be quantified, no matter how haphazard the work.
in trends you should really point out that grids have been used for ‘thousands’ of years, around the 13th -14th century is a good example but also the usage goes back to as early as 2686 BC.
The greatest impediment to the use of grid systems is the inherent misconception that they determine the design being created. Grids are nothing more than a guide by which graphic layouts can be quickly achieved. Ultimately the human eye (perceptual) and the manner in which our brain associates form (cognitive) determine whether a design is aesthetically pleasing. The proof of this is the well-know practice of optically correcting a mechanical layout. If grid systems were the be-all and end-all means by which to design, there would be no need for adept designers to “clean up” layouts. Optical corrections to layouts (balances of form and space) are needed as graphic form relationships are so complex that a mechanical grid layout is simply too coarse to properly deal with content. Using only grids to design is like using an AK-47 to hunt rabbits – you’ll get the job done, but it’s not going to be pretty.
This is where I think the majority of people equate grids with killing creatively – it’s because they see grids not as a tool, but rather as the only means to an end. Grids were never meant to be seen in this light – they are guides only. The human eye and the experienced designer do a much better job of arranging elements in space to create beautiful and functional images.
I was never taught how to use grids and didn’t use them until I really had to get work done quickly. But even today, I never start a project by laying down a grid – I first determine a text + image combination that I think is appropriate (usually it’s simply just what I think looks good) and then I erect a grid system around that choice. Once all text and graphic forms are placed on the gird, numerous optical adjustments in positioning are made to create better balance.
Working strictly from an optical point of view is of course possible, and may even give better results, but is certainly slower and only feasible if you are a very experienced and talented designer.
Two quotes on grids:
” The typographic grid is a proportional regulator for composition, tables, pictures, etc. It is a formal programme to accommodate x unknown items. The difficulty is: to find the balance, the maximum of conformity to a rule with the maximum of freedom. Or: the maximum of constants with the greatest possible variability.” Karl Gerstner, 1964
” Working with the grid system means submitting to laws of universal validity.” Josef-Müller Brockmann, 1981
Great article. In my experience the grid has actually given me more freedom. Who was the complete idiot who wrote the original article you were commenting on?
awesome and well-written piece.
wonderful!
thank you very much for the care of clearing that up.
hi antonio,
a key point both your article and the one you’re addressing miss is that wherever there is geometric harmony and balance, there is some sort of “grid” being followed, even if it’s not obvious or intended. while it’s true that a grid can be used as a tool when understood, it’s existence is simply an outcome of spatial truth, just like musical relationships have a mathematical to realm to them.
to put it simply, a grid just is. the designer doesn’t have a sway over its presence or absence. his only choice is how to interact with it: rebel and create unresolved tensions by always slightly challenging where the grid wants to lead (like making atonal music), or make peace with it and create harmony. human eyes, of course, prefer it when there’s harmony, but if a skilled designer proceeds to design without paying mind to a grid as such, as i’m sure you’ve noticed, it ends up following some sort of grid anyway. an awareness of that grid is only just that: an awareness, which is knowledge (and as you’ve stated, it makes you more efficient).
the problem with the two examples you provided under “Grids only benefit certain designs”, and the ones that are showcased at http://grid-based.com/, is that they all employ design sensibilities where the underlying grid is clearly re-inforced by the layout. these showcased sites just aren’t different enough to strongly illustrate your point that grids work with a wide range of styles. better examples would be those where the grid is less apparent but existent nonetheless, though i admit these are more difficult to find.
here’s my feeble attempt:
happyingreenville com
opiummagazine com /opium9/
noonebelongsheremorethanyou com
anyhow, the reality is that your skill as a designer relies in an understanding of the grid, not in necessarily re-enforcing it. as they say, you must know the rules in order to break them. your decisions must be intentional and informed, either way.
incidentally, this double-sided truth is perhaps illustrated by the fact that i find that ellen lupton quote dubious, simply because it’s a poor analogy. if it’s anything plenty of brilliant writers have lamented about, it’s how they feel limited by language. sure, writers are more articulate than others, but their real strength is collection and processing of information, whether it’s feeling or thinking, and i doubt that they are ever 100% content with how they can express these with language.
sarahana, some great points.
Like you’ve stated, it’s in our nature to design to a grid, even if we’re not using one.
By the way, the St. Francis site is beautiful. Well done.
Antonio I thoroughly enjoyed this. I am glad someone is taking a stand on all the garbage that we have to wade through to find good content online. It makes it hard to determine what is good and what is bad. I think that if more people stand up and make clear posts (like this one) in their respective areas the web for research can be A LOT cleaner and more informative.
Cheers,
hi again — i just responded to your tweet, but wanted to clarify here as well that the st. francis website isn’t by me. i was just making a modest attempt to list the kind of examples i was talking about. the website is by the *amazing* folks at grow interactive: http://www.thisisgrow.com
and it really really makes me want to be happy in greenvile 🙂
A great article regarding grids, I am really happy that there many quality facts presented here therefore many things to learn.
Good job, Antonio!
P.S: I’m glad WDD realised what it was all about.
I agree, however, I think that grids are, themselves, also a crutch used by people who don’t yet fully understand spacing in a design and how to use it properly. Once a person can properly use the Golden Sequence in order to lay out a design, I think that they should be able to visually set up their own grid within their design, rather than relying upon the grids of others.
Grids are not a crutch at all that’s simply inaccurate! golden ratio or not there is no way that you are going to get consistant results by eye especially if you then have to hand off a design or layout for production elsewhere. Grids enable a design to be followed to execution to a rule. Design is about providing a solution and that solution must provide a purpose. Grids are a framework for this.
Good read. Thank.
What’s worrying is that there are so many designers who use grid as the end, and not the means. That’s probably why it seems to appear as a trend to some people.
Nice article, thank you.
Very good article. I totally agree with you.
Alex
Could not agree more, it is a fundamental part of design and can only lead to a strong design if used properly.
It was one of the defining factors when I planned out satellitesoda as I knew it would lead to a stronger design and make things easier.
Great article.
Greetings!
Thanks for the article! It was intresting to read.
I’ve translated it into Russian, hope, you don’t mind.
Very interesting article there, argument well made, as a aspiring web designer, I want to thank you for taking the time to share your knowledge. Thanks
And Clarke devoted an entire chapter to grid-based design in “Transcending CSS,” very much in agreement with your points here. Any designer who hasn’t yet read this book should do so. 🙂
http://www.transcendingcss.com/
Thanks for taking the time to discuss that, I feel strongly about it and also love learning more on that topic. If achievable, while you gain know-how, would you mind updating your blog with more information? It is extremely helpful for me.
Hi, yup thіs paгagraph is reallу fаѕtidious
and I have leаrned lot of things from it concerning blogging.
thanks.
Hi there, this weekend is fastidious in support of me, since
this point in time i am reading this wonderful informative article here at my residence.