Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Used properly, white space reduces clutter, improves visual hierarchy, and keeps user attention focused on the most important content.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Used properly, white space reduces
clutter, improves visual hierarchy,
0:00
and keeps user attention focused
on the most important content.
0:06
Layouts with a generous white
space feel more professional and
0:12
often more luxurious than crowded designs.
0:17
If you've started exploring design
system documentation on your own,
0:21
you might be wondering, hmm, if space is so
0:25
important, why is it absent from
a lot of design system documentation?
0:28
Here's the style guide for
Marvel app, for example.
0:34
This guide is pretty minimal.
0:37
And while there are categories for
typography and
0:39
color scheme, there's nothing about space.
0:43
Even the section on typography
lacks notes on line height, so
0:47
designers are left on their own
in determining vertical rhythm.
0:51
The Adobe's Spectrum documentation is
considerably more robust than Marvel App's
0:56
design system, but there's still
no distinct category for space.
1:02
Line height is documented
in the typography category.
1:08
And there are notes underneath line height
about how to apply margins to body copy,
1:14
but Spectrum lacks
universal spacing rules.
1:19
Because space isn't a tangible
design element, like color or
1:24
typography, it's a challenge to document.
1:28
However, don't forget that one of
the reasons design systems exist is to
1:32
optimize the designer developer
handoff by creating design tokens,
1:37
which typically appear as snippets of
code easily implemented by developers.
1:43
For designers to prepare
useful spacing design tokens,
1:49
they need to be familiar
with the CSS box model.
1:53
I'm reviewing the structure
of a web layout
1:58
using the element inspector in Chrome.
2:01
If you're unfamiliar with
this browser feature,
2:04
check the link in the teacher's notes.
2:07
Even if you don't write code,
the inspector is a useful way to explore
2:09
how web pages are built and
how different elements work in a layout.
2:14
These numbers represent the width and
height of the content itself.
2:20
This content could be anything,
text, an image, a video player.
2:25
The three CSS properties
surrounding the content
2:30
are included in the CSS box model,
padding, border, and margin.
2:34
Border should be self-explanatory, but
2:40
what's the difference between padding and
margin?
2:43
Padding is the space in between
the content and the border.
2:46
Whereas margin is the space
outside the border,
2:50
separating this element from others.
2:54
Knowing the parts of the box model and
the difference between padding and
2:58
margin allows the designer to
speak the developer's language
3:02
when communicating space
requirements in a design system.
3:07
In Shopify's Polaris design system,
3:12
spacing units are calculated
in multiples of four.
3:15
You'll find four pixels a pretty
common measurement used in spacing
3:19
guidelines by Sprout Social,
the Morningstar Design System,
3:24
and the United States Web Design System,
3:29
to name a few that can be
found on Design Systems Repo.
3:32
Four pixels as a spacing basis
is an intentional choice.
3:37
Most common device screen
resolutions are divisible by four.
3:42
And using an even number rather than, say,
3:47
five makes it easier to translate
your design to a higher
3:51
density screen with a 1.5x,
2x, or even 3x display.
3:56
To learn more about pixel densities, I've
included a link in the teacher's notes.
4:02
In this sample web form,
there are four pixels of vertical margin
4:09
between the label title and
the corresponding input.
4:14
The input text has eight pixels of
vertical padding inside the border.
4:18
Horizontally, each input has
12 pixels of padding and
4:25
16 pixels of margin separating the input
from the edge of the container element.
4:30
Polaris also specifies using increments
of four pixels to determine line height.
4:37
You might sometimes see rules for
4:43
line height found in the space category,
as Polaris has done.
4:45
More commonly, line height is specified
in the rules dictating typography,
4:51
and spacing guidelines strictly
determine margin and padding.
4:56
The United States Web Design System uses
multiples of four as spacing unit tokens
5:01
to separate elements, while keeping line
height within the typesetting guidelines.
5:07
Some design systems are more
comprehensive than others.
5:17
But layouts guided by design systems
with spacing guidelines have a more
5:21
pleasing vertical rhythm,
body copy that's easier to scan for
5:26
key information, and
more visual consistency overall.
5:31
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up