Web design: The Grid

[Chris]

Alot of web design has to do with flow and organization. In fact, if you aren't familiar with either of these concepts, you're going to have a very difficult time sucessfully creating a design that will suit your needs as well as the needs of the client you may be dealing with.

The grid theory is something that has been around for decades. It deals directly with the spaces and divisions that make up your content. A good source of grid theory can be derived from your local newspaper.

See this example:



Unit_Number_42 had this to add:

In my opinion; when dealing with a design that uses straight line shapes (rectangles, text boxes, menu buttons, etc. etc.) the human eye naturally follows the straight edges. Generally, in western cultures the natural flow is from top left to bottom right. This is called Page Flow. By keeping your elements aligned on a grid you ease the eye movement from one element to the next.

While I would not begin every project with a grid, it is a very helpful tool to ensure you're maintaining page flow. Which allows you to focus on the elements more and their placement less.

In addition to this statement, there are many many reasons for using a grid for your design. If you are interested in learning more about the grid theory, or any of the other systems #43 mentioned, like the golden ratio, I duly suggest you do some research on the subject, grid theory obviously spans vastly beyond the scope of this tutorial, and I do not intend to teach you every nuance. This lesson shows you simply one of the techniques you might use to arrive at your solution or given grid-system. Please do not assume that once you have figured out this technique, that you are a declared master of grid systems. :P



Applying the grid to design

1. Paper
Some designers can go straight to photoshop and create masterpieces. Like most of my colleagues, I have to draw it out on paper. Having a hard copy of my planned design bone always helps me to visualize the structure of the site I want to create. Going to paper doesn't mean drawing out every meticulous detail, but if it suites your work ethic, get something down on paper.

2. Canvas
Like everyone else, 800x600 has become an archaic standard. If you have to design for target users that may be using 800x600, 780 is the best way to go. But nowadays, 1024x is the preferred monitor size, and as such, designs being directed to the web should follow suite. I like to stay below the 1000x mark for almost everything, but that's my preference. 1280x+ is going to be useful for designs that might require a background or a fullscreen design, but I seriously dislike websites that resize my browser window to "better suite the design". So keep 1000x in mind, and you should be good to go.

3. Margins
Once you have a good canvas set up, you need to figure out what your margins are going to be. It's a good idea to remain consistent, so you need to come up with a standard space between your blocks of content. A value 15-30px should be an even amount, although it depends entirely on your project.

The first 3 steps you see are usually done on paper. This is alot of preparation that is already done for you in terms of math and margins. So it's good practice to keep these things in consideration before you head into photoshop.

4. Grid creation
So after all of that babble, I bet you're wondering exactly what is...a grid? Well, I've got a sample for you that shows a finished design following a grid schematic. Below I provide my previous portfolio against the appropriate grid model. I used around 74px widths and 14px spaces on the vertical axis, and then did the same for the horizontal axis. Since it was generally a 2-3 column layout, alot of my content fit together nicely. However, you may not want to follow the same route.



The quintessential product of a solid grid is being able to adapt to whatever content you may need to create for. Maybe your design may only take up 2 or 3 columns (like mine seen above), you will need to be able to break those columns up further, to make up for relative content. After all, a 2 column site all across the board...sounds pretty boring and uncharismatic. So you need to be able to adapt to that. 50% of your overall design should be directed toward content. Any more or less than that and you'll have to compensate with negative space, which we'll get into later.

5. The equation

So now we need to figure out our grid bar sizes. This is going to be an example, but you can apply your own project to the steps as we go along, if you wish.

Say we want to do 18 grid bars using columns of twos. Our content area is going to about 960px. The margin is going to be 12px.

1. Using your column number, subtract 1, then multiply by the desired margin value. I want 19 bars, so we will only have 18 spaces, obviously because the first and last bar are going to sit flush with the edges of our content boundary. We want our bars to be spaced evenly so our first step is this: 17 x 12 = 204
2. Now subtract that value from your total content area: 960 - 204 = 756
3. Divide that by your column number: 756 ÷ 18 = 42

Now that you have a whole number, your grid bars will be 42px wide. If you end up with a decimal, you need to repeat the process trying different values for your margins / total grid numbers. If you tried 14px margins, you’d end up with a column width of 40.1111 and since you can’t work with fractions of a pixel, you won’t evenly take up the space.


That's basically the jist of it. Now you can create your grid based on the width of your columns (42px wide) spaced 12 px apart. Now you're thinking...oh my god, that's going to take forever. Well, you're right. Now get to it, it's going to be a while!

