Many modern website designs are based on a grid. Grids can give the designer an automatic sense of structure and usability when planning the site. This can simplify the design process and make the content feel more user friendly. The grid system is a step up from a template because the design aspect is still up to you; the guides are already in place, reducing your options as a designer. This basically leaves you with width and height to worry about amongst the grid.
Example of Horizontal vs. Vertical
Different Sized Grids
The most common grid systems are based on columns. They are normally split into 9, 12, 16 or 20 columns. Some designers may use custom-made grid systems that have even fewer columns. Other alternatives include grids that work off of horizontal rows instead. The sizing is generally the same as the vertical grid.
Types of Grids
• Columnar grids: most common and only made up of columns
• Hierarchical grids: hierarchy before columns
• Modular grids: columns and rows (very hard on the web)
• Baseline grid: hard on the Web because CSS calculates line height from the bottom of the letters, not the baseline
Here are some visual examples of Grid Systems that will help you understand how they work:
There are no rules here, feel free to create your own custom grids with variations of column widths, page sizes, borders, etc. All of this will lead to a more unique design.
Think Outside of The Grid
Yes grids are good, but don’t be afraid to step out of your comfort zone and ditch the grid mid-project.
Many people will tell you that the grid limits creativity, and in some senses they may be right, but once you have a solid template try hiding the grid and working from there. Use the grid only as a basis to setup content and make sure everything is lined up. Once that’s done try hiding it and getting really creative with the design from there.
Tips and Tricks
• Let the content inform the grid.
• Compose to a vertical rhythm.
• Use odd numbers: three, five, seven, nine.
• Identify your constraints and use your constraints (e.g. ads).
• Break the grid on purpose.
• Embrace legacy — use it as a constraint.
• Give legacy fixed elements backgrounds to fit the grid.
• Grids are an aid, not a guarantee.
Use Your Resources
In my next article I will be talking about tools to help generate and work with grids but one of the most common ones used for designers is the 960 Grid System. I recommend starting here.
960.gs is a grid system based on a 960-pixel-wide page layout. It supports designs based on 12 or 16 columns. The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. Their download includes design layouts, a CSS file that has identical measurements and even a printable sketch sheet to assist in hand sketching wireframes.