Last week I went over the initial sketches of a design from plain old marker and paper. The next step in the process of a design is to bring those sketches into Adobe Photoshop, Line up the grid, and start to put lay the graphics out with dummy text. Below I will start this process with the Homepage.

I start every design off with its own Grid (which has been resized to fit the browser here on @bar). Grid Systems give structure to your content and also allow you to expand templates throughout many different layouts. So as you see below I have the marker sketch below the grid on a layer in photoshop as a guide.

With the Grid still visible over the initial sketch I go ahead an fill in all of the graphics that I planned for in the pen and paper markup. As you can see I am using three ’sections’ of the grid for each column underneath the Positioning Statement. This is very flexible as you dig into the website using say six ’sections’ of the grid for the main content area. (I will further explore Grid Systems in a post coming up soon)

As I pull off the initial sketch, you will see the design starting to come together and not looking so messy obviously. We now have all of our sections that we talked about in the Creative Brief and I can start to tackle some of the design or coding issue I may see. (This site has a very simple layout, so no issues should arise).

I now will pull off the Grid System to get a better feel for what the actual site will look like. Looks pretty good to me! This will then go off to the client for review.

Now starts the conversation with the client on the look and feel of their website. Mind you, we haven’t even started to code up the website yet. Generally I will look for two or so revisions on this graphic representation and then we will move to coding up the website. I hope that this three part series has given you a glimmer into the design process. Next week I will be doing a story on some of the great designs out there these days…and what makes them so great. As always - If you ever have any questions on the article, feel free to contact me or post comments below.