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.


Post Footer automatically generated by Add Post Footer Plugin for wordpress.

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 SignalLeaf.com - the amazingly awesome podcast audio hosting service that everyone should be using, and WatchMeCode.net 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.

    • http://mutedsolutions.com Derick Bailey

      yeah, it is distracting a bit. 

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

  • http://www.philliphaydon.com Phillip Haydon

    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)

    • http://mutedsolutions.com Derick Bailey

      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 watchmecode.net site directly.

      • http://www.philliphaydon.com Phillip Haydon

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

        • http://mutedsolutions.com Derick Bailey

          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.

  • http://twitter.com/fernandozamoraj fernandozamoraj

    That’s an awesome way to show the evolution of a website.  I had a similar idea of my site at http://followmetotheweb.apphb.com.  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^`