ThisIsInspired Magazine

How often do we start a project – or get an idea we salt away for later – by picking up a pen and doodling? There are three main phases to a web design project to get the design from just speech between designer and client to seeing out the door and working. Here’s a brief run through of a generic design project, simply for posterity’s sake.

Pen & Paper

Everything starts with a pen and paper. Okay, not everything but just about everything. We jot, we doodle, we sketch, and out of these little creative ramblings we figure out what direction to take with a design and what we’ll work up for a client.

We all have our favourites tools for this part of the project. I prefer a blank pad and a fine G2 Rollerball, but I’ve seen designers use fountain pens and artists’ pencils. Some of us get pretty involved in this phase and bring in a collection of writing and doodling tools that to everyone else might make us look like a professional sketch artist or painter (well, I guess we are professional sketchers, in a sense).

Some of our sketches are so in-depth we can show them to the client and get some initial feedback before we ever even turn on the computer, but mostly, it’s these little first sketches that help us work out the problems with certain designs and put together the pros & cons of each one. As the saying goes, “The Journey of a thousand miles begins with the first step” we could say “The launch of a major website begins with the first sketch.” It’s kind of cool, and also at the same time kind of humbling, to realize that no matter what the scale of the project is – from Nike and Starbucks – each one starts off as a little sketch on someone’s pad. From what small acorns, eh?

Photoshop or Fireworks (or both)

Okay, maybe Photoshop isn’t what you use – maybe you prefer Fireworks (which is experiencing a bit of an upswing among certain designers) – but the second step, after finalizing a design on paper is to turn to software. We’ve worked out a design, put it on paper, identified key areas, buckets, possible problems to work around, etcetera, and now we need to turn it in a living visual creation.

So we open Photoshop or Fireworks and get to work taking those final sketches we came up with in the first phase and making it a workable, codable design. In this part of the project we might identify what areas would be harder (or close to impossible) to develop, and work out ways around it. The Photoshop Phase works very closely with the Coda Phase because because as we create the design in the software we have to constantly keep in mind what’s possible, what’s pushing the envelope, what’s not possible and what we know is possible but we might have trouble with. Sticking to the grid makes our Photoshop Phase lives a bit easier, but even then we can jump and dance in creativity and have fun working out what problems we might foresee.

We mark out content buckets, identify any area that will use AJAX or some other script-heavy dynamic (if such exists in the given project), and get everything sliceable and diceable for Phase Three.

It’s funny to think that some designers choose to stay in the Pen & Paper period even while they mock up the design graphically and develop it. They use handwriting fonts, torn-paper edges, and all sorts of visual tricks to keep the design looking like it’s still on the desk of the designer. We’ve all seen websites that aren’t so smooth and polished (in the strictest, most class-conscious sense of the word) and we enjoy these because they break from the monotony of bevels, buttons and all-caps Helvetica.

The Photoshop Phase is kind of like making an origami balloon – in the Sketch Phase we picked the paper and made our first creases in that paper. Now, we get to work folding it up. Then, as we develop it and make it workable, navigable and accessible it’s like breathing life into it and filling it out.

Coda or Textmate

I prefer Coda (as you may know), but both Coda and Textmate are very popular, and very worthy, apps for taking our little folded origami balloon and blowing it up into a 3D object we can actually play with.

In the prior phases, we’ve identified what scripting will be involved and we’ve got in mind how we’ll start cutting up the layout. Here’s where all that thinking and cudgeling of the brain pays off. We start with a blank document – a simple XHTML layout with key areas defined or, literally, a blank document. Some of us type our DOCTYPES by hand, most don’t. Most of us work with a shell document with all the basics right there waiting and we tailor it to suit our project.

But into this shell we build, bit by bit, what will be the foundation of the website. Ninety-nine percent of people don’t ever even see all the stuff we code behind the scenes, but slowly, slowly in the Coda Phase we inject a bit of CSS here, an additional HTML element there until we’ve got it together. Gone are the days when we think in terms of spacer GIFs (thank goodness) and empty table cells.

From a blank document springs something that can capture the eye, engage the hand, and spark the brain.

As we develop, we learn and we teach ourselves. Every time I’ve cut up a design I’ve found a better way to do something – to accomplish a certain task more easily, to get a certain aspect of it more streamlined. Little fine-tuning things we ourselves learn from and benefit from.

Sometimes we might be proactive and find Sketch Phase or Photoshop Phase ways to make this final one a bit easier. We teach ourselves, through experience and through repetition, how to become better designers and developers.

From our initial little sketch we can teach the viewer.

That little doodle we started with way back there can inspire the viewer to take action and to learn.