Design Grid
Grid based design has become an emerging trend for web design in the last year, and it’s continuing to gain momentum. While it’s still somewhat of a mystery to a good portion of the community, it’s something that has been around since before the printed word. Geometry and symmetry are an important aspect through many design related disciplines, and is the most evident in classical greco roman architecture, and the foundation of print design to name a few.
Porting this mindset over to webdesign has taken a bit of time, but thankfully it is here at last. Grids order the design and the elements vertically and horizontally, the grid itself isn’t visible, but the order created by it is often very apparent. Similarly designs without grids to structure them often look disorganized and the elements appear to be floating around the page.
My latest design for my portfolio is grid based. I took the width and divided it into 6 columns, 6 being a good number becuase it easily makes 4 and 3 column structures giving some flexibility in the layout. You can see in the image to the right my grid and the divisions. This same structure is used throughout the site, creating a unified look.
To create your own grid go over to Grid Designer where you can enter in your variables and it will output a grid for you. Check out Grid By Design for more gridtasticness.
Are you designing with grids? Leave a link to your site using grids in the comments.
seo | May 17th, 2008 at 10:55 pm #
Good tips. Grid design is on the rise of popularity and I have seen many people are making the change.
JamieO | May 18th, 2008 at 10:46 am #
960 Grid System is an excellent resource. Based on 12 or 16 column, they provide photoshop and illustrator templates to design to and a fairly simple to understand framework (add alpha or omega classes to divs to remove pre/post column padding.
David | May 18th, 2008 at 11:30 am #
960.gs is the one I like as well though I really don’t understand “grids”. Weren’t we always kind of using grids without knowing it, or am I totally off base? *don’t shoot me, I am not a designer*
John Leschinski (Post Author) | May 18th, 2008 at 8:38 pm #
Not really David. Designing on a grid means the elements have a mathematical position on the page in harmony with the other elements. What people were doing before was just making columns at whatever size wherever. I’m sure someone probably got it unitentionally, but there are a lot that did not.
Tom Newton | May 21st, 2008 at 5:27 pm #
I just used a grid design on my blog here.
Thank you for the concise explanation!
Tom Newton