So the other day I got a new project. Nothing all that fancy, but the trick was, the company does not have a presence at all…no logo, no previous designs…nothin’. A clean slate.

A lot of designers love this situation. It allows them to be completely creative with no strings attached. Others have a mental coronary and have no idea where to begin. I fall right about in the middle myself. I enjoy the challenge, but that first step is always a doozy.

In this case, the challenge inspired me to keep track of the steps I went through to take a blank slate to a finished design. This article is aimed at beginners, but it will contain a lot of links that may be useful to the hardened vets out there as well.

Step 1: Selecting a color scheme
Now this might seem like a strange place to start, but to me, the color sets the mood. You can really set the feel for a site with the colors that are used.

Bright and happy?
Somber?
Industrial?
Avant garde?

All of these moods are achieved through proper color selection. When choosing a scheme, keep in mind a couple of simple rules.

1. Don’t use too many colors. Now there are exceptions to this, but generally speaking you don’t want to have more than around 4-7 main colors on a site. If you go over that things can get a bit messy. If that is the point, sweet, but otherwise, be careful.
2. Choose a scheme, then add your main writing background. What I mean by this is, first choose your palette, but don’t forget to compliment where your main content is going to sit. This isn’t very difficult if you just go with white (which is obviously the most common), but if you want to use a cream, tan, or other light color, make sure it fits well.

   Sidenote: a really dark content color is fine as long as there isn’t a whole lotta reading going on. If you are posting big articles, I would suggest staying away from bright text on a dark background because it is tiring to read.

Now the color scheme is a foundational tool and choosing one is an artform in and of itself. The bad news is, a lot of us are far from mastery of this art form, but the good news is there are a lot of sites that can help.

Colourlovers - This is a community site about colors. People create schemes, others vote and make comments. Some really nice ones, and a few that are a bit scary.

Daily Color Scheme - These guys have been in beta for what seems like forever, but they give out a differet color scheme every day. What is cool is that they have a wide variety of ways to download the scheme. Nice touch.

Kuler - And people say that Microsoft is bad with names…whew. This one is courtesy of Adobe labs. Basically it is a community site similar to colourlovers, but without the nice “grass roots” feel.

