Posted by touhid | Posted in Website Design & Development | Posted on 30-09-2009
A fully comprehensive step by step tutorial, from design to HTML & CSS.
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 935×900.
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 1024×768 for screen resolutions but not everyone. It’s okay to go beyond 800×600 only if your target audience will be using (for the very large majority) at least a 1024×768 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 800×600 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 1920×1200 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.
For full article click here
