Design Using a Grid

The reading for this week in _Thinking with Type _about grids was extremely interesting to me.  The section about tables and grids in html particularly peaked my interest.  I think the hardest part of html and css is learning layout but I think a grid makes the whole idea of layout easier to understand.  I’ve always used grids when I code, particularly I like the 960 grid system which makes layout very easy and allows you to work of a variety of grid layouts.

I think Lupton makes several good points about using grids for web design.  As she points out, a grid is essentially a set of rows and columns in a table.  After setting a table up within the code it can be used to define different elements on the page.  For example the navigation may take up 8 of the 12 columns while the logo takes up the other 4.  Lupton makes the important point however, that layout must be simple and designed to follow the user’s eye.  Complicated layouts are not only a nuisance for accessibility but also tend to lose your user.

The pre-made grid systems that are available now make layout so much easier and there are a variety of them.  960 is a simple and straightforward grid that is defined in a css document and called using classes in the html document.  Others like Twitter’s Bootstrap and Zurb Foundation are layout systems that also include a variety of elements such as navigation bars, buttons, search boxes etc.  However, there has been a lot of criticism of these layout systems as being very generic and giving many websites the same look and feel, especially Bootstrap.  I think that criticism may be true of Foundation and Bootstrap, but as I learned from Lupton this week, grids have been around since the 17th century as a crucial element of design.  The different layout packages and dimensions for the web may change but a grid layout, I think, is a staple in the designers toolbox that won’t go away.

I’ve been starting to think about the Typography assignment and trying to decide what sort of grid I want to use.  I’ve got a preliminary mock-up, but I’m still playing with the alignment of my text (which right now is just latin).  I tend to be indecisive and change my mind sixteen times before I finally make a decision (normally because I’m running out of time to keep playing with it).  The nice thing about using the grid though, is that if I do decide to change the layout it’s very easy to do and I can spend my time focusing more on the design issues like font, color, and the various elements such as pull quotes.

This week I’ve commented on: Jannelle’s Blog and Beth’s blog.