Two weeks ago I gave the first part of this three part series on Designing for the Web. Last week I was away at Wine 2.0 in NYC and hoped to do a live blog post from the event as it was all about social media, but time really flew by. Today I am going to dig a little into my process from the beginning, which believe it or not starts with a black marker and white paper.

After the initial meetings with a client are finished and we have gone over the creative brief and put together a sitemap, I like to get right into what I do best…dig into the design process with pen and paper.

Why would I start with such an archaic form when we have all of the technology and programs on hand to get the task done? Well, #1 it is very quick and easy, #2 I don’t spend a ton of time on scapping design (which clients love) #3 If something doesn’t work, it is very easy to just crumble in a ball and throw away in the circular file. I find the process more custom and designs seem to fly out of my head rather than sitting in front of a blank screen.

As you will see below it is very easy for me to put together the initial sketch with most of the requirements we talked about in the creative brief and sitemap. This is the initial homepage screen:

In the screen below I have sketched out the interior template page that will carry throughout the interior of the website. If I need to drill further down into a login area for users, that will come next. I work on these sketches until I am at a point where I am happy with the structure.

I generally never expose the client to these initial sketches, but if I am working on a development team, I will share them with the lead developer to try to hash out any issue we may see forthcoming.

I find this stage of my process very useful as I have the chance to setup the road which the design in going down…without it, I would be lost, staring at a blank screen of one color.

After this stage I take the sketches into Adobe Photoshop and start the design graphically on the computer. This is where my Grid System with be established and the client really starts to get a feel for what we are going to accomplish. Next week I will pull this design into Adobe Photoshop and take you through the Grid stage, pull this all together and get it ready for the client to peruse. As always - If you ever have any questions on the article, feel free to contact me or post comments below.