Website Design Tutorial

Introduction

If you go to google.com and search for “website tutorial”, “website design tutorial”, “how to design a website”, chances are you won’t be able to find a result that will take you from the beginning of the design process, to the end of the html process. And that is exactly what I’m going to do in this elaborate design tutorial, and for free! Also check out my new article how to make a website at my other site after you finish reading this.

Not only am I going to cover every step in detail, but also provide the reasoning and principles behind the decisions I make. Other design tutorials out there only focus on the instruction aspect, but to truly become a better designer you have to understand the principles and concepts that go into effective website design. All of these principles will help you understand how to make a website.

I have over 8 years design experience (web and print) and to give back to the community I started these design tutorials. I know how difficult it is when you really want to design a great looking site, but simply have no idea where to start because of the huge lack of quality tutorials. I would have figured 8 years down the road there would be a lot of great sources from which to learn, but there simply isn’t. So I guess I will try to provide a great source that many people can find value in. Also, feel free to read my free guide about how to make money online.

The Project : SiteVerdict.com

I figured since I’m going to be taking the time out to write an elaborate tutorial, I might as well try to kill 2 birds with 1 stone. So I thought of an idea for a website that I thought was somewhat unique, that I could potentially make a buck or two off of. I came up with SiteVerdict.com, and it is the site that I will be documenting in this tutorial. It’s a simplistic web 2.0 design, but both looks great and is very easy to use and understand.
The idea behind the site is to provide a service that allows designers / webmasters receive quality feedback and reviews about their websites, in order to make improvements - and ultimately increase earning potentials. In order to post your website for review, you have to either (a) review X number of sites, or (b) pay $X to skip the process of reviewing other sites.This has been done before, but not successfully. There are webmaster forums that have forums designated specifically for website review and critiquing, but having a full site dedicated to is far more ideal in terms of review/feedback quality and accuracy.

Website Design Principles

Many webmasters wish they could design great looking sites, but simply can’t. They’ve given it a few attempts, but either due to lack of application knowledge (with apps like photoshop), or lack of “artistic talent”, they give up. And that’s fine, because it keeps the market for design healthy! ;) But no, it really doesn’t have to be like that. If you’re an aspiring designer, there are a few key principles that I want to outline first. They are what helped me through my path to becoming a good designer, and they should help you too if you follow them.

• It’s not the 90’s anymore
  When the early pioneers of the internet age began designing websites in the 90’s, they became fixated on the filters offered by programs like Photoshop. Lens flares, bevels, drop shadows, glows, were used to their fullest extent. You need to avoid abusing these filters, or I should say, you need to avoid misusing these filters. There are instances in which these filters can be a great benefit, but you have to know how to use them properly and not just slap them on anything and everything.
• Usability, Not clutter
  Usability is all about making the visitor’s experience a good one on your site. Things should be easy to read, easy to access and most importantly, easy to understand. When a visitor visits your site, they should know exactly what your site is about within the first couple seconds. This is obviously where design, and layout come into play. You need to avoid cluttering your site in the physical sense. I’m not talking about having “too much content”, but rather how you choose to display that content. Things should be laid out with spacing and margins.
• Text Do's and Dont's
  One of the really big fads that was prevalent in the early part of this decade, was the use of small fonts. I was one of those idiots because I thought it “looked” cool. But for all practical purposes, I always scorn people for using size 10px or less for fonts. Never go below 11px font - and even 11px should only be used sparingly. Size 14px (which is what this is) seems most ideal for paragraph’s of text. You can get away with 12px of course, but as screen resolutions are increasing, 12px suddenly becomes smaller. Line-height is very important. Line-height is the spacing between each line of text in your paragraphs. Standard line-height I find is a tad bit too thin, and I like to expand it a little more. It makes it easier for people to read.
• Colors and Contrast
  The color theme of a site is obviously important. A lot of aspiring designers have a tenancy to use too many colors, simply because they’re there. But I like using no more than 2 primary colors and a third “secondary” color that I will use sparingly throughout the design. A simple color theme is easier on the eyes, easier to “comprehend” and overall just looks better. Of course there are exceptions to this, but 9 times out of 10, it’s always better to keep the color theme simple. The color theme also needs to connect with the visitors and the purpose of the site. For example, I wouldn’t use blue and florescent green/yellow for a site about health - it simply doesn’t make sense and I think that’s a given. :)
  Contrast is hugely important. It’s very important that your content and navigation are correctly contrasted. The foreground text needs to either be very dark, or very light in comparison with the background color. I see a lot of sites where the text will be a light gray and the background is white - err! That’s very annoying and hard to read.
