I occasionally receive PSD files from designers who believe that simply adding some guides to their PSD file constitutes a grid. That is not so. Using a grid to design a website means more than just adding guides. If you’re just venturing into web design—or even if you’ve been at it for a while and now find yourself collaborating with a developer or working for a client who wants their site designed using a grid or developed using a framework that’s based on a grid—then you might find the landscape confusing, so here are some tips to supplement your Photoshop Etiquette.
Don’t Just Add a Grid, Use a Grid!
Using a grid system means you add guides first and then follow them to organize your content. They are after all, guides, as in “guiding your design and your content.” I won’t go into the reasons for using a grid system because they’ve been widely discussed, but please don’t just add guides to your comps. Even the most seasoned developers will find disorganized grids confusing, possibly even a serious impediment to the project’s workflow, which could end up costing you time, money, and future work prospects. Even if your developer doesn’t use a grid-based framework or your client doesn’t request one, you should consider using one because it will lead to consistency and organization during the design process.
Grid Before Design
A web design grid has two major components: columns and gutters. Columns are for content, and gutters are consistent, uniform ways of separating content. Content should fit within containers which are fluid, but the content units that make up your design should be consistent. Yelp’s style guide is a great example of what I mean by content units (essentially, reusable design elements).
I think designers get stuck with the word “fluid.” Have a chat with your developer about which breakpoints (i.e., screen sizes) you plan to design and then set aside fluidity in small steps by finding (or making) a static template for each breakpoint, and drip your creative juices within the grid lines.
Pick a Grid, Any Grid
There are innumerable grid systems out there; if you’re not sure which one to use then do some quick research. If you work with a developer then ask them if they have a preference. If you don’t know where to start then check out this Smashing article and do some research. Bootstrap and Foundation are two of the most widely adopted grid-based frameworks; you can probably throw a dart out your window and it will hit a developer who has had some exposure to either one or both. But the bottom line is you should pick a grid.
Communicate
The web is a collaborative medium and it’s rare to find successful web professionals who don’t understand that. So, if you have an ongoing relationship with a developer then ask them to provide some PSDs to point you in the right direction. If you’re working with a new developer for the first time or are using an obscure or uncommonly used grid, then consider cluing in your developer on its details (where you found it, number of columns, column and gutter width, etc.). Don’t leave it up to them to simply eye it out. The development process will go much smoother if everyone knows how the project is structured from the get-go.
Not Just for Your Developer
In case you think this post is geared towards making your developer’s life easier… you’re right. But it will also add consistency and structure to your designs which can help you as a designer and is sure to sit well with demanding clients.
TL;DR
Don’t just add guides in Photoshop, use a grid to design a website and consistently structure your beautiful designs and content. Your developer, your client, and the Internet will thank you for it.
UPDATE
I decided to make grids for Bootstrap which is my framework of choice. Here they are in PSD format, one at each of the default Bootstrap breakpoints. Enjoy!