Layouts and Spacing Principles

# CHAPTER 6

Layouts and Spacing Principles #

1. Introduction #

A UI Designer does not place a button "somewhere near the middle" because it "looks right." UI Design is not a subjective art; it is an objective, mathematical science. When you look at a highly premium SaaS dashboard or an Apple product page, it feels incredibly clean, professional, and trustworthy. That feeling is not created by fancy colors; it is created by rigorous, invisible mathematics. In this chapter, we will master the hidden skeleton of UI design: Layouts and Spacing. We will overlay mathematical Column Grids onto our frames, enforce the industry-standard 8-Point Spacing System, and weaponize White Space to naturally guide the user's eye.

2. Learning Objectives #

By the end of this chapter, you will be able to:

• Apply Figma's Layout Grids (Columns and Rows) to device Frames.

• Understand the mathematical logic behind the 8-Point Grid System.

• Define "White Space" (Negative Space) and its role in reducing cognitive load.

• Differentiate between Margins and Gutters in a column layout.

• Organize messy UI elements into a mathematically perfect structure.

3. The 8-Point Grid System #

Before we place anything on the screen, we must establish a measurement system. The industry standard for UI design is the 8-Point Grid System. *The Rule:* Every single dimension, margin, and padding in your design must be a multiple of 8.

• Good Spacing: 8px, 16px, 24px, 32px, 48px, 64px.

• Bad Spacing: 11px, 17px, 25px.

*Why 8?* Modern screens render at different pixel densities (1x, 2x, 3x for Retina displays). If you use an odd number like 15px, when the screen scales it up by 1.5x, it becomes 22.5px. The computer cannot render "half a pixel," so the edge becomes blurry! Because 8 is an even number, it scales perfectly mathematically across every device on Earth.

4. Figma Layout Grids (Columns) #

To align elements perfectly, you don't guess; you use a Column Grid.

1. 1. Select your Frame (e.g., Desktop or iPhone).

1. 2. Look at the Right Properties panel. Click the + next to Layout Grid.

1. 3. It defaults to a tiny 10px graph paper grid. Click the grid icon to edit it.

1. 4. Change the dropdown from "Grid" to "Columns".

• *Desktop Standard:* 12 Columns.

• *Mobile Standard:* 4 Columns.

1. 5. Set the Margin (the empty space on the far left and right edges of the screen) to 24px or 32px.

1. 6. Set the Gutter (the empty space *between* the red columns) to 16px or 24px.

*How to use it:* When you draw a UI Card, you snap the edges of the card perfectly to the edges of the red columns. Your design instantly looks perfectly structured!

5. White Space (Negative Space) #

White space is the empty space between UI elements. It does not have to be literally "white"; it just means "empty." Beginners are terrified of empty space. They try to cram a logo, 5 buttons, and a massive paragraph into a tiny corner of the screen. This causes massive "cognitive overload" for the user. *The Rule:* Let the design breathe. If you want a user to pay attention to a specific button, do not surround it with more text. Surround it with 64px of pure, empty White Space. The emptiness mathematically forces the human eye directly to the button.

6. The Law of Proximity #

Spacing is how designers communicate relationships without drawing physical lines. The Law of Proximity states that objects placed close together are perceived as belonging to the same group.

• *Example:* You have a Title, a Subtitle, and a Paragraph.

• Space between Title and Subtitle: 8px (They are tightly related).

• Space between Subtitle and Paragraph: 16px (Slightly separated).

• Space between the Paragraph and the next section of the website: 64px (Completely unrelated).

7. Diagrams/Visual Suggestions #

*Visual Concept: The 12-Column Desktop Grid* Provide a screenshot of a standard E-commerce website design.

• Overlay a translucent red 12-column Layout Grid.

• Show how the "Hero Image" snaps perfectly across 6 columns (50% width).

• Show how the "Product Details" text snaps perfectly across the remaining 6 columns.

• Point out the 24px "Gutter" separating the image from the text.

This visual proves that web design is not drawing; it is placing blocks into a predefined mathematical grid.

8. Best Practices #

• Turning Grids On and Off: Designing with massive red columns on your screen can be visually distracting when you are trying to pick colors. You don't have to delete the grid! Professional designers constantly toggle the grid visibility on and off. The keyboard shortcut in Figma to hide/show Layout Grids is Ctrl + Shift + 4 (Windows/Mac).

9. Common Mistakes #

• Inconsistent Spacing (The 1px nudge): A junior designer places a title 17px away from a paragraph, an image 21px away from a button, and a logo 14px away from the edge. The developer coding the website will pull their hair out trying to program these random numbers. *The Fix:* Strictly enforce the 8-point system. Title is 16px away. Image is 24px away. Logo is 16px away. The developer will love you.

10. Mini Project: Build a Grid-Aligned Pricing Section #

Let's build a structured layout.

1. 1. Press F. Select Desktop (1440 x 1024).

1. 2. In the Right panel, click + on Layout Grid. Change it to Columns. Count: 12, Margin: 120, Gutter: 24. (You now have a professional web grid!).

1. 3. Press R (Rectangle). Draw a box. Snap its left edge to Column 1, and its right edge to Column 4. (This is Pricing Card 1).

1. 4. Draw another box. Snap it from Column 5 to Column 8. (Pricing Card 2).

1. 5. Draw a third box. Snap it from Column 9 to Column 12. (Pricing Card 3).

1. 6. Press Ctrl + Shift + 4 to hide the red grid.

1. 7. Look at your canvas. You have three perfectly spaced, mathematically aligned pricing cards that look like a professional SaaS website!

11. Practice Exercises #

1. 1. Define the 8-Point Grid System. Why is it mathematically critical for ensuring designs scale properly on Retina (high-density) mobile displays?

1. 2. Explain the psychological concept of "The Law of Proximity" in UI design. How does manipulating the physical pixel distance between a Title and a Paragraph communicate meaning to the user?

12. MCQs with Answers #

13. Interview Questions #

• Q: A client complains that your dashboard design looks "cluttered and overwhelming," even though there aren't many elements on the screen. How can you strategically utilize White Space (Negative Space) to fix this without deleting any necessary information?

• Q: Explain the mechanical difference between a Margin and a Gutter when configuring a 12-Column Layout Grid for a Desktop website design.

• Q: Why do UI Designers heavily rely on 12-Column grids for desktop websites rather than 10-Column grids? *(Hint: Think about math and divisibility: 12 can be divided evenly by 2, 3, 4, and 6, making it vastly superior for creating responsive halves, thirds, and quarters).*

14. FAQs #

Q: What if I need a space smaller than 8px? Is 4px allowed? A: Yes! While the 8-point system is the standard, many designers use a 4-point baseline grid for extremely tight, micro-level spacing (like the space between a tiny icon and the word next to it inside a small button). Using 4px or 12px is perfectly acceptable, as long as it is an even number and you are consistent!

15. Summary #

In Chapter 6, we evolved from drawing random shapes to architecting professional layouts. We adopted the rigorous mathematics of the 8-Point Grid System, ensuring our interfaces will scale flawlessly across any physical screen density. We overlaid Column Grids onto our frames, providing an invisible skeleton to snap our cards and images into perfect alignment. Crucially, we embraced the emptiness of White Space, utilizing the Law of Proximity to group related information, reducing cognitive overload and transforming chaotic screens into clean, premium, highly readable digital environments.

16. Next Chapter Recommendation #

We know how to align boxes. Before we spend 10 hours filling those boxes with beautiful colors and typography, we need to map out the application's basic structure quickly. Proceed to Chapter 7: Wireframing Basics.