Sometimes a simple demo can bring a dry process to life.

Load 2meg animated GIF showing the website build from blank slate to complete homepage.

So what's the story?

Back in 2007, I was on the NDM team that rebuilt The Australian and Aus IT websites.

As part of the project we did a presentation to some of The Australian's editors/managers, showing the design and development process that had gone into creating the new site.

With Design and UX you can show mockups and wireframes; but demonstrating the progression of Frontend work was a bit of a challenge. Raw technical details were not particularly engaging for the non-developer audience, so I decided to include a short illustration of the build process.

I took a series of screenshots during the build, then created an animated GIF file with the results (you've probably seen similar demos before). I thought it would just be some visual filler while I was talking, but people were so focused on the GIF I shut up and let them watch the process unfold. I was pleasantly surprised by the reaction.

Although the audience had experience evaluating completed websites, they hadn't seen the raw stages of a build. Being journos they knew all about turning a blank page into an article, but they'd hadn't seen the moment a blank slate becomes a website. It helped bring the technical story to life.

If there's any real point other than sharing a fun image, it's simply this: remember to keep some record of your work. Take screenshots, keep final mockups and don't forget to take "before" screenshots to give context to the "after" shots (I really wish I'd done that!). You never know when it will come in handy.

I should note The Australian has been rebuilt since then, using an extended version of the markup behind this build. But that's another story.