Slide 1
Slide 1 text
Hey bro, think about the meaning of margins before you implement the UI!
Slide 2
Slide 2 text
I'm Ryomm. I'm developing my route for iOS.
Slide 3
Slide 3 text
If you have a screen design like this, how would you implement it?
Slide 4
Slide 4 text
This is the kind of code I used to see quite often before.
Slide 5
Slide 5 text
"Hey, seriously!? Do you even fucking understand the meaning of margins!?"
Even Ryommcat was so surprised. All I can do is give a wry smile.*
Slide 6
Slide 6 text
Here’s what I want to share today.
*Margins are not just empty spaces—they are intentionally used blank areas!*
To understand the meaning of margins, you first need some basic knowledge of cognitive psychology, so I’ll explain briefly.
Slide 7
Slide 7 text
One of the core concepts in cognitive psychology is Gestalt psychology.
Gestalt psychology is based on the fundamental idea that "when people perceive things, they tend to see them not as individual parts, but as a unified whole (a "Gestalt")."
Slide 8
Slide 8 text
For example, if there is a picture of an apple, recognizing it as an "apple" rather than just a collection of dots and lines is what this refers to.
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
And in Gestalt psychology, there is a principle called the "the law of Prägnanz" which describes a phenomenon in human perception grouping.
Let me introduce the four main factors.
First, there is the "Law of proximity".
Objects that are close to each other tend to be perceived as a group.
Slide 11
Slide 11 text
Second, the "Law of symmetry"
Elements that are visually enclosed tend to be perceived as a group.
Slide 12
Slide 12 text
These brackets are evenly spaced, but the law of symmetry has a stronger effect than the law of proximity.
Slide 13
Slide 13 text
Brackets that are closed together are perceived as a group, while those that are not closed are harder to perceive as a group.
Slide 14
Slide 14 text
Thirdly, there is the "Law of similarity".
Elements with similar attributes tend to be grouped together.
Slide 15
Slide 15 text
It's easy to perceive the items as alternating pairs of black-and-white and colored ones, but seeing them as alternating pairs of color and black-and-white, or black-and-white and color, feels a bit unnatural.
Slide 16
Slide 16 text
Fourth, "Law of closure"
Elements that form a smooth, continuous curve tend to be perceived as a group. For example, in this illustration, people are likely to recognize it as "two circles," rather than as "two incomplete circles and one rugby ball shape."
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
The law of Prägnanz, which allows us to perceive these groupings, is also applied in UI design to organize information into chunks and make it easier to recognize.
Slide 19
Slide 19 text
Let's take a look at this screen from my route as an example.
Slide 20
Slide 20 text
The factors related to proximity seem to be around here.
You can see that items placed close to each other represent related information.
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Next, the factors that seem to be the factors related to symmetry .
By enclosing the elements in a rectangle, the items inside appear to be grouped together as one.
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
Next, these seem to be the factors related to similarity.
Because they have the same shape, you can perceive them as a single group.
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
Now that you all know about the law of prägnanz, you should be able to see groups like these in this screen.
So, what do you think is important in UI design that makes information easy to recognize?
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Yes, that's margin!
Slide 29
Slide 29 text
Margins serve to separate elements and create groups, making information easier to recognize.
Slide 30
Slide 30 text
*Margins are not just empty space; they are intentionally used blank areas.*
You understand the meaning of the statement at the beginning now, right?
When a wide margin is given, it indicates that the items belong to different groups, and when margins are evenly distributed, it means those elements are of equal importance or information.
Slide 31
Slide 31 text
By the way, there are three ways to specify margins in SwiftUI: spacing in elements like VStack, padding, and Spacer. Let's consider how to use each of these based on the meaning of margins.
Slide 32
Slide 32 text
For example, if these elements have a title-content relationship, the two pieces of information are related and should be grouped together.
Slide 33
Slide 33 text
With that in mind, you can see that they should be treated as a single unit by enclosing them in a VStack.
Slide 34
Slide 34 text
The same applies even if the number of elements increases.
Title A and Content A form one group, and Title B and Content B form another group.
If these two groups have the same level of information granularity, you should wrap them in a VStack and give them uniform spacing.
Slide 35
Slide 35 text
Let’s consider what happens when there are even more content elements.
Can you see that the size of the margins represents the grouping of each set of elements?
- The margin between the title and the content is always 8pt, so if you see an 8pt margin, you can recognize that it’s between a title and its content.
- The outer VStack consistently applies a 20pt margin, so if there’s a 20pt margin, you can recognize that it indicates a change of section.
- Each content element is given a uniform 4pt margin. No matter how many content elements are added, if they are separated by 4pt, you can recognize that they belong to the content of Title B.
In this way, you should use the spacing property of VStack or HStack to create whitespace that expresses the grouping of information, and group information appropriately.
Slide 36
Slide 36 text
Now, let's look at another approach.
The bottom margin on this screen is just empty space that doesn't have any meaning related to information recognition.
For this kind of true empty space, it's a good idea to use Spacer().
Slide 37
Slide 37 text
Finally, regarding padding: padding refers to the "space set inside an element."
Since borders are also considered elements, the proximity between the border and the text can make it harder to read.
To prevent this, adding space inside the element (padding) makes it easier to recognize and read.
Slide 38
Slide 38 text
So, padding should be used to prevent interference between the border and the elements.
Slide 39
Slide 39 text
By the way, in the first example, the highlighted area is treated as the range of element A.
Before you implement it, please consider whether this way of adding padding is actually appropriate and whether it aligns with the design intent.
Slide 40
Slide 40 text
Now, up to this point, can you see that implementing with SwiftUI involves laying out groups and hierarchies of information?
You can think of a SwiftUI file as a document that represents a collection of related information.
Slide 41
Slide 41 text
However, some people might think, “Wrapping everything in a VStack and nesting the code so deeply makes it hard to read!
Slide 42
Slide 42 text
It's an engineer's responsibility to understand the intent behind UI design and translate it into implementation.
Slide 43
Slide 43 text
Let's do our best.
Slide 44
Slide 44 text
See? Bro, from now on, make sure you understand the purpose of margins before implementing the UI.
Slide 45
Slide 45 text
No content