• Design around the purpose of the site
  A lot of designers, those experienced and not, always use the same “formula” for layout and design elements. To really make an impressive and effective site, you need to fully understand what the purpose of the site is, and what the goals are. Whether the site is based around selling memberships, or just general ad-based content - the design should cater most effectively to the purpose. And that’s what I will be demonstrating in the tutorial proceeding this page.
• Learn by example
  A common mistake for the aspiring designer is thinking they should be able to open up photoshop, and design a great looking site on their first try. Nope, doesn’t happen like that. You wouldn’t pick up a guitar and start writing music without first learning a few songs right? Right, and it should be no different for web design. I recommend that beginners simply try to recreate existing designs that they think look good. If you do this a few times, it will (1) help you learn the application, (2) help you become a better designer. You subconsciously learn when you recreate an existing design. You automatically pick up design sense when you do this, and it really helps and goes a long way when it comes down to designing your own sites.

I could probably go on a little bit, which I will cover in future articles but I’m probably boring most of you by now :). So let us get started with the actual design portion of the tutorial.

The Design Process

I’m going to use Adobe Photoshop to design the site. I haven’t ever used any other application so I can’t really say whether or not it’s the hands down best application to use, but it definitely is what most people use and I have no complaints about it. I’m using CS2 specifically for this but you can use pretty much any version, because I won’t be using any type of elaborate tools. In fact, I never do. So if you’re using a different application, it’s not a big deal, because chances are you will be able to follow along just fine. Just don’t use MS Paint ;).
I will be covering this design process as specific as possible, while attempting to explain everything in detail from the actual instructions, to the reasoning behind my different design decisions. So feel free to skip over areas where I’m rambling on and on.

Prepare your document

 1. Open up Adobe Photoshop.
2. Go to File / New on the top left menu.
3. Set the document width and height to 935x900.
4. Make sure resolution is 72 DPI.

The site we’re going to be designing is going to fit within 1024 width resolutions. Most people use 1024x768 for screen resolutions but not everyone. It’s okay to go beyond 800x600 only if your target audience will be using (for the very large majority) at least a 1024x768 screen resolution. And since SiteVerdict.com is for webmasters, this is most definitely the case. Otherwise if you were to start a site for senior citizens, you definitely would want to design for a 800x600 resolution.
Now you probably asked yourself, “Why not just set the width to 1024?”. Because you have to consider that the scrollbar on the browser is taking up width, which it is. You can actually go higher than 935, but it’s just my personal preference to set it at around 935 px.

Step 2 : Fill the background, Set your guides, Expand

1. Fill your background color (Paint bucket tool). I’m using color code: #f7f6f3 2. Maximize your window (I like having it fully maximized). 3. Go to View / New Guide (As shown to the left). Hit OK. 4. Repeat #3 and set the position to 5 in. 5. Then hover your mouse over the new guide, left click, drag it to the very right edge.

6. Go to Image / Canvas Size... 7. Change the width to 18 (As shown to the left). Hit OK. 8. Use the paint bucket to fill in the left and right sides of the newly expanded document with the same background color.

Step 1 Explanation:	I knew coming into this design that that was the color I wanted to use. I like the very light beige / off white color. Generally however, I always just start off with white and then experiment from there. The background color you choose is very important. You generally want to stay away from darker background sites for *most* sites. If you’re after a really serious corporate site, or an ecommerce site where you’re selling something, it’s better to stick with lighter colors / white.
Step 2 Explanation:	Maximizing your document is really a matter of personal preference. But I really recommend you do it. It gives you a nice big open canvas without much outside interference.
Step 3 Explanation:	The reason we’re aligning 2 guides to the very left and very right of the document is to let us know what the maximum left & right extremes are. This lets us know *NOT* to design the actual content outside of these lines.
Step 6 Explanation:	This is the step which made step 3 come into play. We’re expanding the document further because it really lets you envision the design as it would appear on a fully maximized browser beyond a 1024x resolution. I personally design on a 1920x1200 resolution and I like to be able to see how the design looks with the full background to the left and right.

Step 3 : Place your logo & let the games begin

I’m not going to be covering logo design here because I already wrote a very elaborate logo design tutorial which you can find here.

As you can see the logo I decided to place in the upper left corner just against the left guide. I chose to make it black just to see it with the most contrast against the background.
Now this is the point at which the *real* design process begins. This is where most of the thought and planning comes. You need to know what exactly the site is about, and the purpose / objective of the site. I really want this site to be both professional and retro’ish / designer’ish. It only makes sense because SiteVerdict is both a serious service (hence making it professional) but also geared towards creativity and design. My color scheme is going to be black and the shades of beige/brown.

Step 4 : Design the header