Im kidding, fortunately, someone came up with an automated process to creating your grids for you. Photoshop, thankfully, offers "guides", and that's what we are going to use. So with photoshop in hand, here are two scripts that will do your work for you.

The first is the first release of "gridmaker". I like it because it allows you to specify the width you are shooting for. So here it is. Copy and paste this into notepad and save as .JSX into your Presets>>Scripts folder:

/*
 * GridMaker automatically generates a new photoshop document and guides based
 * on vertical and horizontal grid specifications and upper limits on document
 * size.  Does not currently do any error-handling so make sure all your inputs
 * are correct.
 *
 * Author: Andrew Ingram
 * Email: andy@andrewingram.net
 */

app.bringToFront();
$.localize = true;

try {
    mainDialog();
}
catch( e ) {
}

function mainDialog() {

    /*
     * Create the dialog and initial values.  Initial configuration
     * produces a document with a 64x64 grid with a 3px gutter within
     * a maximum size of 1024x768
     */
    var dlg = new Window('dialog', 'GridMaker', [100,100,365,270]);
    
    dlg.vPanel = dlg.add('panel', [5,5,130,130], 'Vertical Guides');
    dlg.vPanel.configLabel = dlg.vPanel.add('statictext', [5,5,115,27], 'Configuration:');
    dlg.vPanel.config = dlg.vPanel.add('edittext', [5,25,115,46], '3,64');
    dlg.vPanel.maxWidthLabel = dlg.vPanel.add('statictext', [5,47,115,69], 'Maximum Width:');
    dlg.vPanel.maxWidth = dlg.vPanel.add('edittext', [5,67,115,88], '1024');
    dlg.vPanel.checkBox = dlg.vPanel.add('checkbox', [5,95,115,110], 'Generate Guides?');
    dlg.vPanel.checkBox.value=true;
    
    dlg.hPanel = dlg.add('panel', [135,5,260,130], 'Horizontal Guides');    
    dlg.hPanel.configLabel = dlg.hPanel.add('statictext', [5,5,115,27], 'Configuration:');
    dlg.hPanel.config = dlg.hPanel.add('edittext', [5,25,115,46], '3,64');
    dlg.hPanel.maxHeightLabel = dlg.hPanel.add('statictext', [5,47,115,69], 'Maximum Height:');
    dlg.hPanel.maxHeight = dlg.hPanel.add('edittext', [5,67,115,88], '768');
    dlg.hPanel.checkBox = dlg.hPanel.add('checkbox', [5,95,115,110], 'Generate Guides?');
    dlg.hPanel.checkBox.value=true;
    
    dlg.okButton = dlg.add('button', [50,140,150,160], 'OK');
    dlg.cancelButton = dlg.add('button', [160,140,260,160], 'Cancel');
    
    /*
     * okButton Event, performs calculations, generates document and guides, closes dialog.
     */
    dlg.okButton.onClick = function okClick()
    {
        /*
         * Split the config string using comma as seperator
         */    
        var vArray=dlg.vPanel.config.text.split(",");
        var vSum = 0;
        
        /*
         * Calculate the sum of values in the config string
         */
        for (i=0;i<vArray.length;i++)
        {
            vArray[i]=vArray[i]*1;
            
            if (isNaN(vArray[i]))
            {
                alert('Invalid Vertical Config');
                return 0;
            }
            
            vSum=vSum+vArray[i];
        }
        
        /*
         * Work out the maximum width assuming that the first
         * config value is repeated at the end.  This is done
         * by first calculating how many times the config fits
         * completely inside the maximum width.
         */
        var vCount = (dlg.vPanel.maxWidth.text - vArray[0])/vSum;
        var width=(parseInt(vCount)*vSum)+vArray[0];

        /*
         * Split the config string using comma as seperator
         */            
        var hArray=dlg.hPanel.config.text.split(",");
        var hSum = 0;
        
        /*
         * Calculate the sum of values in the config string
         */
        for (i=0;i<hArray.length;i++)
        {
            hArray[i]=hArray[i]*1;
            
            if (isNaN(hArray[i]))
            {
                alert('Invalid Horizontal Config');
                return 0;
            }
            
            hSum=hSum+hArray[i];
        }
        
        /*
         * Work out the maximum height assuming that the first
         * config value is repeated at the end.  This is done
         * by first calculating how many times the config fits
         * completely inside the maximum height.
         */
        var hCount = (dlg.hPanel.maxHeight.text - hArray[0])/hSum;
        var height=(parseInt(hCount)*hSum)+hArray[0];

        /*
         * Create the document based on calculated results, fill with white.
         */        
        var doc = documents.add(width,height,72,"Gridmaker Document",NewDocumentMode.RGB,DocumentFill.WHITE,1.0);
        
        /*
         * Place vertical guides
         */
        if (dlg.vPanel.checkBox.value)
        {
            for (i=0; i<parseInt(vCount);i++)
            {
                var x = i*vSum;
                
                var y = 0;
            
                for(j=0;j<vArray.length;j++)
                {
                    makeGuide(x+y+vArray[j],"Vrtc");
                    y+=vArray[j];
                }
            }
        }
        
        /*
         * Place horizontal guides
         */
        if (dlg.hPanel.checkBox.value)
        {
            for (i=0; i<parseInt(hCount);i++)
            {
                var x = i*hSum;
                
                var y = 0;
            
                for(j=0;j<hArray.length;j++)
                {
                    makeGuide(x+y+hArray[j],"Hrzn");
                    y+=hArray[j];
                }
            }
        }    
        
        /*
         * Close the dialog window
         */        
        dlg.close();
    };
    
    /*
     * cancelButton event, closes the dialog without doing anything
     */     
    dlg.cancelButton.onClick = function cancelClick() {
        dlg.close();
    }
    
    /*
     * finally, we show the dialog. This is where user interaction kicks in
     */
    dlg.show();
}

