Golden Ratio in UI design

Posted 7 months ago by Mariya Tereshkova

“Golden Ratio” is of great importance in the design of architecture, appliances, logos and photos. I don’t want to write about it a lot, you can learn it in Wikipedia. I will say briefly: our consciousness tends to harmony and beauty, and the “golden ratio” is the elegant way to make a product more comfortable and nice for perception. Simply put, it’s a tool to strike a balance in the design.

This technique is not so popular in the design of interfaces because it seems difficult. I will explain in simple terms how to build a classic golden ratio and how to apply it in practice.

“The ‘golden ratio’ is the elegant way to make a product more comfortable and nice for perception.”

Geometry

Golden Ratio is the ratio of the parties to each other as 1: 1.618. It is pretty easy to build:

  1. Draw a square
  2. From the middle of the square (A) draw a diagonal to the opposite corner (B).
  3. The resulting diagonal is the radius of the arc. We draw the circle to get a rectangle. The resulting shape of the square and the rectangle is the “golden rectangle”.
  4. If we draw diagonally in large and small rectangle, then in the point of intersection we get a “focal point”. It is a good idea to place the most important interface objects near this point to attract the attention of users.
  5. The unique property of this shape is that during its division, we obtain a smaller rectangle that consists of a square and a rectangle, a reverse “large.”
  6. And the most beautiful thing is: if in each of the squares of the arc with the radius equal to the side of the square, we get the “golden spiral.”

The rectangle may be rotated and adjusted to the desired size of the canvas and the interface.

Now triangle

  1. Draw a triangle, one side of which is two times bigger than the other.
  2. Draw an arc from the center at the point (B) with radius AB. Arc crosses the hypotenuse with a point (D)
  3. Now draw an arc from the center point © with radius CD and we get point (E)
  4. From the point (E) draw a straight line on the hypotenuse.

As a result, we split the triangle into smaller triangles proportional to each other. By the way, there is a clearly noticeable “Golden ratio” of the two elements as 1: 1,618. That is one element is 1.618 from another element.

“It becomes clear why almost everything created by nature is the subject to the laws of Golden ratio”

Beauty of nature

If we continue to divide triangles and draw circles between them, it becomes clear why almost everything created by nature is the subject to the laws of Golden ratio, sometimes with the Fibonacci sequence:

1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ..

(each successive number is the sum of the previous two)

1MUSs6EjrQC5lK2iIWRylDA

If you take the “Golden spiral” and rotate it at an angle of 40° or 60° then you will create this beauty:

1cBP9tLhSk4PtA92_zeVZ4Q

Here is an example with a smaller angle of rotation of 20° and a reflection of the shape on the horizontal:

With the help of the golden ratio one can draw any shape used in the design of icons, logos, interfaces, etc.

“If you draw a ‘Golden rectangle’, it becomes evident how to place elements.”

Design of mobile interfaces

I made a couple of examples to demonstrate the “Golden ratio”. The first is a card product of ASOS store. On the first screen of the app only viewing of photos and actions is available: save in favorites, play video and share. It is uncomfortable because you should swipe the page to find info about size, colors, fabric description or to add to shopping bag. As a result, a “quick” viewing of products is very difficult.

If you draw a “Golden rectangle”, it becomes evident how to place elements. This structure makes it possible to show the most appropriate user data on the first screen.

As we can see, in the “focal point” we have action “Save to favourites”, one of the key actions in the app.

Elements are large and located within the comfortable distance from each other and from the edges of the screen, so they are easy to press with a thumb.

The second example is the blog post screen. Rectangle puts everything in places: we have quite a large photo and a large area for text. If the picture is based on the golden ratio, it is not distorted in a mobile size.

“Elements are a comfortable distance from the edge of the screen, so they’re easy to press with a thumb.”

Arrangement of elements “like” and “comment” in the lower right corner makes it possible to make them larger, but unobtrusive. They do not overlap the image, but visible to the user.

1C2smWllYcpJ8JxXEzpAW9w

That’s all. Hopefully now you are not afraid of proportion “1: 1,618”, and willingto try it to create user interfaces.
🙂

This post was originally published on Mariya’s Medium profile.

Prototype with Sketch!

Prototype with Sketch!

Send artboards straight from Sketch into your Marvel projects.

Download Plugin

Designer. Teacher. Live in St. Petersburg. Find out more at maws.ru. My community accounts: Dribbble, Behance.

Related Posts

Collaboration between designers and developers is essential for creating great products. Every company has different organizational structures for designers and developers. Some companies have designers and developers on two separate teams. Those development teams may also break up developers in sub-teams as well. For example, they may separate by front-end developers and back-end developers. In other companies, designers and developers… Read More →

A good product is a lot about the problem that you pick & the ideas that you implement. But a well-sorted & deliberate design-development process can play more than a handy role; ironing out quite a few wrinkles that can cause unnecessary escalations and ad-hoc duct-taping later during the execution phase. “As designers, we are the guardians of execution and… Read More →

A mechanical engineer by training, I’ve always chaffed at using the word process to describe something as messy and nonlinear as design. At MIT, I learned about processes for solving problems like how quickly heat moves through a block of metal, or how to calculate the impedance in an electrical circuit. To me, a process is something with a set… Read More →