This is the first part in a three part series on building a professional website from scratch. This part will go over the design process, so we will be making a PhotoShop mock-up of our website. In the next step I will go over marking-up a template with HTML and CSS, and then we’ll complete the series with converting the template into an ASP.NET Master Page. To complete this Tutorial in its entirety, you’ll need:

• PhotoShop (the version doesn’t matter much, as we’re not doing anything overly complicated or tool-specific)
• Visual Studio (I’m using 2008, but you should be able to use 2005 as you just need support for Master Pages)

To get started, head over to 960.gs and download Nathan Smith’s 960 Grid System. The 960 Grid System is a CSS Framework that will get us up and going really quickly. It also includes a nice PhotoShop template that we will be using to make sure that our design aligns to the framework.

After you download the package, decompress it, and navigate to “templates > photoshop” in the grid system folder. There are 3 different psd files to choose from. We’re going to choose the 12 column template. The 12 column template will work for the majority of your designs, and I find that it really helps me to simplify my design process in general.

Open the “960_grid_12_col.psd” file and save it as “design-example.psd” in whatever location you choose.

Getting Started

When we’re finished with this first part of the tutorial, you will end up with a design that looks like this:

It’s a simple layout, but it has many little details that could take you a little while to get down. I find that it’s the little details that make a design pop, so it’s worth the time spent.

When you have the grid template open, you should see something like this:

As you can see, it’s just a plain PhotoShop document with some guides set up, and a layer with stripes on it to demonstrate the 12 columns. We will avoid putting anything the white areas on the left and right, as this is the background.

Setting Up Your Layers Pallet

When designing in the real world I usually have a pretty organic workflow, but to simplify this tutorial we’re first going to set up the layer pallet with some groups.

Notice how I turned the “12 Col Grid” off. I did this because I don’t like the red showing while I’m working. You can keep it on if you’d like, but I think that the guides work just fine for my purposes.

Creating the Background

We’re going to start from the bottom and move our way up.

Create a layer in the background folder group, and name it “background top”.  This will be the dark area at the top of the background area. Make a selection with your rectangular selection tool that starts at the very top left corner of your document. The selection should go all the way to the right side, and have a height of approximately 177px. I know that the height is a little arbitrary, but it looked good to me at the time.

I encourage you to make adjustments as you see fit. Feel free to change up colors, dimensions, and fonts. You’re the designer; I’m just here to show you some tips and tricks.

I’m going to use my color picker to select a foreground color of “#878787” and a background color of “#1f1f1f”.

Try to avoid choosing pure black. You may notice that designers rarely choose pure black in their color pallets. For me, this comes from my background in fine art. When you take a beginning painting class, your instructor will almost always start by telling you to never use pure black paint. You must always mix your black with another color. The reason for this is that black is a very flat color. If you mix your black with another color, you’ll get a lot more depth in your creation.

When you think about it, nothing in the real world is pure black unless there is a complete absence of light. When you look at something in the room that is intended to be black, there is always some source of light that creates highlights, or reflections of color from things around it. Of course there are always exceptions to the rule, but it’s a good rule of thumb to stay slightly off of black when choosing colors.

Back to the tutorial! Next we’re going to take the gradient tool and create a gradient in the selection that we made. Hold the Shift key and drag your cursor from the top to the selection to the bottom of the selection. Make sure that you have the “background top” layer selected when you do this, and we will now have a nice gradient across the top of our document.

We will now create a new layer under the “background top” layer, and name it “background bottom”.  With the “background bottom” layer selected, hold the Ctrl key and hit the “A” key. This will select the entire layer. Use your color picker to select the color “#d5d5d5”, and press the “F5” key while holding the Shift key. This will give you a Fill prompt. Fill your selection with the Foreground color. You may deselect by holding the Ctrl key and pressing the “D” key. You will end up with something like this:

It looks nice, but we’re going to give it a little pop. Create a new layer above the “background top” layer and name it “background high”. Select your pencil tool and set your foreground color to pure white. Make sure that your pencil tool is set to 1px width, hold Shift, and drag the pencil from the left side to the right side of your document. This will create a 1px horizontal white line. Position this line just below the gradient.

Now repeat this step with the foreground color set to pure black (it’s okay to use black in this case) on a new layer named “background low”, and position the line just below the white line.

