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
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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