Have you ever wondered why you look at some website designs and find them much more satisfying to look at than others? The answer is most likely because of the golden ratio. The golden ratio is a key design theory that’s used across an array of visual and creative industries. The golden ratio in web design heavily influences our creations here at KIJO too.
But what is the golden ratio? In this article, we’ll explore the golden ratio in detail; discover what it is and how to use the golden ratio in web design.
Table Of Contents
- What is the Golden Ratio?
- Golden Ratio in Art
- The Importance of Golden Ratio in Web Design
- 1.618 x Golden Ratio Maths
- Golden Ratio for Website Design
- Golden Ratio in Typography
- Golden Ratio in Logos
- Golden Ratio in Images
- How is the Golden Ratio Used in Websites?
What is the Golden Ratio?
The golden ratio, also known as the “divine proportion” or the “golden mean”, is a mathematical ratio that is commonly found in nature. It is now used throughout art and design.
The golden ratio is actually a number that equates to around 1.618 (this number is also known as ‘Phi’). In the creative industries, designers use the “golden rectangle”. This is a rectangle where the length is 1.618 times the width. From this rectangle we “cut out” a perfect square which leaves us with another golden rectangle. Depending on your design plans you can keep going, cutting out perfect squares and creating new golden rectangles.
So, how do we then use the golden ratio in web design? The golden rectangle allows us to determine where we will put the most important content on a webpage. Usually, we will place the most important content within the perfect square, and the secondary content (such as a sidebar or advert) into the golden rectangle. This then creates a visually appealing page design.
Golden Ratio in Art
The golden ratio dates as far back as Ancient Greece (1200 BCE to 323 BCE). The proportion is commonly found in nature. This led the Greek’s to believe it had a special power over the human brain. And, as many ancient Greek theories prove, they weren’t wrong.
Subconsciously, any artistic design created using the golden ratio theory will be deemed attractive to the human eye. You can see the golden ratio in art, and very famous pieces of art at that. The golden ratio can be seen in Leonardo DaVinci’s Mona Lisa. DaVinci actually illustrated the book “De Divina Proportione” or, when translated, ‘On the Divine Proportion’ by Luca Pacioli, published in 1509. This book was about mathematics and focused heavily on the golden ratio and its application in both art and architecture.
The reality is that humans naturally find symmetrical designs more appealing, and this is exactly what the golden ratio taps into. Golden ratio designs are as close to perfection as you can get.
The Importance of Golden Ratio in Web Design
Symmetrical web design is a more attractive option for website visitors than a non-symmetrical one. In turn, this style of design leads to more conversions and clicks too. Using the golden ratio in web design is therefore essential if you want to create a visually aesthetic website that appeals to users.
1.618 x Golden Ratio Maths
To implement the golden ratio in web design, you have to get to grips with the numbers.
The golden ratio exists when a line (or in the case of web design, a screen) is divided into 2 parts: a and b. The longer part (a) divided by the smaller part (b) should be equal to the sum of a + b, divided by a. Both should equal the golden number, 1.618.
If you’re not mathematically inclined, this can sound confusing at first. The most important thing to remember is the number: 1.618.
Golden Ratio for Website Design
So, how do we use the golden ratio in web design? We can apply the golden ratio to our designs in a variety of different ways.
Golden Ratio in Typography
You can use the golden ratio to ensure the typography on your website is visually appealing to users.
For example, if you’re using a font that’s 12pt for the main body text, you can use the golden ratio to work out what size your headers should be. Simply multiply the font size by 1.618. In the case of a 12pt size font, this would be 19.4. You can then round down to 19pt for your header size.
Golden Ratio in Logos
Your logo doesn’t have to be rectangular in shape in order for you to use the golden ratio on it. In fact, instead of the rectangle, you can use the golden spiral.
The golden spiral is based on the golden ratio. The spiral’s growth factor is the golden number: 1.618. The spiral offers a visual representation of the golden ratio and can be particularly useful when designing logos. With even top brands like Apple, Pepsi to Porche, it’s evident the golden spiral has been used to inform these famous logo designs.
Designers can use the golden spiral to indicate where to put certain aspects of the logo design, and thus make the logo visually appealing to potential customers.
Golden Ratio in Images
How you crop and position images on your website can also be determined by the golden ratio.
When it comes to cropping images, you can use the golden spiral to determine the best composition to opt for. This ensures that the main focal point of the image sits at the centre of the golden spiral. This naturally captures and draws the eye.
The Golden Ratio in UX Design & Layouts
Fluid website layouts are now essential thanks to the need for a responsive, mobile-friendly web design. This means that many web designers now create percentage based designs. This is where a page will scale to fit the screen of the browser. A fluid web design makes integrating the golden ratio easy, you just have to divide the width by 1.618.
A common layout choice for many websites is having a section of “main” content and a sidebar. As we mentioned before, you can use the golden ratio to determine how big your main content section should be compared to how big your sidebar should be.
You can also use the golden ratio to determine the size of features such as your navigation bar and header image.
How is the Golden Ratio Used in Websites?
The golden ratio is a reliable and historic design theory that creates a visually appealing design. When applied in website design, it naturally draws the human eye to specific points within a web page.
When designing websites, we can use the golden ratio to create a hierarchy on a page. We can place content in a way that draws the user’s eye and creates a welcoming and enjoyable user experience.
At KIJO, our team of experts are well versed in utilising the golden ratio in web design. We use it to ensure we create websites that not only perform well for our clients, but are also visually stunning.
If you’d like to find out more about how KIJO can make you and your brand a captivating, beautifully designed website, contact us today.