/**
 * makeGuide function originally found at:
 * http://blogs.adobe.com/crawlspace/2006/05/installing_and_1.html
 */
function makeGuide(pixelOffSet, orientation) {
    var id8 = charIDToTypeID( "Mk  " );
    var desc4 = new ActionDescriptor();
    var id9 = charIDToTypeID( "Nw  " );
    var desc5 = new ActionDescriptor();
    var id10 = charIDToTypeID( "Pstn" );
    var id11 = charIDToTypeID( "#Rlt" );
    desc5.putUnitDouble( id10, id11, pixelOffSet ); // integer
    var id12 = charIDToTypeID( "Ornt" );
    var id13 = charIDToTypeID( "Ornt" );
    var id14 = charIDToTypeID( orientation ); // "Vrtc", "Hrzn"
    desc5.putEnumerated( id12, id13, id14 );
    var id15 = charIDToTypeID( "Gd  " );
    desc4.putObject( id9, id15, desc5 );
      executeAction( id8, desc4, DialogModes.NO );
}

This script looks like a little dialog, like so:



The 3 stands for the width of the column you want, while 64 represents the space in between those columns. For our example it will be : 42,12. You can use the same values on the horizontal guide, OR you can turn it off by deselecting "Generate Guides?". Be sure to specify a maximum height and width either way.

Our example creates this grid:



I turned off the horizontal guide because that usually doesn't stay the same for me.

But what about the other one?

Oh right, the other script. Well that one is here:

/*
 * Author: Andrew Ingram
 * Email: andy@andrewingram.net
 */

$.localize = true;

if(app.name.indexOf("Photoshop") >= 0)
{
    try {
        mainDialog();
    }
    catch( e ) {
    }
}

