What do Apple, National Geographic, Pepsi, Toyota, and Twitter all have in common? They all use the golden ratio in their logo designs.
Estimated reading time: 5 minutes
The golden ratio is a fundamental aspect of design work. It’s found almost everywhere in nature, and dates back as far as the Ancient Greeks.Â
Use of the golden ratio leads to a natural look even in the most unnatural settings, and it’s always considered far more pleasing to the human eye.
In the modern world, you can use the golden ratio in every form of design—even on your website. You can lay your landing page out according to this principle, as well as all other pages and the finer details within them, or each element of every page.Â
But first, let’s look at what the golden ratio is and how it works.
A Closer Look At The Golden Ratio
The golden ratio is a mathematical equation that’s linked to the Fibonacci Sequence (the sum of two sequential numbers equals the next number in the sequence). This is interpreted into a spiral that starts off wide and gets exponentially tighter as it swirls inwards. The golden ratio is also expressed as 1:1.61.
Designers and artists have been using this spiral and ratio to determine proportions in their works for generations. Some do it naturally, while others enjoy the mathematical work involved in getting it right.Â
However you get there, the golden ratio creates a design that feels natural and organic, and is far more pleasing to the human eye than anything other proportions.
In design work, many will lay the spiral over their starting shape and use that to plan where to put items within the design.Â
The spiral essentially divides the page up into rectangles that get progressively smaller. This shows you what sized element should go where, and at what point you should place the most important elements that you want people to see.
The ratio of 1:1.61 comes from those rectangles. You start with a rectangular shape (your blank page) and create a square by adding in a new side that will turn the longer sides in the same length as the shorter sides.Â
The square should be 1.61 times the size of the remaining rectangle. You can then apply this technique to each space, creating smaller and smaller blocks to help you with the layout of your design.
Whether you use the spiral or the rectangular method, you will end up with the same general concept. You will also be able to see how best to place the elements within your design.
How To Use The Golden Ratio In Your Web Design
While using the golden ratio in logos is a great way to create the most visually pleasing, memorable brand identity, using it in your website enhances the user experience dramatically.Â
To do this, you need to follow these four simple steps:Â
1. Break Up The Page Layout
You’ll often see websites with a navigation bar and header image across the top that takes up a certain amount of the screen. Many websites are broken into two columns, one being double the width of the other. This is not just convenient because it helps with the navigation through the website. It also creates that first element of the golden ratio.
When designing your website, start with creating this overall form of two-thirds to one third on the page layout. This will immediately create a shape and layout that’s pleasing to the eye.
2. Balance Your Images And Font On The Page
Next, you need to consider what you are going to put where on the page. You need a combination of open space and details, and these need to be balanced according to the golden ratio. As the spiral moves across the layout, you’ll see where you should add more information, and where you should add less.
It’s important to remember that you can have over one spiral on your design. Each one will fit into a smaller and smaller space, giving you more guidance as to where you should place your design elements.
3. Pay Attention To Your Image Crops
Now that you know where to place things, it’s time to add in your images. Going back to the comment of having more than one spiral on your design—each image will have its own spiral.Â
When considering how you are placing the images onto your overall design, think about where they fall into each of the relevant spirals. You need to consider how you crop the image so that the spiral just for that image makes sense.
By considering the golden ratio at both stages, you will end up with a far more interesting and pleasing design for your website.
4. Use The Correct Font Sizes
The golden ratio should influence every element in your web design. You can even apply it to the fonts and typography on your website.Â
When adding in your headings, subheadings and the body text, consider the sizes of the different elements. By keeping them in proportion with each other according to the golden ratio, you will ensure that the text looks balanced and fits into your overall design.
Pick one that you like—choosing the best size for body text is usually the best place to start because it ensures that the main text on your website is easy to read. Then, use the golden ratio to work out the best sizes for the headings. You do this by multiplying the selected font by 1.1618 and then round up or down to the nearest suitable font size.
The general placement of the text should fit into the spirals on your overall design. Larger blocks of text should sit in the wider sections of the spiral. Smaller sections of text or headings you want to draw attention to can sit in the tighter parts of the spiral.
Go For Gold
When you understand the theory behind it, using the golden ratio becomes simple and straightforward. Whether you’re using customizable web templates or web design software, you can use these tips to create the most visually pleasing design possible. The golden ratio is the secret to great-looking designs that make an instant impact. If big brands like Apple and Twitter are doing it, you can too!
What do you think of the golden ratio? Please share your thoughts on any of the social media pages listed below. You can also comment on our MeWe page by joining the MeWe social network.
