Pre-Development Website Planning
Nov '0927th
5
While working at Clearleft, I learnt the importance of thorough planning before site development. Planning how you are going to write the code is just as important as how you are going to design the site. It makes you really think about blocks of content as individual, reusable components and helps make your CSS more consistent and easier for someone else to understand.
There are lots of different ways you can plan a site. Here are 3 that I really like.
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.
5 Comments on “Pre-Development Website Planning”
November 27th, 2009 at 12:50 pm
Planning how you write the code is a really interesting concept. What I tend to begin with is a barebones site template: Header, footer, primary content etc etc. The benefit of this is that all the ID and class names are pretty much the same for all the projects I work on. Of course when you start building more complex sites, this is only useful to an extent.
I do sketch the sites design on paper, and I prefer the freedom, as opposed to going straight into PhotoShop. http://twitpic.com/r2oie
However taking a minute to think how you will code the design could stop the Divitus that sometimes occurs when coding up.
November 27th, 2009 at 12:53 pm
Great approach to what is considered a real space modelling tool – sketchup – and using it to create programming space. You can add in AR to help explore models in 3D… and animate.. possibly programming code and layout models could get sexy!
November 27th, 2009 at 1:12 pm
Can’t say I’ve ever made 3D models of jQuery carousels, but I’m another who tends to sketch ideas out in a square ruled pad, which I then refer to when developing front-end of sites.
November 29th, 2009 at 10:10 am
Before I start a project. Whether design or code I do a combination of sketching and mind mapping. I find mind maps are a really useful way to visualize a sites structure. Especially when doing larger CMS driven sites it’s not something you can just say I’ll go with the flow.
It increases productivity by folds having them to go by.
I use my trusty Carsnoified journal for sketching and MindNode.com for mindmaps.
Trackbacks on “Pre-Development Website Planning”
Leave a Reply