Golden Ratio in UI design

Posted 9 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

I recently worked on defining the spacing system for Practice Fusion’s EHR (Electronic Health Record) product, to ensure improved readability and consistency across all pages. I came up with 3 spacing rules (hint: rule of 3 C’s) and 4 spacing values, which worked harmoniously well with the new typographic system. The problem “When positioning elements vertically, the designer has to… Read More →

A selection of prototypes, photos, and learnings from Design Club at a special CoderDojo We recently joined CoderDojo London to deliver two days of workshops for 7–17 year-olds. We were hosted by UCL at Base KX, near Kings Cross. There were tables dotted about, offering coding activities. There were computers everywhere. Except on our table. We we were unplugged. Okay,… Read More →

“Dashboard”, “Big Data”, “Data visualization”, “Analytics” — there’s been an explosion of people and companies looking to do interesting things with their data. I’ve been lucky to work on dozens of data-heavy interfaces throughout my career and I wanted to share some thoughts on how to arrive at a distinct and meaningful product. Many people have already tackled this topic,… Read More →