►
Description
In this talk, Ryan and Una tell the story of a designer and developer working collaboratively through GitHub, and bridging the gap between their mediums. Stemming out of respect for each other’s skill sets, they decided to try something new – to bring design into a space traditionally reserved for only developers – and it worked really well.
They then took that workflow to the rest of their team, and they now have visual designers, user researchers, UX designers, and front end developers all working together through GitHub.
About CodeConf
CodeConf improves the software community by providing a forum for thought-provoking talks and forging social connections. The third installment of the CodeConf series took place in Nashville in 2015. Attendees came together to discuss open source, best practices, documentation, and community.
For more information on this year's CodeConf, go to:
https://codeconf.com/
A
B
Roberto
I'm
Yoona,
so
we're
gonna
be
talking
about
designing
in
the
open,
so
I
met
Ryan.
We
were
both
working
at
IBM
design
on
the
Watson
platform.
Team
and
Ryan
is
a
fantastic
motion
designer.
So
he's
done
a
lot
of
work
lately
with
css3
animations
and
did
a
bit
of
vlogging
on
that
he's.
Also
a
part
of
a
group
called
the
letter
Society
and
there's
a
lot
of
really
great
animation
work
outside
of
our
day
to
day.
B
A
B
So
we're
here
talk
to
you
about
open
source
design,
and
what
does
this
mean?
We
heard
a
lot
of
great
talks
about
diversity
today
and
one
of
the
other
groups
that
is
pretty
underrepresented
in
the
open
source
community,
our
designers,
all
the
time
we
hear
about
how
can
developers
work
better
together,
but
what
we
all
want
to
talk
to
you
about
is
how
can
we
get
designers
working
with
developers
in
this
open
source
community,
and
this
is
kind
of
about
our
story
and
how
we
figured
out
that
process,
so
it
all
really
started
with
emojis.
B
A
There's
a
site
called
gibbet
go
which
is
a
site
where
the
community
of
code
pen,
as
well
as
community
of
drupal,
interact
with
each
other.
So
you
have
dribble
shots
that
people
encode
pen
recreate
in
encode.
So
it's
a
really
great
community
and
interaction
and
collaboration
between
these
two
kind
of
normally
siloed
demographics.
So.
B
One
day,
Ryan
messages
me
this
picture
of
this
really
awesome
set
of
animated
emojis
and
he's
just
going
on
about
how
adorable
they
are,
and
we
both
agree.
These
are
adorable.
That's
all
agree
on
that.
So
I
just
remember
him
looking
at
like
all
the
different
animated
properties
and
I'm
they're
like
dissecting,
oh
I,
wonder
what
like
the
border,
radius
and
width
of
the
eyes
are,
while
he's
saying,
I
wonder
how
quickly
it's
moving
in
the
Bezier
curves,
so
I'm.
B
A
It
so
initially
this
is
my
first
project
in
fun
development,
so
I
was
coming,
I
mean
with
the
clean
slate,
so
I
wasn't
used
to
setting
up
to
all
these
modern.
So
we're
like
hey,
let's
just
create
this
with
Co
pen,
just
like
all
the
other
giving
goes
so
we
tried
that
there's
a
lot
of
copy
and
paste
a
a
lot
of
board
game
trying
to
like
be
like
oh
instant
message,
you,
the
snippet
of
code,
that
I
changed
and
can
you
implement
it
and
it
just
wasn't
working
out
too
well
when.
B
Copying
and
pasting
happens:
it's
usually
not
a
good
thing,
so
I
thought
it
was
time
to
graduate
to
get
Ryan
said
he
has
instant
learning
how
to
code
and
I
got
really
excited.
Cuz
get
is
just
it's.
What
I
work
in
day
to
day
I
feel
like
it's
such
a
good
tool
for
collaboration
and
it's
exactly
what
we
needed,
but
a
lot
of
time.
Designers
think
of
this
word
get
and
they
just
think
like.
Oh
that's
not
for
me.
It's
not
my
domain.
A
I
came
at
it
and
I
was
still
here,
Oh
F.
What's
this
thing
get?
Oh
my
gosh
there's
so
much
to
set
up
what
is
node?
What
is
what
is
my
terminal?
Oh
my
gosh
I'm
like
hacking
into
my
computer.
What
is
this
new
workflow
like
me,
asking
in
a
hey,
just
open,
After
Effects,
to
do
motion
tracking.
You
know
things
I
do
on
a
daily
basis,
but
this
is
not
that
easy.
I!
Don't.
B
Know
what
motion
tracking
is
so.
This
is
part
of
the
reason
like
this
is
why
we
can't
have
nice
things
all
right.
This
is
a
readme
file
and
I'm
guilty
as
charged
it's
my
own.
It's
fine,
I've
learned
my
ways.
If
there
is
any
documentation
in
there,
it's
like
npm,
install'
and
gold.
What
do
these
words
mean
like?
What
is
goal
is
to
drink
something
what
is
npm
if
you're
not
already
immersed
in
this
world.
They
mean
nothing,
it's
just
an
acronym,
and
this
is
what
happens
all
the
time.
B
People
just
expect
you
to
come
in
with
assumed
knowledge.
I,
remember
one
time,
I
submitted
a
pull
request,
just
giving
somebody
some
more
detailed
documentation
for
getting
started
and
I
told
them,
like.
Oh
make
sure
people
understand
that
I
need
to
bundle.
Install
the
response.
I
got
was
there's
a
gem
file
in
this
github
repo.
You
should
just
know
to
bundle
install.
This
is
why
we
can't
have
nice
things.
B
The
tools
that
codepen
provided
automatically
and
create
some
kind
of
starter
environment
that
we
could
work
with
in
github
within
get
with
so
I
set
up
like
a
gold
starter
repo
it
had
sass
installed,
there's
not
a
prefix
or
a
bunch
of
minification
x',
a
bunch
of
performance
optimization
so
that
Ryan
or
any
other
designer
wouldn't
have
to
even
think
or
worry
about
that.
Github
pages
was
set
up
just
with
a
gulp
deploy
task
and
then
also
browser
sync
and
browser.
Sync
is
magical.
B
The
first
time
you
use
it
when
you
could
just
see
your
screen
instantly
update
as
you
save
in
your
code,
editor,
that's
that's
pure
magic
and
Wizardry
and
I
wanted
to
make
sure
that
was
really
well
documented.
So
anybody
could
pick
this
up
without
knowing
any
background
and
just
get
started
instantly
with
some
pretty
good,
detailed
documentation
about
like
seeding
into
the
folder
and
all
the
things
you
have
to
have
ready.
In
order
to
make
this
work,
all
you
have
to
do
is
type
gulp.
I
got
the
thumbs
up.
I
thought
that
was
good.
B
A
Like
you
know,
cramp
it's
a
giant
environment
for
me,
but
it
seems
so
easy
but,
like
you
can
see
the
readme
and
see
all
the
what's
included,
and
you
know
we're
like
well:
okay,
let's
try
it.
Let's
try
this
with
git,
and
this
is
where
we
started.
I
was
like.
Oh
my
gosh,
you
know
I'm
breaking
my
computer.
What
is
all
this
red
red
words?
Oh,
my
gosh
I
feel
like
it's
all.
Breaking
I,
don't
know
what's
happening
so.
B
All
that's
happening
here
really
is
an
NPM
install
like
module
air
like
you
didn't
have
one,
and
this
is
what
happens,
and
we
see
this
every
day
all
the
time.
It's
not
a
big
deal
at
all,
but
if
you're,
first
of
all
not
used
to
working
your
terminal-
and
the
first
thing
you
see
are
red
and
yellow
flashing
warning
signals.
It's
pretty
terrifying.
I
wouldn't
want
to
continue
working
this
in
fear
that
I'm
breaking
and
corrupting
my
entire
system,
so
I
told
Ryan.
B
Don't
worry,
Ryan
you're,
not
breaking
anything
I'm
here
to
help
you
I
will
make
sure
that
you
don't
fail.
Trust
me
I
have
broken
everything
before,
like
I've
gotten
server
companies
to
pay
me
money
because
I
corrupted
my
startup
kernel
and
they
didn't
even
know
what
was
going
on
there.
So
it's
fine,
like
I've,
been
through
this,
we'll
get
through
this
together.
So.
A
B
B
It
wasn't
just
Ryan
who's.
Learning
from
me,
I
was
learning
a
lot
from
Ryan
as
well,
so
like
he
introduced
me
to
this
whole
world
of
animation
styles.
That
I
had
never
knew
existed
before,
and
this
is
one
of
my
favorites
that
I
like
to
point
out
and
share
to
people.
It's
called
liquid
animation
and
it
just
encompasses
the
entire
object
and
transforms
it
with
one
color,
it's
really
cool.
So
that
was
that's,
think
what
I
learned
and.
A
B
A
B
Got
to
use
Ryan,
as
my
guinea
pig
like
any
piece
of
software,
of
course,
is
going
to
be
bugs
like
any
process,
there's
bugs.
So
whenever
Ryan
came
upon
something
that
he
didn't
understand
or
had
to
ask
me
in
question
at
all
about
I
want
to
make
sure
that
it
was
taken.
Note
of
so
I
could
go
back
into
the
repo
and
change
it.
The
next
designer
that
worked
on
this
didn't
have
to
ask
me
the
same
question,
so
there
was
already
documented
for
them.
B
A
This
because
we
were
working
at
github,
we
began
to
just
include
everything
all
of
our
design
work
and
just
converse
in
this
place
where
we're
using
our
code
and
I
was
getting
excited
about
this
and
teaching
other
designers.
Other
people
were
starting
to
get
interested
in
what
we
were
doing.
It
was
just
so
contagious
and.
B
This
is
two
weeks
after
Ryan
used
to
get
for
the
first
time.
So
this
is
what
happens
when
you
don't
assume
that
designers
aren't
interested
in
using
it
as
their
own
personal
workflow
system.
Like
two
weeks.
That's
really
exciting.
We're
also
getting
messages
from
other
people.
So
this
is
one
of
the
favorite.
My
messages
I
perceived
it's
from
Britney,
who
was
another
designer
and
our
team,
and
she
takes
a
screenshot
of
her
screen
screenshot.
B
She
took
a
picture
on
her
cell
phone
and
texted
us,
and
it's
like
this
blank
page
and
says:
I
downloaded
unistart
environment
on
my
own
again
lol
and
add
an
SS
attribute
to
change
the
text.
Helvetica
hashtag
little
wins,
I'm,
freaking
out;
ok,
bye,
that's
so
awesome!
This
is
somebody
who
has
never
coded
before,
hasn't
really
been
immersed
in
this
world
of
using
code
to
create
visualizations
and
they're,
compiling
SAS
files
and
changing
variables.
So
she
coined
this
term
hash
tag,
little
winds
that
we
continue
to
use
throughout
this
process.
A
B
One
thing
that
we
see
these
days
is
a
lot
of
developers
go
p--,
designers,
very
high-strung,
and
they
tell
them.
You
need
to
learn
how
to
code.
If
you
don't
know
how
to
code,
then
you're
not
going
to
be
able
to
contribute
to
this
team,
and
that
is
extremely
damaging
because,
like
we
heard
earlier,
somebody
is
just
going
to
get
defensive.
If
you
tell
them,
they
have
to
do
something,
but
come
back
at
you
with
20
reasons
about
why
they
don't
need
to
do
it.
B
I'll
come
back
with
good
reasons
too
so
telling
a
designer
that
they
need
to
learn.
Code
is
just
going
to
make
them
defensive,
but
if
you
share
your
joy
and
excitement
for
that
medium
with
them,
it's
going
to
make
them
curious
and
when
a
designer
is
curious
about
code,
they'll
come
to
you
and
they'll.
Ask
you
and
that's
where
you
as
a
developer,
can
you
win
they're
asking
you
for
help.
They're
asked
me
to
set
their
environment
and
you
can
meld
them
and
get
them
to
help
you.
B
A
Curiosity
filled,
other
teams
filled
the
whole
studio,
so
people
were
messaging
me
think
you
have
a
moment.
Can
you
set
me
up
and
teach
me
the
stuff
and
because
we
had
that
lexicon
and
we
had
that
starter
environment
with
the
tutorial
and
explaining
what
CD
meant
and
what
the
terminal
was
and
what
things
are
doing?
It's
very
preliminary
now
now
that
I
look
at
it,
but
it's
so
essential
for
those
to
get
started
so.
B
B
That
was
great
for
passback
and
it's
understanding
what
the
history
the
project
was
so
a
great
thing
that
we
did
was
we
used
just
the
drag
and
drop
images
to
throw
up
inside
of
an
issue.
You
have
your
version,
you
have
your
entire
history.
You
can
see
where
something
has
progressed
throughout
that
issue
and
have
like
something
to
talk
about,
and
you
have
something
to
reference
right
above
the
checks
that
you're
discussing.
So
it
became
a
really
really
relevant
tool
for
us
and.
A
B
It's
super
versatile.
So,
yes,
we
use
this
for
research,
but
because
you
can
easily
just
add
pages
and
change
around
the
layout
of
your
wiki
organization.
It's
something
that
every
team
is
going
to
use
a
little
differently
and
that's
a
great
thing
kind
of
like
Java
Script,
maybe
have
a
great
thing
and.
A
Because
we
were
working
with
this
so
much
our
issues
became
some
monstrous.
There
was,
you
know,
150
issues
that
we
had
working
on
all
the
time.
So
we
created
a
label
system
based
off
of
the
discipline,
maybe
what
status
it
was.
So
whether
was
new
blocked
in
progress,
so
we
can
see
at
a
glance
what
is
happening
in
our
project
and.
B
To
help
with
that
label
system,
we
used
a
tool
called
waffle,
io
and
waffle
is
just
essentially
a
wrapper
over
github
issues,
so
it
creates
this
Trello,
like
Kanban
board,
esque
style
for
organizing
and
understanding
what
you
have
doing
on
your
project.
So
the
project
manager
can
go
in,
create
issues
with
a
GUI,
just
a
visual
interface
assigned
as
issues
to
people
give
them
labels.
You
can
see
the
entire
discussion
that's
going
on
within
this
beauty
of
waffle,
but
me
as
developer.
A
Because
our
team
was
growing
and
people
were
wanting
to
contribute
more
to
this
codebase,
we
had
to
create
contribution
guidelines.
So
why
not
include
emojis,
so
we
adopted
this
from
Adam.
Thank
you
guys
and
included
it
in
argument
messages
and
our
change
logs,
so
that
we
can
see
how
to
glance
for
that
next
release.
What
is
actually
being
pushed
to
that
release?
Okay,
I
see,
there's
updates,
there's
text
edits
and
you
know:
that's
it,
okay
cool,
so
you
can
really
quickly
without
much
hesitancy,
be
okay
with
that
polar
quest.
So.
B
Speaking
of
emojis,
how
did
our
project
go?
Well,
that's
the
current
state
of
our
emoji
project.
We
have
five
or
four
and
a
half
phases
done,
but
they're
really
good
phases.
So
it's
fine.
We
may
not
have
finished
this,
but
we
did
create
this
entire
system
out
of
it.
Just
just
out
of
them
want
to
try
something
new.
So
we
got
this
out
of
it
and
it's
the
starter
environment
that
several
teams
and
several
other
designers
within
our
group
and
outside
of
IBM
as
well,
have
used
and
adopted.
B
If
you
want
to
get
started
with
it,
it's
just
starter
unit.
I
am
shorten
the
URL,
it's
something
that
you
can
send
to
a
designer
someone
getting
started
in
coding
and
it
helps
them
with
this
entire
set
they
have
set
up,
get
is
install.
You
can
go
in
pull
their
files,
make
changes,
they
could
see
the
diff
and
see
where
they
can
really
adapt
their
code
to
improve
it.
So
it's
not
the
only
thing
out
there
there's
tons
of
things
out
there,
it's
just
what
worked
for
us
so.
A
We
encourage
you
guys
to
pair
up
with
the
developer
or
pair
up
with
the
designer
and
see
what
you
guys
can
create
and
try
to
learn
something
new
and,
most
importantly,
have
another
and
have
fun
with
it.
No
matter
what
the
result
was,
you
know,
as
you
can
see,
we
didn't
finish,
but
we
came
out
with
a
great
starter
environment.
Thank.