Slayeroffice Color Palette - When you are building a theme from scratch, it is often helpful to get a little help on finding the Hex codes (i.e. #ff0000 = red) of complimenting colors. This little doodad does just that. Plug in a primary color and a mix color and this guy gives you some colors in between.

Color Scheme Generator - This is another tool like the one above, but it allows for much more diverse styles. Using the color wheel you can generate contrasting schemes, monochromatic schemes, etc.

Choose a Theme
When you say “theme” a lot of different images come up…from cheesy flash templates to a superhero birthday party. What I mean by theme in this case is a continuation of the mood you set with your colors.

A theme is an overall design choice. You have your mood, now what are you going to do with it? Another way to look at it is “style”. This is the toughest decision you will make while designing a site. When taking the step, ask yourself the following questions:

• Who is the client? - Even if you don’t know a thing about the company you are working for, you can tell a lot about it by the client themselves (assuming you are working for a small business). Are they conservative and straight-laced? Are they more relaxed/anything goes? Also things as broad as what industry the company is in will give you great ideas for themes.
• What image do you want to project? - This is similar to the client question above, but it goes deeper. Do you want to project the company as a solid, respectable company? Trendy? Feminine/Masculine? Soft/bold?

Once you have an idea for the direction you want to go, its time to get inspired. For the truly gifted, answering the questions above is enough inspiration to jump to it. For the rest of us, you can get a lot of great ideas by looking at different sites. If you know the industry of the company/client, then it is always a good idea to go check other companies in that industry. Aside from that here are some sites that can give you some great sites to look through.

Design Meltdown - I, for one, love this site and check it regularly to get inspired. Basically it categorizes great looking sites by color or layout techniques. Great stuff.

Dark Eye - What is neat about this site is that you can select colors that you like and sites in their catalog that use the given color will show up. So if you are using red as a primary, then you can see all the sites that use red. This is being done in other places, but it is still a nice feature.

Styleboost - This is a great community driven site where people post, rate, and comment on various designs.

Smashing Magazine is great for their lists. Here are a few of them that have a whole slew of great looking sites to get inspired from.
Dark Designs
Clean Designs
Beautiful Designs

Choose a layout
So you have the look and feel all worked out…now lets choose something that puts a bit of reality in the mix. CSS is a beast, but it is the right way to do things. If you are a “tables only” guy, then its time for an upgrade. You don’t have to get rid of them all at once, but sites perform better and are much lighter when they are done in CSS so it is definitely something to strive for. There is just something beautiful about a site that is purely CSS driven.

Whether or not you decide to go pure CSS, you are gonna need a layout. You aren’t ready to mark up the site, but you do need to know basically where things are going to go.

Where does the menu go? Left? Top? Right? Horizontal or Vertical?
How wide is the site going to be? Are you going to set a fixed 1000px width, or perhaps a fluid design that stretches with a browser.

Sidenote: One common early mistake is forgetting to size up the right scrollbar…if you are designing a 1024 x 768 site, don’t forget that the scrollbar is 24 pixels. Nothin’ worse than an unintentional horizontal scroll.

Also, while deciding on a layout, remember the mantra that “content is king“. No matter how slick your menus are, or how much your sizzling graphics “pop”, if a user can’t get at the content, then the rest is forgotten.

Here are some great CSS templates for you to start with:
Nice and Free CSS templates
CSSplay

Create a Mockup
Up to this point there is nothing concrete about your new site. You have the mood, the theme, and the basic layout, but it is completely in your head…time to change that.

The easiest way to get your thoughts down and concrete is to make a mockup in your favorite graphics program. Now the best one out there is obviously Adobe Photoshop, but that guy is expensive (my version is so old it practically needs a walker). For the cost conscience out there, you can use Gimp. Gimp is a great program (even it has a horrible name) and you can’t beat the cost (FREE!).

Now if you are new to design it can take some getting used to the graphics programs, but the skills you learn are well worth it.

So what is the point of a mockup? Well, you might think you know what your site looks like, but seeing it for the first time will change your mind. You could just barrel forward and start making the site itself, but that takes a lot of time, and realistically you are going to change your mind as to what the site looks like about 100 times, so it is best to put it in a medium that is easy to play with.

Mockups are also good to show to a client so they can put their two cents in. If they hate it, not a big deal…just make another one. If you had spent the hours and hours it takes to lay it out, then all that would be wasted.

Finally, mockups become the site. Slice that puppy up and turn it into tiny, easily downloadable images and you are good to go.

Build It
Now all the preliminaries are out of the way…time to build!

If you are using a CSS Template, then the best thing to do is just to throw down the blank template and fill things in with your stuff later. I usually like to go from an “outside-in” approach. This means that I like to get the stuff that surrounds the content built to give the site some structure. Usually this begins with the menu. Menus are an important part of any site and also one of the most visible (one would hope). From there just work around and build your header, footer, etc.

Whether you are home grown or starting from a template, this step is where your patience with CSS will get tried. No matter how many sites I design I invariably run into a situation where something is 2 pixels off and I suddenly have a mouth like a sailor. Just take your time…work it out…and you will get it.

Also don’t forget to test on the 2 or 3 most popular browsers. This can depend greatly on your target audience (85+% of the world uses IE, but on this site, for instance, over 75% of the visitors use Firefox). If you have the time and budget, then strive for 100% accessibility, but even on a shoestring you should always aim for at least 90 - 95% of potential visitors being able to use and run the site.

If you run into the proverbial CSS wall, here are some links to help you out.

CSSplay - Not only does this site have great templates that I linked to above, they also have some amazing menus and other tricks that you might not have thought possible with CSS.

CSS Drive - This site has a bunch of CSS website templates. I don’t like to use those because they give me a “copycat” feel, but they are a good place to steal some CSS. It also has a bunch of examples of menus and such.

Whole buncha links - This is the mother load of links for CSS stuff. If you can’t find it here…it probably can’t be found. Awesome.

css Zen Garden - No list of CSS links would be complete without a trip to the garden. This site shows you definitively why CSS is sweet and worth the pain. Also good for inspiration.

So there ya have it. Each time I design a site I go through this whole process. It may seem like a lot, but once you get it down, you start to do the first few at the same time.

One last note…as you troll around the web keep your eyes open for designs you like. Even if you don’t have a project going, its always good to jot down the addresses to places you like so you can visit them quickly and easily when you need to. Delicious and Blogmarks are great for such jotting.

Go forth and design!!