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.

Written by John Leschinski from Leschinski Design
Posted on May 17th, 2008 and filed under Design & Coding
Do not forget to subscribe to our RSS feed for updates

6