function mainDialog() {

    /*
     * Create the dialog and initial values.  Initial configuration
     * produces a document with a 64x64 grid with a 3px gutter within
     * a maximum size of 1024x768
     */
    var dlg = new Window('dialog', 'GridMaker 2', [100,100,440,290]);

    dlg.okButton = dlg.add('button', [120,160,220,180], 'OK');
    dlg.cancelButton = dlg.add('button', [230,160,330,180], 'Cancel');
    
    dlg.optionsPanel = dlg.add('panel', [10,10,240,150], 'Variables');
    dlg.unitsPanel = dlg.add('panel', [250,10,330,150], 'Units');
    
    dlg.optionsPanel.labelColumnWidth = dlg.optionsPanel.add('statictext', [10,23,111,40], 'Column width');
    dlg.optionsPanel.labelGutterWidth = dlg.optionsPanel.add('statictext', [10,48,111,65], 'Gutter width');
    dlg.optionsPanel.labelColumnWidth = dlg.optionsPanel.add('statictext', [10,73,111,90], 'Number of columns');
    dlg.optionsPanel.labelSubdivisions = dlg.optionsPanel.add('statictext', [10,98,111,115], 'Column Divisions');    
    
    dlg.optionsPanel.inputColumnWidth = dlg.optionsPanel.add('edittext', [120,20,216,40], '100');
    dlg.optionsPanel.inputGutterWidth = dlg.optionsPanel.add('edittext', [120,45,216,65], '10');
    dlg.optionsPanel.inputCount = dlg.optionsPanel.add('edittext', [120,70,216,90], '4');
    dlg.optionsPanel.inputSubdivisions = dlg.optionsPanel.add('edittext', [120,95,216,115], '1');    
     
    //dlg.optionsPanel.selectOuterGutters = dlg.optionsPanel.add('checkbox', [10,100,216,131] , 'Include outer gutters');
    
    dlg.unitsPanel.selectPixels = dlg.unitsPanel.add('radiobutton', [10,20,111,41], 'pixels');
    dlg.unitsPanel.selectMm = dlg.unitsPanel.add('radiobutton', [10,40,111,61], 'mm');
    dlg.unitsPanel.selectCm = dlg.unitsPanel.add('radiobutton', [10,60,111,81], 'cm');
    dlg.unitsPanel.selectInches = dlg.unitsPanel.add('radiobutton', [10,80,111,101], 'inches');
    
    dlg.unitsPanel.selectPixels.value = true;
    
    /*
     * okButton Event, performs calculations, generates document and guides, closes dialog.
     */
    dlg.okButton.onClick = function okClick()
    {
        var pixelsPerInch = 72;
        var inchScale = pixelsPerInch;
        var cmScale = inchScale / 2.54;
        var mmScale = cmScale / 10;
        
        var phi = 1.61803399;
    
        var columnWidth = dlg.optionsPanel.inputColumnWidth.text;
        var gutterWidth = dlg.optionsPanel.inputGutterWidth.text;
        var count = dlg.optionsPanel.inputCount.text;        
        var subdivisions = dlg.optionsPanel.inputSubdivisions.text - 1;
        
        //var selectOuterGutters = dlg.optionsPanel.selectOuterGutters.value;1.61803399
        
        var rowHeight = columnWidth / phi;
        
        var gutterHeight = gutterWidth;
        
        var width = (columnWidth*count)+(gutterWidth*(count-1));
        var height = (rowHeight*count)+(gutterHeight*(count-1));
        
        width = width + (gutterWidth * 2);
        height = height + (gutterHeight * 2);
        
        //width=parseInt(width);
        //height=parseInt(height);
        
        var numberOfGuides=((count*2)-2) + (count*subdivisions);
        var numberOfRowGuides=(count*2)-2;
        
        numberOfGuides=numberOfGuides + 2;
        numberOfRowGuides=numberOfRowGuides + 2;
        
        var guides = new Array();
        var rowGuides = new Array();
        
        rowGuides[0]=gutterHeight;
        rowGuides[1]=rowHeight;
        
        guides[0]=gutterWidth;
            
        for(i=0;i<subdivisions+1;i++)
        {
            guides[i+1]=columnWidth/(subdivisions+1);
        }

        var sum = 0;
        var rowSum = 0;
        
        /*
         * Calculate the sum of values in the config string
         */
        for (i=0;i<guides.length;i++)
        {
            guides[i]=guides[i]*1;
            
            if (isNaN(guides[i]))
            {
                alert('Invalid Vertical Config');
                return 0;
            }
            sum=sum+guides[i];
        }
        
        var repeats = (width - guides[0])/sum;

        for (i=0;i<rowGuides.length;i++)
        {
            rowGuides[i]=rowGuides[i]*1;
            
            if (isNaN(rowGuides[i]))
            {
                alert('Invalid Vertical Config');
                return 0;
            }
            rowSum=rowSum+rowGuides[i];
        }
        
        var repeats = (width - guides[0])/sum;
        var rowRepeats = (height - rowGuides[0])/rowSum;

        /*
         * Create the document based on calculated results, fill with white.
         */        
     
        var scale=1;
         
        if (dlg.unitsPanel.selectPixels.value)
        {
            preferences.rulerUnits = Units.PIXELS;
            scale=1;
        }
        else if (dlg.unitsPanel.selectCm.value)
        {
            preferences.rulerUnits = Units.CM;
            scale = cmScale;
        }
        else if (dlg.unitsPanel.selectMm.value)
        {
            preferences.rulerUnits = Units.MM;
            scale = mmScale;
        }
        else if (dlg.unitsPanel.selectInches.value)
        {
            preferences.rulerUnits = Units.INCHES;
            scale = inchScale;
        }
     
        var doc = documents.add(width,height,pixelsPerInch,"Gridmaker Document",NewDocumentMode.RGB,DocumentFill.WHITE,1.0);
        
        /*
         * Place vertical guides
         */
        for (i=0; i<repeats;i++)
        {
            var x = i*sum;
            
            var y = 0;
        
            for(j=0;j<guides.length;j++)
            {
                makeGuide(parseInt((x+y+guides[j])*scale),"Vrtc");
                y+=guides[j];
            }
        }
        
        makeGuide(0,"Vrtc");        
        makeGuide(parseInt(width*scale),"Vrtc");

        /*
         * Place horizontal guides
         */
        for (i=0; i<rowRepeats;i++)
        {
            var x = i*rowSum;
            
            var y = 0;
        
            for(j=0;j<rowGuides.length;j++)
            {
                makeGuide(parseInt((x+y+rowGuides[j])*scale),"Hrzn");
                y+=rowGuides[j];
            }
        }
        
        makeGuide(0,"Hrzn");        
        makeGuide(parseInt(height*scale),"Hrzn");            
        
        /*
         * Close the dialog window
         */        
        dlg.close();
    };
    
    /*
     * cancelButton event, closes the dialog without doing anything
     */     
    dlg.cancelButton.onClick = function cancelClick() {
        dlg.close();
    }
    
    /*
     * finally, we show the dialog. This is where user interaction kicks in
     */
    dlg.show();
}

