960 Grid For Design Process
As an Art Director and long-time web designer I must admit I never really had a consistent way of creating concepts that were easily transferable from wireframes to concepts, then to final markup…until now. I’ve been reviewing the 960 Grid System for some time now and I’ve grown to realize just how powerful it can be. Not only does it allow for rapid prototyping and markup, but it is a great way for our designers to provide developers with consistent layouts that can be chopped and integrated with our Drupal websites much easier.
For those of you unfamiliar with the 960 Grid System, it’s basically a CSS framework from which designers and developers can build upon to rapidly create standardized, compliant websites. The grid typically consists of 12 or 16 equal columns with 10px left and right margins. The system gets its name because the totaling width of equal columns and margins equals and 960 pixels wide website layout. Since this article is less about teaching you the grid system and more about how we are using it at LevelTen Interactive, I will stop there and tell you to check out 960.gs for more specifics.
Now, LevelTen has taken the Grid System concept, which has been used for magazine layouts for some time now, and has applied it to our entire design process. Here's how we use it.
Wire Frames
The grid system has been integrated into our wire framing process so our web strategist can use it as a template for creating wire frame layouts. This process allows our strategists, who aren’t typically designers, to better understand how content, and page elements can layout on a page. It also allows them to place content on the wire frames, giving clients/copy writers a good preliminary idea of how much content can fit in certain sections.
Design Concepts (comps)
Once the wire frames are laid out, reviewed by client and approved LevelTen moves directly to the design concept phase, again using the 960 grid layout as a template for creating the design concepts. While each individual designer takes creative liberties based on his own creative vision and design style, the overall layout and placement of blocks and regions remain consistent throughout. Consistency is the key here and for those of you who have been through a comping process you know it's much easier to compare and contrast designs knowing blocks, regions and page elements are the same. Another advantage of using the Grid System for comping is the ability to align page elements quickly. In the past, I would use rulers and guides to align content, elements etc. With a pre-designed grid overlay, it's much faster and easier to align blocks, elements and content. It's also a very comfortable feeling for designers, knowing that the developer can chop concepts in a pixel perfect way. What a great thing!
Theming/Development
As previously mentioned, the real power of the 960 Grid System is the CSS framework from which developers can rapidly layout websites. The framework was also created for cross browser consistency so the layout will look the same in IE 6 as it does in Firefox or Safari. On top of that, Dustin Currie, a great Drupal developer at LevelTen, has begun creating a style page for each website which consists of all header, content, list, input field and button styles, which further creates consistency and speeds the styling process. What a great idea! So, for those of you looking for a design and development process that increases both internal communication and efficiency, I highly recommend integrating a grid system into your everyday process. It's been widely adopted by many forward thinking agencies and can be customized to suit your specific needs. Successful businesses aren't afraid of change, they embrace it. LevelTen has embraced the grid system and the success that has come with it. Happy Holidays!
