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, Design Chair at Wildcard and co-founder of Kidpost. Previously, Khoi was co-founder and CEO of Mixel (acquired by Etsy, Inc.), Design Director of The New York Times Online, and co-founder of the design studio Behavior, LLC. He is the author of “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. Refer to the advertising and sponsorship page for inquiries.+
How Grids Are Made
All of which is a long-winded, roundabout way of introducing some notes on how I constructed Yeeaahh!, the theoretical redesign of a famous Web portal that I created in order to demonstrate the principles of grid-based layouts. Folks have asked whether all of this work was done in Photoshop or not, and how I work with that program’s guides to create accurate grids.
The first answer is that yes, unequivocally, Photoshop is my tool of choice for creating designs for the Web. In this task, it has tremendous drawbacks, but I’ve yet to find another tool that will as accurately translate a designer’s intentions.
The second answer is that I just don’t use Photoshop’s built-in guides to try and create grids, at all. I find that feature to be particularly inaccurate when accuracy is exactly what I want; its unreliable snap-to behavior never leaves me feeling reassured whether or not an object is aligned to the right or left of a guide. It’s maddening.
Instead, I create blocks of solid color — usually in Web-safe #FF0000 red — to represent my grid, group them together in a layer folder ordered at the top of my layers palette, and set each of them at roughly 40% transparency. This allows me to toggle the grid on and off, and also to swap variants on the grid — different combinations of units and columns — at will. Much, much easier than using Photoshop’s guides.
Upgrade and Away
To wrap all of this up, I wanted to say that I haven’t completely given in to old age. After five years of using Photoshop 7.0, I’m finally considering upgrading to the most recent version. This latest edition of the program, which comes bundled with any of Adobe’s many confoundingly bundled variants of its Creative Suite 3 product, looks promising in that it’s been rewritten to take advantage of the modern day speed available in Intel-based Macs. Hooray. I’ll admit though that I don’t know what the difference between, say, Adobe Creative Suite 3 Premium Standard Pro Home Ultimate Edition and the other seventy-three options are, but I have faith that with a slide rule and a farmer’s almanac, I’ll be able to suss out the right upgrade for me. I’ll let you know.+