The Evolution Of A Site’s Design

Site design is an evolutionary process, like anything else. As new and updated information is needed on the site, the design must change to correctly display it. New functionality is also added on a regular basis, and things must be moved around to accommodate this. There are also times when you realize that a design just isn’t right for some reason – maybe the wrong information is being highlighted or the functionality that you want to show off isn’t standing out.

The Evolution Of My Site

In my case, I’ve been building a website to sell my first screencast over at WatchMeCode.net. It’s only been up for a couple of weeks now, but the design has gone through an almost continuous evolution. There is hardly a day that goes by, where I am not tweaking something on the site to make sure I am highlighting the right things, showing the right information at the right time, and providing the most value to my visitors.

Just for fun, I decided to create a quick video that shows the evolution of my WatchMeCode.net site. Here’s the video:

Making The Video

The setup to create the video was simple.

I use LiveReload when I’m building my websites. This little tool will tell my browser to refresh the page when any of the files for the site change. It will also stream in JavaScript and CSS changes silently. And, I’m using Git to manage my source code.

I started at the head of the repository – the most recent version. I hit record in ScreenFlow and recorded everything on my screen – including a terminal window that you don’t see in this video. Then every few seconds, I ran this command in my terminal window:

git checkout HEAD^

This forced the repository to move backward one commit at a time. Every time this checkout happened, LiveReload saw the file system changes and told the browser to update itself. Once I had everything recorded, I added the “Evolution of …” section to the end, cropped the video down to the size you see now, and exported it. Then I opened the exported video in iMovie, reversed it, and exported that to YouTube. The result is what you see, above.