Space5:36 with Anwar Montasir
Used properly, white space reduces clutter, improves visual hierarchy, and keeps user attention focused on the most important content.
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 up