Being a graphic designer I’ve always appreciated and paid attention to the small details in a design. Things like the pixel distance between a headline and a body of copy. I have always spent the extra time making sure those small details were always consistent and made sense. For many years I would position elements in a design by “eye” or by “feel” while at the same time making sure that all the small things were just right. But there was no meaning or purpose behind my compositions. Other than “looking” right, there was no reason why the block of copy was in that position on the page. That always bothered me. I wanted my designs to have some sort of underlying structure to bring it all together and give it all meaning. I finally found a solution when I learned about grid systems.
I’ve designed for the web for over 10 years now but just recently I’ve ventured into theme design for blogs. Theme design is a perfect model for using grid systems. A lot of blogs today are structured into vertical columns, most of them into two main areas, the side bar (nav, links, etc.) and the main content area. This kind of structure is just screaming for a grid. Blogs have a lot of content that needs to be managed in which it communicates to a user in a clear and effective way. A grid can make this a whole lot easier.
When creating a grid system for any application it’s important to remember that they should be based on the rule of thirds, which is based on the Golden Section. Using these rules creates a cohesive composition giving meaning to the overall design that communicates better to the viewer. Some designers are hesitant on using a grid because they think that it can limit and make a design feel less organic. That isn’t true at all. Grids don’t dictate design, they form an underlaying structure. Grids bring meaning to the big and small elements of a design. Next time someone wants to know why you placed that logo 10 pixels to the left, you’ll have a good reason instead of having to say “cause it felt right over there”.
Here are some good resources on grid systems:
Five Simple Steps to Designing Grid Systems
Great post Antonio, very helpful. You can’t create good Wordpress designs without the underlying structure being correct.