/**
 * makeGuide function originally found at:
 * http://blogs.adobe.com/crawlspace/2006/05/installing_and_1.html
 */
function makeGuide(pixelOffSet, orientation) {
    var id8 = charIDToTypeID( "Mk  " );
    var desc4 = new ActionDescriptor();
    var id9 = charIDToTypeID( "Nw  " );
    var desc5 = new ActionDescriptor();
    var id10 = charIDToTypeID( "Pstn" );
    var id11 = charIDToTypeID( "#Rlt" );
    desc5.putUnitDouble( id10, id11, pixelOffSet); // integer
    var id12 = charIDToTypeID( "Ornt" );
    var id13 = charIDToTypeID( "Ornt" );
    var id14 = charIDToTypeID( orientation ); // "Vrtc", "Hrzn"
    desc5.putEnumerated( id12, id13, id14 );
    var id15 = charIDToTypeID( "Gd  " );
    desc4.putObject( id9, id15, desc5 );
      executeAction( id8, desc4, DialogModes.NO );
}

Same thing with that one. Copy and paste into notepad and save as a .JSX file into the Presets >> Scripts folder of photoshop. Run that bad boy, and here is what you get:



Slightly different layout. Pretty self-explanatory though. Column width - 42, gutter width would be 12, number of columns, 18 (right? :P) and column division (say you wanted to cut those 18 columns in half), you would use that. 0 works good too. This script does your horizontal and your vertical, which can be useful, but I have both scripts handy just in case.

So now you know. The grid theory, in all its glory.

Hope you enjoyed the tutorial, and I hope it helps you in the future.

For reference:

http://www.andrewingram.net/articles...ing_gridmaker/
http://www.andrewingram.net/articles/gridmaker_reboot/
http://vectorthis.com/2008/12/20/web...ting-the-grid/

Some other nice tutorials about the grid theory:

http://www.markboulton.co.uk/article..._grid_systems/
http://www.smashingmagazine.com/2007...ased-approach/

[unit_number_43]

Why is it important to use the grid method vs. free form or using the golden ratio?

[Chris]

Ideally, this is just one of many ways. It's all about preference really. I find the restriction of guides and rules comforting, whereas an open canvas, for me, seems impossible to run with. I'm one of those people that simple can't work with an empty canvas. Not applying a grid can mean one of two things: You already have a good sense of organization and can maintain a good balance of content, or you are just plain crazy.

Either way there are LOTS of positives to using grid theory in web design application. It sets your work apart from alot of others who would otherwise not use any form of organizational structure whatsoever, which often is the case.

[unit_number_43]

Solaris,
You provided lots of good information and I noticed you didn't mention why someone should use the grid method. I agree that a grid can be a good place to start the design process. Users new to design theory might not understand the purpose of a grid layout, and may even be opposed to the idea because it's restrictive.

In my opinion; when dealing with a design that uses straight line shapes (rectangles, text boxes, menu buttons, etc. etc.) the human eye naturally follows the straight edges. Generally, in western cultures the natural flow is from top left to bottom right. This is called Page Flow. By keeping your elements aligned on a grid you ease the eye movement from one element to the next.

While I would not begin every project with a grid, it is a very helpful tool to ensure you're maintaining page flow. Which allows you to focus on the elements more and their placement less.

[Chris]

Thanks for the input, I'll add that to the tutorial if you don't mind.

[Jeff]

Good read and info; thanks.

[Samuel]

Awesome. =)