Gold ratio in web design

Several months ago I wrote an article about photography in web design and I am really inspired to write about the golden ratio in web design because it is as important for UX design as it is for photography.

UX design requires creativity and well-tested ideas, sometimes perfection and natural balance. If you want to be on the same wave with Leonardo da Vinci, Salvador Dali and other exceptionally creative and talented people, you need to know what they all have in common: the use of golden proportions in their designs. And today we will see why and how the golden ratio in web design is used to achieve a beautifully balanced interface and for people to enjoy their experience with their product.

To be honest it all comes from the ancient Greeks, who were among the first to discover a beautiful oddity found in nature: trees, flowers, animals, people, etc. He expressed this phenomenon with the Greek letter Fei, but today, we call it the Golden Ratio. Since that time, artists and architects have used a strong sense of proportion and golden proportions to create aesthetically pleasing architectural and art pieces. Even now we consider beautiful people to be golden ratio and we inadvertently form this opinion; Location of eyebrows, nose, mouth, eyes etc.

Now like many years ago, the Golden Card is used to determine the format of credit cards, books, furniture, interior design, decoration of plates in restaurants, etc. You see it in the dashboard of Twitter, in the Pyramid of Giza, in Da Vinci’s room. Mona Lisa in the logo of Google, Pepsi, Twitter, Apple, etc., it is literally everywhere you look. We had developed with a golden ratio, most of the masterpieces we studied in school had this golden ratio. Sometimes we don’t really know why we choose one option over another, but in most cases if we start measuring ratios, we’ll see that golden ratio designs are preferred.

Photo Source: Golden Number

The same happens with ux design. Web pages have a more classical and balanced appearance when UX designers use the golden ratio in web design. These designs look just right and unintentional to the users. Pictures, blocks of text, sidebars, buttons, etc. can all be neatly placed in golden rectangles that create an “ideal” design. Visitors feel comfortable interacting with the website as the proportions are familiar with art, classical buildings and many works of nature.

Remember my article about neuroscience in web design?

There we talked about familiarity, unconscious mind and the importance of how we can influence it. By using the golden ratio in web design, you appeal to your audience and inadvertently the layout of the website seems right for them as well. This makes them more likely to read and view your website in depth. Golden ratios are also used in web design to balance content that is text heavy, creating hierarchies and engaging users’ eyes in specific areas. If you want to use neuroscience in your tasks and play with different parts of the brain then this is one of the triggers you can use.

Golden Ratio in Web Design: Math and Beauty

The gold ratio is known to be 1: 1.618. Of course, the mathematical equation at work is much more complex than that, but it is the basis of creation. We take a width of about 1000 pixels and divide it by 1.618 to get a height of about 618 pixels. Then we add a 618 x 618 square on the right side of the canvas, leaving a 382 x 618 rectangle behind – another golden rectangle, etc.! As you can find, a “golden rectangle” is a rectangle whose length is 1.6180 times its width.

The golden rectangle is the most commonly used figure to see the golden ratio, but you can also use circles and triangles in a very similar way.

For example, as you can see on the picture you can make a golden spiral shape almost out of circles and those circles fit perfectly inside the system of golden rectangles. It is again aesthetically appealing and achieves visual harmony.

A lot of designers use it, a lot of designers do not. It is up to you, usually if a person likes numbers, mathematics and perfection, he uses a 100% golden ratio to make sure the design is well thought out and calculated.


If you want to use the golden ratio, it is important to apply it to your typographic graphic design elements as well. For example, suppose you are using a 10pt font for body text. Using the golden ratio, you can determine the best size by multiplying the body text number for headings by 1.618. So, in our case it will be 10 * 1.61 in = 14.1 font, which you can take in the 14th font. The combination of 10 and 16 looks really good and is also good for UX design.

Leave a Comment