Harmony: Building a Balanced Design That Works

When creating an attractive UI design, there are some basic principles that you need to be aware of and apply to the UI you are creating. By doing that, you will be able to create harmony in your design and make it more appealing to the viewer. In this article, we will discuss how to apply principles to make your UI design balanced and have good harmony.

WHAT IS BALANCE?

Balance in the graphic design universe means how the visual elements of the design are arranged in a good composition. It’s all about how we can create stability, structure, emphasis on an element and dynamics. Understanding this type of balance will help achieve the right type of visual effect in your design. Here are some examples of types of balances:

a. Symmetry Balance

A type of UI balance display whose constituent elements have the same weight on two sides of an imaginary vertical line. This equilibrium model is used to create a formal design appearance, and looks structured and convincing. This balance is a way to set the same design in number, color, shape and scale.

b. Asymmetry Balance

Some visual elements that are smaller on one side are balanced by large visual elements on the other side. Or, smaller visual elements are placed larger than the center of the larger visual element’s screen. This type of balance is used if we want to create a look that is more relaxed or less planned.

VISUAL WEIGHT

Visual weight is the deepness of your design elements that are felt visually. You can check it by doing a measurement on how prominent an element is compared to what is around it. We can increase and decrease visual weight by adding or removing size, color, and contrast to an element of design. In the following, let’s discuss how to change the visual weights by changing the factors I mentioned earlier.

a. Size

The size will immediately give a different effect on visual weight. In the image below, the box on the left has more visual weight than the box on the right.

b. Color

Color provides a visual perception of the color around it. For example like the picture below the red box has a greater weight than the yellow box.

c. Contrast

The use of contrast can drastically change our perception of color. Using the same colors as before, red contrast effectively shifts our focus to the yellow square.

d. Density

The use of white space can also produce weight changes in the design. As the following example, the square on the right has more weight because it has more density than the left box.

GOLDEN RATIO

Author: Maria Grønlund

The golden ratio is a proportion of mathematical comparison inspired by the proportion of things that exist on earth. The size of the golden ratio is 1:1,618 and is often illustrated by the popular spiral-shaped shells that we see on the internet. Many designers apply this comparison to designs to create balance and harmony in the design. The trick is to determine the size and length of the smallest element and then multiply it by the golden ratio (1.618).

Applying the Golden Ratio to UI Design

Let’s see how the golden ratio can be incorporated into the UI design elements that you are creating.

Balanced content

Author: Raquel Román Parrado

Designers often face situations when a product needs to contain large amounts of diverse content and each part is vital and cannot be replaced. To bring together all the components in a pleasant composition, the golden ratio can be applied. Divide the layout into different sections using 1: 1,618 proportions and place content in sectors according to their interests. Such content composition is sufficient for user perception and helps to manage all components.

Effective visual hierarchy

Author: Ryan Morrison

Speaking of content organization, we cannot forget the visual hierarchy. Combining the principles of both techniques, the designer maximizes the opportunity to build a strong design composition.

Typographic Level

UI designers usually make several levels of font size to determine which will be used for the title, subtitle, and content. With a golden ratio comparison, you can determine font size more easily. Determine the smallest font size, for example for paragraphs, and multiply by golden ratio size for subtitle and title sizes.

Right white space

Source: Hoèng

With a golden ratio comparison, determine the distance and size of the white space between elements in the UI design that you create.

CONCLUSION

Harmony is one factor that makes the design we create look beautiful and makes the user understand the message that we want to convey to them. Every time you are working on a UI design, it is important to do enough experiments to compose size, color, density and contrast for the designs you create.