I have often wondered what it would be like to see a web site design progress from start to finish, with each tweak and change being shown as it progresses—a design timeline, if you will. I don't mean from conceptual start to finish—from blank piece of paper to finished Photoshop image of the design. I mean from a blank browser and text file to a completed HTML file with associated CSS and images. This is something I've wanted to see from well-known web designers, such as Cameron Moll
, Douglas Bowman
, Eric Meyer
, Dan Cederholm
, Dave Shea
, and so forth. I would love to have this kind of insight into their methodology of turning a design concept into an actual, working web page.
Not having any of the above fellows on hand to fulfill my whims, I decided to forge ahead and create a designline myself. I recently came up with a new template for members to use for their MBoffin.com blogs, so I used it as a test subject.
To create this designline, I took a screenshot basically every time I saved my HTML file. I'm one of those people who impulsively hits Ctrl-S after every tiny little change, so you end up seeing every little change made to the file as it goes. I started out with a blank text file and I go all the way to a completed site design. Check it out.
Designline for the Open Air blog template - 879k Animated GIF
I really like the results. It gives me a good idea how the design progressed. While watching, it also made me stop and think about the changes I was making in relation to the design as a whole.
There are several ways I would improve this designline concept:
- A corresponding "codeline", so to speak. I would like to see how the code progresses as well as the visual end of it.
- An easier way of capturing each step of the process. Alt-Print-Screen'ing and then copy-and-pasting into Photoshop dozens of times gets tedious.
- A way to get an actual copy of the files as the design progresses. It would be nice to be able to go back to some point in the designline and "fork the design" onto a new tangent. (Obvious solutions like source control come to mind.)
- An easier way of presenting a designline, other than a massive animated GIF file. Maybe use Flash? Maybe point #3, but with auto-inserted meta-refreshes, so you actually see and load in your browser each step of the designline.
What do you think?
For more information about the reasoning behind the design process used, see Content-Driven Design