Design Principles: Balance and Symmetry (7)

A combination with a sense of balance gives people a sense of stability and beauty. Although some of these elements only play the role of contact nodes, this combination is enough to attract our attention and ignore other areas.

In the design, there is no balanced combination that does not contain positive factors and negative space. All operating spaces are closely combined to form an organic whole, and the collection of all parts is the sum, but they are different.

An unbalanced combination can lead to tension. When the design elements are in an unbalanced state, then each component will dominate the whole combination, making the whole less than the sum of each component. Of course, in some projects, it may be necessary to convey unbalanced information, but most of them need a balanced state.

"Happiness is not an intensity, but a balance, order, rhythm and harmony." Thomas Merton.

Balance is easy to understand in the real world because we experience it all the time. For example, the picture below seems to be balanced. Two people of equal size are at both ends of the seesaw, equidistant from the center.

The person on the left makes the seesaw move down, but the person on the right does the opposite, so the forces of the two people are different, but the sum is zero.

If there are many people at one end, then the people at the other end will be thrown out.

Just like the picture above, I feel unbalanced because the person on the left is not big enough to balance the weight of the person on the right. So the seesaw will turn right and touch the ground on the right.

However, if the larger person on the right slides a distance to the center, the seesaw will keep its balance again.

Here, the force on the right side will decrease because of the position near the fulcrum. I believe that in this case, it is more comfortable than before.

Visual balance is similar. Generally, physical weight can be replaced by visual weight, and the direction of physical weight force can also be replaced by visual direction. Note that the following are the definitions of visual weight and visual direction, and we will review the details of the fourth article in this series.

(1) Visual weight: The weight ratio of visually perceived elements is also a measure to attract users' attention in a page.

(2) Visual direction: the perceived direction generated by visual weight, which we regard as the direction of moving elements.

The above two forces cannot be measured by instruments. Nor can it be accurately measured by general formulas. On the contrary, our best way is to deal with the balance between them with our eyes.

Why is visual balance so important?

Just like in the physical world, visual balance is a good thing, it can even replace its own objects, and the unbalanced combination of objects will make users feel uncomfortable. Look back at the second picture in the seesaw case. According to people's correct understanding, the seesaw should be more natural and comfortable in a balanced state.

Some explanations of visual weight are the control methods of an element or area in design at the attraction point. When an element is in a balanced state, the attraction points of all parts should be balanced, so the visual attraction points should also be balanced, so that the design will make users feel comfortable.

On the other hand, if it is not in a state of visual balance, then users can't see the points of interest in various areas of the design. For these areas, users will not spend too much time to look at them in detail, so this part is easy to be ignored.

Because we want to balance these points that users are interested in in the design, and let users take the time to understand and understand the information we want to convey, we should keep the design in a state of visual balance.

There are many ways to balance the combined elements, two of which have been mentioned in the introduction above. The first type is balanced and symmetrical, the second type is not, and the other types are radial and mosaic.

When the composition is equilateral, the visual weight will be symmetrical and balanced, and the balance around the central fulcrum or axis will also occur. Symmetrical balance can arouse users' emotions (sometimes called formal balance) and experiences. For example, in wedding invitations, we want a symmetrical and balanced composition.

The disadvantage of symmetrical balance is that it is static and sometimes considered boring. Because half of the combined reflections are the same, we know that half of them are predictable.

Asymmetric balance is the result of unbalanced visual weight of both sides. One side of the composition may be the dominant element, while the other side is balanced by the smaller focus element, and the heavier element on the other side may also be balanced by multiple lighter elements.

Asymmetric balance is more dynamic and interesting. It will arouse our sense of movement, vitality and energy in modernism. In addition, it can provide a variety of different visual styles, but it is difficult to achieve because of the complex relationship between elements.

Elements in radial balance will radiate from the same center point as * * * *. Just like the ripples caused by the sun's rays and throwing stones into the pond, it is easy to keep the center point (fulcrum) because it is always in the center. Since everything is central radiation, the central position is the most attractive area.

Mosaic balance (or crystal balance) is the confusion caused by balance, which is the style of Jackson Pollock's painting. Composition lacks obvious focus, while each element enjoys a unified focus. In addition, the lack of hierarchy leads to visual noise because all elements are together.

Symmetry and asymmetry relation

In the whole composition, symmetry and asymmetry are independent and interrelated, and finally * * * reaches a balance. We can also use asymmetric balanced combination in symmetric form, and vice versa.

Symmetry is usually considered as beauty and unity, but it is also considered as static and plain. Asymmetry is often more interesting and dynamic, although it is not necessarily beautiful in nature.

Axial symmetry

