Version Control for Designers

Posted on 05 December 2011 by Pete Duncanson Tweet

I asked my (primarily designers) followers on Twitter recently how many used a full version control system. The answer was very few, and for obvious reasons, that's scary and needs fixing.

Quick note for developers - This isn't really aimed at you guys, version control use is commonplace in the development world but not so much in the design side so feel free to read on or even better, help your nearest designer get set up in your spare time!

When I asked, most of the people I polled simply didn't use anything. They may have used some sort of backup to keep files safe (Dropbox for example) but this isn't version control. It's just file back up. There is a small element of safety but you can't roll back things, commit changes with notes etc.

Some folks simply didn't use anything other than faith in their HDD's. Scary stuff. I'm not going into the incredible detail of explaining the many of the powerful things version control can do, I just want to walk you through a few steps to show it's not too difficult to get set up and working in controlled environment.

I'm aware many people already like and use Github, it appears to be a great system but I'm going to talk you through what I know - that's a system called Kiln. It's because we use this at Offroadcode, it ties in with FogBugz, the workflow/case management system we use. If you're interested in Github, there are lots of tutorials on getting set up with that. If you want to use Git, that's absolutely fine, what we're trying to get across here is that you should use something so whatever is easiest for you that gives you some security is a massive step forward!

I should probably also note that this tutorial is written using Windows 7. I believe you can also use TortoiseHg for OSX by installing it using the instructions here.

The steps to set up Kiln version control

1. Register your Kiln account and create a repository (If you're a Student, Startup or need only 1 or 2 users, it's free)
2. Update your account settings to get your free user account
3. Create your local repository and tie that to Kiln
4. Your first commit!
5. Synchronise with your Kiln account online!

Step 1: Registering your account and creating your first repository

A nice easy step to start us off - sign up with Kiln here and follow the instructions on screen. You'll go through a couple of small forms to build your account and get a verification email (I'd recommend you sign up to the Fogcreek newsletter too, it's very good). Once you've verified your account, you'll be presented with the screen in Fig 1.

Just a quick note on terminology, a repo/repository is simply what your project is going to be called. If it's your portfolio project, call it something like "Portfolio". It's just the folder on your local machine that your work lives in.

For the purposes of demonstrating a walkthrough, I'm going to add in my Docpool website into version control so the following screenshots will be based on setting up and adding an actual site. In this demo, Docpool is just a folder with my website in it saved on a local drive.

Once you've downloaded and installed the Kiln Client (this tutorial is based on using version 2.1.1 - available directly from sourceforge) you're nearly ready to start commiting to Kiln and be secure in the knowledge that your work is versioned, backed up and available on any machine with minimal effort.

Note: This step through is written on a Windows 7 machine so I'm not sure if the software is the same on a Mac

Step 2. Update your account settings to get your free user account

This is a small setting to change, as I mentioned before, if you're a solo freelancer, student or anyone with less 1 or 2 users, Kiln is kindly provided by Fogcreek free of charge. To update your account to set it as free, click on the admin link next to your name in the top right of your browser. You'll be taken to this page where you can change your account (it's a bit tricky to see).

So, to recap, we've simply signed up, changed to the free account (if you are able to pay for an account, I can't stress enough what great value this is so please consider a paid account!)

Step 3. Create your local repository and tie that to Kiln

Once you've installed the Kiln software, you'll notice when you right click files and folders, you have a few new options in your context menu. This is basically all you need for commiting changes and uploading/downloading files.

The first step is to create a local repository. All this is doing here is establishing a folder that Kiln knows is the home of the project you're putting into version control.

Just click the default "Create" button on the popup that follows.

Once you've created your local repository, you can right click on your project folder (Docpool in this case) and you'll see a couple of new context menu options including Commit, Synchronize and when you also click on the TortoiseHG menu, this now includes several new menu options. Don't worry, you only need a couple of them to get started!

Step 4. Your first commit!

We're nearly there ... Kiln works in two stages, first you Commit to your local repository (the Docpool folder in this case), this is a lot like just telling Kiln to save files. It's important to note that they're not backed up online at this stage!

When you right click and select Hg Commit, you'll be prompted by this window (Kiln version 2.2.1), it might look initially confusing but once you know what the main options do, it's really not too bad!

