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 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 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.

About Derick Bailey

Derick Bailey is an entrepreneur, problem solver (and creator? :P ), software developer, screecaster, writer, blogger, speaker and technology leader in central Texas (north of Austin). He runs - the amazingly awesome podcast audio hosting service that everyone should be using, and where he throws down the JavaScript gauntlets to get you up to speed. He has been a professional software developer since the late 90's, and has been writing code since the late 80's. Find me on twitter: @derickbailey, @mutedsolutions, @backbonejsclass Find me on the web: SignalLeaf, WatchMeCode, Kendo UI blog, MarionetteJS, My Github profile, On Google+.
This entry was posted in Design. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • Matthew Boehlig

    A very good use of LiveReload. I would of grabbed screenshots of the fully rendered page instead of video. The reloading of the embedded video distracts from the actual changes on the page.

    • yeah, it is distracting a bit. 

      thought about doing it that way… but didn’t want to spend too much time on this. #lazy :)

  • I just took a look at the demo video, and thought the demo was going to show like some* of the refactoring from the full video, but it kept going black and jumping around, wasn’t till almost to the end I actually realized what was going on, but I don’t feel convinced by the demo, atleast now in the same way I get(got) convinced by the samples provided by tekpub. (if that makes sense)

    • This video has nothing to do with the screencast that I’m selling, other than showing the evolution of the site that sells the video. If you’re looking for the screencast preview, hit the site directly.

      • Hey, I’m actually referring to the video on your website, I didn’t watch the one in your blog yet. (didn’t get to finish reading, I had to race off to work)

        • Oh! sorry about that… I got confused – but looking at your comment, I don’t know why. 

          I can see your point, though – I’ll see if I can get the preview video updated to show a bit more, and work on some smoother transitions, this week.

  • That’s an awesome way to show the evolution of a website.  I had a similar idea of my site at  I thought I was going to be able to revert my builds in app harbor. Unfortunately App Harbor only keeps the last 10 builds or so, not the entire build list.  I can probably do it with git and WebMatrix (since that is the VCS and IDE I am using).   We’ll have to see how it goes, since I have put the site on hold for over a month now. 

  • Anonymous

    Nice! You could have automated the process and saved yourself some keystrokes by running `watch git checkout HEAD^`