Sign In  |  Join Now Become a member to add links and start earning points!

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

Final Image

Step 1: Create a new document

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.

960 Grid System

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.

960 Grid System

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.

960 Grid System

Next return to your document and create a new layer. Fill this layer with the pattern, Edit > Fill this will create your Baseline Grid.

Horizontal 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

Grid Template

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:

  1. Header
  2. Callout
  3. Content – Left
  4. Content – Right
  5. Footer
layout

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 120pxturning 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.

header

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

logo

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.

navigation

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%.

callout gradient

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.

grid

Step 9: Adding the Callout Background

Create a new layer above your callout layer and fill this layer Edit > Fill with your new pattern.

grid fill

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.

grid

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.

inverse

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.

Layer Mask

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.

Layer Mask Gradient

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.

tagline

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.

slideshow bg

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.

slideshow shadow

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.

contract

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.

content gradient

Step 13: Content – Left

Add an introductory paragraph in Arial 18pt #9C9C9C as well as styled link Underlined #A3BBCC.

introductory paragraph

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.

Services

Repeat this to add any additional information.

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.

Recent News

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).

Footer

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

Form

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.

Input Shadow

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.

Contact Us

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.

Final image with grid

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!

Final Image

Download the PSD

128 Comments

  1. Add point Subtract point
    Kevin (12 Points) March 19, 2011 at 2:59 pm

    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 inappropriate
  2. Add point Subtract point
    Stacey (3 Points) March 8, 2011 at 5:55 pm

    Great tutorial! I’m finishing up my first site using the 960 grid system, and this was such a help. Thanks!

    Flag as inappropriate
  3. Add point Subtract point
    saintdo (2 Points) February 8, 2011 at 11:56 am

    This is FANTASTIC!!!
    Thanks so much! =)

    Flag as inappropriate
  4. Add point Subtract point
    winnie (2 Points) January 24, 2011 at 4:19 am

    good work guys,i have loved your site

    Flag as inappropriate
  5. Add point Subtract point

    Absolutely 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 inappropriate
  6. Add point Subtract point

    Photoshop tutorials, from beginner to advanced. photo manipulation, icon design, text effects, interface, layout, painting, photo effects, psd tuts, maxon cinema 4d, designing.
    http://photoshopcs8.co.cc

    Flag as inappropriate
  7. Add point Subtract point
    Jonathan Gaby (0 Points) December 28, 2010 at 1:03 pm

    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 inappropriate
  8. Add point Subtract point

    I love design in 960 Grid system. Thanks for this great tutorial.

    Flag as inappropriate
  9. Add point Subtract point

    This really good info here interesting, thank you very much.

    Flag as inappropriate
  10. Add point Subtract point

    Maybe 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 inappropriate
  11. Add point Subtract point

    Hello,

    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 inappropriate
  12. Add point Subtract point
    Atlanta Web Design Company (1 Point) November 3, 2010 at 3:56 am

    Nice to see this post.

    Flag as inappropriate
  13. Add point Subtract point

    Check out this new grid system. http://thesquaregrid.com Pretty cool

    Flag as inappropriate
  14. Add point Subtract point

    How 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 inappropriate
  15. Add point Subtract point

    thank you very much. May God bless u frenz..

    Flag as inappropriate
  16. Add point Subtract point

    how did the 12 column grid become the 16 column grid ??

    Flag as inappropriate
  17. Add point Subtract point
    Mike Branch (0 Points) September 9, 2010 at 9:44 pm

    Very nice! very well explained! congrats man!

    Flag as inappropriate
  18. Add point Subtract point

    Thanks Neale… Its very helpful.

    You rocks…

    Flag as inappropriate
  19. Add point Subtract point
    wushi (0 Points) August 16, 2010 at 3:51 am

    Great Tut, very helpful.
    I´m starting to design with the grid and this helped a lot.
    Props from Mozambique!

    Flag as inappropriate
  20. Add point Subtract point
    David (0 Points) August 13, 2010 at 9:21 am

    thanks, great post, very useful

    Flag as inappropriate
  21. Add point Subtract point
    Diogo Dantas (0 Points) August 6, 2010 at 5:45 am

    I have one question. How i put the links in the images in photoshop?

    Flag as inappropriate
  22. Add point Subtract point
    Editha Fuentes (1 Point) July 15, 2010 at 1:31 pm

    Ellen 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 inappropriate
  23. Add point Subtract point
    MitzeMitchell (0 Points) July 11, 2010 at 5:43 pm

    As 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 inappropriate
  24. Add point Subtract point
    Gebel Scarduzio (0 Points) June 19, 2010 at 5:19 pm

    Download60s.com is a graphic designing website. photoshop tutorials.
    http://download60s.com

    Flag as inappropriate
  25. Add point Subtract point
    Queens Lawyer (0 Points) June 8, 2010 at 11:06 am

    Excellent tutorial. It’s easy to follow and very detailed. Thanks.

    Flag as inappropriate
  26. Add point Subtract point
    GeHaD HaNy (1 Point) May 31, 2010 at 3:53 pm

    Thank you very much … nice tutorial
    I will add to my site (http://cairo-pro.blogspot.com) and i’will share this Explain

    Flag as inappropriate
  27. Add point Subtract point
    David Bradley (2 Points) May 28, 2010 at 12:36 pm

    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 inappropriate
  28. Add point Subtract point
    MykEfx (1 Point) May 24, 2010 at 11:58 am

    I love the simplicity of this layout.

    Flag as inappropriate
  29. Add point Subtract point
    Harsha M V (1 Point) May 22, 2010 at 2:05 am

    awesome tutorial. i am using 24 col grid right now.

    Flag as inappropriate
  30. Add point Subtract point
    Simon (1 Point) May 14, 2010 at 9:44 am

    I always use the 960 grid for website design.

    Flag as inappropriate
  31. Add point Subtract point
    scriptedSheep (1 Point) May 12, 2010 at 10:21 am

    heard 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 inappropriate
  32. Add point Subtract point
    Talton Figgins (1 Point) May 8, 2010 at 6:35 pm

    Great job at making it look easy. ;-P

    Flag as inappropriate
  33. Add point Subtract point
    David Bradley (1 Point) May 8, 2010 at 12:31 pm

    I’d be willing to convert this from PSD to XHTML/CSS in a screen cast.

    Flag as inappropriate
  34. Add point Subtract point
    Mike Griffiths (1 Point) May 8, 2010 at 10:40 am

    What a heated debate over a grid design. Nice job overall. I love learning new ways to approach web design.

    Flag as inappropriate
  35. Add point Subtract point
    website designing company india (1 Point) May 8, 2010 at 7:06 am

    This tutorial is great and will help my web designers to improve their layout…

    Flag as inappropriate
  36. Add point Subtract point
    fare (1 Point) May 7, 2010 at 6:56 am

    great tutorial thank you very much admin…
    http://www.sibelilaclama.com

    Flag as inappropriate
  37. Add point Subtract point
    Saira (1 Point) May 7, 2010 at 4:51 am

    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 inappropriate
  38. Add point Subtract point
    Cut Bang Saiful (0 Points) May 7, 2010 at 12:58 am

    Awesome! thanks

    Flag as inappropriate
  39. Add point Subtract point
    Rafael Valdés (1 Point) May 6, 2010 at 4:55 pm

    Good work!

    I like tutorials and like in this blog I’m a fan of http://vidamrr.blogspot.com/.

    Flag as inappropriate
  40. Add point Subtract point
    Ellen Lytle, M.A., M.Des. (5 Points) May 6, 2010 at 1:51 pm

    Saying 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.
    Staying 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.

    Flag as inappropriate
    • Add point Subtract point
      Neale (1 Point) May 6, 2010 at 3:25 pm

      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 inappropriate
    • Add point Subtract point
      Phat (1 Point) May 7, 2010 at 12:58 am

      Ellen, 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 inappropriate
    • Add point Subtract point
      Ellen Lytle, M.A., M.Des. (1 Point) May 8, 2010 at 2:08 am

      Phat, 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 inappropriate
    • Add point Subtract point
      Jeprie (1 Point) May 8, 2010 at 2:28 am

      Your 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 inappropriate
    • Add point Subtract point
      Phat (0 Points) May 8, 2010 at 6:42 pm

      Ellen, 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 inappropriate
    • Add point Subtract point
      Dave Haslam (0 Points) May 13, 2010 at 10:19 am

      I 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 inappropriate
  41. Add point Subtract point
    paul (1 Point) May 6, 2010 at 10:41 am

    18px for body text seems a bit large, doesn’t it?

    Flag as inappropriate
  42. Add point Subtract point
    Steve Dunhill (1 Point) May 6, 2010 at 6:32 am

    I 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 inappropriate
  43. Add point Subtract point
    Marcipa (1 Point) May 6, 2010 at 4:20 am

    It was very useful,

    Thank you!
    M

    Flag as inappropriate
  44. Add point Subtract point
    13thGeneral (1 Point) May 5, 2010 at 5:10 pm

    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 inappropriate
  45. Add point Subtract point
    Rachel (1 Point) May 5, 2010 at 4:40 pm

    Great tut…useful techniques..thanks

    Flag as inappropriate
  46. Add point Subtract point
    Ellen Lytle, M.A., M.Des. (-2 Points) May 5, 2010 at 3:13 pm

    The 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:
    1. 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.

    Flag as inappropriate
    • Add point Subtract point

      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 inappropriate
    • Add point Subtract point
      Neale (1 Point) May 5, 2010 at 4:24 pm

      I 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 inappropriate
    • Add point Subtract point

      Ellen, 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 inappropriate
    • Add point Subtract point
      GridGuyATL (2 Points) May 6, 2010 at 11:28 am

      Did 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 inappropriate
    • Add point Subtract point

      I 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 inappropriate
    • Add point Subtract point
      Stephen (1 Point) May 12, 2010 at 7:58 pm

      Even though Ellen is a teacher, her website uses Wix (basically a drag-and-drop flash based website editor) and frames.
      Good thing she teaches design and not HTML.

      Flag as inappropriate
  47. Add point Subtract point
    David Silva (1 Point) May 5, 2010 at 1:46 pm

    A great follow up on this would be taking it to html/css or even WordPress.

    Nice design too.

    Flag as inappropriate
  48. Add point Subtract point
    Dat Tai (1 Point) May 5, 2010 at 11:25 am

    useful article

    Thanks a lot

    Flag as inappropriate
  49. Add point Subtract point
    Chris Mower (1 Point) May 5, 2010 at 11:24 am

    Thanks for the tutorial. I’m a big fan of grids–big fan. Did I mention grids are the bomb? :)

    Flag as inappropriate
  50. Add point Subtract point
    Anon (1 Point) May 5, 2010 at 11:23 am

    A 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 inappropriate
  51. Add point Subtract point
    Matteo (-1 Points) May 5, 2010 at 10:10 am

    Great job, now i’d like to see how you convert this to website by 960 Grid System!

    Flag as inappropriate
  52. Add point Subtract point
    Alan (1 Point) May 5, 2010 at 9:11 am

    Great tutorial, I will definately be using this.

    Flag as inappropriate
  53. Add point Subtract point
    Marcell Purham (0 Points) May 5, 2010 at 9:08 am

    Great tutorial. I love the techniques used in this.

    Flag as inappropriate