This will create what looks like a little ridge between your 2 sections. Zoomed in at 200%:

This is a very subtle detail, but it’s going to give your design a little depth and create separation between your colors.

The final step in our background is to create the main content area. Create a new layer and name it “main area”. Select your rounded rectangle tool, and set the corner radius to 15px. Set your foreground color to “#ededed” and drag out a rounded rectangle. I started at 31px from the top, and dragged it across the outside guides of the grid. You can drag it to the very bottom of the document, as the bottom of the rectangle is going to be covered by the footer. Open the Layer Styles pallet, and set your drop shadow and inner shadow properties as follows:

This is going to create the same ridge effect that we made before, but at the top of the content area. You’ll see that we set the inner shadow in an unexpected way. Think about PhotoShop’s built-in tools, and how you can use them to achieve effects in a simplistic way. Creating the top treatment in this way will allow us to easily go in and adjust the treatment later, if we decide to do so. Your design should now look something like this:

Your Layer pallet should now look something like this:

The Header and Navigation

The next section that we’re going to work on is the navigation and header. This is probably the most elaborate section of this design. I created a generic logo, and made it black and grey in order to make it neutral. You can use your logo, and use colors from your logo in order to make it more custom.

When working with logos, I always like to work with vector files (Adobe Illustrator or EPS file). Open your logo in Illustrator, and simply copy the logo and paste it into your PhotoShop document in the “header” group. I typically like to paste it as a Smart Object, as it will maintain the properties of a vector object. The benefit of this is that it is resizable, so you can make it smaller or larger without any loss of quality. This is a very useful feature while designing, as you don’t always know what size you’re going to end up with.

I resized the logo to a height of about 45px, but you can adjust this to whatever looks good with your logo. I also added a drop shadow and inner shadow in the layer styles with the following settings:

This will give the logo just a little pop from the background, and should look something like this at 300%:

Next we’re going to create the search box. Create a new folder in the “header” folder, and call it “search”.  Create a new layer in this folder and call it “search field”. On this new layer, create a selection 230px wide and 28px high. Fill the selection with solid white.

Before you deselect the area, create a new layer above the “search field” layer. Take the gradient tool, with the foreground color set to black and background color to white, and drag the gradient from the top of the selection to bottom of the selection. You may now deselect if you wish to do so. On the layer you just created, adjust the transparency until you get a subtle gradient. I believe that I set it to about 15% or so.

Above this layer, create a new layer. On this new layer, we’re going to create a 1px solid white line with our pencil tool. Start 1px from the top of the field and 1px from the left, hold shift, and drag the pencil till you’re 1px from the right. If you don’t get this perfect, you can use the move tool to nudge the line, and the select tool to chop off the extra line at the ends. I am rarely able to get this perfect because of PhotoShop’s snapping feature, so I suggest that you just draw the line and adjust it from there.

