If you see graphic design as a process of organizing form on a canvas, you are only seeing half of the work, because it is also important if the negative space on the canvas can be used actively of.
Design includes changes in form and arrangement of space. To make more efficient use of space, we must first be actively aware of this and observe how it changes in shape, spatial style, and space. How spaces relate to each other. This is the second in a series of design principles beginners need to master. The first part mainly talks about the control of shape, while the second part is also based on Gestalt principles and acquires knowledge of the basic principles of design to a large extent.
The spatial principle most suitable for use in the Gestalt principles is figure and background. Everything is designed to be mutually exclusive. Neither can dissolve the relationship between them, nor can they change each other.
Therefore, the relationship between graphics and background is complementary. They can enhance or reduce the effect through their interaction, and are one of the important methods to effectively organize the relationship between each other to achieve the design purpose. . When setting a background we should think carefully, how to contact the design? And what is the principle between them?
"The white space will be considered as a very active element, rather than just a passive background." - Jan Tschichold
Thinking about the styles of the three blocks above, at the end In the block on the left, we see a series of black lines with equal spaces between them. In short, equal intervals between black lines and white lines will form a gray area, which is a pattern formed by alternating black and white. kind of effect. Removing the white in the middle panel turns it into a black panel. At this time, not only is the style of the space invisible, but all other elements become a single element.
In the rightmost panel, the two black lines in the area have been deleted. This will activate a space so that this area is on top of the gray area. The background becomes the graphic and you can proceed. More in-depth design.
(1) Stable: It is clear about the elements and the background, and who is the main element to stand out in one shape and another.
(2) Reversible: The two graphics and background here can deeply attract users and create a sense of tension. Therefore, no matter what other elements, similar methods can be used to create a dynamic Design effect.
(3) Ambiguity: Elements can be interchanged with the background at the same time, forming interesting shapes with each other, allowing the audience to compose from their own entry point.
According to the above relationship, how to set and balance the relationship between graphics and background can allow the audience to see the design of different parts and interpret and understand them in conjunction with the relationship between the context.
The relationship between figure and ground is not their most prominent role in the Gestalt principles. Here are two more:
(1) Approach: Approach through an enclosed space elements to connect relationships between other elements. We can simply understand: the spacing between paragraphs is greater than the spacing between lines within a paragraph.
(2) Closure: This will make the elements in the space different. The audience will fill in the gaps with information based on their past experiences to complete the whole. If most of it is background, then enclosing is not necessary. If there is too little space, there is no need to set a closure. Only by maintaining a balance between the white space and the content area can the relationship between the two be correctly handled.
Now think about music. If every note or chord is played at the same time, then there will be no music and noise will be heard.
Music occurs when there is a contrast between sounds. The beginnings and pauses of different notes create rhythm and melody, and without pauses there would be no music.
In the same way, space can also perform similar functions, and it provides a positive effect on the breathability of the space. By designing it, the eye can move freely back and forth, looking for elements. As a positive and negative contrast, if there is no space, there is no design, which will produce visual noise, unless your design is inclined to the design of space. Typically visitors don't complain about too much white space, but too little.
For the blank area, you can do the following:
(1) Establish an opposite side, highlight key points and establish hierarchical relationships
(2) Generate emotional tension
(3) There is breathability between elements
Just like the relationship between graphics and background, it means that only some basic elements need to exist in the space, adding too much The space with too many elements will appear less clear, so a certain relationship should be established between the graphics and the background to maintain contact with each other.
The most important function of white space should be to improve readability and legibility. A large amount of white space will make the text part more attractive, while a relatively tight space should make the elements clearer.
Microspace: It is the space within a group of elements. This is the space between letters, words and paragraphs.
Large Space: This is the space between the main elements.
They would be separate elements or elements and provide paths through which the eye would be able to pass with sufficient breathability between them.
White space can convey quality, often with very few elements appearing in large areas of space. We can compare high-end and discount product packaging. Which one will use more space? Which package will have more blank space, these all convey some information.
Space can convey information such as quality, for example:
(1) Exquisite
(2) Simple
(3) Luxurious
(4) Cleanliness
(5) Personality
(6) Openness
When we don’t have enough space to use, Filled design can be used. You can also avoid wasting space by capturing relevant connections between design elements.
The white space used will also be included in the final shape structure of the design, so don’t be afraid to use white space. Instead, regard the white space as an element in completing your design.
Several cases of white space in web design
In order to better use white space, you must first have a strong self-awareness of this and be familiar with identifying different The use of white space design. Pay careful attention to the shapes used and think about how they relate to the elements of the canvas. To do this, let’s take a look at how some website designs use this kind of white space!
“Conservative”
Tom Johnson’s design Conservative uses a lot of white space so that text and other elements have room to breathe so the viewer doesn’t mistake what is the background and what is. is a prominent element.
Design corresponding separation between information and information, and between elements (you can recall the proximity principle mentioned in the previous article), and distinguish element groups. We can clearly tell when something starts and ends, depending on the space between them.
The most important content is in the center of the page, with large spaces on both sides. The elements in the middle are interrupted from time to time, and there are line elements that activate the connection between the two. This helps remind the user that this area is of particular concern.
Heroku's status page
The image below shows part of Heroku's status page. There are many incidents reported on this website. Here, more white space means better service.
It is worth noting that the background of the page does not have to be white. Although the default background space of the web page is white, and it is also very practical, there are some very important information that need to be reminded, such as status updates. and latest reports, interrupted by white space.
Introducing the Novel
In the top space, the text "Introducing the Novel" is asymmetrical and plays a positive role. Notice the large white space on the left side of the page that leads directly to the eye's content. If you click on the page and scroll from top to bottom, you will find that the white spaces on the page are separated and combined with each other.
Light colored lines are used to distinguish these separated and grouped blocks. When browsing this website, you will find that these lines not only serve to distinguish the blocks, but also maintain breathability and fluidity between the blocks. to avoid focusing on one point.
Elliot Jay Stocks
I believe many people are familiar with the design behind this website, because it uses an asymmetrical space to create a very dynamic effect.
The large image at the top of this page can be used as a temporary module to access the content below. In addition, there is enough white space around the large image to maintain a comfortable breathability. If the same background is used for the content in the sidebar on the left, it will easily cause the eyes to move between the two, and the color changes will also occur. It will be more difficult.
In addition, similar to the website above, space can be used to assemble and distinguish different information and groups, and can also make each group stand out from it, so that there is more information in the process of searching for information. Enough white space allows the eyes to relax and rest.
Phil Coffman
This website gives the impression of a single form using a lot of white space. Although lacking some positive effects to highlight the importance of those original elements.
Using a colorful rectangular background, the text is spaced with enough space around it so that it becomes easy to read and not be mistaken for other text on the page.
The focus element needs to adapt to the width of different browser windows, but the single shape surround still exists.
You will see many websites like this at the 2013 New Adventures in Web Design conference. Different information blocks in the space contain different information, and the overall page looks so lively.
Something worth noting is that there is a gray circular arrow pointing to the right in the upper left corner of the image. These arrows do not block the flow of space because they do not touch. There is a discontinuity in each dotted line, which emphasizes that this area can flow, and also restricts the flow of other areas.
Use a lighter gray color to prevent the arrows from becoming dominant to improve fluidity.
In short, when we browse many pages, we will take screenshots, and the arrows will not overlap with the main content. However, the main content area is approximately 1280px wide. All in all, it works on whether we have better liquidity, not on the arrows.
I will use some logos as classic examples of white space. At the same time, he pointed out the negative space used, and gave some guidance, and was able to think about the application of blank space.
Some of these logos rely on the closure principle. You will see that they will not really exist, but you can still see them. These logos use the relationship between the figure and the background. When you see the background, what the graphics will look like, there will be some changes to the entire logo. The core of this kind of logo that uses a lot of negative space is to make the audience think of something.
Various logos, including a combination of clouds and beds, black cats, transitions, dolphins, dentistry, forests, etc.
I hope you can gain the two most important points from this article: The first is to use graphics and backgrounds to design and establish connections between each other in the Gestalt principles, and the Gestalt principles also Essential guidance as a designer.
Second, and perhaps more importantly, is the effort required to observe and spend time studying how space is used in design. Don’t let space become an auxiliary position for good design. You should make good use of this space to complete the design more efficiently because the layout of any page is the mutual organization of white space. Ability to consciously analyze gaps and intentionally create a better environment for design. Don’t make it an accessory, but make it an important element, and then think about and shape the relationship between the element and the white space to create a positive effect.
In the coming time, we will add a series of more relevant Gestalt principles, and more importantly, how to apply them to design, such as visual weight and balance relationships.
/2014/05/design-principles-space-figure-ground-relationship/