is a blog about design, technology and culture written by Khoi Vinh, and has been more or less continuously published since December 2000 in New York City. Khoi is currently Principal Designer at Adobe. Previously, Khoi was co-founder and CEO of Mixel (acquired in 2013), Design Director of The New York Times Online, and co-founder of the design studio Behavior, LLC. He is the author of “How They Got There: Interviews with Digital Designers About Their Careers”and “Ordering Disorder: Grid Principles for Web Design,” and was named one of Fast Company’s “fifty most influential designers in America.” Khoi lives in Crown Heights, Brooklyn with his wife and three children.
Please refer to the advertising and sponsorship page for inquiries.
+
now, you probably don’t know it but posts like this just piss me off… i’m not a designer, i’m a programmer, but i appreciate your imense skills and try to “copy” them whenever i need to whip up a site or an interface. now, how about instead of just saying that the authors gem is complete bullshit, you respond with a slightly more thought out rebuttal explaining “why”… if you don’t do that you sound just like another wonky tonky far right born again christian nutter…
thanks!
ah, ok… now i see where the arguments are laid out. Khoi, this “JUMP TO THIS LINK” link is a bit of a usability nightmare. don’t you think that the name “Antonio Carusone” should be a link to the article in much the same way that “this article at Webdesigner Depot is”?
by the way, your spam check asks me to type “against69”, when, in reality, i’m all for 69!
Flynn: you’re absolutely right that that link prompt is bad usability. I’ve had it on my list of things to clean up on this blog to redesign that for some time, but haven’t had the chance. Part of it is how I write these shorter posts; when I don’t include links within the body of the text, the link seems to perform better. Anyway, as an interim measure, I’ve re-written this text along the lines you suggested. Thanks for reading.
Don’t thank me for reading, thank yourself for writing… i’ve been reading your feed for years now. you’re a great guy and probably the best web designer there is.
Thanks again dude
Too bad the webdesignerdepot article is offline, I’d like to see it back.
Khoi, the rebuttal you point to seems to almost make it to the realization — but not quite — that Anthony Froshaug offered: ‘grid structures are implicit in the word typography’. You might like to point out his essay to your readers:
Typography is a grid
As Robin Kinross writes, Froshaug ‘thought that grids were self-evident and inevitable; not something to make a song and dance about’. Grasping the import of Froshaug’s argument might really be an eye-opener even for those who already believe they’ve seen the light w/r/t grids (_ie_ there’s no controversy here — if you’re doing typography, you’re using grids).
Right, now something of meaning! Personally, I find grids rather nice because they allow me to think about the “creative” part of the design more since I am not met by a frightening, blank canvas.
Some people like to use ad sizes for guides, I don’t mind that either. Grids however allow me to position content easily. It is only after positioning the content that I start thinking about the polish.
Now regarding design blogs; I have two categories. The first are blogs that talk about design principles, UX, IA etc. And the other category is software specific and talks about the technical part of creating sites.
I don’t read webdesignerdepot because I think most of their content is a little on the weak side. I understand that it’s a commercial blog etc. but I am not really into the Britney Spears of the blogging world.
Haha – I’m subscribed to the web design depot site. You have to take their articles with a grain of salt if you’re an experienced designer.
They cater to the new school designers who have dreamweaver, photoshop and know how to use the gradient button.
== Here’s most of the article, copied from my RSS feed (some cut out due to 5000 character limit here) ==
The grid is a commonly used component in both web and graphic design, promoting organization and alignment in the final output.
Better alignment and order can, of course, lead to a more effective design, whether it is for print or the web.
When used correctly, a grid can add user-friendliness to a design, allowing the user to predict where the information they need is placed.
In order to receive the benefits of the grid, though, a correct use of the grid must be in place. Both inexperienced and experienced designers may not know how to correctly and effectively use a grid system.
Depending on the content needs per website/graphic design, and the overall look that needs to be achieved, the use of a grid may or may not come in handy.
Furthermore, when a grid is used, it must be used correctly to match the content and style requirements.
Designing with a grid has become an increasingly popular choice, for the obvious reasons above. However, not all designers use the grid, and rightfully so.
Despite the benefits above, a strict grid is not always an appropriate choice.
The grid was originally used in graphic design, and more recently in web design to create order in design. It is still used for that method, of course, but lately it has become a design style rather than just a tool.
Therefore, the point of using a grid can be for any of its traditional means, or to comply with an upcoming trend with a grid-like look.
If using a grid for aesthetic reasons, rather than for the sake of the trend, a designer would be using the grid to take the Љguess-work’ out of design. Any form of art seems to have limited rules and regulations — seemingly making it all that much harder to become great at.
However, just like in many other forms, art and design can have technical guidance. This guidance makes it easier to visualize divine proportion or proportions otherwise, create equal margins and padding, and can help the designer to keep the overall wireframe in place when implementing visual details.
Common uses of the grid are in blog themes, and more specifically magazine blog themes. The magazine look is the original grid design — columns, rows, and an overall table-like appearance.
In recent years, blogs started popping up with a magazine-like approach, and therefore its counterpart look was named the magazine-style theme.
Magazine Grid-Based Layout
As one may have guessed, like blog themes, grid-based design is great for content heavy websites, or graphic designs that also have large content requirements.
Advantages
Many of the main advantages have already been highlighted above, but we’ll go over a few more in detail below:
* A grid can add better alignment, balance, and equality in spacing for a much better visual experience.
* The wireframe is directly implemented into the design phase.
* Grids can replace the few benefits tables have always had over more modern terms of website coding.
* Grids add organization in the coding with markup and CSS in addition to the design.
* There is enough organization to easily switch around pieces of content, features, etc. with little to no design adjustments.
* Can quicken the design process overall.
* It is a great way to keep track of nested grids (grids within the main grid).
* It is a straight-forward, easy approach to creating a modern looking webpage or graphic design, without resorting to additional visual aids or trends.
* Grids can make it much easier to apply even proportions for dividing content, and also divine proportion (the rule of thirds).
Disadvantages
Despite all of the obvious benefits of using a grid, there are disadvantages as well. These are not commonly thought of, and fortunately most can be avoided.
It is important, however, to make note and be aware of these potential disadvantages to 1) know when a design should or should not use a grid and 2) if so, use it effectively by avoiding some of the disadvantages below.
* Potentially, grids can get in the way of creativity. While it can promote alignment and organization, some designs just call for more abstraction.
* A unique wireframe or set of content requirements may not approve of a grid-based approach. In which case, it may be better to set alignment, spacing, and balance as best as possible without the use of additional guidance.
* The use of a grid requires a decent amount of content and visual elements. Without them, there is really no reason for a grid, as it won’t have enough to work with anyway.
* A grid doesn’t necessarily quicken the design process. It can help to create wireframes and organization in web and graphic design, which will speed up the design process. However, if these are already in place, or are highly uncomplicated to begin with, a grid may just slow things down.
Even better – the cached version:
Link.
I actually did see this and had the same impressions.
The problem, I think, is that the author didn’t have any firsthand of how grids are used and decided in advance to use an advantages/disadvantages format, which needed to be approximately equivalent in number in order to be fair to both “sides” of the issue.
I blame mass media’s insistence on providing “balanced” coverage by letting talking heads with opposing viewpoints recite canned talking points verbatim without any followup questions, attempts at larger truth or calling them on outright bullshit and deception when they hear it.
Our insistence that no one on the planet could possibly know more or possess better knowledge than us on any given subject is making us all clueless, self-righteous idiots.
Thanks to you and Antonio for jumping in there anyway.
Ugh. Gone.
Thanks for the cached link. Sad that Webdesigner Depot wouldn’t stand behind their statements and pull the article right or wrong. The best part about the web is free speech and the ability to debate.
I does seem that web design related content is becoming more polarizing. Traditionalists are fighting back against the new wave of fluff and hype web design sites.
This whole stream-of-consciousness, unresearched faux-expert web article business drives me bonkers… see here – it’s basically the color equivalent of that craptastic grid “article”: http://sixrevisions.com/web_design/color-the-next-limited-resource/
Argh too bad its gone.