CSS Frameworks

Up until a couple of weeks ago I never really understood the fascination with using CSS frameworks in web design. They just seemed very limiting and boring. Then I used one. My whole perspective on their usefulness has done a complete 180. I can thank Jeffrey Way for convincing me to give the 960 framework a try, after I read/listened to his post: A Detailed Look at the 960 CSS Framework.

If you have been hesitant to give CSS frameworks a try for similar reasons, I suggest you at least give them a fair shake before you write them off completely. I’m not saying they are for everyone, but most of the excuses for not trying them don’t hold any weight.

Introduction

In this tutorial I’ll show you how to mock up a fresh looking blog theme in Photoshop that is designed to be used within the 960 framework. This tutorial was designed more for web design theory than Photoshop technique. It is for that reason that I don’t go into great depth on each Photoshop step, but spend considerably more time on design theory and application. Photoshop beginners may find it somewhat tricky to follow along. Let’s get started.

The Files

In order to help you follow along and learn the techniques in more depth, below is the PSD file and a full size preview.

Step 1

In some of my past Photoshop mockups and noticeably so for this project, Photoshop has a tendency to fade out colors like they’ve been through the wash too many times. It was a problem that has always bugged me, but I never took the time to try to figure it out. Recently I discovered (with a little help from my friends on Twitter) a solution that works very well. Be sure to check out the post The Mysterious “Save For Web” Color Shift to learn how to alter your color settings appropriately. I highly suggest browsing through that article and altering your settings accordingly before you begin any web mockup in Photoshop.

We are going to use the 960 photoshop template that is provided in the download. So head on over to the960 site and download the zip file. Unzip the file and navigate through the folders to 960_gs/templates/photoshop. Open up 960_grid_16_col.psd. We’ll be using this grid as a reference point for positioning our elements. Also be sure to check out the guides provided as they will also be helpful. A quick keyboard shortcut to toggle the visibility for them is ‘cmd + ;’.

Step 2

For now, hide the visibility on the grid by clicking on the eye icon in the layers palette for the 16 Col Grid group. Now click on the background layer and add a light blue to white gradient. Anything subtle and airy will do the trick.

Step 3

Grab the logo you are going to use. If you are following along, you can download the fresh logo I createdhere. The leaf used in the logo is a modified version of one that I found in the Ecology Vector 4 pack atQVectors. Later in this tutorial we will also make use of another leafy icon from that same pack. When working with guides it’s often quite helpful to have the snap feature turned on. Go to view->snap to turn that on. Turn your guides on and the grid visibility back on. Note that we are using a 16 column grid based on a fixed 960 pixel width. The logo will be placed in the top left of our grid pressed against the left side of the first column, like the image below.

Step 4

Now we are going to draw out the search box that will appear in the top right of our design. First off, drag out a horizontal guide that lines up with the bottom of the logo. Horizontal alignment is really tricky to achieve within the context of web design, however when it’s possible, it can go a long way to help the look and feel of your design. Grab the rectangle tool and drag out a rectangle that stretches four columns and lines up against the right most column and the guide that aligns the bottom of our logo. Double click on the search box layer you just created in the layers palette to bring up the layer style window. Add a faint gray color overlay, and a slightly darker gray 1 px stroke.

Step 5

Drop in some text into your search box. This is a good example of a place to help brand your site. Any excuse to make your blog more personal is a good place to add some of your own style. Those kind of little touches go a long way toward separating your site from the pack. So instead of the generic ‘search’ text, I made this one say ‘Find something fresh’. Another thing to note here is that I choose Verdana for the font. It’s wise to choose browser friendly fonts that most systems will have; and those that will downgrade to other fonts in your stack nearly seamlessly. One last piece of advice is to stay away from pure black text. Especially in lesser important text like that inside the search form. Varying your shades and sizes of text is an excellent way to direct where the end user’s focus should be.

Step 6

Another way to go the extra mile is the use of icons where applicable (although, far too many people go overboard with them). The sheer amount of high quality free icons hanging around in the design world is staggering. For the magnifying glass icon I grabbed the Simplistica set from DryIcons. Size and place the icon in the search box. I let mine extend outside the borders of the box to help lessen the rigidness of the design.

Step 7

The gutters between each column in the 960 grid measure 20 pixels wide. Therefore I tried to make the horizontal spacing between the top of the page and the top of the logo, as well as the bottom of the logo to the top of the nav background 20px. These measurements only need to be eyeballed, as the precise pixel measurements will be handled later when you take the design into CSS/HTML. Grab the rounded rectangle tool and draw out a brown colored rectangle that extends from the edge of the left column to the edge of the right column. Don’t worry about the height of the box, we’ll crop the bottom in the next step.

Step 8

Right click on the nav background layer and rasterize the layer. Then grab the rectangle marquee tool and make a selection over the bottom portion of the rectangle. This will be the portion that you cut off, so make sure the top portion is the height of the nav background that you want. When you have the selection set, press ‘cmd + x’ to cut the selected pixels.

Step 9

One thing about the 960 setup that makes sense, but has a habit of bugging me is the margins on the outside of the layout. The 960 container stretches 960px and the gutters on the outside are only setup for 10px and not 20. Which of course makes sense when you work out the math, but it can make for some tricky ways to keep the balance in your design. All that is to say, I decided to extend my design an extra 10px on both sides. Draw out a large green rounded rectangle that will serve as your outter wrapper background.

Step 10