Fig 8. The commit screen

There are really only 3 bits you need to know about the commit screen to get you started.

1. Check all - this simply selects all the files that have been changed in the commit list
2. The list of files you're about to commit. In this case, it's all the files in the repository but if for example you only changed the stylesheet "screen.css" then that's what would appear in the list.
3. The commit message - this is where you keep a record of what you've changed - the essence of version control! Make sure your commit message is sensible and clear about what you've changed and why. If you use a job system like Fogbugz, it's also useful to include a case/job number here for reference.

When you've selected the files and included your commit message, hit the commit button. (on initial commit you'll have an extra dialogue button asking about adding "untracked files" - just click "add")

When it's done, you can click close. The commit window is done with for now.

Step 5. Synchronise with your Kiln account online!

Now is the time we push to the Kiln account so your files are available and backed up online. Right click on your folder (Docpool in this case) and select the "Hg Synchronize" and you'll get this rather mysterious looking window. Again, don't worry, it's not scary once you know which bits to click on to get the basic benefits of using version control.

Fig 9. What's on this screen?

1. Preview incoming changes - If you're working with a team, you can view changes that would overwrite your local repository
2. Pull down incoming changes - This is basically saying "copy changes from the server over my local version"
3. Preview outgoing changes - Same as number 1 but this is a preview of what you're about to push to Kiln
4. Push outgoing changes - This sends your files to the server.
5. The url of your repo - See next screenshot (fig 10 below) of where to get this
6. Once you've entered the url to your repo in Kiln, hit save and you will get the popup in 7.
7. I usually just save as default, you're ok to do the same or give it a name.

Once you've saved the url path, click on the "Push outgoing changesets" button (number 4) and you're done!

NOTE: We only do steps 5-7 when setting up, once you've gone through the initial commit process you will only use steps 1,2,3 and 4 in future. Also be aware when doing your initial commit, some bigger sites can take a long time to upload.

Where to get your url path

Log into your Kiln account (link is in the email you got when you signed up if you need it) and click on "Browse Repositories" then select the one you're working with. You can either just copy the url from your browser window or the clone url button (number 2 below).

Success! You're now under version control

Thanks for reading this far, if all has gone well, we've just got you set up and committed to Kiln version control. You can check that you're committed by refreshing / revisiting your repository above and you should see something like this:

As you continue to push and pull your files into version control, this list will grow and show you a timeline of changes and what you worked on and when.

A couple of golden rules

As there are 3 of us in the office, we push and pull changes regularly, there are lots of other parts of Kiln we use but I hope this basic guide has at the very least got you started by adding a repository and commiting your files to it along with then synchronizing online.

There are some basic golden rules we work with as we work in a team but it's still good practice if you're working on your own because you might work with or join a team at some point.

Pull before you push

After our initial commit process above, when we're working day to day with our repository, before we commit a set of files, we do a pull (Button 2 in Fig 9). This means that if your colleagues have commited anything to the project, you are bringing these changes into your local version so it's up to date with what's on the server.

Commit per change/job

For example if we have 2 jobs like "change the logo link on the homepage" and "make the contact form go somewhere else" we try to commit each as its own job because we can then make a commit note to explain what we did. (You can actually click on a file when commiting and add a note to individual files if you want). It's also easier to roll back commits if you don't want to keep something as otherwise you'd have to pick through several jobs all bunched together in one commit.

Help and support

Kiln (and version control in general) is incredibly powerful and there's a great deal more you can do with it If you want to start digging around, feel free to check out both the Kiln.StackExchange board and the extensive documentation.

If you have any questions, problems or issues, feel free to leave a comment. If it's been useful please for the love of god share this with any designers who don't currently use version control!

An added bonus - You get FogBugz too

Just in case you weren't convinced about Kiln after getting this far, I should probably just mention that when you sign up for Kiln you also get a FogBugz licence.

We absolutely love FogBugz, we've used it to manage a wide range of projects and it integrates into our workflow brilliantly. We've also written a few articles about using FogBugz to manage a 4 month, 600 file site update for Olympic Holidays, how we use it to replace post-it notes on the project wall and how it allows us to use feature based development to give better quotes for projects.

If you want a simple (but incredibly powerful) case/work management system, it's there for you in the tab up by the logo! For free!