Designing with a Grid
Recent talk on the web about typography and the grid inspired me to pick up some books and do some reading and learning so I could expand my knowledge and produce more mature websites.
I wanted to try and give some insight on how I created Version Four using a grid, and how I went from wireframes to the finished website you see here.
Choose a Size
My first port of call was to choose my grid. I knew I wanted the new site to be optimised for 1024×768 which would allow me to stretch my arms out a bit and let me relax. Mint tells me (with the addition of the Real Estate Pepper) that less than 1% of my readers have a screen width of 800×600 so I was pretty sure I could make the change without alienating too many visitors.
The next step was to choose the size of the actual content area. I remembered reading a post on Authentic Boredom by Cameron Moll titled Optimal width for 1024px resolution? so my first port of call was to reread this article. In it, Cameron discusses the options for designing to 1024×768 but eventually settles for a width of 960px, as it can make some seriously modular grids. This is the width I decided to use.
Make a grid in Photoshop
With the size now decided on, I cracked open Photoshop and created a new document, 1152×864 in size. I made a marquee selection from the top left of the document, which was 960px wide and as high as the document.
I filled this selection with a 60×60 pattern which has a solid black line on the right hand side and the bottom side, then created a new layer and filled it with a 10×10 pattern which has a dotted black line on the right and bottom.
I then set the first layer I created to 20% opacity and the second to 12% opacity. Finally I created another new layer, moved it to the bottom of the stack, filled the selection with #990000 and set the opacity of 2%. I then put these three layers into a layer group and aligned them to the centre of the canvas.
Below is an example of what I ended up with, taken from the top corner of the canvas at 100% zoom, but cropped to fit in this post.
With the basic grid in place, I was able to create a varied amount of grid configurations, all of which where based on this simple framework. The maximum number of columns I could create was 16, I decided to add 10px of space between each column.
The diagram above shows some of the different grid configurations that can be created with a 16 column grid. I use 6 unequal columns on the home page of this site and the 5 columns for everywhere else.
Download Example Grids PSD (44kb)
The download linked above includes the grid I created, as well as some sample column configurations and the two patterns I used to create the grid.
Wireframe then Detail
Now I had my grid I was able to use it to help me construct the look and feel of the home page. I already knew what elements I wanted on the home page, so I was able to use the grid to arrange them in an effective manner. I used single column spacing around the main article on the page to emphasise that it was the key element. Then slotted the other elements around it.
At this stage I was just working with black text and a white background making sure that the sections themselves could provide enough contrast and hierarchy on there own with out the need for adding colour or divisional blocks.
I made sure to keep each line of text aligned to the 10px baseline of the grid this ensured that the site would have a consistent vertical rhythm which would aid in the readability of the whole site.
Once I was happy that the elements worked well together I was able to go back over them and flesh out the design, adding colour and contrast. I tweaked each element over and over until I was totally happy with the look and feel of the design before I started working on the mar-kup. Even during development things where changed and perfected.
To Be Continued
In the second part of this article I will show you how I took my designs and grid, and turned them into markup and CSS.
Matt Brett
May 20th, 2007 at 4:55 pm
Great article Andy, very well written.
I’ve actually never taken an interest in designing to a grid and only really skimmed over articles in passing. One thing I don’t understand is the need to create a grid from scratch instead of just using the Photoshop grid. What’s the benefit? Isn’t this way, not only more work to implement, but extremely limited in regards to altering it after the fact when compared to the capability of the PS grid?
PS, you should get the Subscribe to Comments plugin for WordPress. ;)
Ben
May 20th, 2007 at 5:17 pm
Wow, Mr Brett beat me to it ^_^
Really interesting read Andy, I have to admit I have resulted back to photoshops built in grid for a majority of my work purely because of the setup times. On the other hand though, I do find creating a grid from scratch is a really helpful method of creating something a lil’ unique and special - just like this site of yours!
Again, thanks for a great article, looking forward to the next one, and finding out if you fancy d.construct this year :D
Andy Pearson
May 20th, 2007 at 5:49 pm
I guess the built-in versus custom grid is really personal preference, and which one feels more natural to your work flow.
Personally I don’t like the built-in grid as it always goes from the top left and covers the entire canvas, as opposed to a custom grid which can be positioned anywhere.
Also, I like the way custom grids are related to the document, whereas the built-in grid is global, if I was working on two sites simultaneously which used different sized grids then I would have to change my grid preferences every time I alternate between each PSD.
Again, I guess it’s just down to what works for you, both methods have their pros and cons.
@Matt - Yeah, I will check out the plugin when I upgrade to 2.2!
@Ben - I do fancy d.construct! Sorry I haven’t contacted you, expect an email soon!
Matt Brett
May 20th, 2007 at 6:29 pm
Thanks for the explanation Andy. I actually thought of the starting point being a con of the PS grid after I posted my comment. Every site I’ve done over the past couple years has been centered, so the grid might not line up as I need it to.
The Bespeckled SEO
May 21st, 2007 at 3:11 pm
Thanks for this information. This is the first I’ve heard about grid design…I’ll read some more on this and see where it takes me.
Biscuitrat
May 22nd, 2007 at 9:16 pm
Nicely done! I was a little afraid of the 960 before, but I think I can manage my next design a little better, seeing how nicely yours turned out. Great job :)
Vincent
May 23rd, 2007 at 9:01 am
The one thing that disturbs me about grids is the fact that people get the thought of squares into their minds. What would happen to flashy websites if all they consisted to setting everything up in squares and what-so-ever?
The trick to getting this idea correct is to have an open mind to curves when your designing, and that way your more easily to branch off from the grid idea, and then you have a nice website that’s grid complaint and also joins everything together nicely.
More or less, grids help out with the spacing of a website.
Tyler
February 20th, 2008 at 5:50 pm
I dig this post. I’m starting to use grids and it was incredibly helpful for me to see how you work. Thanks!