►
From YouTube: Design for Non-Designers - CodeConf 2016
Description
Presented by Tracy Osborn
Designing, when you are a programmer, can be super intimidating. This talk will highlight the best ways to improve your design and UX skills so you can create an interfaces that are usable and at least semi-attractive without hiring a designer — guaranteed no designer-y jargon.
About CodeConf
CodeConf improves the software community by providing a forum for thought-provoking talks and forging social connections. The fourth installment of the CodeConf series took place in Hollywood in 2016. This year's event focused on systems engineering projects, practices, and programs in the open source community.
For more information on this year's CodeConf, go to:
https://codeconf.com/
A
Yeah
hi
everyone
I'm
Tracy.
Thank
you
so
much
for
having
me
I'm
going
to
be
throwing
a
lot
information
at
you.
So
that's
my
twitter,
username,
not
lime,
darling
and
I'll
be
tweeting
out
some
of
the
links
and
resources
that
I
referenced
in
this
talk.
Kids
only
have
20
minutes
and
a
lot
information
to
go
over.
A
So
a
little
bit
about
me,
my
journey,
my
real,
like
relevant
journey
kind
of
started
about
seven
years
ago,
I'm,
a
designer
I,
have
a
background
in
design
with
an
art
degree
and
didn't
know
how
to
code,
but
I
had
this
idea
for
a
website.
I
wanted
to
build
long
story,
short
taught
myself
how
to
program.
A
Python,
Django
I
launched
wedding,
lovely
and
the
last
seven
years
up
until
a
couple
months
ago
it
was
my
full-time
job
and
as
I
learned,
how
to
program
and
as
I
built
the
site
up
did
all
the
design
and
development
from
the
site.
I
looked
at
the
state
of
programming
tutorials
and
as
I
learned,
more
kinda
was
like.
A
So
this
is
how
a
web
app
is
the
book
series
that
I
wrote
about
a
year
and
a
half
ago,
and
it
teaches
basically
programming
for
designers
and
it's
been
a
really
wonderful
project
to
work
on
I
really
wanted
to
help
more
designers,
take
the
path
that
I
did
and
learn.
Programming
and,
as
I've
been
working
on
this
book
series
I've
in
working
with
teaching
programming
for
designers,
I
thought
a
lot
also
about
how
can
I
teach
design
to
programmers,
because
I'm
really
enthusiastic
about
helping
more
people
become
more
disciplinary
or
help
more
people.
A
A
Now,
when
I
talk,
design
I
don't
mean
something
about.
This
is
my
biggest
pet
peeve
and
beginner
design
talks,
and
someone
goes
over
the
golden
ratio
to
not
fantastic
anything
to
do
which
beginner
in
a
beginner
design
I'm
not
going
to
talk
about
the
pieces
and
parts
of
typography,
because
I
was
ridiculous
and
for
some
reason
again
all
these
beginner
design
book
I'll
start
talking
about
the
parts
of
typography
I
wanted
to
help.
You
create
better,
more
effective
design.
So
it's
like
the
first
step
into
doing
design
yourself.
A
A
So,
first,
the
grid,
now
you
probably
all
heard
about
the
grid.
A
grid
is
essentially
just
lining
things
up
because
when
things
are
misaligned,
even
like
a
couple
pixels
or
so
that's
a
site
like
that
adds
a
little
bit
of
clutter
to
your
design.
There's
always
that
story
about
the
designer
who
works
developer
designer
gives
the
developer
a
mock-up
and
does
the
developer
implements
that
mock-up?
But
the
designer
comes
back
and
is
like
hey,
that's
like
five
pixels
to
the
left.
It's
supposed
to
be
applying
to
up.
A
A
So
you
know
I,
love,
bootstrap,
I,
think
the
top
is
a
great
resource,
but
this
job
comes
with
a
grid,
and
it
just
gives
you
an
easy
platform
in
order
to
add
it
grades,
whatever
you're
designing
so
back
to
this
little
widget.
If
we
just
normalize
the
vertical
lines
in
this
widget
lining
everything
up,
it's
already
looking
a
little
bit
less
cluttering
a
little
bit
better.
A
So
next
up
color,
so
the
big
high-level
color
put
principles
like
keeping
your
color
complementary
I'll
get
into
that
a
second,
but
in
really
a
good
rule
of
thumb
and
she's,
mostly
neutrals
and
then
one
brighter
color
for
important
bit.
Now.
Color
is
like
this
huge
topic
and
there's
like
so
much
I
can
say
about
this.
I
personally
took
the
entire
quarter
on
color
theory
and
art
school.
That's
ridiculous,
but
there's
a
lot
of
good
resources.
A
A
So
if
you
take
that
little
widget
and
you
just
start
grabbing
some
color
palettes
and
applying
it
and
seeing
what
works
you
know-
and
sometimes
they
don't
work,
you
can
try
different
combinations,
start
working
through
some
color
combinations
using
these
color
palettes
on
a
site
and
come
up
with
something
that
works
pretty
well
for
you,
you
don't
have
to
create
a
color
palette
from
scratch.
You
use
color
color
lovers
to
figure
out
what
color
palettes
could
work
for
your
site
rather
than
starting
from
scratch,
because
you
only
want
to
start
from
scratch.
That's
ridiculous!
A
So
next
up
fonts
again
with
a
big
overarching
principles
generally
good
rule
of
thumb,
is
to
keep
the
number
of
fonts
low
per
website,
so
probably
like
two
fonts
per
website
and
use
fancy
or
display
fonts
sparingly
and
by
that
I
mean
pretty
much
every
font.
In
the
background
of
this
there's
like
cluttery
fonts,
it's
easier
and
better
as
a
rule
of
thumb
to
work
with
cleaner
fonts,
because
I'll
make
your
web
designs
or
whatever
your
design.
A
It
look
cleaner
and
if
you
needed
some
more
differentiation
in
your
text,
you
can
add
italics
and
folding
and
transforms,
but
generally
two
fonts
per
design
is
recommended.
Again,
though,
what's
there
with
some
shortcuts,
so
instead
of
say
going
to
google
fonts
and
scrolling
through,
like
all
whatever
200
google
fonts,
there
are
trying
to
figure
out.
A
What's
the
best
thing
for
your
project,
there's
a
lot
of
sites
out
there
like
beautiful
web
type
and
type
wolf
that
curate
the
top
free,
google,
fonts
and
there's
sites
like
this
for
Typekit
and
other
fonts
resources,
and
it's
easier
to
go
onto
here
and
see
what
other
people
are
saying
are
the
best
fonts
and
ones
they
recommend
to
use.
So,
instead
of,
like
you
know,
being
overwhelmed
by
choice
by
going
to
google
fonts,
you
can
go
on
to
these
sites
and
pick
something
out
that
works
for
you.
So
back
to
the
widget.
A
Now
it's
just
two
different
fonts,
a
serif
in
a
sans
serif,
which
is
another
conversation
essentially
two
different
fonts
there's
some
differentiation.
In
terms
of
you
know
there
are
some
italics,
the
download
buttons
all
caps
now
the
form,
what
form
is
lower
case,
but
essentially
it's
looking
a
little
bit
cleaner
by
having
just
two
fonts
as
compared
to
what
it
was
before.
A
Last
but
not
least,
white
space
white
space
is
the
ultimate
clutter.
Reducer.
If
you
feel
like
you,
have
a
lot
of
clutter.
When
are
we
designing,
try
adding
some
white
space
and
see
what
happens
so,
for
example,
after
news
it
I
always
laugh
when
I
see
like
every
few
months
or
someone
who
says
I'd
redesign
hacker
news,
and
it
goes
on
Hacker
News,
of
course,
and
every
single
time
they
have
like
a
mock-up
and
one
of
the
biggest
things
that
they
do.
A
Is
they
add
more
white
space,
designers,
hate
hacker
news
and
how
cutter
rated,
but
for
another
example
of
white
space.
You
look
at
the
New
York
Times
redesign,
and
these
are
really
similar
to
each
other
before
words
on
the
left
and
the
actors
on
the
right,
and
you
might
notice
that
there
at
the
right
is
a
little
bit
less
lottery
and
one
of
the
biggest
things
that
they
did
was
simply
by
added
a
little
bit
more
white
space
in
between
the
columns
and
white
spaces
really
is
a
huge
trend.
A
Right
now
I
took
I
went
to
when
I
was
like
website
collection
sites.
I
took
a
random
screenshot.
Every
one
of
them
has
like
a
guru,
the
white
space.
So
it's
a
really
big
trend,
which
kind
of
helps
that
help.
You
out,
if
you're,
adding
it
to
your
site,
you
kind
of
hearing
the
trends,
but
that's
just
the
trend.
This
also
can
help
your
site
to
form
better.
So,
for
example,
in
this,
in
this
test,
this
site
added
some
more
spacing
in
between
their
tables.
A
In
terms
of
vertical
spacing,
and
by
doing
this
they
had
a
20
percent
improvement
and
engagement.
5
percent
boost
in
product
added
cart
and
at
33
percent
improvement
in
customers
continuing
on
through
purchase.
So
white
space
is
not
just
the
trends.
It's
not
just
you
know,
go
a
lift
nicer,
but
it
actually
can
impact
the
bottom
line
of
whatever
you're
designing
so
back
to
the
little
widget
add
a
little
more
white
space
around
the
edges.
A
We
also
normalize
the
white
space
in
between
the
individual
elements
inside
this
on
little
widget,
there's
more
white
space,
also
added
in
between
interval
lines
of
the
content
and
the
headline,
so
looking
a
little
bit
cleaner
and
a
little
bit
easier,
a
little
bit
easier
on
the
eyes.
So
in
terms
of
like
just
the
visual
parts
of
the
website,
the
biggest
thing
that
you
can
just
focus
on
to
make
a
really
big
improvement
is
simply
to
reduce
visual
clutter.
A
A
So
you
know,
digital
design
is
great,
but
the
main
thing
actually
for
design
is
actually
user
experiences
how
the
people
were
using
whatever
you're
designing.
So
whenever
you're
designing
something
whether
it's
a
widget
a
website,
a
blog,
you
know
homepage
landing
page,
try
to
think
about
what
you
want.
A
Your
customers,
your
users,
the
people
visiting
whatever
you're
designing,
to
do
and
make
sure
that
action
is
easy
to
be
seen
and
used,
and
that's
why,
when
you
see
widgets
or
home
pages
and
not
that's
why
the
buttons
for
actions
are
usually
brighter
easier
to
find
because
it
makes
them
like
super
clickable.
You've
seen
a
lot
of
banners
like
my
website
here
and
that's
why
the
button
for
by
the
books,
which
is
like
definitely
what
I
want
people
to
do
in
the
coach
on
your
website.
A
A
This
is
the
wealthfront
engineering
blog
and
you
can
argue
that
they
have
this
engineering
blog,
so
they
can
bring
more
people
to
their
sites
and
hopefully
hire
more
engineers,
and
that's
why
the
widget
in
the
bottom
right
is
bright,
green,
it's
visible,
easy
to
see
easy
to
click
on
so
really
quickly.
In
the
section,
it's
important
to
pay
attention
your
goals
and
make
them
easy
to
find
and
use.
I
love
analytics.
A
Take
a
look
at
like
how
well
things
are
performing
all
right
now:
click
or
go
back
to
clutter
and
talk
a
little
bit
about
content
as
I
find
a
lot
of
people
who
are
new
to
design
they
build
their
website
or
what
not
have
a
tendency
to
write
way
too
much
people
on
the
web,
don't
read
they
skim
and
big
paragraphs
are
intimidating
and
also
a
sign
of
clutter.
So
if
you
had
a
paragraph
that
you
can't,
you
know
make
smaller
make
it
more
concise,
it
can
help
to
break
into
bullets.
A
A
A
This
is
technically
what
my
books
are
about:
they're,
an
introduction
to
building
web
apps
using
Python
and
Django,
but
no
one
wants.
This
is
not
enticing
whatsoever.
It's
much
better
to
have
something
like
learn
how
to
build
a
web
app,
because
that's
actually
what
some
incoming
a
website
might
want
to
do,
and
they
can
say.
Oh
that's,
indeed,
what
I
want
to
do.
Thank
you,
and
this
isn't
just
like
a
personal
thing.
A
So
we're
back
to
the
widget,
and
now
you
might
say,
like
oh
hey,
that
seems
like
a
very
long
and
wordy
title
and
the
content
is
pretty
long
and
we
can
shorten
that
and
make
that
a
little
easier
to
read
in
skins.
So,
instead
of
that
long
parrot-like
long
headline,
we
turn
it
to
something.
A
little
more
natural,
a
little
bit
more
human
by
saying,
learn
how
to
learn
how
to
make
web
apps
by
the
content
will
shorten
also
have
some
bolding
omit
make
a
little
easier
to
skim.
A
The
forum
has
a
little
nice,
more
natural
language
than
just
saying.
Email
address,
says:
add
your
email
here,
and
the
button
itself
is
a
little
bit
more
natural
and
friendly,
and
so
just
directly
saying
download.
You
can
say:
hey,
send
me
free
info,
so
talking
about
these
principles.
We've
gone
from
here
to
here,
so
you
can
kind
of
see
how
everything
ties
together
to
help
this
little
widget
be
better
designed
and
easier
to
use.
A
So
a
little
bit
about
philosophy.
One
thing
to
really
remember
is
that
if
you
are
going
to
adhere,
you
have
a
project
in
your
bag,
you're
going
to
design
a
website
or
widget
whatnot.
You
sit
down,
wipe
everything
off
your
desk,
pull
out
a
white
piece
of
paper.
You
know
turn
off
your
cell
phone
and
it's
try
to
start
designing
or
creating
ideas
from
scratch.
That's
a
lot
like
trying
to
program
without
the
use
of
Google
or
Stack
Overflow.
This
is
not
how
it
works.
A
Trying
to
design
from
scratch
without
inspiration
is
like
severely
hindering
yourself.
Designers
everywhere
use
inspiration.
My
books
would
not
exist
without
the
amazing.
A
book
of
art
books,
I,
took
a
whole
bunch
of
inspiration
from
these
books.
I
did
not
steal
anything,
but
I
was
heavily
inspired
by
the
great
work
that
they
did.
So,
whenever
you're
designing
so
you're
building
a
website,
don't
look
for
other
designs,
see
what
they're
doing
well
and
try
to
be
inspired
and
implement
those
ideas
into
your
whatever
you're
designing.
A
There's
a
lot
of
sites
out
there
that
just
collect
great
web
designs
like
site,
inspire
I'm,
ash
style.css
mania
and
when
you
see
a
site
that
you
think
is
do
is
doing
a
great
job
like
say
this
really
awesome
flag
homepage,
try
to
pick
out
what
they're
doing
well
and
if
you
know,
if
you
look
at
a
website-
and
you
say
okay,
this
is
what
it's
doing.
Well,
it's
going
to
insert
your
into
your
brain
and
kind
of
train
your
design
eyes,
so
you
can
have
educated
up
later.
A
For
example,
might
look
at
this
website
design
and
say:
hey
there's
a
lot
of
white
space
here
makes
it
feel
very
open.
The
paragraph
underneath
the
headline
has
some
bolded
parts
which
helps
us
skin.
The
for
skimming
highlights
the
important
parts
of
that
paragraph.
The
form
has
a
dark
background
which
catches
the
eye.
The
button
has
a
blue
or
excuse
me,
a
green,
it's
much
brighter.
That's
also
catches.
A
The
eye
free
is
bolded,
which
is
always
a
good
idea,
because
I
guess
people
excited
the
headline
has
a
little
squigglies
under
it,
which
is
something
you
don't
really
see.
So
it's
like
immediately
also
eye
catching.
So
when
you
see
a
design
that
you
like,
or
your
competitors
site,
pick
out
what
they're
doing
well
and
that's
going
to
help
you
train
a
design
life
or
later.
A
What
has
happened
until
the
magical
moment
where
I
implement
something
and
it
comes
together
or
at
least
halfway
comes
together,
is
we
better
than
before?
So
if
you're
working
on
design
and
you're
you're
thinking
to
yourself,
oh
my
gosh
I'm,
a
terrible
designer,
nothing
is
working
you're,
not
a
bad
designer
you're,
simply
a
designer
welcome
to
the
club.
So
this
is
only
the
starting
point.
I
only
had
20
minutes
up
here
and
there's
so
much
more
I
could
say
when
it
comes
to
design.
A
What's
going
on
your
website
or
widget
or
whatnot,
and
see
if
you
can
like
make
changes
that
help
improve
your
conversion
rate,
when
your
aren't
working
on
content,
resist
the
urge
to
overdo
your
content,
keep
your
content,
simple,
friendly
to
the
point
and
practice
practice
practice:
you're
not
going
to
come
a
good
designer
overnight,
but
by
taking
a
small
step
and
then
taking
out
our
smallest
advant
a
in
their
small
size.
The
more
you
practice,
the
better
I
designed
you're
going
to
be.
You
can't
be
kind
of
an
awesome
developer
overnight.
A
Same
thing
was
designed,
but
I
hope
that
you
feel
more
confident
and
doing
some
design
work
on
your
own
now,
so
this
is
going
to
be
hopefully
someday.
My
third
book
that
I
write
and
if
you're
interested
in
hell
web
design,
you
can
go
to
a
hello
web,
calm,
flash
webs
design,
and
that
is
a
dedicated
list
for
when
I,
hopefully,
by
the
end
this
year,
finally
release
this
book.