MBoffin.com

Designline - A Design Timeline

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?

Update: For more information about the reasoning behind the design process used, see Content-Driven Design.

Posted to Dylan's blog on Apr 28, 2005 @ 10:09 PM
Filed Under: Information Technology, Web Design

Replies

Very nice!

I had thought about this in the past for my own designs but was too lazy to actually do it :). However, one idea I had was to write a perl script that would just sit in the background and check for a change in the modification date of one of the files in the directory. Then if it detected a change, to move all the files into its own directory named with the date and time. That way I could go back later and take all the screenshots and have all the files that corresponded with that screen shot. Mainly I did not want to be interrupted with having to take a screenshot and lose my train of thought. Just an idea.

If that makes sense.

SCuM

SCuM - Apr 29, 2005 @ 10:29 AM -

That's a good idea for a way to go about it. It has the advantage of keeping copies of the source as you go, as well as taking the screenshots. It would allow the concept I talked about in #3 where you could "fork" the design onto a new tangent at any point in the design process.

Dylan - Apr 29, 2005 @ 10:45 AM -

For screenshots you could use Snagit from Techsmith ( http://www.techsmith.com/ ). That way you won't have any problems with the alt + print screen anymore.

Check it out.

antipentA - Apr 29, 2005 @ 1:18 PM -

That's an awesome demonstration - fun watching how others work :)

I would use viewlet builder (I have a licensed copy) because after taking the screenshots, you can easily annotate it with comments...

cre8d - Apr 30, 2005 @ 3:25 PM -

A good free alternative to Viewletbuilder or Macromedia Captivate is Wink it makes easy to capture your workflow with any software.

I do desing using mainly tables (the old fashioned way) and your animated timeline has been revealing!.

Thanks.

agregori - May 1, 2005 @ 3:51 AM -

I absolutely love it! I am a very very visual person. I definately learn by seeing as most can learn by book diving. If you came up with some type of lesson to go along w/ that, it would help a lot of people here on the net! The fact that i'm tryin to learn CSS and to watch it get created like that was just simply awesome!

mystamax - May 2, 2005 @ 3:25 PM -

You illustrate something that a lot of people miss--it all starts with good clean HTML. I am going to use your example at my next CSS workshop. I just blogged your page on our site: Philadelphia Area Computer Society CSS Workshop.

JADavey - May 11, 2005 @ 8:03 PM -

That's great to hear, JADavey! I'm glad it will help. It really is true that it all starts with clean markup.

And thank you to everyone else for the suggestions on how to more easily create these designlines. I am working on implementing the ideas already. I will post the results sometime soon.

Dylan - May 12, 2005 @ 10:11 AM -

Got a little inspired.

After doing the initial design for a simple peice of brochure-ware

I decided to give a designline a go:
Designline for site - 410kb animated gif

All in all a bit of fun and a demo for all those CSS-phobes out there :)

jdc - Jul 25, 2005 @ 6:39 AM -

Very nice, jdc! After watching it several times, I realized one thing your designline demonstrates nicely. You create a very nice, visually appealing design that is, at its core, just the elements the site needs to communicate. This is easy to see from right off with the way you start. While the design fills in as you go, the initial sections of the site don't bloat and get extended unnecessarily. It avoids the problem that you see a lot in site designs where there are whole portions of the site design that don't actually do anything for the site.

There was lots of buzz (still is, apparantly) about this designline concept, but I want to thank you for actually doing one! Seeing other people's thought processes while they design was exactly what germinated the whole concept in the first place.

Dylan - Jul 25, 2005 @ 8:56 AM -

Thanks, appreciate the feedback. One thing to rememeber though, is that the designline doesn't take into account the actual design. The process shows the conversion of an already developed design into an XHTML and CSS markup. I don't know what a designline of the actual design process would be like! One thing's for sure it would take a lot longer, and be difficult to show all the options presented to the client etc etc.

I'll do a few more of these I think, maybe we should do a designline website where designers can submit their own, so we can actually get an insight into our own thought processes and methodology?

jdc - Jul 25, 2005 @ 4:50 PM -

Something witty this way comes.

Designline - A Design Timeline

Replies

Post a Reply

What is MBoffin.com?

Recent Updates

Sponsored Links

XML Feeds