I set up the blog’s sidebar to stretch 4 of our columns which leaves you a very flexible 12 columns to work with for main content. 12 columns is an awesome number to work with because it flawlessly breaks down to 2,3 and 4 column micro grids. Grab the rounded rectangle tool and draw out a rectangle that stretches the 4 furthest left columns and begins approximately 20 pixels below the nav bar. Don’t worry too much about the height of the sidebar, you will have to alter that later depending on how much content you drop in there. Open up the layer style window and add a light blue to white gradient and a 1 px white stroke.

Step 11

Use the same styles to add another rounded rectangle as the main content background. Stretch it across the remaining 12 columns. Our shell is pretty much complete, now it’s time to add some content.

Step 12

For the navigation I decided to go with optima, sized at 15pt and the kerning set to 10. I realize that choosing optima goes somewhat against the grain from the font advice I shelled out in step 5, but here is my rationale for the choice. I just got a macbook pro and I love looking at the fonts it comes with :) Seriously, the system fonts are infinitely better. Also, the font can transition down the font stack to a serif that will look similar enough and the navigation won’t break down. Lastly, if you wanted to be sure to use optima here, you could set up the navigation with images. Be sure to space the text evenly and leave a good amount of breathing room for hover effects and the current nav background we will depict in the next step.

Step 13

Draw up a simple green rectangle under the text for home to represent the current navigation for the home page. The key here is to use the same hex # green that you used for the wrapper you setup in step 9. Be sure the rectangle is even with the top of the nav background and stretches into the wrapper background.

Step 14

Grab a fresh looking image to use for the main post. I found the photo I used at one of my favorite free stock photo sites, stock.xchng.

We are going to resize the image using the rule of thirds or the divine proportion. This is a fantastic way to achieve balance and style in your design. If you are unfamiliar with this school of thought be sure to check out Applying Divine Proportion To Your Web Designs by Smashing Magazine, or just do a quick Googlesearch and you are sure to get loads of quality results. The magic number to work out the divine proportion is 1.618, well actually that’s the number rounded to 3 decimal places, but it will suffice for our purposes. Take the length of the content area (in our case 700px) and subtract the amount we will be using for the padding on both sides (40px) that leaves us with 660px for our content area. Now divide that number by 1.618 and you should get 408px. The difference between 660px and 408px leaves us 252px for the image. These proportions workout, but we still have to account for the padding between the image and the text. So subtract 10 from both 408 and 252 and we are left with 398px for the text content and 242px for the image content. Wow, that was the most math I’ve done since highschool! :)

One last piece of math to account for before placing your image. In my mockup I added a subtle padded gray border to the image that takes up an additional 10px on the left and right sides. So subtract 10px from the 242px measurement and we are left with 232px. Resize your image to 232px for the width and place it in the document. It’s a tad tricky to achieve the padded border look in Photoshop, but here’s what I do. Add a 4 pixel white stroke to your image, then convert the it to a smart object, then add a 1 pixel light gray stroke to that. Move your “divinely sized” and “padded bordered” image to the left side of your main content box leaving 20px padding at the top and left.

Step 15

Next up we are going to work on the intro text for our first post. It’s common practice to use dummy text or lorem ipsum text to fill in text blocks for design purposes. It helps you focus on content, but more importantly when you show the client a mockup he/she won’t be consumed with the text there; instead the hope is that they will focus on the style. There are a ton of places to get this dummy text for your mockup. Two of my faves are the Dummy Lipsum Firefox Add-on and a new site called HTML-Ipsum. Grab a short blurb for you first post title and paste it into Photoshop. I made my font Georgia, 30pt, -10 kerning and a mid gray. Align your header with the top of your image with 20 pixels of breathing room.

Step 16

Draw a 1 px line just below the header that stretches from the image to 20px shy of the right border. Make it the same light gray color that you used in your image border. We’ll use this line break to help pull together the image and text. A simple break from the grid like this can really help ease the rigidness that can occur in grid based designs.

Step 17

Grab a paragraph of dummy text and paste it into your document. Have it set with 20px padding on either side. The font I used is verdana, 11.5pt size, 17pt leading.

Step 18

Add a ‘continue reading’ button like the one shown below. Make the box background the same color brown as the nav background and add a 1 pixel near black stroke to it. The font is 11pt Arial, set at 40pt kerning.

Step 19

Rinse, lather, repeat. Drop in two more similar post intros. Make sure you follow the same spacing, colors and fonts scheme. Also be aware of the spacing between each block. You will have to adjust your wrapper boxes to fit the scale you know have setup. Here is what my mockup looks like at this point.

Step 20

Now it’s time to get to work on the sidebar. To add a little style and freshness to the headers grab this leaf icon that I modified from the Ecology Vector Pack I mentioned earlier. Place it in your sidebar leaving 20px padding on the top and left. Then type in ‘categories’ and move it to about 5px to the right of the icon. For the font I used the themes brown color, Optima, 16pt, 20pt kerning.

Step 21

Drop in some dummy text for a list of links for the categories. I used the same font style as the text blurb for each post, except a tad smaller. To type the double caret symbol that I used as the bullet, hit ‘shift + option + \’.

Step 22

Place a line between each sidebar block and mockup two or three more lists. Here is what my sidebar looks like now.

Step 23

Add a light gray and centered footer at 10 or 11pt font and voila were done! A fresh grid based mockup all ready to slice up into CSS/HTML. Here is my final result.