Now merge these 3 layers together, as we want to apply a layer style for all three. After you merge the three layers, open the layer styles for the combined layer, and apply the following settings for a stroke (the color is #161616):

Now simply add a text layer above the field using Verdana 12px #161616 font, and enter text such as “Enter Search Term”. You will now have a field that looks like this:

For the Search button, it’s basically the same as the search filed, but a little simpler. The gradient goes from #161616 to #343434, and you only need to do a gradient fill. There’s no need to put a solid color down first, simply do a gradient fill on a layer with 100% opacity. The height is 28px, and the width is 66px. The stroke settings are the same, and the 1px line at the top is the color #686868. I used the Verdana 12px white font with all caps. The result should look something like this:

Now for the navigation, create a new folder in the “header” folder and call it “navigation”. Create a new layer in the “navigation” folder and call it “nav background”. Create a selection going from outside guide to outside guide at 30px tall. Fill the selection with #456d33. Now create a new layer above this layer and call it “nav highlight” without deselecting your previous selection. Hold the Alt key and take 12px off of the bottom of the previous selection. Use the gradient tool with #a2e775 on top and #619140 on bottom. Drag the gradient tool from the top of the selection to the bottom of the selection on the “nav highlight” layer. You should get something that looks like this:

Now add black and white lines to the top and bottom of the navigation bar with the pencil tool, as we have now done many times before, and adjust the opacity to your liking. You will now have something that looks like this:

As you can see, the lines give the bar just a little more depth. The next step is to create the navigation text. Create a new text layer in the “navigation” folder and type in your navigation items with some space between each item. I used Verdana 18px white font with all caps. To create the separators, make a 1px solid white and black lines right next to each other on separate layers, and adjust the opacity of each layer independently till you’re satisfied with the results. Merge the two layers, and apply a layer mask. Take your gradient tool going from black to transparent. Drag the gradient tool on the layer mask to fade the top and bottom of the separator line. Right click the layer mask and choose “Apply Layer Mask”. You can now duplicate this layer and put a separator between each item. You should now have something that looks like this:

You may choose to add some social networking icons to the right on the navigation bar. I’m using these nice matte black icons that you can get from Web Treats. After adding the social networking icons, we get this:

That will finish our header and navigation. You can use these techniques to accomplish a clean look on all sorts of elements, so use your imagination to carry them over to other elements, like buttons and other form fields.

The Footer

We’re going to go with a nice chunky footer. Keep in mind that this is trendy right now, so you may or may not want to do this in your design. In a couple years it might fall out of style, so use this at your own discretion. I happen to like the chunky footers because they give you a lot of space to include relevant information, and they also help to add some weight to the bottom of your design. Web interface design tends to be a bit top-heavy in nature, due to the fact that you usually put logos, navigation, and images at the top of the interface; the chunky footer helps to off-set this top-heavy nature.

This is a really simple footer. Create a new folder above the “header” folder and call it “footer”. Create a new layer in this folder, and name it “background”. Make a selection going from edge to edge of the document at about 180px height. We’re simply going to use the gradient tool to create a gradient going from #78b350 to #446a32.

Now we’ll just create black and white divider lines like we’ve done in many other areas, and adjust the opacity to your liking.

In the footer you can add your address, copyright information, logos, and links. It’s up to you, you can add whatever information you deem necessary, I made everything white in order to make it a little down-played compared to the content that we’re going to add. You should end up with something like this:

You’ll notice that I added a repeat of our primary navigation in the footer. There are many reasons for doing this. I won’t get into it in this tutorial, but it is typically a good idea to include this.

Right Column

There are many arguments in either direction whether or not you should put a navigational column on the left or the right. I often choose the right for a couple reasons. First, blog formats have popularized the right column, and it tends to be a more modern mind-set to have the column on the right. When you logically think about the efficiency of the design, you’re presenting the most important part of the page (the content) as the first thing that people see after the logo and primary navigation. Also, if you put additional navigation in this column, it’s a shorter distance between the additional navigation and the scroll bar so you’re minimizing the user’s mouse movement. I know there are a lot of designers that will disagree with me, but I do switch back and forth between the sides depending on the circumstances of the design and audience.

The column is really simple. Just create a folder called “right column” above the “background” folder. Create a new layer in this folder and name it “background”. Select 3 columns from the grid with your selection tool, and fill the selection with #878787. Now open your layer styles and apply a stroke with the following settings (the color is #161616):

You can add whatever you want to this column. I created a quick contact form by duplicating my search field layer and search button layer, and popping a couple of labels for pertinent information. This way someone can shoot us off a quick message without having to drill down to the contact page. I also just popped in a widget for our twitter feed that you can get directly from twitter.

You should now have something that looks like this:

That’s the interface in a nutshell. You can add content to the left column. I used Verdana for all of my fonts, 12px #161616 with an 18px line height. The header uses the same settings with, but sized to 24px.

You can use your skills to create a new banner. I got my image from Morgue File, which is a great source for free stock photography. I chose this image for a couple reasons. First, with a little color adjustment, the colors worked well with the layout. Also, I have noticed over the years that people like banners that are cute and cleaver. You can make your banner edgy or cool, but I notice that I usually get a better response out of cute banners. Photos of children and puppies/kittens work really well. Besides that, it seems to me that adults in stock photography tend to over-act, making the photos veer towards cheesy.

Here’s our final layout again:

Thank you for following our little tutorial. Look out for future tutorials where I will show you how to mark this up, and set it up in ASP.NET MasterPages. Thanks for reading!

 Read Part 2: Designing a Professional Website from Scratch - HTML and CSS