Aspect ratio in web design: Introducing golden ratio

  • Home / Blog / Aspect ratio in…

Aspect ratio in web design: Introducing golden ratio

What do Apple, National Geographic, Pepsi, Toyota and Twitter all have in common? They all use golden proportions in logo designs.

Expected reading time: 5 Minutes

The golden ratio is a key aspect of the design work. It is found almost everywhere in nature, and belongs to the history of the ancient Greeks.

The use of golden proportions leads to naturalness even in the most unnatural settings, and it is considered more pleasing to the human eye than ever.

In the modern world, you can also use golden proportions in every form of design on your website. You can customize your landing page according to this rule as well as all the other pages and the great details in them or every element of each page.

But first, let’s see what the golden ratio is and how it works.

A closer look at the golden ratio

The golden ratio is a mathematical equation connected to a Fibonacci sequence (the sum of two random numbers is equal to the next number in the sequence). It translates into a spiral that starts wide and hardens faster as it turns inward. The golden ratio is also expressed as 1: 1.61.

Designers and artists have been using this spiral and proportions for generations to determine the proportions in their works. Some do it naturally, while others enjoy the mathematical work involved in correcting it.

However, once you get there, the golden ratio creates a design that feels natural and organic, and pleases the human eye more than any other ratio.

In design work, many people will put a spiral over their initial shape and use it to decide where to place the items inside the design.

The spiral basically divides the page into rectangles that gradually get smaller. This lets you know which size element should go, and where you should place the most important element that you want people to see.

The ratio of 1: 1.61 comes from these rectangles. You start with a rectangular shape (your blank page) and add a new aspect to create a square that will reduce the length of the long side.

The square should be 1.61 times the size of the rest of the rectangle. You can then use this technique everywhere, creating smaller and smaller blocks to help organize your design.

Whether you use the spiral or rectangular method, you will end up with the same general concept. You will also be able to see the extent to which the elements should be included in your design.

How to use the golden ratio in your web design

While using the golden ratio in a logo is a great way to create a very weak, memorable brand identity, using it on your website dramatically enhances the user experience.

To do this, you need to follow these four simple steps:

1. Break pagination

You will often see websites that are at the top of the navigation bar and header image that take up a certain amount of screen space. Most websites are broken down into two columns, one wide and the other wide. It’s not just that easy because it helps navigate through the website. It also forms the first element of the golden ratio.

When designing your website, start by creating this overall look of two-thirds to one-third on the page layout. Right away. Only then will a shape and order be created which pleases the eye.

2. Balance your images and fonts on the page

Next, you need to consider where you are putting the page. You need space and a set of details, and they need to be balanced according to the golden ratio. As you move this Israel into the layout, you’ll see where you should add more information, and where you should add less.

It is important to remember that you can have more than one spiral on your design. Each one will fit in a smaller and smaller space, giving you more guidance on where to place your design elements.

3. Pay attention to your image crops

Now that you know where to put things, it’s time to add them to your photos. Returning to the comment of having more than one spiral on your design – each icon will have its own spiral.

When you are thinking about how you are designing your overall design, think about where they fall in each relevant spiral. You need to consider how you create the image so that the spiral is meaningful just for that image.

By considering the golden ratio in both stages, you will end up with a much more interesting and pleasant design for your website.

4. Use the correct font size

The golden ratio affects every element in your web design. You can even apply it to the fonts and typography on your website.

When adding your titles, subtitles and body text, consider the size of the different elements. By keeping them in proportion to each other according to the golden ratio, you will make sure that the text looks balanced and fits into your overall design.

Choose something you like. Choosing the best size for body text is usually the best place to start as it ensures that the basic text on your website is easy to read. Next, use the golden ratio to create the best size for the titles. Multiply the selected font by 1.1618 and then round to the nearest or appropriate font size.

General text placement should fit in a spiral in your overall design. Large blocks of text sit in wide sections of the spiral. The small pieces of text or small headings that you want to draw can fit in the hard parts of the spiral.

Go to sleep

When you understand the theory behind it, the golden ratio becomes easier and more straightforward to use. Whether you are using custom web templates or web design software, you can use these tips to create highly invasive designs. The golden ratio is the secret of great looking designs that have an immediate effect. If big brands like Apple and Twitter are working, you can too!

What do you think about the golden ratio? Please share your thoughts on any of the social media pages listed below. You can also join the Mayway social network and comment on our Mayway page.

Last updated June 15, 2021.

Web design golden ratio

Write a Comment

Your email address will not be published. Required fields are marked *

x