display | more...

As a web designer and developer, I always enjoying reading articles about how other people start designing or developing. Sometimes I incorporate their advice and methods, other times it's more revolutionary and I'll try their method and come up with something new. So, I thought I'd put some effort into explaining how I, and other designers I've worked with, start designing web sites.

Discovery phase

First of all, I write out what the site has to do, and what it shouldn't do. If the site is for a client, this is something we discuss together. This is the site mission statement, and it helps keep everybody focussed.

Next, I'll look at the content and work out a framework to contain it. Perhaps there will be areas such as Products, Services, etc. Or perhaps it will be more free-fall or interactive. If you've not heard the saying before, here it is; "Content Is King". Anyone that tells you otherwise should be shot.

As with any new product, I'll have a look around the web for competitors and see how they do things. Sometimes you can see weaknesses in their site that you can take advantage of, other times you might see something you've missed. Asking why a competitor has done something a particular way, can be a great help.

By the end of the discovery phase, I'll have a rough framework which I can build on. Some people find this phase the most difficult - a little tip though: if you think about what you want to achieve, and try not to think about the technology involved, your finished design will be much more impressive.

Exploration phase

With the framework taking shape in my head, I open a notebook (yes, that's right, one with paper in it) and scribble for hours - or sometimes even days. Related words, phrases (sometimes I overlay these on images to create part of a sub-header), sketches, concepts, animations - you name it, it all goes in the notebook. I may even note down relevant colours or fonts that I've seen in a magazine, book or on TV. I'll also be considering roll-over effects, formatting, layout, etc. Anything that looks interesting goes in the notebook and until I've finished the exploration phase, that note book doesn't leave my side.

While I'm sketching, I often doodle "web page boxes" - little rectangular boxes which I divide up into parts of a page. Sometimes I make lots of these empty boxes in Word and print them off so I can doodle in them. They're a massive help when trying to visualize headers, footers, columns, gutters, etc. If you've not had any previous experience of designing with these concepts, I'd recommend reading up on them first.

Once I've got some ideas of layouts, I'll start to think about images. Sometimes I'll include these in the header, other times they'll make up part of the page design - although I try to avoid this kind of design because it can detract from the content too much. When choosing images, I almost always edit the image before I use it - just to make sure the overall colour and levels are right, it's sharp (or blurry) enough, and to make sure the file size is nice and tight.

Next, I'll start to put the layout together with some stock Latin text. At this point, I'll go hunting through my archives for some fonts that fit the design. I've got around 12,000 fonts in my archive and a handy little program which helps me browse them, called FontLister. Typography can make or break any piece of design, and it's important to remember the rule that you should never use more than three fonts on one page.

Prototype phase

All of the elements are coming together, so I whip up a couple of small prototype sites. For this, I'll be using Macromedia Dreamweaver (an HTML editor with knobs on), TopStyle (a sexy CSS editor), Adobe Illustrator (Fireworks is just so Microsoft Paint, man) and Adobe Photoshop (because it's a must). While I'm still thinking about how I want style sheets to work with the design, and how I'll be using ASP, ASP.net or PHP to code the site, I'm only building a prototype. Meaning it will be something that looks fantastic, but doesn't work and certainly won't ever be used as a code base for the finished version.

Implementation phase

Once the prototype phase has been signed-off by the client, or I'm happy that I like the way things are going, I'll start building the site for real. Right from the word go, I'll be converting my layout into style sheet structures and testing it on my PC, a Mac and a variety of browsers. When I'm finished (or at least pretty close to finished), I'll hand it over to the developers (or I'll start developing it myself) and then I'll tell them off a thousand times for using HTML tables. Grr.


So, as you can see, a lot of thought and effort goes into designing a web site. And I haven't mentioned anything about clients that don't know their browsers from their arsehole. Or a 14 year old kid in their bedroom - who is, of course, a designer. I hope this writeup is interesting to others and any constructive feedback is welcome.