Version control for designers – Why you need to be using it now

March 9, 2018 by Alison Foxall |

At your firm, why would you need version control for designers? Well, as a designer myself, my first experience with version control was a handful of years ago at a software development company. Prior to this, I had never heard of it, despite working for web agencies that were service based. As a web designer in the mid to late 2000’s, there was really no need for me to even fathom using something like Git.

But they weren’t using Git, no, not even SVN. What they were using was Microsoft SourceSafe. Say, what? Yes! It was a much older version and it was a bit of a pain in the ass because you couldn’t actually work on a file at the same time until someone was done with it. I don’t think there were any merging capabilities.

Firstly, if you’re a designer, you might not have ever used version control or know the terms commonly associated with it.

What is version control?

Version control helps you manage changes to your work

Even if you’re working alone, version control can help you manage changes to your documents like source files or graphics, over a period of time. If you’re working on a team, version control is very powerful because it helps you all work in harmony, instead of overwriting each other’s changes. It helps minimize disruption to your teammates working on the same project, or even the same file. When teams or even just you solo aren’t privy to what changes were made and something goes awry in a production environment, it’s very difficult to diagnose what even happened or what changed when you don’t have that history to look back on.

Common terms you might hear about version control

Repository. As the name implies, a repository is a digital receptacle where things may be stored. Many people say/type ‘repo’ as slang when referring to a repository. Essentially a repository is your project. Sometimes teams may use multiple repositories for their whole project if it’s overly complex, however, I recommend using branches instead.

Branch. A branch is like a mini-project or task. You’d create a branch (and branch off, ha) to do things like implementing a new feature (that new navigation perhaps?) or even something small like fix a bug. I’ve made branches to update all the local front-end libraries of a project before. When you’re done, you merge the branch back into the main one (usually called the “master”).

version control Git branch

Commit. When you make a change you’re happy with, you commit to it. Your change gets a title, and an optional description. You can line-item commit or commit an entire file or multiple files at once. A commit is a piece of history in your project.

version control commit with tower

Push/Pull. When you push code, you’re basically “uploading” your changes, your commits, to the central repository that you and all your coworkers have access to. Any time you push, you need to pull down any current changes first so that Git may auto-merge the code together. At times, you might need to deal with conflicts, but we’ll get to that later.

Types of version control systems

The most popular version control system at the time of writing is Git. Not too long ago it used to be SVN, or Subversion by Apache. Mercurial is another system that Facebook uses due to constraints with Git.

So, as a designer, why would you use version control? And for what types of files?

Why use version control as a designer?

1. You must use version control for front-end code to avoid overwriting

Whether your code is CSS, SCSS, HTML, JS, PHP, etc. It doesn’t matter. If it’s code, someone else will probably be touching it at some point and you need to version it so you can look back on important changes, or, if someone else is working on the same file, Git can properly merge the two versions and you and your pal won’t be overwriting each other’s stuff and getting frustrated. I’ve seen that happen far too many times in cowboy coding land.

2. Ability to roll back to changes after the fact

Often times, you may find yourself making changes and then a client or boss or whoever says, “You know what, let’s just go back to the way it was.” Oh, but shoot, you can’t remember how you did that, or really don’t feel like spending a whole hour to get it back to the way it was. Enter: version control! With Git you can easily revert back to an earlier change or commit with a couple clicks if you’re using a Git GUI like I am (I use Tower), or typing in a command in the CLI (Command Line Interface) like my partner Matt does.

3. Your repository is an easy backup source

Things happen. I know. Sites get hacked, things explode, you know… just another day in the life of a web worker. Ah, but your Git repository also serves as a backup source just in case bad things happen! That backup might be sitting on your computer, or ideally, it’s in the cloud in a service like BitBucket, GitHub, or similar.

What kinds of things can I version control?

Any text file for sure. CSS, HTML, JS– all great things to control versions for. However, you can also version graphics, PSD and Sketch files, etc. However, do be aware that large files are discouraged from being tracked. Github, for example, will warn you if you are pushing a file over 50mb, and will forbid you to push something over 100mb. More info about working with large files can be found here. While you can’t normally see differences for graphics in the CLI or even something like Tower, you can see the difference when you do a compare with a program like Kaleidoscope which has that capability.

How to get started with version control as a designer?

I normally recommend getting started with a GUI program to get used to what it’s all about. I personally use Tower for Mac, but check out other Git GUI’s for Mac & Windows here that are listed, many of them are free. Tower is amazing though, and I’d cry if they ever discontinued it.

From there, you can start tracking a project immediately or create a new one. There are tons of resources to help you get started. Even Tower has their own guide for it and you can choose to learn through the GUI or the CLI.

version control git gui

Ready to push out to the cloud? You need git hosting.

When choosing Git hosting, you’ll need to figure out what your needs are. Do you need private repo’s? Or will they all be public? Is your project open source? All these factor into where you might store it. If your project is open source, the obvious choice is Github. With so many users and an easy system to track issues and make pull requests, Github is a no-brainer.

But maybe most of your projects are private? In that case, you may want to look at GitLab or BitBucket. Both offer unlimited private repositories for free. And while Github also offers private repo’s, they do so at a cost. If you’re budget minded like us, this is probably not an option for you.

Conclusion

All in all, you can get started with version control in a matter of minutes for free. It’s so important to add this to your daily workflow as a designer and certainly very important to add it to your skill set. You will thank me later and ask yourself, ‘How did I ever live without version control?‘.

About Alison Foxall

Alison Foxall is our resident WordPress aficionado. She's the lead organizer for WordCamp Tampa, as well as Tampa's WordPress Meetup group. Alison enjoys helping her clients succeed and meet their goals through inbound marketing. As a libertarian and member of Conscious Capitalism Florida, she believes that human potential will thrive in free markets.