The awesome Nathan Smith has released a CSS framework for grids. It’s very similar to Blueprint, but uses some different naming conventions and a 12 or 16 column default grid, instead of Blueprint’s 24 columns. Looks very useful. Nice work! Visit site »
Very handy. Me likely. Visit site »
I’ve only just skimmed this, but I must say that it looks pretty promising. Great to see that the W3 is at least thinking about this from a designer’s perspective. Visit site »
Although we never called it “quiet structure,” the design ideas presented here by Andy Rutledge are very much what we (and by we, I mostly mean Nathan were going for with the recent LJWorld.com redesign. The idea was to let the structural elements (grid, borders, boxes, etc.) serve their role as tools for positioning and establishing hierarchy, but also encourage them to fade into the background and let the content bubble up to the front as much as possible.
Andy uses CNN.com’s recent redesign an example of these same concepts.
Nice piece, Andy. Visit site »
Jina shows you how to craft a grid-based design that doesn’t look all boxy and boring. Because straight lines are boring. Ask anyone. Especially the readers of JeffCroft.com! They obviously hate straight lines!
But seriously — there is a misconception amongst web designers that grid-based layout means boxiness. It doesn’t. Jina’s example is full of swooshy, curvy goodness, but still maintains the underlying grid, for a best-of-both-worlds result.
Grids are there to unify your design and tie everything together. They’re not (necessarily) there to be seen. You don’t have to wear your grid on your sleeve like myself or Khoi Vinh in order to get the benefits of using one. Visit site »
Smashing Magazine is quickly becoming one an amazing resource for web designers. They’ve been putting together these massive lists of articles, tutorial, links, and so forth about a single topic (in this case, grid-based design). A lot of good stuff in here. Visit site »
Khoi has a wonderful (and glowing) analysis of The Times of London’s online design, which makes strict use of an established columnar grid. It’s a great insight into how a grid can be used from page to page to tie them together visually and structurally.
I myself am probably not quite as excited by The (other) Times’ design as Khoi is. I do think it’s a lot better than most newspaper websites, and I do love the thought that went into the grid — but overall, it still feels a bit more cluttered and unclean for my taste. I would like to see a bit more whitespace and a bit more stylistic subtly. But, I’m being picky. The Times of London is definitely one of the better online news websites, design-wise — so check it out, along with Khoi’s great deconstruction of it. Visit site »
The Action Book is a spiral bound pad with a suede-like cover that adds a comfortable element to practicing the “Action Method,” which is apparently a GTD-ish task management system. I’m not sure I could get used to using paper instead of a computer to manage this stuff, but if I could, I would totally use this. Beautifully designed, especially if you’re a Helvetica-loving grid groupie like me. Visit site »
Khoi has a post up about he and Mark’s terrific SXSW presentation about grid-based design. Slides, screenshots of his Yahoo! redesign,and more included. If you weren’t at SXSW, this is a must-see. Visit site »
Khoi and Mark’s Yahoo redux for their “Grids are Good” power session, which was the best 25 minutes of SXSW thus far. Visit site »
It’s wasn’t but a few weeks ago that I wrote, “I’d buy a book by Mark in an instant.” Well, this would be that instant. Can’t. Wait. Visit site »
Although I don’t think the design of the rest of the site quite lives up the the bar it sets, the homepage of UX Magazine is a stunningly great example of grid-based design on the web. While columnar and hierarchical grids are somewhat commonplace online, there aren’t many modular grids to be found — and especially not done this well. Visit site »