Article: Super-finishing in design, and messy goodbye
From the public number: Study set
Before we begin, we first need to address a key question? That is, what is the principle of proximity? Obviously, right, we can see from its name that it's a concept related to distance. In more detail, it means that the relative distance between objects and objects will affect our judgment, and the human brain will subconsciously establish correlations between objects in front of us, and they will be seen as a whole, while the farer ones will be automatically separated.
Let's take another example, the dots that appear in the picture are scattered, and we will naturally think that they are independent units, and each circle is a separate individual. But when their position gradually approaches, what kind of phenomenon will happen in the picture? When the graphs are close to each other, they are naturally identified as three combinations. Although this phenomenon is inconspicuous, the meaning is significant.
In real life, we will see the flight trajectory of the geese as a "human" glyph or a "one" glyph, which is also a close principle at work.
In the ocean, smaller fish will be close to each other in swarms, and this close formation can effectively avoid predators. Because it would make other animals mistake them for a bigger fish.
Looking up at the starry sky in the sky, we will see the seven stars of the Big Dipper. We can also recognize it thanks to the fact that the stars are close to each other to form the shape of a spoon. Of course, people's identification of constellations is also the same principle.
Let's summarize what we just learned? The eye has a tendency to automatically group things when it comes to recognizing them. The elements don't need to be next to each other, they just need to be close to each other, and the brain will see it as a whole. By modifying the distance, we can arbitrarily change the number of combinations. For example, divide it into one large combination with another smaller combination. What now? The picture again becomes four lines on the left that are close to each other and two lines on the right that are close to each other. As long as you are proficient in the distance between elements, you can create element groups at will.
Through the study of cognitive psychology, we know that the human brain is more inclined to see objects that are close to each other as a complete combination. Then according to this principle, we only need to change the distance between objects and objects, and we can control whether the elements are grouped or not. But is the question really that simple? In fact, we can continue to dig deeper. Since the group only needs to modify the distance, which elements should we gather and which elements should we alienate? This leads to an important concept in the proximity principle.
We all know that where there is light, there must be shadows. This is a very objective phenomenon. Chinese have realized this for a long time, and everything in the world will always produce the attribute of mutual resistance. The same is true of the proximity principle. The concept of differentiation naturally arises from association.
The proximity of elements to each other also subconsciously implies that there must be some common association between them. Elements that are far away from each other will naturally produce the impression of mutual exclusion or uncorrelation.
In the ancient Chinese saying, there is such a sentence as "things are clustered by kind, and people are divided by groups", which refers to the general term of friends who are right and like-minded. Of course, it can also be used in typography design.
For example, if we see that the drawer in the picture is very messy, how should we organize it? The classification attribute in the proximity principle is reflected in this process of collation.
By sorting and grouping clothes, it can be solved well, and the divided items are stored in each partition, and the drawers that were previously very messy become neat and tidy.
This is the shelf of vegetables in the supermarket, it can be clearly seen that the same variety of vegetables are divided into a piece, do they look like a combination?
There are many examples of classification and grouping in daily life, such as the door of the toilet will divide people into men and women.
So back to the design, when you see such a floor button in the elevator, they are close to each other but have no connection, do you think it is very anti-human?
The principle of proximity is widely used in typography, and when you read a piece of text, it is clear that it is precisely because the related text is close to each other and the unrelated text is far away from each other. We can read the message correctly.
Once this rule is broken, the reading order between words is broken. There is no way to correctly interpret the information on the page.
In the context of Chinese, Chinese characters have two forms of arrangement in the direction, one is a horizontal reading mode in which the horizontal direction is close to each other and the vertical direction is far away from each other, and the reading order is from left to right, from top to bottom.
Another form of arrangement is a vertical arrangement in which the horizontal direction is far away from each other and the vertical direction is close to each other. The reading order is from right to left, top to bottom.
The order of occurrence of text messages needs to match the form of arrangement so that we can correctly interpret the information. Once there is a problem with the rules of approaching and moving away from the text, it will create various reading barriers, so let's take a look at what the problematic design cases look like.
When you pass by the window of a restaurant, you will see the text message on the screen. How would you read? Is it a small fried rice? Or urine fried rice?
We're looking at this example, so how do we read it? Is it "meal powder stir-fry, quick stir-fry supper night" This is obviously not smooth. For those of us who speak Chinese characters as our mother tongue, we will naturally know what it is talking about after brain supplementation, but if foreigners go to see it, they will definitely faint.
I'm looking at this example, and it's still the same problem, the vertical distance of the text is too close, and the horizontal distance is too far.
If we say that the text information similar to the phone number can also be judged by daily experience, then when facing the unfamiliar place name in this bus stop, we really don't know how to read it.
Approaching and moving away is itself a process of classification, people will put things that are related together, and things that are not related to each other will be separated. In addition, the principle of proximity can also assist reading, when the words are close to each other, the line of sight will jump from one word to the other word closest to it, so the words that are close to each other will also form a visual guidance process. Next, let's start from the reality and see what the application of the proximity principle is in the design.
The settings interface in our phones is a classic example of being close and far away. Functions with similar properties are brought closer to each other to form a combination, and groups are far away from each other, forming independent units.
The principle of proximity plays an important role in the arrangement of words, with the same level of information, only need to be close to each other, can produce associations, different small combinations again close, but also the formation of the next level of content associations. They look like a bigger combination overall.
What's wrong with us looking at this picture? The space above and below the text group is equal, so we have no way to effectively distinguish whether this text is related to the image above or refers to the content in the image below. At the same time, the distance between pictures and pictures is very close, giving people the illusion that pictures are a group and words are a group. The solution to this problem is to put the text group close to the associated picture.
If the surrounding space allows, increasing the spatial distance around each combination can make the distinction of information more obvious. If the distance between left and right is limited, we can stagger the pictures from each other. This also makes it possible to distinguish information groups very well.
In addition to creating visual organization, the proximity principle has a prominent role to emphasize. We see four combinations of equal configurations in the picture, what if we want to emphasize one of them? Change the distance around one of the combinations, bringing the other three closer to the configuration, so that the combination at the top of the layout is highlighted. Compared to the previous equal configuration, such a layout will obviously be more focused.
Do you know? Geometrically equal in width and height, it doesn't actually look the same size. If we remove the lines, it is more obvious. If you want to get the equality of visual area, you need to ignore the geometric size and judge them by visual area. Combining techniques may help you, and elements that are close to each other will lead to a larger visual area. In practical work, we will definitely encounter those main images that are still not ideal even if they are enlarged, the visual area is still not ideal. What should I do then?
We can do a classification, such as the combination of images and images.
You can choose those pictures that are related to the main image, and when it is combined with the main image, we can not only get a larger visual area, but also improve the expressiveness of the picture.
We can also enlarge the text. Form a new vision composed of pictures and words.
The combination of different forms will also make the layout more abundant. The combination of text and graphics can make the original monotonous text more intuitive and interesting.
The meaning of the logo itself will come into view in conjunction with what the image expresses. Of course, as the content changes, you can also choose those common geometry.
When two kinds of information are fused together, it always gives people an unfamiliar visual feeling. Using these wisely will make your layout even better.
In fact, we learned that when the elements are positioned close to each other, they not only become a combination, but also increase the visual area of the grouped elements. Then a new question arises, how close are the elements to be considered a combination? If you want to distinguish between two separate elements, how far away should you be? When you look at the layout from today's perspective, you will find that they are nothing more than a whole of multiple smaller combinations. So how many groups of information can be accommodated in a layout? Let's go find the answers to these questions.
First of all, let's look for the first question, how many combinations can be accommodated in a layout? In fact, this problem is easier to solve, as long as the sample survey is good. Then after our patient deconstruction, we finally came to a conclusion.
In a layout, there is at least one combination. Although there is no absolute upper limit at most, in the usual case, nine combinations are enough, and it is a relatively common quantity.
So what about another question? How close is it to be a combination? How far can it be to distinguish into independent individuals?
Let's take an experiment to further tease out this problem. First of all, the four table lamps in the picture are close to each other, that is, they must be subjectively a combination. Then we adjust the spacing so that the table lamps are half a distance between each other. Looking at this picture now, it is still a combined form.
So what about us setting aside the distance between the table lamps for a distance between the table lamps? Since the distance between the table lamp and the table lamp is smaller than the distance between the table lamp and the boundary, even if they are far away, we can still think that they belong to a group of elements.
What happens if you set the distance to a half-table lamp? At this time, in the horizontal direction, the distance between the table lamp and the edge of the page is almost equal to the distance between the table lamp and the table lamp. At this time, the tendency to form groups began to disappear, and the table lamp gradually became a separate individual.
We are increasing this distance to reserve the width of two lamps. Looking at this picture now, the association between the table lamps has disappeared, and the space between the table lamp and the table lamp has been less than the distance between the table lamp and the table lamp, and the four elements in the page have become absolutely independent.
If you add a table lamp to this page, it becomes two separate table lamps on the left plus a set of table lamps on the right.
Everything is relative. Relative to the page, all the table lamps added together can be regarded as a whole, and further observation, the page can be divided into four independent individuals, and the distance between the third row of table lamps is significantly less than the distance from other table lamps, so these three table lamps will be regarded as a combination.
In typography design, this relative concept still exists, no matter how the word spacing and line spacing change, as long as their overall proportions remain unchanged, there will be no reading barriers in the layout.
Let's look at a few examples, and it's clear that the tracking in the layout is the smallest unit, and the margins are the space with the largest distance in the entire page. Whether it is the design of the album or the newspaper and magazine, or even the web page and UI design, these are just different carriers. The fundamental rules of text arrangement will not change. As long as the relative proportion between each spacing combination is guaranteed, the layout can be better controlled and the information can be conveyed more efficiently.
In order to facilitate everyone's understanding of the contents of this issue, let's use the principle of proximity together to complete a design case. I hope that everyone can learn from each other and better absorb and understand.
First, let's talk about the background of our fictional project, which is a superhero movie poster, mainly in the corridors of shopping malls and lightbox posters on the side of the road in the neighborhood. This means that the content layout in the layout should be as concise as possible, and it should be remembered in a short period of time.
The producer of the film usually distributes the relevant promotional materials to the company responsible for the relevant content, and we mainly collect this information here. The first is to determine the size of the main visual in the layout, and we arrange the image of Spider-Man in the center of the layout.
Next, we place Spider-Man's standard word below the image, and according to the reading logic, when people's eyes are attracted to the photo, they will naturally read the main title text downwards. This is followed by the subtitle of Hero's Expedition. At the top of the title word, we added the Marvel logo, so here, the title section below has initially formed a simple visual unit.
For the rest of the information we continue to arrange their positions along the central axis, and likewise, we bring the elements together to form a larger combination. In the left and right corners below the layout, we add dates and slogans to support the structure of the layout with elements inside the layout. At the same time, these two small elements can also be understood as smaller groups of elements.
Then the information in this layout is arranged here, and through the layout of the information, we have created a larger layout area.
The page is divided into five columns in total, and the main body and title occupy the width of the 3 columns, which is very close to the golden section with the 2:3 ratio of the page.
At this point, you may feel that the subject inevitably seems a little monotonous, don't worry, remember the combination method we said before? We can choose an element related to the subject to form a combination with it. If we think about it, we can always find interesting combinations, such as here we chose this logo graphic on Spider-Man's chest as the entry point.
Of course, this is also a very common combination of the graphics and characters in the film that have symbolic meanings. In contrast to abstract graphics and figurative figures, visual effects are generally more impactful.
It's not just movie posters that use this technique, it's also the techniques that can be seen in similar commercial visuals.
It seems a bit off-topic, then let's go back to the case just now, next we color the layout, choosing the same color collocation is usually the safest approach, it can make the background and the main image establish a visual connection. Next is the color of the graphic, and we continue to absorb the color scheme of the Spider-Man suit. At the same time, in order to highlight the texture, we add a layer of light on top of this.
We added drones from the film around and appeared in the layout as an embellishment of the entire frame. Finally, add some corresponding scenes to the background part, so that the layout is basically completed here.
Isn't it fun? Let's have a different version. This time we will change the type of communication to the back cover of the magazine, the change of the medium, but also means the change of the layout style, for the magazine, which can be viewed up close, the reader has enough time to read, the arrangement of the information can become more full.
Here I chose to enlarge spider-man in English to become the main framework in the layout. Place the title at the top of the page, and then we add the subtitle "Hero Expedition". It can be known from the plot that this expedition is actually a secret operation, so in the handling of the title, we also make it seem more low-key.
Next, for visual balance, we added a theme slogan from the bottom of the layout. We can think of text as graphics, and cropping makes it look even more special. Of course, here we can also do an interesting treatment, so that the dots are replaced by Spider-Man's illustrations. Because the amount of words Chinese the layout is expected to be more, in order to differentiate the processing, we also process this passage into the style of stroke here.
Next, we divide the rest of the information into layers and arrange them into layouts. Before the text, through the division of space, a visual unit was formed, and these visual units also formed a whole because they were close to each other. Then the architecture of this layout is basically completed here
Next, we choose a photo of Spider-Man and put it in the group. This time we chose a black background, because black is also the color of the suit that first appears in this movie.
Of course, we can also add some layering changes to the background to make it look more detailed. Finally, add some shadows of the characters when they are in the air, and the back cover of this magazine is designed.
Finally, let's look at the final effect.
That's all for this issue. Let's summarize today's content together, the principle of proximity can be seen everywhere in daily life, and we can use close and far away operations to achieve the purpose of differentiation and classification. In the layout and typography design, the principle of proximity has an important guiding position. When elements are close to each other, they are seen as a whole, and as the subjects in the layout, the combination can further increase the visual area. Finally, close and far away are relative concepts, as long as the relativity is guaranteed, there will be no major problems in the arrangement of words.