The header usually always consists of the logo, and the navigation. It’s what people are most familiar with and makes the most sense for this particular site because I want it to be easy to use and understand. If you were doing a personal portfolio design site or something, sure you can do something completely off the wall. But for this example, and most others, you will want to stick with the same formula of having your primary navigation and logo at the top.
I kind of want to give the same feel to SiteVerdict as I did this site (garysimon.net). Since they’re both my sites, and both in the same industry, it makes sense to kind of network them in a design sense. So I’m going to create a black bar that goes all the way across the entire width of the document at the top.


1. Select the square marquee tool. (The square dashed icon on the upper left corner of the tools menu on the left).
2. Left click and hold above the upper left corner of the document, and drag all the way across the top and slightly down then let go.
3. Select the paint bucket tool, and make sure black is selected in your foreground color and left click inside the square “marching ants”

Now I have just a random / unique idea that I want to incorporate. It will combine the logo into the black area, into a patch like rectangle that is half inside and half outside of the black strip.

1. Select the square marquee and drag a square similar to the one on the left. 2. Use the paint bucket tool with black as the foreground and left click inside of the square selection. 3. Select the layer that the logo is on (assuming it’s a logo completely flattened to 1 layer), and go to image / adjustments / invert. 4. Place the logo layer to the top in the layers window and move (with the move tool) the logo inside of the square black area.

In order to incorporate that side of “designer” / retro’ish, I’m going to scrape the black block we just added. 1. Select the eraser tool. Then in the brush options at the top, choose a brush and diameter similar to the one shown to the left. 2. Choose the block layer and simply scrape it in a similar manner to produce an effect like the one shown to the left. Now that pretty much takes care of that side. Now we need to integrate the actual navigation and determine if we want it inside the black bar to the right, or beneath the black bar to the right. So actually I think what we’ll do is create a secondary strip that’s slightly darker than the background beige color that will go along the same height as the extended rectangle we added.

The way you create that strip is the same way you created the black strip above it. Just first select the background color of the page with the eyedropper, click on the foreground, then change the color with the circular icon to slightly darker. Then use the marquee to make the strip, fill it in with the paint bucket tool. Make sure you place it on its own layer, and then position it *beneath* all of the other layers we created.

1. Select the paint brush tool and then select a brush similar to the one that you used to create the “scrape” effect. 2. Select a foreground color slightly darker than the background. 3. Go along the bottom portion of the bar we just created as seen above. 4. Select the square marquee tool and select everything *beneath* the beige bar, and hit the delete key. You should end up with something similar to the last image.

I figured this would give us some more of that designer’ish flavor by adding the rough bottom edges to the beige strip we just created.

1. Select the Type Tool. 2. Choose Arial at size 14pt. and make sure “anti alias” is set to none. 3. Type in the navigation where I did.. “Home Review Sites ” etc... 4. Hit CTRL + ; <-This shows/hides the guides. We don’t need them anymore after this point.

The next step is to add in the navigation. I just want it to be a simple HTML text navigation. And it is always important to choose none for anti alias in order to simulate real html text as it would appear in the browser.

We could put a secondary navigation in the black strip above it if we wanted to but it’s not entirely necessary at this point. So that is the header. It’s very straight forward, but it also looks good and is easy to understand - which is what it’s all about.

Step 5 : Primary Content

After the header, you want to emphasize the most important aspect of your site, and generally to the *left* just beneath the header - because that’s where people look at first. They read from left to right. So with this idea in mind, I’m going to simply state exactly what this site is, or what the visitor should do, etc...

This is just standard text from the type tool, except “Smooth” is selected for anti-alias option. These are two different text layers. The top one “So you have a website? Post it” is one layer with the “Post it” bolded, and then of course the “Get your ..” is on its’ own layer as well.

As you can see I added a weird “wet” effect behind it. 1. Create a new layer in the layer’s window and place it underneath the two text layers. 2. Select the paintbrush tool and select the brush we used from before, and make the diameter a bigger size. 3. Choose a darker than background foreground color. 4. Simply paint behind the text to get the effect as in the image above.

The text I added to the right is simply 2 different text layers and they’re arial 14pt alias “none”. While the big text beneath it serves as the eye-catcher, this text will fill them in on exactly what this service is and how it works. That way, we completely take care of the whole “What is this site about?” aspect, which is one of the most important aspects to concern yourself with. People will leave if they don’t immediately understand.

As seen to the right, I added a dashed rectangle. This will encase a secondary piece of content that I feel is most important. So now that I think about it, I think it would be a great place to feature the highest rated sites. Possibly a weekly awarded thing where 5 sites are recognized for having the best ratings. To the left we’ll position a “SiteVerdict.com Award” trophy emblem, and to the right we’ll list out the sites. It makes sense to feature this because visitors seeing the site for the first time will become motivated to reach that status. Motivating your visitors is huge if possible!

