When it comes to beginning a new design I almost always start with a grid. Coming out of a school that was heavily influenced by the Swiss school of design it’s as natural as breathing. For me there is really no one single element that can facilitate designing pages like a grid. Especially when the pages are supposed to contain a large amount of content. It’s like a skeleton for your design.
With a fresh Photoshop canvas, IA on hand and thoughts of the new Blue Flavor site dancing in my head I sat down to create my grid and begin designing. Then I hit a wall. Instead of helping me design the grid began to get in the way. I started reworking the grid in hope that a new one would give me a different perspective. It didn’t help.
Several comps into the redesign I had nothing to show. Each one led down false roads and I began to feel trapped. My grid had become my enemy. So I got rid of it.
With the grid gone I could focus my attention on designing the look of the most central element, in this case the client feature. Once I felt I had this nailed I began to add more elements into the mix. I worked instinctively off where each new element would go. Focussing on how each interacted with the other elements. Sometimes I even went backwards to make the pieces fit together. It was a very organic process.
With the design pretty much finalized I decided to reintroduce the grid. This time it was based on the focal element (the client feature) as the main unit. It branched out from there. The layout had gone from an initial chaotic state to a very ordered system over time and iterations. The grid was just needed to clean up gut level decisions and make sure my spacing was consistent.
This process doesn’t work for every project but sometimes you need to shake things up a little to get what you want. After all, there is no right or wrong way to design. You use tools until they become a barrier to you. And then you chuck them and go with something different. Had I stuck with the grid I’m sure that many of the elements that break out of areas would not be there and the whole site wouldn’t be as nice.
Having come from a college that was heavy on teaching the grid as well, I know exactly how you felt. For me, if I start with a grid (and only a grid) in designing, I end up with something that is too boring and rigid. Unless I have a layout already sketched out on paper or in my head, it helps me to be as free and loose as possible when working in Photoshop. After I get a look and feel that works, then I begin lining things up and working on the grid.
Good write-up!
Having also come from a school that teaches traditional Swiss design, I find myself jumping to a grid early on. However, I always (without exception) will scribble away in the sketchbook before even touching the computer.
I have been dealing with the same things in my design process. I’ve adopted blueprint css with open arms, but it has locked me into a grid-muffled freedom.
While grids are great, they are only beneficial in a situation where good design and heavy amounts of content MUST co-exist. For a brochureware site that has about 5-10 pages and very little content, grids are over-kill.
Fortunately I have done the same thing, creating designs off the grid. It works well and gets you back to true nature of web design that doesn’t employ print design techniques and standards.
@Arik: Blueprint CSS is a great tool and you should check out “Jeff’s primer”:http://www.blueflavor.com/blog/design/blueprintcss_101.php that he wrote this week. He touches on one of the key things people are missing with the frame work: the grid is customizable.
As to the true nature of web design being without structure, I disagree with you. It is a medium for communication and thus we should design site to best achieve those ends.Sometimes it means using a highly structured grid other times it’s more free form.
There is nothing wrong with borrowing proven techniques from other disciplines in design or other field entirely. The web is a very young medium and we shouldn’t throw everything out because of it.