Great web design these days is often the result of two things –
usability testing and great aesthetics. If both of these facets remain
true, for the most part a design will be successful.
However on the aesthetic side of things, creating a a clear, intuitive and user friendly design solution can be the result of many things such as grids, typography, consistent UI elements and well structured layout.
Nonetheless you still need to create a sense of order, structure, visual harmony and balance in your design and this is where things like the “Golden Ratio” or “Rule of Thirds” can come into play.
So you might have heard of these things right? Or maybe you’ve even seen a design that claims to use them – like this one here. I often consider terms like these as “design buzzwords” or “Duzzwords” if you will. These are things that people throw into conversations to make themselves look smart, when in reality their understanding of the concept itself is very much surface level.
So let’s clear a few things up and take a look at these two concepts and their practical use (if any) in web design.
The golden ratio is based on a relatively simple mathematical equation or sum which produces a ratio. As a visual representation in a straight line, in its most simple mathematical form, the ratio looks like this:
![golden-line](http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/03/golden-line.jpg)
As you can see there is a unique ratio here which shares a relationship between the two sizes and proportions of the lines. As a decimal, the ratio of b:a is represented as 1.618033… when a > b. In the example above, if we assumed b was equal to 5 the golden ratio would be expressed algebraically like this:
![golden-sum](http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/03/golden-sum.jpg)
1 + 2 = 3
3+2=5
3+5=8
5+8=13 etc..
Written as a rule, the expression is xn = xn-1 + xn-2.
The sequence is closely tied to the Golden ratio because if you take any two sequential numbers and divide the latter by the former, the fraction is very close to the golden ratio. As the number value increases, the fraction becomes even closer to the golden ratio. For example 8/5 is 1.6, 34/21 is 1.619 and so on.
The “diagram” itself is called the ‘Fibonacci Spiral’ and is really quite simple. It’s often considered one of the most visually satisfying of all geometric forms.
The spiral is created by connecting a series of quarter circles drawn inside an array of squares based on Fibbonacci dimensions. In its most basic form the spiral/squares can be infinite, however it’s commonly presented from 1 to 34.
In the diagram below the squares’ dimension’s are relative to each other, so square ‘8’ is created by adding the dimensions of 5 and 3 and so on. If you’re a visual thinker like me, most things are better understood visually.
![fibonacci-spiral](http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/03/fibonacci-spiral-1024x663.jpg)
Furthermore, If you take one point on the spiral, and then a second point one-quarter of a turn away from it, the second point is Phi times farther from the center than the first point. The spiral increases by a factor of Phi.
The resulting spiral is found in all kinds of things from flowers and nature, to paintings and architecture.
To apply the rule, you simply divide an image into 9 equal parts by creating two equally-spaced horizontal lines and two equally-spaced vertical lines. The idea is to align the focal point approximately with the left most vertical divide. The horizon or ‘vanishing point’ should also run along the bottom most horizontal line. This avoids the image looking ‘split’ in half by the horizon horizontally or split vertically by a focal point.
![rule-of-thirds-example](http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/03/rule-of-thirds-example.gif)
Of course it doesn’t just apply photography. It can be used in poster design, web design, advertising, film etc…
Here’s a widely known example of its use in art on the Mona Lisa. In the example below, we can draw a rectangle whose base extends from the woman’s right wrist to her left elbow and extend the rectangle vertically until it reaches the top of her head, creating a golden rectangle. If we then create squares inside that Golden Rectangle based on the Golden Spiral, all the important focal points of the woman are on the edges of the internal squares – her chin, her eye, her nose, and the upturned corner of her mysterious mouth. The general ‘flow’ of the painting itself seems to follow the direction of the golden spiral.
It’s believed that Leonardo da Vinci incorporated many forms of the golden ratio into his work, as seen in the famous Vitruvian Man.
![mona_lis_golden_ratio](http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/03/mona_lis_golden_ratio.jpg)
In nature, the Golden Spiral can be found everywhere from galaxies and flowers to hurricanes and shells, here are two examples:
![spiral-nature](http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/03/spiral-nature.jpg)
Likewise, there’s a lot of “non believers” out there that seem to think the Golden Ratio is some sort of myth. Actually it’s not, it’s simple math(s) and as I’m about to show you, it works.
Below is a simple wireframe based layout I’ve created specifically to demonstrate how it works. If you subscribe to our newsletter, it should look familiar. In terms of design, it’s based on our newsletter. However I’ve designed the entire layout and proportions from scratch to demonstrate how the golden ratio actually works.
![standard-layout-design](http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/03/standard-layout-design.jpg)
Looks pretty simple right? Well actually it is! The design itself is based on a 960px layout with 20px padding either side. However the entire layout as I will explain is based on the golden ratio.
Using a single Golden scale which spans 960px across I set the height of the header, placing the logo along the spiral line. As you can see below, this then dictates the size of the image below the header.
![golden-header](http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/03/golden-header.jpg)
Moving down the layout, I then used the same scale for the next piece of the layout:
![layout-golden-step2](http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/03/layout-golden-step2.jpg)
I then continued to cascade my way down the layout using the same scale for the various other elements:
![golden-design-step3](http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/03/golden-design-step3.jpg)
Because the layout itself is based on the Golden Ratio there are a number of proportional relationships within it which all abide by the proportion of a golden spiral and rectangle. At the bottom of this article, I’ve included a PSD file, which includes the design and the scale I used. You can then use it to measure things and see for yourself. Although there are way too many examples of the ratio in the layout to present properly, here’s a quick overview of just a few proportions.
![using-golden-ratrio](http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/03/using-golden-ratrio.jpg)
It’s important to understand there’s no rule of thumb when using it however. Although the ratio, rectangle and spiral are based on math(s), application can be subjective. For example, you need to consider what it will be based on when incorporating it into a design What are the important parts of a design that need to be focused on, logo, sidebar, header, navigation, images etc… Will you use it just for layout, or will you extend it into buttons, image sizes and text. There’s so many possibilities, hopefully this article has shed some insight into how it works though.
Go ahead and download the PSD to take a deeper look at some of the layout proportions or play with the scale yourself. You can rotate and flip the scale around as you like to see different proportions from various layout sections.
However on the aesthetic side of things, creating a a clear, intuitive and user friendly design solution can be the result of many things such as grids, typography, consistent UI elements and well structured layout.
Nonetheless you still need to create a sense of order, structure, visual harmony and balance in your design and this is where things like the “Golden Ratio” or “Rule of Thirds” can come into play.
So you might have heard of these things right? Or maybe you’ve even seen a design that claims to use them – like this one here. I often consider terms like these as “design buzzwords” or “Duzzwords” if you will. These are things that people throw into conversations to make themselves look smart, when in reality their understanding of the concept itself is very much surface level.
So let’s clear a few things up and take a look at these two concepts and their practical use (if any) in web design.
What is The Golden Ratio and Where Did it Come From?
The all important Golden Ratio, arguably one of the most misunderstood concepts in web design and design in general. It’s difficult to say who “discovered” the ratio originally, however it’s been used throughout history for over 2400 years in everything from astronomy, science, painting, math(s) and architecture, to art, design, music, the pyramids and of-course nature.The golden ratio is based on a relatively simple mathematical equation or sum which produces a ratio. As a visual representation in a straight line, in its most simple mathematical form, the ratio looks like this:
![golden-line](http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/03/golden-line.jpg)
As you can see there is a unique ratio here which shares a relationship between the two sizes and proportions of the lines. As a decimal, the ratio of b:a is represented as 1.618033… when a > b. In the example above, if we assumed b was equal to 5 the golden ratio would be expressed algebraically like this:
![golden-sum](http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/03/golden-sum.jpg)
Fibonacci Sequence
You may have heard of the Fibonacci sequence at some point, but what is it really and how does it work? Well, it’s a series of numbers where any given number is created by adding the two numbers before it. Starting with 0 and 1, the sequence goes 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, and so forth. So:1 + 2 = 3
3+2=5
3+5=8
5+8=13 etc..
Written as a rule, the expression is xn = xn-1 + xn-2.
The sequence is closely tied to the Golden ratio because if you take any two sequential numbers and divide the latter by the former, the fraction is very close to the golden ratio. As the number value increases, the fraction becomes even closer to the golden ratio. For example 8/5 is 1.6, 34/21 is 1.619 and so on.
The Golden Spiral/Rectangle
Ok so you’ve almost definitely seen this at some point or another right? But what is it other than a fancy piece of geometry that some designers randomly overlay on things without any actual meaning?The “diagram” itself is called the ‘Fibonacci Spiral’ and is really quite simple. It’s often considered one of the most visually satisfying of all geometric forms.
The spiral is created by connecting a series of quarter circles drawn inside an array of squares based on Fibbonacci dimensions. In its most basic form the spiral/squares can be infinite, however it’s commonly presented from 1 to 34.
In the diagram below the squares’ dimension’s are relative to each other, so square ‘8’ is created by adding the dimensions of 5 and 3 and so on. If you’re a visual thinker like me, most things are better understood visually.
![fibonacci-spiral](http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/03/fibonacci-spiral-1024x663.jpg)
Furthermore, If you take one point on the spiral, and then a second point one-quarter of a turn away from it, the second point is Phi times farther from the center than the first point. The spiral increases by a factor of Phi.
The resulting spiral is found in all kinds of things from flowers and nature, to paintings and architecture.
Rule Of Thirds
The rule of thirds is a bastardized “idiot proof” variant of the Golden spiral and is often used in photography and video to crop frames to make them aesthetically pleasing.To apply the rule, you simply divide an image into 9 equal parts by creating two equally-spaced horizontal lines and two equally-spaced vertical lines. The idea is to align the focal point approximately with the left most vertical divide. The horizon or ‘vanishing point’ should also run along the bottom most horizontal line. This avoids the image looking ‘split’ in half by the horizon horizontally or split vertically by a focal point.
![rule-of-thirds-example](http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/03/rule-of-thirds-example.gif)
Of course it doesn’t just apply photography. It can be used in poster design, web design, advertising, film etc…
An Example Of The Golden Spiral In Use
Visually, application of the golden ratio is often achieved by using the Golden Spiral, which as we discussed is a visual representation of the Fibonacci sequence, which is closely related to the Golden ratio.Here’s a widely known example of its use in art on the Mona Lisa. In the example below, we can draw a rectangle whose base extends from the woman’s right wrist to her left elbow and extend the rectangle vertically until it reaches the top of her head, creating a golden rectangle. If we then create squares inside that Golden Rectangle based on the Golden Spiral, all the important focal points of the woman are on the edges of the internal squares – her chin, her eye, her nose, and the upturned corner of her mysterious mouth. The general ‘flow’ of the painting itself seems to follow the direction of the golden spiral.
It’s believed that Leonardo da Vinci incorporated many forms of the golden ratio into his work, as seen in the famous Vitruvian Man.
![mona_lis_golden_ratio](http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/03/mona_lis_golden_ratio.jpg)
In nature, the Golden Spiral can be found everywhere from galaxies and flowers to hurricanes and shells, here are two examples:
![spiral-nature](http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/03/spiral-nature.jpg)
Application In Web Design
A lot of designers make the mistake of thinking that by simply dividing or multiplying things by 1.61, they’re somehow creating a “Golden Ratio based design”. This is incorrect and is basically just fodder. You can’t just use the number randomly and expect things to somehow magically be proportional. There is a method to using it.Likewise, there’s a lot of “non believers” out there that seem to think the Golden Ratio is some sort of myth. Actually it’s not, it’s simple math(s) and as I’m about to show you, it works.
Below is a simple wireframe based layout I’ve created specifically to demonstrate how it works. If you subscribe to our newsletter, it should look familiar. In terms of design, it’s based on our newsletter. However I’ve designed the entire layout and proportions from scratch to demonstrate how the golden ratio actually works.
![standard-layout-design](http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/03/standard-layout-design.jpg)
Looks pretty simple right? Well actually it is! The design itself is based on a 960px layout with 20px padding either side. However the entire layout as I will explain is based on the golden ratio.
Using a single Golden scale which spans 960px across I set the height of the header, placing the logo along the spiral line. As you can see below, this then dictates the size of the image below the header.
![golden-header](http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/03/golden-header.jpg)
Moving down the layout, I then used the same scale for the next piece of the layout:
![layout-golden-step2](http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/03/layout-golden-step2.jpg)
I then continued to cascade my way down the layout using the same scale for the various other elements:
![golden-design-step3](http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/03/golden-design-step3.jpg)
Because the layout itself is based on the Golden Ratio there are a number of proportional relationships within it which all abide by the proportion of a golden spiral and rectangle. At the bottom of this article, I’ve included a PSD file, which includes the design and the scale I used. You can then use it to measure things and see for yourself. Although there are way too many examples of the ratio in the layout to present properly, here’s a quick overview of just a few proportions.
![using-golden-ratrio](http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/03/using-golden-ratrio.jpg)
Final Notes
As you can see, using the golden ratio in web design is not a myth at all. Infact it’s based on some relatively simple math(s) and is actually straight forward to implement. Usually I would use Illustrator or sketch for this kind of stuff, however I used Photoshop simply due to it’s wide use.It’s important to understand there’s no rule of thumb when using it however. Although the ratio, rectangle and spiral are based on math(s), application can be subjective. For example, you need to consider what it will be based on when incorporating it into a design What are the important parts of a design that need to be focused on, logo, sidebar, header, navigation, images etc… Will you use it just for layout, or will you extend it into buttons, image sizes and text. There’s so many possibilities, hopefully this article has shed some insight into how it works though.
Go ahead and download the PSD to take a deeper look at some of the layout proportions or play with the scale yourself. You can rotate and flip the scale around as you like to see different proportions from various layout sections.
I really appreciate this wonderful post that you have provided for us. I assure this would be beneficial for most of the people.viral marketing
ReplyDeleteThis idea is mind blowing. I think everyone should know such information like you have described on this post. Thank you for sharing this explanation.Your final conclusion was good.
ReplyDeleteselenium Classes in chennai
selenium Training in Chennai
selenium Testing Training
JAVA Training Chennai
JAVA J2EE Training in Chennai
iOS Course Chennai
mobile application development training in chennai
Nice post. I learned some new information. Thanks for sharing.
ReplyDeleteEducation
Technology
Thank you for sharing this wonderful information with us. Keep up the good work.
ReplyDeleteBest Placement Training institutes in Chennai | Training and job placement in Chennai | Training come placement in Chennai | Placement courses in Chennai | Placement courses in Velachery | Best Placement Training institutes in Tambaram
This blog is more effective and it is very much useful for me.
ReplyDeletewe need more information please keep update more.
best android training institute in bangalore with placement
Android Training courses near me
Android Training in Amjikarai
Android Training in Padur
Thanks for sharing this information admin, it helps me to learn new things. Continue sharing more like this.
ReplyDeleteAzure Training in Chennai
Azure course in Chennai
Windows Azure course in Chennai
RPA Training in Chennai
AWS Certification in Chennai
Blue Prism Training in Chennai
Very interesting post! Thanks for sharing your experience suggestions.
ReplyDeleteairport ground staff training courses in chennai
airport ground staff training in chennai
ground staff training in chennai
Awesome Post. It was a pleasure reading your article. Thanks for sharing.
ReplyDeletePega training institutes
Pega training courses
Pega administrator training
Pega testing training
Pega software training
Pega software course
I have gone through your blog, it was very much useful for me and because of your blog, and also I gained many unknown information, the way you have clearly explained is really fantastic. Kindly post more like this, Thank You.
ReplyDeleteseo training in chennai
Air Hostess Training Institute in chennai
air hostess academy in chennai
air hostess course in chennai
Amazing Post. Great write-up. Extra-ordinary work. Waiting for your next Post.
ReplyDeleteSocial Media Marketing Courses in Chennai
Social Media Marketing Training in Chennai
Social Media Training in Chennai
Social Media Marketing Training
Social Media Marketing Courses
Social Media Training
Social Media Marketing Training
Social Media Courses
Quality post very useful
ReplyDeleteAb Initio training chennai
Great content thanks for sharing this informative blog which provided me technical information keep posting.
ReplyDeleteData Science Training in Chennai
Data Science course in anna nagar
Data Science course in chennai
Data science course in Bangalore
Data Science course in marathahalli
And indeed, I’m just always astounded concerning the remarkable things served by you. Some four facts on this page are undeniably the most effective I’ve had.
ReplyDeleteData science Training in Chennai | No.1 Data Science Training in Chennai
RPA Training in Chennai | No.1 RPA Training in Chennai
AWS Training in Chennai | No.1 AWS Training in Chennai
Devops Training in Chennai | Best Devops Training in Chennai
Selenium Training in Chennai | Best Selenium Training in Chennai
Java Training in Chennai | Best Java Training in Chennai
It’s great to come across a blog every once in a while that isn’t the same out of date rehashed material. Fantastic read.
ReplyDeleteDatascience Course in Chennai | Datascience Training in Chennai
I gotta favorite this website it seems very helpful . Web development belize
ReplyDeleteMy rather long internet look up has at the end of the day been compensated with pleasant insight to talk about with my family and friends.
ReplyDeleteBest PHP Training Institute in Chennai|PHP Course in chennai
Best .Net Training Institute in Chennai
MCSE Training in Chennai
AI Training in Chennai
SEO Training in Chennai
It’s great to come across a blog every once in a while that isn’t the same out of date rehashed material. Fantastic read.
ReplyDeleteData science Course Training in Chennai |Best Data Science Training Institute in Chennai
RPA Course Training in Chennai |Best RPA Training Institute in Chennai
Great post very useful info thanks for this post ....
ReplyDeletedata science training chennai | data science class in chennai
Blueprism training in chennai | blueprism training class chennai
very good
ReplyDeleteinplant training in chennai
inplant training in chennai for it
suden web hosting
tunisia hosting
uruguay web hosting
Bermuda web hosting
Botswana hosting
armenia web hosting
lebanon web hosting
Really i am Enjoy Reading all the Articles...Thanks for Such an Interesting Information's and waiting to read many more Articles like this and click below for more...
ReplyDeleteJava training in chennai | Java training in annanagar | Java training in omr | Java training in porur | Java training in tambaram | Java training in velachery
Thank you for sharing such great information with us. I really appreciate everything that you’ve done here and am glad to know that you really care about the world that we live in devops training in chennai | devops training in anna nagar | devops training in omr | devops training in porur | devops training in tambaram | devops training in velachery
ReplyDeleteI'm useful article. Is very intitative.
ReplyDeletePython Training in Chennai
Python Training in Bangalore
Python Training in Hyderabad
Python Training in Coimbatore
Python Training
python online training
python flask training
python flask online training
Amazing Article ! I would like to thank you for the efforts you had made for writing this awesome article. This article inspired me to read more. keep it up.
ReplyDeleteJava Training in Chennai
Java Training in Velachery
Java Training inTambaram
Java Training in Porur
Java Training in Omr
Java Training in Annanagar
Awesome Post. It was a pleasure reading your article. Thanks for sharing.
ReplyDeleteDigital Marketing Training in Chennai
Digital Marketing Training in Velachery
Digital Marketing Training in Tambaram
Digital Marketing Training in Porur
Digital Marketing Training in Omr
Digital MarketingTraining in Annanagar
Thanks for your efforts in sharing this effective tips to my vision. kindly keep doing more. Waiting for more updates.
ReplyDeleteSoftware Testing Training in Chennai
Software Testing Training in Velachery
Software Testing Training in Tambaram
Software Testing Training in Porur
Software Testing Training in Omr
Software Testing Training in Annanagar
Nice post. Check best machine learning training institute in bangalore
ReplyDeleteInspiring writings and I greatly admired what you have to say , I hope you continue to provide new ideas for us all and greetings success always for you..Keep update more information..
ReplyDeleteDevOps Training in Chennai
DevOps Course in Chennai
Please continue this great work and I look forward to more of your awesome blog posts. Webdesign bureau
ReplyDeleteSuperbly written article, if only all bloggers offered the same content as you, the internet would be a far better place.. Webdevelopment
ReplyDeleteI love the way you write and share your niche! Very interesting and different! Keep it coming! Webdesign
ReplyDeleteVery Informative blog thank you for sharing. Keep sharing.
ReplyDeleteBest software training institute in Chennai. Make your career development the best by learning software courses.
ios developer training in chennai
cloud computing training in chennai
devops training in chennai
Informative post thanks for sharing
ReplyDeleteSai Satcharitra Pdf