Now I have no idea how other people design, I suppose we all have our own little tricks or cute little methods to kick off the design process. So in a way design can be a very personal process. Well I’m going out on a limb here, I’m going to let you into my world of the design process.

A few caveats first. This process only really works if you are not being hemmed in by a restrictive wireframe. Mind you it can also be used to create and document a formal wireframe. It’s also really only any good I have found when you are totally against the clock and have to find that design, like yesterday.

You know what is the hardest thing for me design wise; the blank canvas. I’m sure it just stares back at me mocking me. So how do I overcome this? Well I make a list.

Often I will have a design of the logo and the corporate colour palette for the site already. If you think about it you will also have the defined content areas, title types, number and types of menus you want to use, you will have got this from your client and user research. These all go on that list.

I’ll assume that you have the content or an idea of the content. If you don’t, really I think you should stop and go bake some fruit mince pies or something, as design without knowing the content is a very bad idea, trust me it will end in tears.

From a blank canvas we now have the logo, colours, content type areas, menus, titles, forms, buttons and the like. Now we are ready. I usually go grind a few beans (coffee that is), make a nice cuppa and sit down with a large sketchpad and pencils.

What NO computer! Yes that’s right, step away from the computer.

Okay now the blank canvas of the sketchpad is laughing at me.

But not for long, draw up a series of rectangles about the same ratio as a screen, say 9 to 15 a page. These are basic frames, thumbnails of a screen design. You can list the elements you need to put in design on the sketchpad page too if you wish, it does help you to remember them all.

Now you just drawn the basic outline of the content areas, menus , logos etc in the small frames. Nothing detailed, as seen in figure 1, keep it simple it’s like you are drawing thumbnails of quick wireframe. However remember you can use curves and shading.

Go on go crazy, break all those conventions, put stuff where you know its not allowed in the sensible design world. These thumbnails are your experimentation area. Nothing you do here is wrong. You can’t make a mistake. Even the things that are a little too wild may inspire that one killer design.

When I’m doing this I will often complete 20 to 30 of these thumbnails. I usually stop when I feel that I’m starting to repeat myself.

Allowing ourselves to step away from the computer to the old medium of paper for me is liberating and using a sketchpad is even more so, as it makes me want to experiment and just play around.

Now I find that the grey lines of the lead pencil are a little restrictive on the design choice so I will photocopy the sketches. Then I get out the coloured pencils and set to work colouring them in as close to the corporate colours as I can get (see figure 2).

The result is you can quickly see the major contrast and colour balance issues, and with your keen eye for design you can select a few of the choice thumbnails. From here I usually sketch up a few larger, half page to full page wireframes (figure 3), these are more detailed with an base grid pattern. If you like you can colour them in, as sometimes it helps. Just stick to rendering the colour in blocks, nothing to high-resolution, at this point.

Now with these few rough full sized wireframes we can now goto the client and let them select the main direction of the site design. Of course from here we have a little user testing and maybe some prototyping, before we slide into the high-resolution designs and the final product.

How are the mince pies coming by the way, nearly ready?