Golden Ratio. Bring Balance in UI Design.

tubik
UX Planet
Published in
6 min readJan 9, 2018

--

One of the major characteristics of effective design is a clear user interface. All the elements need to be well-balanced and placed in the harmony so that users could easily perceive the information on the screen and interact with a product without efforts.

To create an efficient design composition, professionals apply various techniques and methods from the art science as well as the basic mathematical theories. One of the common tools helping to build pleasing design compositions is a mathematical proportion called the golden ratio. In the article, we’ll define the essence of this technique and see how it can be used in design.

What’s the golden ratio?

Everything in the world strives to the harmony and balance. Even mother nature brings things in the forms close to the perfect. People enjoy everything which has natural touch and they always aim at implementing these patterns and forms into their outcome. In pursuit of discovering the secrets of creation, mathematicians calculated a formula which appears in the majority of things on the Earth.

The golden ratio is a mathematical proportion between the elements of different sizes which is thought to be the most aesthetically pleasing for human eyes. The golden ratio equals 1:1.618 and it is often illustrated with seashell-shaped spirals which you could have probably seen on the Internet.

Source

So, how exactly the perfect asymmetry is calculated? First, you need to decide the length of the small element. Then multiply it by a golden ratio which is 1.618 and the result will be the perfect length of the bigger element.

Source

Golden ratio theory is believed to exist for more than 4000 years. Scientists discovered that the majority of the ancient buildings, as well as famous artworks, obey to the golden ratio. Leonardo Da Vinci and Salvador Dali were known as the followers of the golden ratio theory and they used it as a key tool for their amazing artworks. Today the golden ratio is applied in various fields including architecture, art, photography, and design.

Golden ratio in design

An effective composition is a core part of design. All the elements need to work together to maximize the pleasant experience. Moreover, each separate element, even the small one like an icon, has to be created in a harmony within itself. The golden ratio has a positive influence on the visual perception the reason why many graphicand UI designers apply it at their workflow.

Graphic designers are more keen to apply golden ratio. The thing is that the art teachers often explain the theory of golden ratio to help students figure out how to work with proportions. That’s why many designers continue to apply this tool while creating various graphics, especially for the small but meaningful design elements such as a logo.

Logo and icon design requires deep attention to the details. The golden ratio allows creating illustrations where each element is placed in a harmony and appropriate proportion to the others. Moreover, logo design is a heart of the brand so designers strive at presenting it in the most compelling way. Golden proportion can add aesthetic appeal to a logo and increase the popularity of the brand.

User interface needs to have the clear visual presentation of the components so that people could use a product without problems. The golden ratio is often applied to place UI elements effectively. First of all, it can be used at the stage of wireframing. This way you can plan a structure for the layout placing and sizing user interface components according to golden proportion. In addition, golden ratio scheme can help professionals to crop images for web design so that it could make sure the composition of the photo remains balanced.

Graphic design for Opera Software promo video

How does golden ratio improve UI design?

Mathematical calculations may seem boring and time-consuming, so a question may arise if it’s worth the effort. Let’s see what golden ratio can bring into design.

Well-balanced content

Designers often face the situation when a product needs to contain a great amount of various content and each part of it is vital and cannot be replaced. To unite all the components in a pleasant composition, the golden ratio can be applied. Divide the layout into different sections using a proportion of 1:1.618 and put the content in the sectors according to their importance. Such a content composition is sufficient for users’ perception and it helps to organize all the components.

Effective visual hierarchy

Speaking of the content organization, we can’t forget about visual hierarchy. As we mentioned in our previous articles, it’s a technique of efficient structuring content components. Combining principles of these two techniques designers maximize chances of building a powerful design composition.

Tracking Widget

Powerful typography levels

To create efficient typography, designers need to divide copy content into different levels. They usually include various kinds of copy including headers, subheadings, body copy, caption etc. Applying golden ratio professionals can quickly define an appropriate proportion between the typographic levels, for example, you can choose a certain size for the header and then divide it by 1.618. The result will show you the most appropriate size for subheaders.

Pleasing first impression

When users try a product for the first time, they scan user interface to understand if they like it or not. The psychology principle known as a visceral reaction states that people decide whether they like something or not within a few seconds of looking at something. This reaction goes faster than our consciousness so we don’t even realize it. That’s is why it’s vital to make sure the first impression of a product will be pleasing. Design created by using the golden ratio has a positive influence on users’ mind and their visual perception and it works from the first sight at a product.

Appropriate white space

White space is the area between elements in a design composition. Designers always need to care about the amount of the white space in the UI since the unity of composition highly relies on it. The golden ratio can make the process of spacing much easier and faster. Applying golden proportions you will be able to define the right white space which will work well for the design.

Digital Agency Landing Page

Design presenting the natural balance of the components cannot be unnoticed. The well-structured layout is one of the core parts of powerful UI. The golden ratio brings the harmony into design and makes the product pleasant for users. Don’t be afraid of the mathematical formula. It’s not that difficult as it may seem. Even more, the golden ratio can help creating user-friendly digital products which will combine utility and aesthetics.

Recommended reading

The Golden Ratio — Principles of form and layout

Golden Ratio in UI design

Originally written for tubikstudio.com

Welcome to check the Review of Popular Interface Design Trends in 2017

Welcome to see the designs by Tubik Studio on Dribbble and Behance

--

--

We are a digital agency making designs that solve business problems. We create websites, apps, graphics, and help brands shine and sell.