Sketches

Below is a picture of how Natalie Downe plans her code using sketches.  Please take a look at some more of these on her Flickr photoset on Planning Artifacts because they really are very inspiring.

3D Models

Natalie also makes 3D models for interactive elements of sites. This is a jQuery slideshow.

One of the things I like a lot about Natalie’s method of planning is that it gets you away from the computer. And for those of us who spend all day staring at a glowing rectangle, that’s got to be a good thing.

Computer Models

If you’re more inclined to planning on the computer, or want something to use in documentation, you might find computer software more appropriate. I like using Google SketchUp to prototype sites, particularly ones with a number of layers or if I’m working with other people on the same code. It’s an architecture application, but I like using it for sites because it lets you view the model in 3 dimensions (great for z-indexes), it’s free and also a lot of fun to use.

I’d love to see other examples of website planning if you do something differently. And if you don’t currently, I would really encourage you to spend a few minutes trying out one of these methods, even if it’s for very small sites, as it will really improve your code.