1. Select the square marquee tool and a foreground color slightly darker than the background. 2. Drag out to create a shape similar as above. 3. Select the Type tool and choose none for anti-alias. 4. Select a foreground color even darker than the rectangle we just made. 5. Type “- - - - - - - - - - - - -” long enough to span the bottom of the rectangle. 6. Duplicate the text layer once you got the right length and position it at the top. 7. Duplicate the layer again and go to edit / transform / rotate 90’ CW. 8. Then position it to the left and remove a few dashes, then duplicate and position to the right.

1. Duplicate the logo layer(s). 2. Invert the color so it’s black. 3. Position it over the rectangle we just created. 4. Select the type tool and a font similar to the one used in the logo and type “AWARDS”. 5. Find a picture of a trophy somewhere and vector trace it with the pen tool to create an image similar to the one in the image above.

Vector tracing is what is being shown to the very right. You find an image, and trace over it with the pen tool. I cover vector tracing in depth in my logo design tutorial.

As seen to the right, I added several things. First, to “encompass” and show off the trophy more, I added a white glow appearance behind it. This is just an extra step to draw some attention and notoriety to it. The middle dividing line to the right of it helps separate the “left” from the “right”, which is the site listings. And the site listings themselves are straight forward, the stars represent the rating of each site. Easy to understand and easy to read.

1. Select the paintbrush with a large feathered (the soft circular brush near the top of the brush list). 2. Choose white as the foreground color and create a new layer and position it beneath the logo / awards / trophy layers. 3. Click once and it should turn out like the image above. 4. Select the line tool (left click and hold the square icon in the tools palette and drag to get the line tool.). 5. Select a darker foreground color. 6. Drag a vertical line about the length of the rectangular box. 7. Right click on the line layer and choose rasterize layer. 8. Select the eras or tool and a large feathered brush and click a few times on the top and bottom of the line to fade it. 9. Either manually create a star with the pen tool, or vector trace one from an image you find on the internet. 10. Double click the layer and go to stroke, set it to 1px and select a slightly darker yellow color. 11. Duplicate the layer several times as shown above.

As seen here, I added two more text layers. “Featured sites seeking reviews”, which made most sense to me. It allows me to list either the latest sites added that need reviews, or “featured” sites that could perhaps pay for an upgraded listing to get on the front page, or list sites that are pending but have few reviews. Sticking it right in the middle of the page gives it good importance which is what I want.
Then, I have “Browse Sites” aligned direction underneath the beige box above it. Notice how I align the beginning of the text, perfectly to the beginning of the box. This gives the layout structure and flow. It makes it very easy to understand and read. It also makes good sense to put it there to the right, because although it’s important, it’s not as important as any of the other 3 pieces of primary content to the left and above it.

1. Select the square marquee tool with a similar foreground color. 2. Draw it out. 3. Choose the eras or with the same brush as used at the top and create a similar effect as shown above.

1. Screenshot an image of a site in your browser. 2. Select the square marquee and draw it out inside of the box we created. 3. Go to “edit / paste into” then “edit / free transform”. 4. Hold shift and scale it down as shown above. 5. Right click on the layer and hit apply layer mask. 6. Select the eras or and choose a hard smaller sized brush (at the top) and round off the corners as shown above.

I added 3 different text layers here. They’re all Arial with anti-alias none. The top one is font-size 12pt bold. The “Review me (8)” is 11px. Select the “Review me” and in the character panel click on the ( > ) icon and choose underline. The 8.5 is bolded and it’s something like 18 or 24pt.

You have two options to duplicate the box we just created. You could either select all the layers, and “New group from layers” on the layers pull out menu and simply duplicate them. Or use the square marquee tool, select around the whole box, and go to edit / copy merged. Then edit / paste paste 5 more times and you can situate them as such.

I added the section to the right pretty quickly. I’m not going to cover this part step by step because it’s pretty self explanatory. The little triangular icons are created with the pen tool. Very easy to do, just three point and clicks and it’s done and you can duplicate them.

Step 6 : Add a footer

The footer is pretty simple. As you can see it’s a lot like the header - in fact, I duplicated one of the layers from the header along with the “rough” part of it at the bottom. Then I duplicated the text that served as the navigation and then added an extra navigation and right aligned it for a quick advertising / contact link.

Complete

And there you have it! A fully completed home page design from start to finish. It’s not all that difficult is it? Of course it’s a little daunting having to read over this entire tutorial, but really it doesn’t take all that long once you get the hang of it.

But we’re not finished just yet. We still have several steps until it’s a ready to go, html’d site. So let’s venture on to the next section.

FOR MORE INFORMATION LEAVE A COMMENT BELOW!