by Steven Bradley on May 16, 2011 Archived in Web Design You are here: Home / Blog / Web Design / How to Use Golden Section Proportions In Your Designs “The power of the golden section to create harmony arises from its unique capacity to unite different parts of a whole so that each preserves its own identity and yet blends into the greater pattern of a single whole.” — György Dóczi, The Power of Limits Golden section proportions can be found in both nature and man-made structures. They exist in the proportions of human beings, the growth patterns of plants, animals, and insects, and structures like Stonehenge and the Parthenon. Golden section proportions are also present in Greek art, writing, and architecture, and in the spiral shape of shells. Whether we’ve been genetically programmed to like them or we find them pleasing due to all the examples around us, the golden section has clearly been a part of nature and human creation throughout history. Try linkbird for free Ad linkbird.com/en/free-trial/ Your ultimate tool for successful SEO Linkbuilding campaigns!
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Book About Work Archives Notebook Login
How to Use Golden Section Proportions In Your Designsby Steven Bradley on May 16, 2011
Archived in Web Design
You are here:
Home / Blog / Web Design / How to Use Golden Section Proportions In Your Designs
“The power of the golden section to create harmony arises from its unique capacity to unitedifferent parts of a whole so that each preserves its own identity and yet blends into the greaterpattern of a single whole.”— György Dóczi, The Power of Limits
Golden section proportions can be found in both nature and man-made structures. They exist inthe proportions of human beings, the growth patterns of plants, animals, and insects, andstructures like Stonehenge and the Parthenon.
Golden section proportions are also present in Greek art, writing, and architecture, and in thespiral shape of shells.
Whether we’ve been genetically programmed to like them or we find them pleasing due to allthe examples around us, the golden section has clearly been a part of nature and human creationthroughout history.
Try linkbird for freeAd linkbird.com/en/free-trial/
Your ultimate tool forsuccessful SEO Linkbuildingcampaigns!
We have a preference toward objects that use golden proportions.
What is the Golden Ratio?
The golden ratio is one where the ratio of the smaller segment to the larger segment is the same asthe larger segment to the sum of both segments. This is more easily seen in a simple diagram.
The golden ratio or divine proportion is a visual representation of the golden number Phi (Φ) whichis approximately 1.618.
The Fibonacci Sequence
The mathematics behind the golden ratio is heavily connected to the Fibonacci Sequence. If you’reunfamiliar with the fibonacci sequence, it begins by definition with the numbers 0, 1 and then
each successive number in the sequence is the sum of the previous two numbers.
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55…
I’ll spare you the deep mathematics talk (we’ll just do a bit of division), since what we’re mainlyinterested in is how the sequence relates to the golden section.
If you take any number in the sequence and divide it by the previous number the resultapproximates Phi or the golden ratio.
With early numbers in the sequence this may not appear to be true, but as we continue along thesequence the division approaches 1.618 rather quickly.
2/1 = 2.03/2 = 1.55/3 = 1.678/5 = 1.613/8 = 1.62521/13 = 1.61534/21 = 1.61955/34 = 1.6176
As you might expect the Fibonacci sequence is also found in art and nature. Some have argued thatVirgil used the sequence in the poetry of the Aenid. It’s found in the musical compositions ofMozart.
Vitruvious, da Vinci, and Durer used it to create divine proportions of man.
The ratio of the numbers 13/8 are found in pine cone spirals and the ratio of numbers 34/21 arefound in the spiral of a sunflower.
Many biological growth patterns approach the golden section instead of being exact in the sameway the Fibonacci Sequence approaches the golden section ratio.
Golden Section Shapes
When people think of shapes with golden section ratios they typically think of a golden rectanglewhere one side divided by the other is 1.618. However, a variety of mathematics can be applied todifferent layouts and a variety of shapes can be constructed from golden section proportions.
You can create golden rectangles, triangles, ellipses, pentagrams, and spirals. Think outside thebox or in this case outside the golden rectangle. Click the image above to see how some goldenshapes can be constructed.
How to Use the Golden Section in Design
Hopefully some of the above has convinced you of the aesthetic qualities of golden sectionproportions. Now how do you actually apply these principles in your design and when might youuse them?
The first use of the golden section is when creating a grid for your design. Let’s consider a simplecase of a two column layout with a fixed width of 960px. This is a rather standard layout andwidth.
960 px / 1.618 = 593 px960 px – 593 px = 367 px
From the above our content column would be 593 px and our sidebar would be 367 px. An evenbetter approach if we’d like our design to be fluid would be to use % or em as a measurement.
If we stick with 960 px for the overall width of our layout and assume a default font size of 16pxthen:
960px / 16px = 60em (total width)60 * 61.8% = 37 em (larger section)60em – 37 em = 23 em (smaller section)
60 / 37 = 1.6237 / 23 = 1.61
Not exactly Phi, but very close.
Mark Boulton has an excellent post running you through constructing an adaptive gird this way aswell as providing the css to make it happen. Mark links to a simple demo in his article and youcan see a more realistic demo here.
The above is all about dividing your page horizontally using the golden ratio. Dividing the pagevertically is another matter.
In print design you can control both the height and width of the page. In web design the heightof the page tends to vary based on the content. You could set an absolute height if you want,though it’s generally not practical.
Where it might be more appropriate to use the golden section in web design is to create buttonsusing golden section proportions or look to different sections of your page and see if a goldenratio will work when deciding what size they should be.
For example on many home pages the main content will leave out the second column and create asingle column for the one page. Your content area could use a height of 593 px (assuming a 960px width layout) and become a golden section rectangle.
Other shapes you add to your design (ellipses, triangles) could be constructed as golden sectionshapes. You could use the golden ratio when setting width and height of any images you includein your design.
Essentially any place where the dimensions of an element will be fixed a golden shape can becreated.
Below are links to resources and tutorials to help you build golden section grids:
Illustrator: Golden SectionGrid Templates from The Grid SystemPSD Template for the Golden GridGolden Section plugin for various image editing programsO rule + golden proportion for calculating the gutter in the gridGolden Grid system generator
Another interesting application for the golden section is in setting up a typographic scale. TimBrown recently described how he set up a modular scale based on the golden ratio in a recentpost for A List Apart titled More Meaningful Typography.
The Rule of Thirds: A Simpli�ed Golden Section
Consider again the Fibonacci sequence, particularly the early numbers in the series. Using thenumbers 2 and 3 from the series we get a simple approximation of the golden section as 1.667.(2/3), which leads us to the rule of thirds.
A 2-column website could make use of this rule of thirds to have a content area 2/3 the width ofthe whole and a sidebar 1/3 the width. It’s similar to what we did above without all the math.
The rule of thirds is often applied to images in order to create more interest. By dividing an imageinto thirds both horizontally and vertically you create a grid of 9 rectangles.
You want to align important elements of the image around the central rectangle, ideally at any ofthe 4 corners of that rectangle. This creates tension and adds interest and energy to yourcomposition.
The image above is one I captured in Cooperstown, NY, just down the road from the Baseball Hallof Fame. In the original picture the lighthouse is centered horizontally and it’s hardly a greatimage.
I cropped it so the lighthouse aligns along the right edge of the central rectangle and the horizonaligns along the bottom edge of the same rectangle. The cropped image while, still not one thatwill win any awards is much stronger than the original.
Mouse over the image to see the “rule of thirds” grid.
Again with web design we might not be able to do this for our entire layout, since our height islikely a variable. However the rule of thirds can be particularly effective when used to cropimages for maximum impact.
You could also use the rule of thirds for placing elements within a fixed dimension section ofyour layout such as the single column home page layout described above.
Summary
Phi (φ), the Fibonacci sequence, and the golden ratio are seen again and again in nature as well asin art, architecture, music, and design.
Whether we’re genetically predisposed to find golden proportions aesthetically pleasing or we’vesimply trained ourselves over history to find it so, there’s no denying golden sections show upagain and again in nature and many man-made structures.
The next time you’re considering a grid for a website design think about the golden section andhow you might use it. You don’t want to arbitrarily force golden proportions into your design,however they can make for pleasing proportions.
Consider using them for geometrical and organic constructions, particularly those involvingrhythm and harmony among multiple elements.
Your visitors may not know why they find your site attractive, but they will likely respondfavorably to golden section proportions in your design.
Reply
Reply
Download a free sample from my book, Design Fundamentals.
16 comments
Vladimir Carrer says:
May 16, 2011 at 10:17 am
I just dropped by to say I really enjoyed this article.
For more then two years I was obsessed with the golden ratio. I implemented that ratio in almostevery personal project I worked: web design, graphic design, my business card, varioustypography decisions etc. Know I’m in post “golden” phase that I’m trying to not over use thegolden rule just for the “golden” occasion. But I definitely think that there is something magicalabout this rule. I wish that I had more time to make some serious research about The GoldenProportion.
P.S Thanks for the mention.
Steven Bradley says:
May 17, 2011 at 8:36 am
Thanks Vladimir. I like the golden ratio too, though I struggle sometimes to decide whenand where it’s best to use. There is something about the proportions that does make itmagical as you say.
It’s amazing how many examples of it there are in nature and through history. There’sdefinitely something about it.
Elliott the web design guy says:
May 17, 2011 at 3:29 pm
A fascinating technical insight in to something I use all the time, I actually find it very difficult to
Reply
Reply
Reply
Reply
Reply
break out of… I guess if the formula isn’t broken then why try to fix it…
Steven Bradley says:
May 19, 2011 at 4:11 pm
Nope. Why fix it if it ain’t broken.
Kristi says:
May 17, 2011 at 6:49 pm
If you want to know everything there is about PHI and other golden sectional proportions thiswebsite: http://spirasolaris.ca/ is very helpful.
Steven Bradley says:
May 19, 2011 at 4:12 pm
Thanks for the link Kristi. Looks like an interesting site.
Alex Aguilar says:
May 17, 2011 at 11:49 pm
This is fascinating stuff. I’ve heard of the golden ratio and the Fibonacci sequence but neverknew of their importance in art and design. It makes sense now why so many blogs and websitesfollow the same standardized header/footer/body design.
Steven Bradley says:
May 19, 2011 at 4:13 pm
Reply
Reply
Reply
Reply
Reply
It’s really amazing how much has been built using golden proportions. I knew it was useda lot in art and architecture, but I had no idea how many things in nature have goldenproportions to them. There’s something about phi I guess.
cnpzoomla says:
May 19, 2011 at 7:16 am
Bit complex to understand but very useful
Steven Bradley says:
May 19, 2011 at 4:14 pm
I tired keeping the math to a minimum. I’m glad you still found the post useful, complexor not.
Chris says:
May 20, 2011 at 2:18 pm
Couple of places you referenced 1.1618. Shouldn’t that be 1.618?
Steven Bradley says:
May 22, 2011 at 2:14 pm
Yep. It should have been 1.618. Nice catch. Thanks. I think I corrected them all now.
Reply
Reply
Reply
Reply
BrokenClock says:
August 30, 2011 at 8:18 am
You should have a look at the Golden Ratio CSS Grid at http://golden-ratio-grid.impossible-exil.info :The Golden Ration Css Grid is actually not a grid : it do not provides you columns and rows, butonly widths and heights (and maxwidths and maxheights) to use on your own columns androws, and those widths and heights are build following the Golden Ratio (phi).
Steven Bradley says:
August 31, 2011 at 12:12 am
Thanks. Your grid generator looks interesting.
Stephan says:
September 1, 2012 at 4:54 am
Thank you for this great article with these nice examples. i liked the visualation of geometricconstructions and the connection between golden section and pi.
Steven Bradley says:
September 4, 2012 at 5:38 pm
Thanks Stephan. I like the geometric constructions too and wish I could take credit forthem, but I found them on another site. The connection to PI and Fibonacci are bothinteresting. I have a thing for these kind of mathematical patterns.
Leave a Reply
Your email address will not be published.
Name
Website
Comment
Post Comment
Notify me of followup comments via e-mail
Recent Entries from the Notebook
What I'd Tell My Younger Self To Offer Context For Learning Web Design And Development
How To Make Your Client's Budget Work For You
What I'd Tell My Younger Self About Learning Development As A Web Designer
Why People Love And Hate Responsive Design
What I'd Tell My Younger Self About Learning HTML/CSS
Recommended
CSS Layouts
Design For Non-Designers
HTML5 Basics
My Blogging Process
Enter you email Subscribe
Copyright © 2005–2014 Vanseo Design
Redesign
Responsive Design
The 7 Components of Design
The Elements of Design
Visual Perception and Design
Subscribe to the Notebook
Get free email updates
Connect with me
Related Documents
