At a glance, the Golden Ratio may not sound very relevant to your business website. It’s a mathematical ratio of 1:1.618 that dates back 4,000 years.
However, this nifty bit of maths has been used by designers, artists and architects for millennia. And, we’re betting you’ve seen plenty of designs, buildings and paintings that use the rule.
In basic terms, Golden Ratio is perfect asymmetry.
The rule is that you multiply the length of your smallest element and then multiply it by 1.618 and the result will be the perfect length of the bigger element.
Why should I use Golden Ratio?
The reason Golden Ratio is relevant to web design is because it helps you work with proportions and structure content in a visually appealing way, making a great first impression to users and helping them navigate your site with ease.
Create a sense of familiarity.
Part of the reason Golden Ratio is so visually pleasing is that it’s so familiar to us. And, as we mentioned in our blog on Grids and Guides, familiarity in design helps the user to easily navigate and use our digital products.
Make a good impression.
Golden Ratio is also a great way to make a good first impression on your website. Within a matter of seconds, a person landing on your website will make a subconscious judgement of whether they want to stay or not.
There are a number of factors that affect this judgement, but how easy your website is to navigate plays a huge role in this decision.
Prioritise content more effectively.
When designing a website for your business, you’re probably going to have a lot of content that needs organising in an engaging way to help your reader quickly understand your brand and key messages.
Golden Ratio enables you to structure this content in an effective way by dividing your layout into the proportion of 1:1.618 and then placing the content in order of importance.
Establish typography hierarchy.
Golden Ratio is also a great way to scale your typography to ensure your headings, subheadings and body copy is all a proportionate size and distance away from each other to clearly distinguish different areas of content.
All you need to do is find out the size of your body copy (for example 10pt) and multiply it by 1.618 to give you your subheading size of a 16pt subheading.
Traps to avoid with Golden Ratio.
When using Golden Ratio in your web design, you need to consider how the site is going to look on mobile.
According to recent statistics, almost half of all web traffic comes from mobile devices, so it’s important to think about how the elements in your design are going to look on a smartphone or tablet, as well as on a desktop.
If you plan this from the start, it will save you time in the long run and ensure everyone who wants to access your website is getting the same, frictionless user experience.
Getting started with Golden Ratio and web design.
This article shows you how to calculate and apply Golden Ratio.
In Adobe Photoshop and Adobe Illustrator, you can create guides and layers to help you use Golden Ratio. Meanwhile, there are a few tools out there, such as Phiculator and Atrise.
Key takeaways:
- Golden Ratio helps you to place elements in a visually pleasing way.
- Always think of how your design will look when viewed on mobile phones and tablets.
- Try out Golden Ratio to help you organise important content on your website.
If you have any questions about Golden Ratio and how to use it when designing your website, get in touch with a member of our team right now.
