Version Control Will Save Your (Product Design & UX) Life

HI :-)
Version Control Will Save Your (Product Design & UX) Life @jonathanpberger • Agile Alliance 2016

VERSION CONTROL
WILL SAVE YOUR
(PRODUCT DESIGN & UX)
LIFE
Jonathan Berger
Agile Alliance 2016
Atlanta, GA

0. INTRO

Who Am I?
@jonathanpberger
design, code, pm
~30 agile projects since 2008
interested in agile practice for design

Who are you?
(Show of hands)

What it says on the tin
"Designers still use shockingly manual and even
arcane methods of managing versions."
— Khoi Vinh, Principal Designer at Adobe

Data corruption? Collaboration collisions? Files
with names like presentation-for-client-FINAL-
FINALREALLY.psd?

Developers have benefited from sophisticated version
control tools for decades, but the state-of-the-art
has always lagged behind for designers and their
tools.

Healthy version control eliminates unnecessary file
management problems, secures your work, and helps
take collaboration to the next level.

I. THE PROBLEM

How many hours a week do you design?
vs managing files, etc.
The work `work around the work' or meetings

How do you collaborate?
1-2 designers: dropbox is fine.
2 designers later: EVERYTHING IS BROKEN!!

The real question emerges:
How can we decrease noise?

File management sucks

II. VALUES

"Design" is about
design decisions
design systems
not decoration

What's Version Control ("VCS") about?

VCS is about Committing

VCS is about Branching

VCS is about Merging

Collective Ownership of
{Code, Design, Product}

The most valuable thing for a designer is the right
feedback at the right time.

Modernize the design workflow

III. VCS IN CONTEXT

Developers' problem:
The need for a logical way to organize and control
revisions has existed for almost as long as writing
has existed, but revision control became much more
important, and complicated, when the era of
computing began.
https://en.wikipedia.org/wiki/Version_control

...it has become increasingly common for a single
document or snippet of code to be edited by a team,
the members of which may be geographically dispersed
and may pursue different and even contrary
interests. Sophisticated revision control that
tracks and accounts for ownership of changes to
documents and code may be extremely helpful or even
indispensable in such situations.
https://en.wikipedia.org/wiki/Version_control

NB: Designers have the same problems!

How developers solved the problem
1. Commit each change (decision?) with {changeset, author(s),
timestamp, rationale}.
2. Experiment safely in own sandbox.
3. Safe way to incorporate changes.

VCS is a Secret weapon

History of Version Control
Year Event Notes
1986 CVS created First modern client-server VCS
1998 BitKeeper created First major distributed VCS
2000 Subversion created Improves upon CVS
2002 MS Office introduces Track Changes VCS for non-programmers
2003 Adobe VersionCue launched Adobe brings VCS to design
2005 Bitkeeper removes free tier leading to the creation of Git
2005 Git created as a FL/OSS alternative to Bitkeeper
2005 Mercurial created as a rival to Git
2008 Github founded Introduces "Social coding"

Damn DAM

VCS in the world
Legal: GitLaw
Writing: Flashbake, inspired by Cory Doctorow.
Political organizing: e.g. the Pull Request ("PR")-based workflow for
hillaryclintonisa_butimvotingforheranyway
Everywhere (i.e., MS Office): Track Changes.

IV. STRATEGY

How to choose among many VCS strategies
for design and UX?

How do you do these things today?
1. Committing
2. Branching
3. Merging

Criteria for choosing
1. Does it work with your existing practice?
2. How's the learning curve?
3. Is it future proof?

Design-specific VCS Challenges
Organization & conceptual fidelity
Binary filetypes: fixed with Layervault, Pixelapse
Filesize: fixed w/ GH LFS

V. SURVEY OF
APPROACHES TO VCS
FOR DESIGN

File Naming Conventions
Versioned Filestores
Commit-based Versioning
Errata
Bonus: Branching & Merging & PR-Based Workflows

History of Version Control (+ design)
Year Event Notes
1986 CVS created First modern client-server VCS
1998 BitKeeper created First major distributed VCS
2000 Subversion created Improves upon CVS
2002
MS Office introduces Track
Changes
VCS for non-programmers
2003 Adobe VersionCue launched Adobe brings VCS to design
2005 Bitkeeper removes free tier leading to the creation of Git
2005 Git created as a FL/OSS alternative to Bitkeeper
2005 Mercurial created as a rival to Git
2007 Dropbox formed
the era of decent cloud storage
begins
2008 Github founded Introduces "Social coding"
2010 Adobe VersionCue retired (No one missed it.)
2011 Layervault & Pixelapse formed VCS's that understand .psd files
2014
Invision releases Design File
Syncing
prototyping tool expands to
workflow
2014 Layervault closed but: Design News survives!
2015 Pixellapse bought by Dropbox not retired (yet), folding into DB

File Naming Conventions
Pros :-) Cons :-(
simple compliance
extension of what you're already doing inflexible
no special skills or tech doesn't scale well

Photoshop Ettiquette
Photoshop Ettiquette Poster for sale

Versioned filestores
Pros :-) Cons :-(
Easy not design-oriented
Whole org uses them tough to review
OS native integrations underpowered
multi-device version history may expire

Adobe Creative Cloud File Sync

gDrive

Dropbox

Pixelapse

InVision

Commit-based Versioning

SVN
better binary support than Git traditionally had
not distributed
popularity waning

Git
the gold standard for collaboration
facilitates FL/OSS
GitHub.com has spread it far and wide: "social coding"

Git Sketch Plugin

Errata

The Deadpool
Pixelapse (bought by dropbox, not exactly dead)
Layer Vault (but: Designer News!)
versioncue by Adobe

Also worth mentioning
folio, a small design VCS app
pics.io: separate client that syncs w/ gDrive. DAM-focused.
Sparkleshare: git-based FL/OSS roll-your-own dropbox
AbstractApp: smart folks working on a solution

Branching

Merging

VI. HOW TO USE GIT

Let's mess around with _!

VI.I - USING GIT
Copy an Open Source project for use.

Using Github
Github.com is a web-based hosting service for
projects that use the Git revision control system.

Copying a project with Git Clone
First we'll fork & clone the Version Control Will Save Your Life
project.
git clone git@github.com:jonathanpberger/vc-will-save-
your-life.git

Making an edit
Let's change the title of the deck.

Seeing what changed
git status
git diff

Committing Changes
git commit -am

Distributed VCS
This works even if when you're offline(!)

Pushing code to the Repo
git status
git log
git remote -v
git push origin master

Let's try another
Let's try running the app locally.
Change the styling.

Staging multiple files
Let's use the GUI: GitX
Each commit should be a unit of work.
This isn't always a single file or single line.

Deploying to the Web

Let's switch to another app

git init

"Heroku is a cloud application platform...[that]
lets app developers spend 100% of their time on
their application code, not managing servers,
deployment, ongoing operations, or scaling."

Deploying with Heroku
heroku create
git push heroku master: deploy to new heroku instance
heroku open

VI.II - SETTING-UP

TRYING THIS AT HOME
To use git: Install Git on your machine using Homebrew.
To backup and share: create a Github account, set up a remote
repo
To deploy to the web: set up a Heroku account

THANKS!

THE LINKS SLIDE:
GitX, the Mac git GUI at http://gitx.frim.nl/
My preferred "Brother Bard" Gitx branch at
https://github.com/brotherbard/gitx/downloads
Install git using Brew http://mxcl.github.com/homebrew/
Practice git basics with http://gitimmersion.com/
Set up a Github account at http://help.github.com/mac-set-up-git/
Set up a Heroku account at
http://devcenter.heroku.com/articles/quickstart

Some other fun stuff to explore:
This is intermediate git that I use every day:
git branch
git checkout -b
git stash
git reset HEAD^
git blame
git commit --amend

FOR MORE INFO
http://jonathanpberger.com/talks
Say hi at @jonathanpberger
or jonathanpberger on github, gmail, etc...

BONUS LEVEL

Git GUIs

Experiment safely
git branch

Attribute changes to someone
git blame

Quickly get back to a clean state
git stash

Unstage your last few commits
git reset HEAD^

TH-TH-THAT'S ALL
FOLKS!

Version Control Will Save Your (Product Design & UX) Life

More Related Content

Viewers also liked (14)

Similar to Version Control Will Save Your (Product Design & UX) Life (20)

Recently uploaded (20)

Version Control Will Save Your (Product Design & UX) Life