Article Stats
- Published on June 22nd 2007
- Categorized under Features
- 32 comments and 1 Pingbacks
- 24 views in the past 24 hours
2007 / June 22nd/ On grid design
I’ve heard the term “grid design” more than I’ve seen the color blue around the web this year. Why such a resurgence of such an ancient technique? But more importantly — why doesn’t anyone use grids? I was always taught that grids were lines of integer multiples crossing both the vertical and horizontal. Then again, I’ve never been “trained” formally in design either. But here’s my opinion, for what it’s worth.
The Basics
Let’s go back to the basics for a second.
This is a grid.
This is not a grid.
This is also not a grid.
Okay, so we’ve got that straight?
It’s not a grid: it’s symmetry
Now that we’ve got the basics of grids down, we can start to see that so called grids are nothing but symmetric vertical columns that may or may not be used in integer multiples.
In my opinion, integer columns are not grids. They’re simply symmetry. Going back to grade school to find the lowest common denominator and multiplying your grid across.
Integer multiples are not the only multiples to use
Throughout ancient history there has been a different ratio used instead of integer multiples (2x, 3x, 4x, etc). It’s called the Golden Ratio, and it’s a number so engrained in our brains that it can’t help but be great design to use it. It’s the number that built the Pyramids, and practically all ancient infrastructure.
It’s the number that’s built into mother nature herself. It’s the number plants, animals, and all life follows. Nothing on our body is twice the size as something else: it usually conforms to the golden ratio.
Golden Ratio: 1.618
I don’t use grids
On that note: I don’t use grids. I don’t honestly see much point in lining things up so that integer multiples are the basis of the design. I much prefer to use what I feel looks right. It makes my head a lot less dizzy, and my readers don’t notice.
Don’t get me wrong
Don’t get me wrong. Use “grid design” all you like. In fact, lining things up is one of the most basic principles of design. I’m a huge fan of so-called “grid designers” like Khoi Vinh. But, please guys… let’s stop calling it grid design and start calling it design.
33 Comments
Make a Comment
don’t be afraid, it’s just text
Warpspire is the place that web professional Kyle Neath writes about the web. More →
A word from the sponsors. Advertise with Warpspire
Hot Topics
-
2006 / Spotting a fake: “New apple design”
95 comments
-
2005 / Introducing Hemingway
88 comments
-
2007 / Wordpress community, we gotta talk
67 comments
-
2006 / (Re)introducing Hemingway
61 comments
-
April 16th / 5 reasons I won’t be getting on the open id train
59 comments
Feeds / Syndication
Choose your preferred method of syndication. All feeds are full-posts & ad-free. All feeds are protected under copyright and may not be redistributed without permission.
The Network
All my little projects that I leave scattered around the web. Some for profit, all for fun.
June 23rd | #
Well I have read a lot of articles on Grid based design. I feel it restricts creativity by trying to conform to a grid layout. I still trying to figure out if its useful or not. For example my website looks like a grid based design but I didn’t make it based on grids.
June 23rd | #
I was going to make a comment about your site using the grid design without intending too, but I had to figure out if you did this on purpose or not. Your site’s name is clazh and your site is a “clash” of pretty much all the “web 2.0″ design elements (gradients, reflections, horizontal stripes, etc. I just wanted find out if that was intentional or not.
June 23rd | #
That last post was directed towards the first commentor, Arpit.
June 23rd | #
@ben …….. lol no it was not intentional … (its my first design).. and you have rightly put its as a “Clash of Pretty much all web 2.0 elements” . I played around with the design for more than 3 months, In the end I just pushed it out as it is. I am thinking of getting rid of the stripes soon :)
June 24th | #
I guess most of you know this little app, but for those who don’t: Phiculator
A handy little one this is…
June 25th | #
Asger: That’s a really cool app! Thanks for sharing.
June 25th | #
I have to say, I was expecting this article to be a lot longer. They usually are. And usually they make little sense in the end. This was smart, concise and enlightening. I made me think about the the idea of symmetry and beauty. It’s true. I would never organize a room in a true grid design, so why would I feel more comfortable looking at a page designed that way?
I have one question though. Do you believe there is a difference then in designing for classic 4:3 monitors as opposed to what’s slowly becoming a new standard: the wide screen monitor, which I believe has a ratio of about 1.6… I know that having a classic monitor, I always set my browser to something that resembles a wide screen look. Just a thought that occurred to me now.
Oh, one more thing: “Nothing on our body is twice the size as something else”… That doesn’t add up of course. My torso is at least twice the size of my head, and that in turn is a lot larger than, well, other bits. I do know what you mean though: when it comes to ratio, at least, size doesn’t matter.
June 25th | #
Arguably, it’s still not a grid because it’s not the same symmetry both vertically and horizontally; but from my understanding the horizontal lines in the “grid” come from vertical symmetry in the line height, as demonstrated in this article:
Setting Type on the Web to a Baseline Grid
Using this technique you cause the lines of text in separate vertical columns of your site to be aligned horizontally across the page. I’ve also seen this called vertical rhythm, and, as in the ALA article, the baseline grid. However, going along with your general complaint, there are very few tutorials that I’ve found that talk about both horizontal and vertical spacing in the same article, so we could rotate your example images ninety degrees and the title would still hold true.
June 25th | #
i think your idea of the grid is a bit off.
grids aren’t solely about symmetry or about placing lines at multiples that conform to some pleasing constant. they’re about creating a systematic way to place elements on a page.
probably the best way to illustrate that is to look at any site wireframe. as i’m going through your site, having two different pages open in two different windows, i would not expect to see your top navigation and masthead shifted by a few pixels vertically or horizontally. i also wouldn’t expect to see your right hand navigation shifted down for no good reason.
if it was, that would tell me that you can’t measure, and your style is inconsistent and amateur at best.
same goes for books or magazines. you flip through them and expect certain elements to fall in a specific area. and if they don’t (assuming the designer isn’t trying to be avant garde), you could probably break down the placement of elements on one page and compare it to elements on another page and find that they fall onto some commonly shared blocks.
again, it’s about creating a system. grids are meant to reinforce a visual pattern while allowing the designer a framework to shuffle things around as needed.
it’s difficult, if not practically impossible to upkeep, to get elements on the web to line up horizontally, so that aspect of the grid doesn’t apply on the whole. but even then, you can break down those fluid elements into big blocks and within those blocks have a system of alignment.
i can point you to some examples that i’ve done [in print] if you want. just let me know. they’re not so symmetrical but they all conform to a grid.
July 2nd | #
Sorry Kyle - all three of those images show grids. The first is a badly-planned modular grid; the second is a column grid; the third, though less regular, is its own kind of grid.
A grid is simply a system for organizing a composition. You can build a grid that consists of one box - or you can make a grid out of a dozen clashing curves slashed across the page. A grid is just a set of guides that help a designer make layout decisions. It provides a crutch for tight deadlines, structure for complicated documents, and resistance when there’s time to do design right.
When you talk about horizontal and vertical divisions, you’re describing a modular grid. I’ll say now that a correctly designed modular grid does not simply divide the available space into even portions - the vertical interval is determined by the leading. Otherwise the grids don’t work well with type. Most graphic designers don’t understand that, which probably has something to do with why so few of them use modular grids.
Take a quick look at the grid articles at http://www.thinkingwithtype.com/
Better, read a book or three:
Making and Breaking the Grid, Timothy Samara (includes contemporary notions of what might constitute a grid)
Grid Systems, Josef Muller-Brockmann (a classic; takes a rather narrow view of what a grid should be)
Grid Systems, Kimberly Elam (less expensive)
Or have a look at a newspaper - any major broadsheet will contain a well-executed modular grid. Laying the paper out would be a nightmare without it.
July 3rd | #
Well, Dvid beat me to it, but I was also going to note that all three of the images above qualify as grids (assuming, of course, by “grid” you mean the mechanism used by graphic designers to systematically lay out elements of a page).
July 3rd | #
It’s funny, because every definition I look up for grid is something along the lines of:
But, I suppose all major dictionaries are wrong ;) My point is that designers use the term “grid design” to merely describe one of the most fundamental aspects of design: alignment. There is nothing “new” or “sophisticated” about this technique except a bunch of people misusing a term for perceived accuracy.
I would say that 99.5% of so-called “grid design” in use on the web today completely neglects leading (in fact, I would challenge to say over 90% of people using “grid design” couldn’t define leading by themselves).
In my opinion, we should reserve the phrase grid design for designs based off true grids. (See http://uxmag.com/ etc). You are correct in that many newspapers do in fact employ grid design. But this is not the same “grid design” used in the web for the most part.
July 4th | #
From the Oxford American English Dictionary:
Forget dictionary definitions. Look instead at what graphic designers, design writers, and educators say about grids.
There’s more than one kind of grid. You’re talking about modular grids. Most web designers (and most contemporary magazine designers) use column grids. Book designers tend to work with a manuscript grid, with one main text block. Poster designers come up with all sorts of crazy grids.
I’m speaking here as someone who’s taught grids. But forget me. Look at the sources in my previous comment. The website is by one of today’s leading design educators; one of the books is by Josef Muller freakin’ Brockmann. These folks all disagree with you.
The point of a grid isn’t alignment. It’s a vastly more powerful idea. The creation of a grid involves more than just scooting layout elements around the page — more than alignment, or disjunction, or intervals. A designer creates a grid, then lets that grid help inform later layout decisions. The grid comes first and the layout follows.
Stop and think about that process for a moment. Not “line stuff up.” Make a grid, then align page elements to that grid. Using a grid shifts intelligence and creativity to the front end of the design process, followed by a certain amount of surrender to a system.
Systems thinking is one of the most powerful ideas in graphic design of the last 75 years. You create a system — a grid system, but perhaps also a system of type hierarchies, or a system for image sequencing, or a system of colors — and you let that system inform later design decisions. Systems thinking says that design isn’t just a bunch of independent aesthetic decisions, but the creation of ways of organizing ideas and behaviors.
You do this already.
Grid systems just make your work practices more formal. They’re not for everyone, and they’re not appropriate for every project. But they’re worth learning about, if only to understand your own decisions better.
July 9th | #
I strongly echo the comments of David, Jeff and Kaiser.
“I don’t use grids. I don’t honestly see much point in lining things up so that integer multiples are the basis of the design. I much prefer to use what I feel looks right.”
Adding to the comments of others, the purpose of a grid is to organize content into a systematic and rational manner so that it makes the user experience uniform (to some extent) and easy to comprehend. Grid design is not essentially about ’standing out’, many of the best pieces of work I have seen do not scream of ‘grid design’, they are simply a well layed out design that uses a grid system to organise its content.
Admittedly there are many instances where grid systems are not the best solution, but as many people here are no doubt web designers, I believe grid systems to be of increased significance as the web is, at its purest form, a medium for displaying imformation.
July 9th | #
Grids and grid design on the Web go both ways—literally.
Most designers don’t assume that a horizontal alignment, in addition to their vertical alignment, is necessary nor applicable. Needless to say, they’ve been misinformed. Grid design has taken a generic overarching nature, applicable to any well-thought out, uniformly aligned structure used to organize and present content in a logical fashion.
While I think that you have some basis for the lack of understanding by most people (between a true “grid” and simply vertical or horizontal alignment), grids come in every fashion. Aligning to a common baseline is usually the best practice to achieve vertical and horizontal harmony, but that’s no something we see all that often either, now is it?
Good article ;).
July 9th | #
I believe you guys have all done nothing but prove my point further :) If you read my article, that’s exactly what I was referencing: people that claim to use “grid design” are doing no more than aligning things. And grid design is so much more than that. Also, please keep in mind that grid != grid design. My point for showing examples of grids was not to show techniques for *grid designs* but show examples of *grids*.
My disgruntle is the fact that people use integer multiples vertical lines and redefine grid design as that. It’s simply not. I challenge you to find an article on the web about grid design that does not make use of integer multiple vertical lines. My bet is, you won’t find any: because that’s what “grid design” has been defined as by the community.
July 18th | #
Some weird thoughts you have here on using grid systems as a basis for designing layouts. You are taking the term ‘grid’ too literally . Listen to David, Kev and Jeff. Of course they haven’t proved your point further. If anything they have proved you wrong, and you have proved yourself as being an opinionated fool.
July 18th | #
Anonymous: What a fitting name for a useless comment. I’d rather be an opinionated fool than an Anonymous follower any day of the week.
August 1st | #
Grids are a very basic design tool you learn to use in design school off the bat. If people aren’t using them, they probably haven’t been taught to do so. If they haven’t been taught to do so, they probably aren’t coming from a design background.
A lot of web designers are coming out of a computer science degree program, some tech heavy new media program, or are even self taught. Not knocking any of these, but they’ve been taught to approach a little differently.
August 2nd | #
Interesting article, Kyle — even more interesting thread of comments.
I’m not going to wade in on what you think a grid is or what I think one is. What this thread has pointed out is there are more that one concept of a grid. And that’s fine. This remark interests me though…
This is where I am going to disagree with you. That is the case. Let me explain why.
You refer to history several times in your article, and in this thread. Grid systems were originally a mechanical solution to solving a problem. They were bits of wood, and then metal placed in a press. As printing became more sophisticated, so did those systems, but they still had their roots firmly in the mechanical (and the medium). The same can be said for the web.
As designers who are using a grid system as a tool to help us solve information design problems on the web, we are constrained by the medium. It’s difficult to create a modular (horizontal lines included) grid on the web. Therefore we concentrate on the vertical. We’re simple working within the constraints - the same as printers did hundreds of years ago, and Müller-Brockmann did fourty years ago.
“Grid design” has to be defined by the community — it always has been. It’s being defined by the constraints of the medium. A grid system (and a good grid is a rationally constructed system - not just lines) is a tool created to solve a problem. Part of that problem is the medium. Which is why, at the moment, grid system design on the web is focussed on the vertical.
August 2nd | #
Oh, and one last thing.
Grid design is a valid concept that is overlooked here. When you’re referring to ‘grid design’, are you referring to a style? Such as the Swiss style?
I actually see grid design as part of the design process. When I use a grid, I design it. I don’t just throw a few lines on a page and go from there. It’s a rational design process based on the constraints and the brief.
August 2nd | #
Perhaps it is due to my education at a school that emphasizes an International/Swiss style, but I would have to agree with Mark.
I find that setting up constraints, via a grid, helps direct the designer’s creativity; not limit it. A real good read that helps you setup and follow these ’self made restrictions’ is Grid Systems from the Princeton Architectural Press’ Design Briefs series ([Good Review Here][http://www.underconsideration.com/speakup/archives/002183.html]).
August 3rd | #
I have to agree with Mark. A grid can be even liberating. When you have a good grid everything falls into place.
August 3rd | #
The css box model is such a flexible concept, I sometimes feel like it is crying out to designers to stop confining it within their grids and instead liberate it, let it break the barriers, and let design flourish and find it’s own new character in a new medium.
August 9th | #
To the person who looked up the definition of Ajax — while Ajax was, in fact, a Greek hero, the web version of AJAX is an acronym that has, through common usage, become more of a word. That’ll happen, on occasion.
That said, I think grid design definitely does refer to alignment, as you mentioned, Kyle, but different domains do occasionally warp certain words to use them to describe common patterns in those domains, and I think `grid’ is one of those words whose definition has been modified slightly within the domain of layout to express some common alignment techniques.
August 9th | #
no grid no design.
you may as well face it. your doing grid design whether you know it or not. the key is the non square grid. the grid unit by default is the same shape as the canvas, which is the source of confusion on the web where the canvas scrolls infinitely.
August 15th | #
I would have to say I agree with Kyle to an extent (as well as Karmadude). Where is the design on the web anymore? The unique and truly innovative web designers of the past have themselves seemingly gone astray. In a medium where no limits exist with the available tools we see the same layout and design repeatedly endlessly. Just different colors and patterns existing on the same walled in website. Its like someone built a room in a house and everyone just keeps repainting the same room. The grid can be avoided..its not necessary to stay within a set pattern of columns and blocks to have a well designed website thats easy to read.
Unfortunately, the diehard designers will state that a grid always can be found. Which is of course true because of mathematics, but lets all try to think outside the standard grid and less about ratios and patterns….web designers need to focus more on the story of the website from time to time..the user experience can be lead and driven by contrast, color, shade, etc….not just by boxes….
August 16th | #
An addendum to my previous comment. I think many need to remember this article:
http://alistapart.com/articles/outsidethegrid
September 19th | #
[…] on a few things. Blueprint claims to aid grid-based design. That’s not entirely accurate. Yes, really. Columns aren’t grids, and the Web will probably never see true, “gridesigns”. […]
January 10th | #
I think this author of this article makes it blatantly clear that they haven’t got a freaking clue what they are talking about.
Not all grids used in grid design are symmetrical, what a dumbshit thing to suggest otherwise.
Grid design is an established discipline, its not simply aligning things on a basic modular grid. Go read Josef Muller Brockmann’s ‘Grid Systems in Graphic Design’ and then try to convince yourself that grid design is as simplistic as you made it out to be in this article. In fact, after reading that book i think you would find grid systems are integral in improving usability and ensuring there is sufficient contrast between your design elements to give readers/visitors visual clues as to the hierarchy of the design elements in a page.
In the first images of this article you have a grid comprised of vertical colums with the accompanying text ‘this is not a grid’, then in the following paragraph you state ’so called grids are nothing but symmetric vertical columns’ WTF man, do you read your own articles before you publish them?
January 10th | #
Further, a grid can be constructed by any geometric shape that can be converted into a line, be it a circle or a tetrahedron. Do a google image search for muller brockmann and you will see that grid systems are more than simply ’symmetrical vertical columns’.
February 23rd | #
Your comment contains very useful information about all thank you Tercüme Bürosu
April 28th | #
A good grid is very helpfull. It makes designing a website a lot easier. I prever the 960 grid. But it is time to be more creative in designing grids. I like the suggestions Juggs made.