It only happens when all elements are mirror images around a central axis (both sides are symmetrical), which may also make us feel that the axis of symmetry can be in any direction, but it is often vertical or horizontal.

One side of the axis will be mirrored to the other, such as the symmetry of growth and natural evolution across the earth's surface: face and butterfly.

When the reflection is a perfect mirror image, then this symmetry is absolute symmetry. On the contrary, because most of them are not perfect, they are relatively symmetrical and slightly changed, which is more common.

Symmetry can occur on multiple axes or at the same time. For example, the left and right halves of the composition are mirror images of each other, as are the lower and upper halves.

Rotational symmetry

When everything happens around the same center (or radial symmetry). Then it can appear at any angle or frequency, but only one center point is the same as * * * *. A natural form that grows or moves perpendicular to the earth's surface. The petals of a sunflower are an example. Non-reflective rotation can be used to show motion, speed or dynamic action. Imagine a moving wheel.

Translation symmetry

Elements are repeated in different places in space (or crystal symmetry), and repeated fence columns are an example. Repeated creation of translational symmetry can occur in any direction and at any distance, as long as the basic orientations are equal. Translation symmetry appears in natural form, and it can also create the role of rhythm, action, speed and strength through translation symmetry.

The symmetry in the picture is relative to the ground, and another form of symmetry has more weight than that of the same size and shape. Symmetric forms convey a kind of balance, but they are often too stable and balanced, which leads to lack of interest and may also lead to passive space, because negative space is equal to all forms around.

The asymmetrical form lacks the sense of balance in the symmetrical form. Although the whole combination is in an asymmetrical balance state, the asymmetrical state is a very natural form, just like the nearsightedness to the left and right hands, the claws of the tidal crab are different, the branches grow in different directions, and the clouds change randomly.

Asymmetry can lead to more complicated relationships between components, but it is often more interesting than symmetry. Because it is more interesting, it can be used as a way to remind everyone.

The space in the form of left and right symmetry is more active, but it is always more free than symmetry when it is created by unpredictable patterns, but it is often difficult to achieve.

Similarity and contrast are used in the design, and then symmetry and asymmetry are combined, and the final effect will be more perfect, such as balanced asymmetric mode, bidirectional symmetric mode, symmetric and asymmetric balanced mode. Breaking this symmetrical form and random marking will increase interest, compare symmetrical and asymmetrical composition methods and explore which one will be more concerned.

In this series, I have been trying to point out how so many design principles come from gestalt principles, and I hope to see how to use design principles to establish different elements and their relationships. Gestalt principle aims at symmetry and order, and also applies to composition balance, although this principle cannot be applied to all.

Symmetry can be achieved by simple praeger-Luntz principle. For example, connecting nodes and similarity can help improve visual weight, as well as visual directions such as continuity, * * * * and parallelism. It is also mentioned that the symmetrical form is easier to be regarded as a figure than a background.

I hope these principles can guide our design principles well, and I believe it will be clearer after reading this series of articles. Design principles do not appear out of thin air, but come from some visual and psychological perceptions when we look at the environment.

In the screenshot below, because this is the last article in this series, I found more website cases than usual, and balanced them with the four types mentioned above.

As I emphasized in this series, the balance theory in design is applied in all the following cases, and we may see different places in the cases, which is what we need to consider in the design and what we think is the most important.

An example of symmetrical balance

Helen & ampHard's entire website design is a symmetrical and balanced way. The screenshot below is the "About Me" page, and other websites also adopt this balanced design.

All element areas are oriented downward along the vertical axis, such as the middle logo, the middle navigation bar, the middle graphic image, the middle title and the middle three columns of text. However, the end of the text area is not centered, which is determined according to the amount of text in different contents.

Also, note that at the top of the page, the logo and navigation bar are centered, but they do not appear in a visually centered position. My line of sight is in the center of the navigation bar, near the bottom of the logo. The three menus on the right side of the navigation bar have more letters than those on the left, but our eyes want them to be the same and centered, with more space than "about" and "people". So I personally think that if two pixels are moved out, their visual centers will be more balanced.

Website symmetry is another balanced case of symmetrical design. Just like previous websites, everything here revolves around the central vertical axis: navigation, text, characters and scrolling down.

It is also not absolutely symmetrical, the text is centered but not like a mirror image, another pair of arrows point to the right, and the arrow at the end of the page points to the text area. The two are related, so that you can pay more attention to your own effect and how the two arrows use color to form a strong contrast with the background, further increasing the attraction of these elements.

An example of asymmetric equilibrium

On the whole, the symmetrical forms of the surrounding elements and dominant areas on Kelly Waldengen's homepage are asymmetric and balanced. In the whole composition, you can also see several discrete shapes.

