Design a Clean Web Layout with the 960 Grid
In this tutorial, we’ll be designing a clean website layout using the 960 Grid System. You’ll see how working with this system can streamline web development workflow, and how to work with a grid system.
Final Image Preview
Step 1: Create a new document
Start by creating a new document in Photoshop with a width of 1680px and a height of 1100px, then fill the background with a very light grey (#F9F9F9).
Step 2: Adding the grid
There are many grid systems available for use online, and there are good practices for creating systems of your own. The purpose of this tutorial is to ease you into a system if you haven’t tried one before. They can really make workflow a breeze, and are great for prototyping layouts.
Download the 960 grid system. Once you’ve downloaded Nathan Smith’s 960 Grid System extract it and then open up the templates folder. Open up the 960 12 column grid in Adobe Photoshop.
Next we’re going to insert this grid into our document. Select the “12 col Grid” group, merge it then copy and paste it into our main document (you may be more comfortable directly editing in a copy of the template file provided in the system which provides guides of its own, this is more of a personal preference option on my behalf). The grid will be slightly small on height so stretch the grid vertically so it touches the top and bottom of the document.
Now we need a baseline grid. A Baseline Grid will help with areas such as spacing of elements and line-height. First create a new document 24x24px, delete the background, then draw a single 1px line along the bottom of the document. We’re going to define this as a pattern: Edit > Define Pattern and give it a memorable name.
Next return to your document and create a new layer. Fill this layer with the pattern, Edit > Fill this will create your Baseline Grid.
Finally we’ll mark out our working area using guides. Create a new guide View > New Guide, select vertical and create guides at 360px, 840px & 1320px the reason we put these guides is so we get a 960px working area between 360px and 1320px and a central line 840px.
Convienent Guides
If you’re working directly from the 960 Template file, convienent guides are already setup for you marking the grid and gutters. Just go to View > Show > Guides
Save as a Template.
You can save this document as a template and reuse whenever necessary, it saves a lot of time and the canvas height can always be changed to suit. Again, over time you’ll likely prefer the full grid system with the extra guides.
Step 3: Starting the design
Now that we have our template sorted we can make a start on the design, the design will be split into 5 sections:
- Header
- Callout
- Content – Left
- Content – Right
- Footer
Step 4: Add the header
We going to start at the top and work out way down so the header is first. Grab the Rectangular Marquee Tool and select an area across the width of the
document and a height of around 120px—turning on the rulers will help or drag down till you have filled 5 of the horizontal markers, then fill this with a dark grey (#2C2C2C). This header bar will hold the logo and the navigation.
Step 5: Insert your logo
Next insert your logo into the top left, lining it up with the second column of the grid giving the site a padding of 40px, for this project I am simply using a font based logo of 50 pt Century Gothic filled with a light blue (#ADC7D9) separating the two words by placing the second in bold and in white (#FFFFFF). Next apply an inner shadow to your logo element. I reduced the inner shadow opacity to 25% and gave it the following values, Distance: 2px , Choke: 0%, Size: 5px
Step 6: Add navigation
The navigation is next on the list. To keep a simple clean look we’ll be using text based navigation. Select 18pt Arial and write out your navigation. Colour the active link which in this case is home in white (#FFFFFF) and fill the others with a light grey (#BBBBBB). Align these elements and place them into the center of the top header bar.
Step 7: Add the Callout
I call this section a callout because essentially that’s what it does—it calls out information about the page. Repeat the process for the header bar by selecting the Rectangular Marquee Tool but with a height of 240px then fill with the same light blue (#ADC7D9) as the logo. We’re are going to add a subtle gradient to the section so double click to bring up the Layer Style Panel and select Gradient Overlay. Choose the colour to transparent overlay then change the blend mode to overlay and reduce the opacity to 30%.
Step 8: Creating the Callout Background
As the company is called blue grid we’re going to add a grid styled background to the callout. To do this were going to use a similar technique to when we added the horizontal lines, first create a new document 25px by 25px. Once again delete the background to make it transparent and draw a single 1px line along the bottom and this time up one side and define it as a pattern Edit > Define Pattern.
Step 9: Adding the Callout Background
Create a new layer above your callout layer and fill this layer Edit > Fill with your new pattern.
Rotate this layer 15 Degrees apply a colour overlay of white and place over the callout bar. Create a new layer and merge it with the white gridded layer and name it.
Apply a blend mode of Soft Light to this layer. Select your callout bar area either with the Rectangular Marquee Tool or Control + Click the layer. Next select the Rectangular Marquee Tool right click (Control + Click) and choose select inverse then Delete. This will remove all of the grid that isn’t in the callout area.
The next step is to make sure that the gridded area only extends to the edge of the 960px working area so pop your guides up if they are hidden. View > Show > Guides, next add a layer mask to the grid layer.
Select the layer mask by clicking it then select the Gradient Tool (G) and choose a black to transparent gradient. We are going to use this to erase the grid that lies outside the main 960px area.
Make sure the gradient is set to Linear and is a black to transparent gradient. Start from the edges and drag the gradient in till it reaches the guides. Repeat this on both sides until you are happy with the look. You should notice that the layer mask should show the black gradient around the outside.
Step 10: Adding the Callout Content
Our callout requires a page callout, which we shall do in text select Arial 45pt (#2C2C2C) and write your callout highlighting any essential words by placing them in bold. Under this place a small introductory sentence in a smaller 17pt. and place these on the left hand side of the callout bar.
Step 11: Adding the Slideshow
Grab your Rectangular Marquee Tool and drawing out a section between the far right and the middle guide, make the height 8 lines of the callout bar leaving 1 on top and 1 below and Fill with Dark Grey (#2C2C2C). This will be the background of the slideshow.
Add a shadow to your slideshow background, double click to open the Layer style Panel select drop shadow change the colour to (#2C2C2C) select a Distance of 1px and a size of 10px.
Next you’re going to need some dummy content to place in the slideshow, I personally have taken a screenshot of my blog. Resize this so that it’s the same size as the slideshow then Select > Modify > Contract 10px , select the inverse of this as before and delete.
Step 12: Content section
To start off the content section we are going to add a subtle gradient, use your Rectangular Marquee Tool to select all the area under the callout, next select the Gradient Tool (G). Select a gradient from (#F0F0F0) to transparent and drag the gradient downwards. Don’t go too far as the background should return to (#F9F9F9) by the bottom of the page.
Step 13: Content – Left
Add an introductory paragraph in Arial 18pt #9C9C9C as well as styled link Underlined #A3BBCC.
Step 14: Adding a list of services
First add a heading for the section in Arial 25pt Bold #262626, proceed to add list items in 18pt Arial #9C9C9C to illustrate the bullet point you can either draw them out using the Elliptical Marquee Tool or use Alt codes Alt+7 colour these with the light blue (#A4BCCD) and align with the grid.
Repeat this to add any additional information.
Step 15: Content – Right
The right hand section of the page will show a selection of recent news. First add a title in the same style as those previous Arial 25pt Bold #262626 and align this with the header of the services section. This section will list our latest news, Create a header for the news post in Arial 18pt #A4BDCD and place content under it in Arial 16pt #9C9C9C. Repeat this for 3 stories then place a link underneath in Arial Underline 16pt #A4BDCD to the news page.
Step 16: Footer
Our last section is the Footer this will hold a login form, contact details and a few links. Start by selecting the bottom section of the document with the Rectangular Marquee Tool and fill it with Dark Grey (#262626).
We’re going to add the form now, first create a header Arial 20pt Bold (#FFFFFF) and place it on the left hand side of the footer. Then use the Rectangular Marquee Tool to create two rectangles these will be the input fields. Fill these will descriptions Arial 16pt #9C9C9C
Repeat this for the submit button but use the Rounded Rectangle Tool(U), then add an Inner shadow to these elements, drop the opacity to 30%, size and spread to 0 and the distance to 10px. Add a “lost-password” link in Arial 13pt Underline #A4BDCD.
Step 17: Footer – Right
Finally were going to finish up by adding some contact info, add a header Arial 20pt Bold (#FFFFFF) and line up with the form header, then add contact info below in Arial 16pt #FFFFFF.
Step 18: Check alignment and balance
Use the grid and the guides to check that everything is lined up and balanced, if not then adjust accordingly.
Step 19: Relax, you’re finished
Hopefully, you’ve gotten a small grasp of how you can work with a grid system, and customize a basic system of your own. I would strongly encourage you to experiment with these systems more until working with them becomes second nature for you. Over time, working with a grid will make your job as a designer much easier!
128 Comments
Awesome, didn’t use the 960 grid system before but now i think I’m going to start doing it all the time. It’s very handy and faster to create things and position them. Didn’t follow the tutorial 100% but i think the point was showing the 960 grid system in action. Anyway this is what i came up with http://codehawk.org/img/blog/Website_Template_1.png
Flag as inappropriate960 grid system is getting old now. I got the very nice tutorial about development wordpress theme with 978 grid system. Check following URL
Flag as inappropriatehttp://wordpressapi.com/2011/04/17/how-to-develop-wordpress-theme-with-978-grid-system/
Great tutorial! I’m finishing up my first site using the 960 grid system, and this was such a help. Thanks!
Flag as inappropriateThis is FANTASTIC!!!
Flag as inappropriateThanks so much! =)
good work guys,i have loved your site
Flag as inappropriateAbsolutely brilliant tutorial. I’ve just started learning and know nothing about photoshop, but managed to follow through the entire lesson and learnt quite a few things on the way. Thank you!
Flag as inappropriatePhotoshop tutorials, from beginner to advanced. photo manipulation, icon design, text effects, interface, layout, painting, photo effects, psd tuts, maxon cinema 4d, designing.
Flag as inappropriatehttp://photoshopcs8.co.cc
Thanks for this tutorial. I learned a ton about photoshop and especially good solid typography, thanks to the grid system in place. Thanks again!
Flag as inappropriateI love design in 960 Grid system. Thanks for this great tutorial.
Flag as inappropriateThis really good info here interesting, thank you very much.
Flag as inappropriateMaybe anybody can help with the very end of 9 point:
Repeat this on both sides until you are happy with the look. You should notice that the layer mask should show the black gradient around the outside.
I cant get it from both sides – if I add gradient from left, then when adding it to the right, left one disappears and vice versa. Maybe there is special option to do it from both sides?
Flag as inappropriateHello,
It is an incredible tutorial – I was so much looking somebody to explain the basics how to prepare gird and etc. Thanks a lot!
But I didnt actually understood – when you open the grid, there are 12 pink vertical lines. But on 5 point of your tutorial there are 15 of them and on 6 point there are already 16 of them. How come? :)
Flag as inappropriateNice to see this post.
Flag as inappropriateCheck out this new grid system. http://thesquaregrid.com Pretty cool
Flag as inappropriateHow to code this layout to CSS????????? This is only weblayout in PSD and How I can get this layout coding to css? thanks
Flag as inappropriateTry this tutorial from line25:
http://line25.com/tutorials/coding-up-a-web-design-concept-into-html-css
Flag as inappropriatethank you, nicely done
Flag as inappropriatethank you very much. May God bless u frenz..
Flag as inappropriatehow did the 12 column grid become the 16 column grid ??
Flag as inappropriatei was asking myself the same thing, the tutorial starts out with the 12 column grid and from step 5 onwards, it’s the 16 column grid… i wonder who does the proofreading on these tutorials
Flag as inappropriateLool! Exactly what i was thinking, i spend about half an hour counting and recoundting everything :P
Flag as inappropriateExactly! I wonder why the author does not answer to this question. What does that mean, we should (can) combine grids?
Flag as inappropriateVery nice! very well explained! congrats man!
Flag as inappropriateThanks Neale… Its very helpful.
You rocks…
Flag as inappropriateGreat Tut, very helpful.
Flag as inappropriateI´m starting to design with the grid and this helped a lot.
Props from Mozambique!
thanks, great post, very useful
Flag as inappropriateI have one question. How i put the links in the images in photoshop?
Flag as inappropriateThank you very much ” http://video4alll.blogspot.com/ “
Flag as inappropriateHey, you out of grid.
Flag as inappropriateEllen may be right… she probably may be very good in what she does but I think the point is the way she said what she wanted to say. She probably didn’t want to attack the author but in my personal and humble opinion, when I read her comment I felt that there wasn’t a constructive criticism. I’m sure she wanted to help but let’s be objective… if you want to said that an article is not right, is incomplete, has errors, etc… that’s totally fine, please try to be nice, because is not easy take the time and write about a good topic, be it good result or not. I think this tutorial was very helpful to start! At least for me ;)
Thank you Neale.
Flag as inappropriateAs an aspiring web designer (and a predominantly self-taught one at that), this was incredibly helpful. I’ve read on the 960 grid system before, but this is by far the best example of how to implement its use (in my opinion at least)!
One small error I found working through this: in step 16.3, “Distance” and “Choke” should both be 0, “Size” should be 10. The way it’s written gives a thick, hard, black line in each box.
Absolutely wonderful tutorial. Thanks for this post!
Flag as inappropriateDownload60s.com is a graphic designing website. photoshop tutorials.
Flag as inappropriatehttp://download60s.com
Excellent tutorial. It’s easy to follow and very detailed. Thanks.
Flag as inappropriateThank you very much … nice tutorial
Flag as inappropriateI will add to my site (http://cairo-pro.blogspot.com) and i’will share this Explain
I turned this PSD into xHTML and CSS if anyone wants to check it out. http://zackhovatter.com/146/convert-a-psd-to-xhtml-and-css-tutorial/ I gave full credit to you for your design work.
Flag as inappropriateI love the simplicity of this layout.
Flag as inappropriateawesome tutorial. i am using 24 col grid right now.
Flag as inappropriateI always use the 960 grid for website design.
Flag as inappropriateheard of this some times before, but didn’t managed to find such a nice tutorial on it anyways. BTW, i really appreciate and like your site design, very well done!
Flag as inappropriateGreat job at making it look easy. ;-P
Flag as inappropriateI’d be willing to convert this from PSD to XHTML/CSS in a screen cast.
Flag as inappropriateDavid, I would love to watch the screen cast whenever it’s ready. Working with grids is so exciting but it turns to be annoying when you’ve a PSD file and unable to convert it to XHTML/CSS.
Thanks Neale by the way.
Flag as inappropriateWhat a heated debate over a grid design. Nice job overall. I love learning new ways to approach web design.
Flag as inappropriateThis tutorial is great and will help my web designers to improve their layout…
Flag as inappropriategreat tutorial thank you very much admin…
Flag as inappropriatehttp://www.sibelilaclama.com
Great Tutorials
I found a fantastic Website for really cool Photoshop Web Layout Tutorials
http://www.tutorials99.com
where all tutorials have a higher page rank and professional
Flag as inappropriateAwesome! thanks
Flag as inappropriateGood work!
I like tutorials and like in this blog I’m a fan of http://vidamrr.blogspot.com/.
Flag as inappropriateSaying something is factually inaccurate is not a personal attack on its author. I backed up my opinion with resources that are by the leading experts in the field who support my point of view. In order to establish credibility and authority on a subject, one must use a preponderance of evidence to back up information…not personal opinions. The trouble with the internet is that information is not fact-checked as is done in traditional publishing and it is more about someone’s opinion and depth of expertise than facts.
Flag as inappropriateStaying inside the pink areas (and touching their edges) is following the grid. Laying elements all over the page (in the gutters) as is done in this tutorial violates the grid…it’s that simple. The tutorial is completely incorrect. I cannot find one single element that is correct in concept or fact.
My personal web site is not designed on a grid and no representation was made to that effect. One of the core concepts in learning grids is to learn when and where it is appropriate to use one.
I have been working for months on a blog covering design education and concepts one should learn in design school. Articles will be fact-checked and juried by experts in the field. It is not ready to launch.
You are completely right I don’t claim to be an expert on grids this is just how I have learnt to produce my designs and it has worked out for me. I would love to learn more about grids from the blog you have been working on, let me know when it’s up.
Flag as inappropriateEllen, please stop. We understand it already. No need for a comment anymore. By the way, you’re talking like a pro, but I’m not impressed by the design of your website and your portfolio.
Flag as inappropriatePhat, If you are interested in sharing your URL, I’d love to see your work..under your real name. Hiding behind an anonymous name so you can toss out insults is pretty counterproductive. If you have some constructive feedback to offer I’m always interested in listening and discussing and learning. Doesn’t seem to be your style, however.
Flag as inappropriateYour explanation is very straight. Off course all of us here would love that on a tutorial. That will be easier for us, beginner, to understand.
Flag as inappropriateEllen, I don’t earn my living with web design anymore. So I don’t have a portfolio to share. What I was trying to say is that you might know the technical stuff, but others might be better in the creative aspect of designing.
Flag as inappropriateI think ellen does make a good point about the gutters etc..
I am new to grid systems and the tutorial was a bit confusing when trying to translate the grid in CSS. I found is near impossible to fit the tutorial to the grid with any accuracy.
It didn’t fit the guttering at all.
It was also made more confusing by changing the grid half way through the tutorial.
I did, however, find it useful in understanding the concept.
Thanks
Flag as inappropriate18px for body text seems a bit large, doesn’t it?
Flag as inappropriateI hope you follow this up with an article taking us through the steps of using the 960 system for the mark-up of this design.
I’m intrigued at how this will work, because as Ellen Lytle points out, the elements should sit against the pink lines and not start in the gutters. Unless you are planning to use 1 columns worth of padding to force your text to align to the gutter? By laying the page out like you’ve done above surely breaks the very concept of the 960 system?
Flag as inappropriateYou’re right, I’d like a follow up of this tutorial. The idea and concept is good, but he seemed to all but abandon the 960 Grid system this tutorial is supposed to exhibit.
Flag as inappropriateI’m glad that you like the idea and concept and apologise that the grids were not up to the same standard. I would love to produce a follow up but feel it may not go down so well :)
Flag as inappropriateTutorial added to the web tuts
Flag as inappropriateIt was very useful,
Thank you!
Flag as inappropriateM
Great intro to grids tutorial. One issue I have with it is that your grid overlay changes a quarter way through the tutorial; compare the image in step #2 to step #5, it’s completely different. It looks like you went from the 12 grid to the 16 grid.
Flag as inappropriateHe did. The final image confirms it. I count 16 grids. I was trying to figure out why my alignments weren’t the same as the author’s.
Flag as inappropriateI can explain that for you, the tutorial was produced in two separate parts the first section was setting up the guides and grids as you can see at the end of section 2 I propose saving it as a template. When producing the rest of the design I have used a different template, really surprised that this was not noticed before sorry for the inconvenience guys.
Flag as inappropriateGreat tut…useful techniques..thanks
Flag as inappropriateThe tutorial does not use a grid correctly in any sense of the word. The concepts and principles are the same for both print and web. Grids are extremely complex and hard to learn through research and self-teaching. Core concepts:
Flag as inappropriate1. The pink areas are grid modules and the white lines are gutters. Gutters exist so that copy and photographs don’t touch the elements in the next grid module. (This is also why padding is used inside of boxes.) You can cross gutters to use more than one module, but not use the inside of the gutter like the outside of a module. All elements must stay inside the pink lines and out of the gutters. Do not put anything in the gutters unless you are using more than one grid element.
2. A true grid has both vertical and horizontal lines and things relate to each other in both directions, horizontally and vertically. This tutorial ignores 50% of the issue (horizontal). Grid modules are squares or rectangles; this shows only lines for columns. A base line grid is not a replacement for modules.
My choice of the top three resources for learning grids are “Grids for the Internet and Other Digital Media” by Gotz, “Making and Breaking the Grid” by Samara, and “Grid Systems” by Elam.
Thank you for your suggestions of grid resources Ellen.
We’d strongly agree that this is not an all-encompassing guide to using grid systems. We’d love to bring in some experienced designers interested in shedding light on best practices, different systems, and hopefully building custom grids to serve specific goals.
Flag as inappropriateI agree grids are complex, they required a lot of research and work, this tutorial was aimed as a light introduction into grids using one of the more popular grid frameworks available. I will definitely have a look at the resources you suggested, thanks for the input :)
Flag as inappropriateEllen, you’ve missed the point of the tutorial somewhat. This is a guide for designing a clean web layout using the 960 grid system, not a guide to using grids in design.
I use the 960 GS myself for the initial design and deviate on occasion. I know for a fact that a huge amount of beautifully-designed websites are built without a grid at all and it doesn’t make them any less well-designed. Design is an art, not a science.
Looking at your own website, I had a hard time finding either a structured layout or nice design.
Great tutorial, Neale. Got me inspired for my next project!
Flag as inappropriateDid you see her credentials? She’s quite educated in the field of design. A teacher at that! I bet you had a hard time finding that as well :)
I see her input as extremely valuable when learning to design w/ a grid.
Anon made a similar comment above, and he/she is right. They are not criticizing or attacking the author, but making a valid point in reference to designing w/ grids. Learn from it.
Personally, I learned more from those two comments, then I did from the actual article. This isn’t an attack on the author at all, by the way. I love his personal sites design. Consistency is important when learning, and this isn’t consistent with other tutorials I’ve read.
Just read another comment by 13thGeneral stating the author went from a 12 grid to 16 grid right in the middle of the tut!
Regardless, I’m looking forward to a follow up on slicing!
Ellen, your design rocks! I wish you had a blog to share your years of knowledge with us. *hint hint*
Flag as inappropriateI thought Ellen made really good points. We’d actually really like it if she felt compelled to write a post sometime for us.
Flag as inappropriateEven though Ellen is a teacher, her website uses Wix (basically a drag-and-drop flash based website editor) and frames.
Flag as inappropriateGood thing she teaches design and not HTML.
A great follow up on this would be taking it to html/css or even WordPress.
Nice design too.
Flag as inappropriategood job!
Flag as inappropriateuseful article
Thanks a lot
Flag as inappropriateThanks for the tutorial. I’m a big fan of grids–big fan. Did I mention grids are the bomb? :)
Flag as inappropriateA nice example of using a grid for design, however, if you’re going to use a grid based on a css grid framework such as 960.gs then the template should be buildable using that grid.
The red columns represent the start and end of grid containers, so for example your callout’s slider box – by making it go outside the final red column you’re doing something the grid won’t let you do.
Unless you’re going to apply lots of padding the CSS, start content inside the grid columns.
Flag as inappropriateAgreed – I think it’s pointed out in the article that comfortable users should simply use the grid files. This is definitely a baby-step into using this grid system.
We’d love to publish some more tutorials on this subject. There seems to be a great deal of interest in it from our community.
Thanks for the comment.
Flag as inappropriateCheers for the comment and your absolutely right, i currently don’t use the 960gs css framework but have found this one of the best ways to visually layout my designs within a grid to allow for the option of using a framework if time is constrained.
Flag as inappropriateAnon, I was just going to write the same thing and am glad that you pointed it out. For a second, I was thinking that I had my gutters and columns mixed up.
Flag as inappropriateActually Anon, it’s possible and not really complicated.
Check out this design, it’s a perfect example: http://thingsthatarebrown.com/
By wrapping multiple div.container inside 100% width div, you can easily get that kind of effect ;)
Hope that helps.
Anto.
Flag as inappropriateGreat job, now i’d like to see how you convert this to website by 960 Grid System!
Flag as inappropriateGreat tutorial, I will definately be using this.
Flag as inappropriateGreat tutorial. I love the techniques used in this.
Flag as inappropriate