►
From YouTube: "Unboxing" the UI
Description
Boxes are prominent UI elements in GitLab, but are there better ways to present content that improves the overall experience? We think so. In this quick overview one of our designers, Jeremy Elder, walks through what it means to "unbox" the GitLab UI.
If you'd like to see how this is applied to different parts of the GitLab UI, give this a watch too https://youtu.be/aKbqBmXdIVQ.
A
Hello,
my
name
is
jeremy
elder.
I
am
a
staff
product
designer
on
gitlab's
ux
foundations,
team,
focusing
on
the
visual
design
of
git
lab,
as
well
as
pajamas
design
system,
and
this
is
just
a
little
primer
on
unboxing,
the
ui.
You
might
have
heard
this
come
up
before,
and
so
I
want
to
provide
a
little
bit
of
context.
Clarification
unboxing,
not
in
the
sense
of
opening
or
or
having
something
new
is
unboxing
in
the
sense
that
we
have
some
containers,
some
visual
elements
in
the
user
interface
that
contain
content.
A
A
A
Boxes
are
good
and
we'll
we'll
show
like
or
I'll
show
some
good
use
case
here
in
a
little
bit
and
and
focus
on
that,
but,
like
I
said,
we
love
boxes
right,
we
go
to
big
box
store,
we
bring
home
a
box
full
of
smaller
boxes,
only
to
assemble
another
box
to
probably
hold
other
boxes,
lots
of
containers.
You
get
the
idea.
A
A
A
It
starts
with
the
frame
of
the
device
you're
on
and
it
goes
into
that
viewport
and
then
into
a
browser
or
an
application,
and
then
there's
different
content
sections
in
there,
so
we
design
with
boxes
we'll
continue
to,
but
let's
leverage
them
a
little
better.
I
want
to
start
off
by
showing
some
misuse.
A
This
is
application,
examples
that
I
think
could
be
better.
They
could
be
improved,
so
misuse,
maybe
a
negative
connotation
here,
but
think
of
it
as
opportunities.
We
want
to
frame
it
that
way.
These
are
opportunities
that
we
have
in
front
of
us
to
update
and
unbox
the
ui.
So
three
things
I
want
to
cover
hierarchy,
content
layout
and
sectioning.
A
First
up
is
hierarchy.
One
of
the
main
misuses
of
boxes
I
see
today
in
the
product
is
using
it
to
establish
hierarchy
and
what
I
mean
by
that
is
there's
a
nesting
approach.
That
happens.
We
have
a
main
container,
there's
a
content
section
within
that
that
is
nested
to
help
indicate
hierarchy
that
oh,
this
is
part
of
this
object
and
then
another
layer,
often-
and
so
what
happens?
Is
we
end
up
with
hierarchy
conveyed
through
these
containers
and
because
of
that,
we
end
up
with
a
lot
of
wasted
space?
A
Not
only
are
we,
you
know
moving
that
content
in,
but
vertically
we
end
up
with
a
lot
more
scrolling
and
and
then
we
limit
what
happens
if
we
need
to
add
more
levels.
If
the
hierarchy
needs
to
go
deeper,
it
just
gets
messy
really
really
quick
and
I've
seen
that
before
from
a
ux
standpoint,
there's
no
common
edge
for
scan
ability
from
just
a
purely
reading
scanning.
What
happens?
Is
you
end
up,
indenting
and,
and
that
does
indicate
hierarchy
right?
A
It's
not
that
it
doesn't
indicate
hierarchy,
but
in
the
way
it
does
it
it's
at
the
cost
of
other
elements,
it's
at
the
cost
of
part
of
another
experience,
which
is
the
ability
to
scan
to
find
a
common
edge
to
establish
relationships,
and
so
that's
another
thing
that
happens
and
then.
Lastly,
this
is
part
of
a
ui
polish
effort,
and
there
is
just
so
much
visual
noise
from
distracting
borders,
these
borders
every
every
time,
there's
a
border
there.
A
It's
not
just
general
containers
that
blend
in
with
maybe
the
the
page
background.
These
are
actually
containers
that
have
borders,
I'm
not
showing
actual
ui.
Here
I
want
to
make
this
a
little
more
timeless
as
we
do
updates,
but
you
get
the
idea
here,
we're
using
boxes
within
boxes
to
create
columns
that
introduces
a
lot
of
wasted
space
between
the
columns
and
then
again,
more
visual
noise
from
distracting
borders.
A
Another
example
of
content
layout
is
that
once
something
starts
to
use
a
border,
it
makes
it
so
there's
like
a
precedence
where
everything
else
feels
like
it
should
be
contained
as
well
to
kind
of
separate
it
right.
If
it's
not
contained
it's
floating
out
here,
we
need
something
to
balance
it
to
create
those
common
edges,
and
so
it
creates
a
kind
of
a
false
precedence
that
that
feels
like
there's
a
need
for
everything
to
be
contained
and
it's
really
not
necessary
and
then
lastly
is
sectioning
and
what
happens
with
sectioning.
A
A
One
content
section
feels
more
prominent
between
another.
We
have,
you
know,
inconsistent
styles
of
containers
and
then,
when
you
have
a
container
a
box
or
content
at
a
very
base
level,
it
requires
even
more
emphasis
to
highlight
critical
content.
So
if
you're
going
to
highlight
an
error
state
or
a
danger
area,
it's
going
to
mean
that
not
only
are
you
updating
border
and
background,
but
potentially
type
size,
type,
color
and
other
attributes.
So
just
the
the
fact
that
it's
in
a
container
introduces
so
many
other
things.
A
All
right
so,
first
up
just
a
list
of
things
here.
These
are
not
comprehensive,
but
a
few
that
I'll
mention
white
space,
visual
weight,
proximity,
parallelism,
common
regions,
connections,
similarity
focal
point,
symmetry
a
lot
of
these
are
rooted
in
gestalt
principles
and
based
in
just
some
of
that
those
layout
practices.
So
I
won't
go
too
much
in
depth
here
with
those
but
know
that
that
is
the
thinking
kind
of
the
basis
for
how
I'm
approaching
this
and
viewing
a
solution
to
a
box
itself.
A
All
right
so
a
better
way
contain
complexity,
unbox
ubiquity
so
again
contain
complexity
and
unbox
ubiquity,
I'm
starting
here,
because
at
a
high
concept,
conceptual
level
thinking
about
what
is
the
content?
Is
this
a
ubiquitous?
Is
it
commonplace?
Is
it
more
basic?
Is
it
something
that
doesn't
require
a
container
it
where
there's
other
methods
to
establish
hierarchy
and
relationships,
or
is
it
very
complex
so
in
this
very
simple
wireframe?
A
There's
multiple
controls,
there's
multiple
rows
of
data,
there's
multiple
actions,
it's
more
complex
and
there's
an
opportunity
to
use
a
box
in
a
better
way
to
group
this
content.
This
is
probably
an
oversimplified
view,
but
if
we
start
here
complain
contain
complexity,
no
complaining
so
contain
complexity
and
unbox
ubiquity.
We
have
the
ability
to
start
to
frame
up
how
we're
going
to
approach
the
content
and
how
we
might
think
about
using
containers
or
other
visual
elements.
A
Other
principles
to
have
that
content
have
meaning
a
better
way
is
just
to
use
less
boxes,
while
leveraging
other
ways
to
create
hierarchy.
Like
I
mentioned
so
in
this
instance,
instead
of
nesting
container
within
container
box
within
a
box
use
things
like
non-distracting
separators
use,
color
shifts
in
the
background,
color
visual
weight
and
hierarchy
with
headings.
A
The
result
of
this
is
you
you
end
up
with
more
of
a
common
edge
for
scannability.
You
end
up
with
no
wasted
space,
so
we're
beginning
to
condense.
Things
increase
hierarchy
all
at
the
with
the
benefit
of
having
less
containers.
If
we
needed
to
emphasize
anything
else
in
here,
we
wouldn't
have
to
then
make
it
all.
These
other
attributes
stand
out
from
the
rest
of
the
content,
grouping,
white
space
and
parallelism.
A
So
in
this
white
space
is
separating
sections,
we
don't
need
an
extra
container
to
do
that,
to
define
those
borders
that
white
space
is
doing
that
for
us,
so
that
has
to
do
with
our
grouping.
It
has
to
do
with
parallel
parallelism
in
the
vertical
column
and
those
columns
itself.
There's
closer
proximity
between
the
items
within
to
establish
the
group
as
a
column.
I'm
not
saying
that
each
individual
item
here
has
to
be
unboxed
itself.
A
In
here
we
can
establish
common
regions,
but
also
using
patterns
like
focal
points
and
symmetry.
We
also
help
establish
similarities
and
differences,
and,
in
this
like
in
this
example,
you
can
see
a
common
region
would
be
navigation.
A
common
region
would
be
these,
this
grid
of
of
items
that
each
have
their
own
focal
point.
They
have
symmetry,
they
have
balance,
but
yet
they
have
some
flow
and
some
movement,
the
footer,
might
be
its
own
region.
A
It's
spaced
out
from
the
other
content,
and
so
in
this
regard,
we're
using
symmetry
we're
using
common
regions
focal
points
all
to
communicate,
that
there
are
relationships
and
content,
meaning
based
on
where
it's
placed
and
how
it's
used.
This
is
where
I'll
mention
grids.
Really
quick
grids
are
yes,
they're
box-like.
A
They
they
provide
the
ability
to
work
within
boxes,
but
I
think
grids
what
they
can
actually
afford.
Us
is
the
ability
to
understand
where
regions
are
and
I'm
not
going
to
get
into
like
12
point
grid
or
whatever
or
12
column.
I
don't.
I
don't
think
that
that
matters
as
much
as
actually
leveraging
it
so
that
you
can
establish
these
common
regions
and
relationships.
A
So
some
of
the
other
benefits
I
want
to
mention
really
quick.
These
are
added
benefits
to
the
visual
side
of
things
and
including
the
visual
side
effects.
So
white
split
white
space
excuse
me
replaces
border
and
padding.
So
it's
really
swapping
it's
not
that
excuse
me
that
we're
adding
white
space
and
creating
more
breathing
room
or
anything
like
that,
we're
actually
just
replacing
it
with
border
and
padding
so
with
a
condensed
ui,
we're
not
losing
that
condensed
nature
we're
just
replacing
the
attributes
that
allow
that
content
to
be
separated,
oftentimes,
it's
less
code.
A
If
we're
talking
about
multiple
containers
that
nest
you,
you
might
do
away
with
some
of
those
divs
and
making
it
easier
for
development
for
updating
for
design,
system-like
thinking
to
be
applied,
that's
more
responsive!
When
we
talk
about
spacing
and
condensing
all
of
a
sudden,
you
know
three
layers
nested,
you
know,
let's
say
it's
16
pixels,
so
you
know
whatever
that
is
you're
you're
in
it.
You
know
48
pixels,
deep
on
each
side
that
you're
losing
at
a
smaller
break
point.
A
That
means
a
lot
more
on
a
mobile
layout
than
it
might
at
the
larger
layout.
So,
by
limiting
this
we're
more
responsive,
we're
able
to
use
our
space
better
and
have
reflow
that
makes
sense,
there's
oftentimes,
better
semantics.
When
you
restructure
something
and
think
about
the
relationships,
maybe
it
should
be
coded
as
an
unordered
list.
Maybe
it
should
be
some
sort
of
a
group
or
have
other
semantic
benefits
that
isn't
just
boxes,
just
isn't
meaningless
divs,
if
you
will,
and
because
of
that
you
can
do
hierarchy.
A
Improved
aesthetics
mentioned
that
removing
all
of
the
extra
visual
clutter
created
by
borders
and
padding
that
that's
going
to
help
with
the
next
point
scan
ability
just
making
common
edges,
making
things
read
correctly
and
that
also
helps
bolster
hierarchy,
simplified
rules,
so
I
mentioned
thinking
about
containing
complexity
and
unboxing
ubiquity
the
ability
to
have
a
simple
framework
of
how
to
approach
this,
but
also
when
you're
building
things
out
in
design.
You
have
the
ability
to
to
not
know
like
okay.
This
is
two
boxes
deep.
A
A
Lastly,
less
needed
for
emphasis-
and
I
touched
on
that
a
bit-
but
once
you
add
those
extra
visual
attributes
of
border
and
background
on
a
container,
those
are
additional
items
that
have
to
be
overridden
later
to
force.
Another
element
to
have
more
emphasis
by
doing
away
with
some
of
those
attributes.
A
You
allow
less
needed
or
emphasis.
So
less
is
definitely
more
here
and
there
are
many
more
benefits
that
we
could
go
into.
So
here's
a
final
just
view
of
kind
of
really.
Obviously,
generic
wireframe
exploration
same
approach
right.
We
have
hierarchy,
but
it's
done
in
a
different
way
with
different
attributes.
We
have
columns,
but
it's
done
with
more
white
space
and
concentric
spacing,
and
we
have
common
regions
and
symmetry
etc.
A
So
quick
rundown
on
the
unboxing
effort,
thank
you
to
all
the
photographers
using
unsplash.
So
I
could
borrow
and
use
your
photography
for
this
presentation
and
mr
box
says.
Thank
you
as
well,
although
he's
a
little
a
little
unhappy,
but
thanks
for
your
time,
if
you
have
any
questions,
drop
them
in
the
video
hit
us
up
on
slack
or
in
an
issue
in
gitlab.
A
Also,
I'm
going
to
link
to
another
video
that
I
just
recorded
earlier
this
week
with
a
ui
redesign
session
with
one
of
our
other
senior
product
designers,
amelia
bowerly,
focusing
on
different
parts
of
the
gitlab
ui
in
specific,
and
we
discuss
unboxing
there
and
have
some
examples
of
how
that
happens
in
the
actual
git
web
ui.
So
I
encourage
you
to
watch
that
as
well.
I
appreciate
your
time.