The web page is surrounded by a smaller rectangular image and a larger grid. As far as it is concerned, this grid is composed of two vertical and multiple horizontal axes, which feels very stable and impactful, and looks very balanced, without exceeding anywhere else.

The text block on the right is lower, which just offsets the text and the circular logo in the upper left corner, providing visual balance in the opposite direction.

Imagine a fulcrum, the same distance, the same weight. Compared with the whole, the text on the right side appears bigger and darker, but the blue circular sign gives more weight and most areas. This circle is connected to the upper left corner of the page by a color. The text under the grid seems to be only suitable for its own viewing function, which is out of balance.

In addition, it should be noted that the whole space feels balanced, and the upper, left and right areas are balanced with each other, while the blank area on the left is larger than that on the right, but there are more suitable spaces at the top and bottom of the page.

Hirondelle USA's homepage is rotationally symmetrical, and I will use this screenshot to explain in detail the use of this asymmetric balance case.

The vertical position in the image slightly deviates from the center position and has a vertical relationship with the anchor point. At this time, we feel that the object is much heavier, and the railing on the left side is closely connected with the working edge of the screen, which gives it a sense of dependence. It's hard to imagine what would happen if the design elements in a web page were out of balance.

The words on the railing feel the support of the railing and keep a balanced relationship with the boy on the right. In addition, the railing on the left is more complicated, while the color behind the boy on the right is darker, which can balance the relationship well.

Translation symmetry refers to the gold thread repeated in the upper left corner of the text and the lower right corner of the picture, as well as the buttons in the web page, with white text as repetition.

Examples of radial balance

The website Vlog.it is radially balanced and easy to perceive from the screenshots. For example, the shape in the upper right corner, everything is around the center of the page, and the three rings in the image rotate around the central circle.

Because of the screenshot, I can't see how the page is loaded. Description There is a line drawn from the center of the knife page in the lower left corner. From then on, the page will show a radial rotation around the central point, just like ripples in the pond, everything comes from a point. In addition, the small circle in the upper right has a small translational symmetry to improve the interesting points in the page.

Opera's shiny Demos homepage is not a circle, but a text link, which seems to originate from a central point that is the same as or close to * * *. It is easy to imagine that the middle area and several squares form the rotation of the whole shape.

The shiny Demos are the symbols of the opera house in the upper left corner, and the symbols in the lower right corner cancel each other out and radiate with the center point as the fulcrum. This is a good example of using radial balance instead of circle.

Mosaic balanced symmetry

We can expect that mosaic balance is least used on the Internet, especially in Jackson Pollock's paintings that I provided as an example of balance. But there are more examples that we may not be aware of.

The website Rabbit's Tale is a good example. Many scattered letters are random and confusing. But this composition is also balanced.

Use gradient gray-white on both sides of the page, with equal area. The rabbit in the middle is the fulcrum, which will stand out after reading it, but the overall element calls us to pay attention to ourselves.

We will not guess which elements correspond to which elements here, but there is an overall balance between them. If there is, it is biased towards the right, but it cannot get rid of the balance point.

For content-oriented websites, such as news and magazines, it is best to present a mosaic balance. Maybe we all know the website Onion. In the screenshot, I have deleted the background picture at the top.

There are many asymmetric layouts and unequal column sizes, so it is difficult to determine which elements or regions are balanced. In addition, different sizes and quantities are used, and there is no central radiation with the same * * *. Compared with other dense areas, there is a lot of confusion and randomness between blocks. Because the story on the website will change every day, and it will be chaotic every day.

Maybe this is a mosaic balance. I think many websites show this chaotic balance. Although the website also tells us a lot of information, the information on the website is also chaotic.

We spent a lot of time discussing design principles here. Now I hope you will enjoy this series of articles and learn something new from them, or review these basic design principles.

As you can imagine, these basic knowledge is very important. When I start talking about all the series shown in Gestalt Principle, I will propose how we can look at and understand these visual environments from the perspective of human perception. For example, we will notice a focus element because it contrasts with the surrounding elements and makes them look different, which is very important for us to quickly identify enemies and friends. This ability is also our survival instinct, so our eyes can make judgments quickly.

However, there are no hard and fast rules in the design, which are only mentioned as guidelines in this series. Two elements are the same and different, so there is no correct method. So there is no need to abide by any of these principles, but we should understand these principles and have reason to break them.

Finally, I hope this series can help you, and I hope I can have more control over your visual communication in this series of articles.

/2065 438+05/06/ Design-Principles-Composition-Balance-Symmetry-Asymmetry/