1.618 is a number all serious designers should know. It’s known as the golden ratio found throughout nature, art and architecture. Seashells, the Mona Lisa and the Parthenon all show the golden ratio. Our faces and bodies are also proportional to the golden ratio. It’s so omnipresent that it’s even found in sounds and intervals of time. If there ever was a mathematical way to explain and express natural beauty, the golden ratio is it.
The golden ratio gives us a divine sense of aesthetic that we can apply to web design. By applying the golden ratio properly, we can make our websites visually compelling. The most common way to use the golden ratio is with a page layout. Using the golden ratio we can divide the width of our website to create a “golden layout” of two columns.
For example, take your typical 960 pixel width layout and divide 960 by 1.618. You’ll get about 594, which is the width of your main content column. To get the width of your side bar, subtract 594 from 960 and you get 366. Put it all together and you have a two column layout with widths of the golden ratio.
You can also apply the golden ratio to the height of your website, assuming your page has a fixed height. For example, take the height of 760 pixels and divide that by 1.618, and you get about 470 pixels, which is the height of your main content area. Take 470 away from 760 and you end up with 290 pixels, which is the height of your bottom bar.
Getting the width and height of your layout using the golden ratio is easy to do. But what about the elements within the page, such as boxes, panels, buttons, images, and text? For that, we turn to golden rectangles. The length and width of a golden rectangle have a golden ratio proportion.
Not every interface object is going to have a rectangular shape, but for objects that do have a rectangular shape, we can use the golden rectangle to make the elements proportional to the golden ratio. To do this efficiently, we have to build a golden rectangle grid. We will use this grid to scale our interface objects into a golden rectangle.
First, you’ll need to open up Omnigraffle or Fireworks, turn your canvas grid on and set the grid spacing to 5 pixels. You don’t have to use 5 pixels, but 5 is ideal because it gives you flexibility in how you can scale your golden rectangle. You’ll be able to create golden rectangles from a small to large size.
In order to create a golden rectangle, we will need to follow the Fibonacci spiral. Start by creating a 1×1 square. Make another 1×1 square and place it to the right. Make a 2×2 square and place that below the two square. Make a 3×3 square and place it to the left. Finally, make a 5×5 square and place it above. You have just created a golden rectangle with the spiral of 5. The golden rectangle gets larger as you continue to spiral, but for our purposes, we want to stop at 5.
The example above shows a vertical golden rectangle. By duplicating it multiple times vertically and horizontally we end up with a golden rectangle grid for creating vertical rectangles. However, for creating horizontal rectangles we have to orient the golden rectangle grid horizontally. You cannot create horizontal golden rectangles using a vertical golden rectangle grid and vice versa.
To create interface objects with golden rectangle proportions, lay the object over the grid and scale your object to match the same number of golden rectangles horizontally and vertically. The examples below show the number of horizontal and vertical golden rectangles in each grid. To use the grid, just click and save the image.
Golden rectangle grid for creating vertical rectangles
Golden rectangle grid for creating horizontal rectangles
It’s important to remember that in order for the grids to work, you must have an equal number of golden rectangles horizontally and vertically, otherwise you won’t get golden rectangle proportions. When you use the grids correctly, you’ll be able to create beautiful interface objects with golden rectangle proportions. Below are some interface objects you can create using the golden rectangle grid. Use this knowledge to your advantage and start designing beautiful websites with divine proportions.
- Golden rectangle calculator: Get Ratio
Book
Affiliate
You can create golden rectangle simpler by making first a square, then from the middle of the side draw a line to the opposite corner. Move the pivoting point to where the line begins (on the side of the square) and rotate down until is over the side of the square. Draw a rectangle over the square limit down by the line you just rotate.
image: http://imgur.com/8VqFe.jpg
Nice! That’s a great way to do it if you don’t have the golden rectangle grid. However, the golden rectangle grid might make it easier since all you have to do is scale your object accordingly. Here you have to make a square, bisect it, make a rectangle, orient it at an angle and then create a big rectangle, which is a lot of steps. Nevertheless, thanks for sharing this alternative method.
Almost 10 years late to the party, but the construction method presented here (adding squares) will give a 1:1.6 rather than a 1:1.618 ratio. It’s a small difference, but significant if you are basing a whole grid system on it.
Corel Painter has a Golden Rectangle guide tool.
Hello can you make a post teaching how to use it in website layouts?
thanks
That’s what this post is…
The new Twitter web design is also based on the Golden Ratio: http://goo.gl/5ssq
Pingback: UXMovement: Applying the Golden Ratio to Web Layouts and Objects | Usability Counts | User Experience, Social Media
fyi, google Chrome header is also designed with golden ration… for more info visit http://www.chromium.org/user-experience/visual-design
Thanks for sharing. I didn’t know that!
Hail, Anthony! Thank you very much for this article. I’ve always known about the Golden Ratio and its usefulness for a layout, but you’ve also made it clear how to use the Golden Rectangles for creating “golden objects”!
I find the whole thing fascinating, and created a little tool (a long time ago now) to help people calculate numbers according to the ratio: http://www.thismanslife.co.uk/phiculator/
thanks for the post. it is valuable.
I would love to use the golden rule in my designs but it’s just not possible when working with standard advertising blocks that simply don’t transfer. Including an mpu within the content above the fold mean you always have to have a column to accommodate this that would look unbalanced if I made it 366px unless I made my gutters 33px…which would use up far too much space! 🙁
The ratio also has a close relationship to the Ogilvy ad layout, though his more broadly goes for
– 2/3 image
– 1/3 headline + body + link
or alternatively
– 1/3 image
– 2/3 headline + body + link
Don’t know if Ogilvy realized this when he defined his method but the similarities to the golden ratio are startling.
Great post!
Thanks for the insight. Never heard of the Oglivy method before.
Have you seen this? Debunking insane claims of the golden ratio.
http://www.youtube.com/watch?v=4oyyXC5IzEE
THERE IS NO SUCH THING AS “DIVIN PROPORTION” lol. It’s a myth. A joke. A totally useless waste of time. I can’t believe anyone would actually waste their time with it!
I assumed “the golden ratio” stuff was true for a long time. But now I actually found the whole golden ratio stuff is utterly nonsense , see: http://vimeo.com/88132964
NO: architects, painters etc… did NOT use the golden ratio in their works, never, NOT: not the egyptians, NO: Da Vinci stuff is also nonsense. Even utterly nonsense.
It was some kind of hype after Adolf Zeising published a book on the golden ratio in 1854. Before 1830 there is not even mentioning of it. Any statistical analysis on pyramids to any paintings reveal there is no such usages.
And no… humans do NOT prefer the golden ratio as more beautiful contrary to the folk legend.
And on top of that : that famous sea shell: it does not even HAVE the golden ratio proportions…….
Again see: http://vimeo.com/88132964 because Dr. Keith Devlin: http://www.stanford.edu/~kdevlin/ can explain this way better than me.
@ Edward de Leau & jack:
My friends I have watched the video of this wonderful “teacher”.
He does not give any serious argument to his hypothesis.
Basically he denies any deducted connection, because I do have to admit that we (the modern western scientific minds) have deducted the connection between ancient buildings and the golden ratio.
But, this man does not admit deduction apparently.
Also he bases all his arguments on the lack of physical, tangible evidence (like daVinci’s notes)….
If anybody here is a bit of an artist they will know how many notes can be lost during one’s lifetime…(and I don’t even need this argument to prove the point)
also about the modern architects: they are all trained to work in a very specific way, which has little to do with aestetics, especially in our outsourced/fragmented duties…architects nowadays (the vast majority of them) work on a tight schedule, for a corporation (majority of time), designing “toilets”…why do you think you have architects specialized only in a certain field…
the system (educational, professional, healthcare, etc etc) was designed to fragment (systematize) the production (of learning, of products, of health etcetc) so that “more jobs can be produced” (and for better control) -> check the reason behind the creation of the standard educational system (clue: ants)
in architecture there are many standards, and nowadays architects are more concerned about maximizing the “usefulness”/”productivity” of the patch of land – that’s what all employers want…actually the professor agrees with me on this one :)))) “only some clients have specifically asked for those proportions to be implemented” :)))
also, main concerns in architecture today are: where do we put all the n fire hydrants? :O…where do we add the emergency exit :O….where are going to put the toilets (that’s a big one :)) )…the boss wants his office to be like this or like that, on that floor or the other…where do we add the lockers….
and then u have “the Legislation” that comes along and rules out a lot of possibilities…because let’s face it: there is so much beaurocracy in the construction industry that it is hard to build something simple and elegant like back in the days….except if we’re talking about “cardboard supermarkets” boxes…those are pretty simple :)))
besides all of this, how can u even compare Debussy’s productions with those of Mozart :))))))) I’m not saying he’s not a great composer, but seriously, this professor is undermining Mozart’s insights on music (of a genius, mind you) in favor of an “unknown” artist (among the classics) that “supposedly” only experimented with the ratio and with the sequence :)))))) c’mon I know u can laugh :))
and besides all of this: (and I think everybody can agree upon this) -> the golden ratio and the golden sequence are just guidelines
read my lips: GUIDE L I N E S !!! exactly, they just guide u, if u want to…if not, then it won’t…very simple….
+
the reason the ratio never reaches the exact phi ratio is because it is INFINITE (its job is to always be ahead of us :D)
infinity cannot be pinpointed down…we do not have infinite buildings :)))
now as u can see, this is the actual difference:
listen to the professor (and the system) -> lock urself in legislation and all that nonsense
listen to Anthony (and Pythagoras – fyi “the eggheads” we’re light years ahead of the professor’s understanding 😀 ) -> free urself from all artificial restraints and CREATE without boundries…
simple as 1,1,2,3,5,8,13,21,34,55 :))) and so on and so on :))))))
@ Anthony : Thank you! nice application of the DIVINE PROPORTION 😀 (the “divine proportion” was just to heat up some already boiling heads :)) )
And always, the truth:
“In the All we live and move and have our being”
Dont worry guys the age of light is coming.
The dark ages are nearly at an end. I have seeded pay it forward through the children. I have used natures high primes in everything I do. Viral marketing is so cool. When you use universal natural laws. Its only 7 years till robots have 33% of all jobs. Wait till you see capitalism and financial structures crumble. Nothing is designed these days around true wealth. Corruption of systems through greed never lasts. Its not planning that is fluid in any way. Just wait till you see what is about to sweep through. I assure you it is all good. Fear in the thinking only brings negative shit into the thinker. The oldest saying in the book is. I THINK THEREFORE I AM. Should be BELIEF IS ME.
A great convergence of thought is now out there and the light is coming. Quantum Physicists and many scientific minds now believe the UNIFIED FIELD THEORY. It says all is one and one is all. Billions of dollars could have been saved by understanding LET THERE BE LIGHT AND THERE WAS LIGHT AND ONLY LIGHT. Im not religious by the way. I surf the collective consiousness all the time. Right through the tubes to the beach at the end. I fly my thoughts and those of others far faster than light. You are all way more than you think btw. We are all creatures of light. Just all our journeys are unique.
The GOLDEN RULE IS SO VERY FUCKEN COOL. Nature has sorted all problems eons ago when it comes to channeling light and water and fluids so take heed from the insects around you and natures primes. 3 is the number of prongs on Neptunes Trident and the points are a 3 pointed triangle. 3 is natures prime for failsafe in systems. Just look at the systems within you for controlling blood PH so oxygen can attach to iron magnetically. Look at the systems of fuel. Blood Glycogen, Muscle glycogen. then FAT in Ketosis. Understand how I design my marketing plans virally.
7 is the number of strength and reinforcement. Fold any size piece of paper 7 times. Bet you cant rip it?
1 is soul. soul is ALL. 1 is all and all is 1.
0 represents nothing or the concept of infinity.
THE GOLDEN RULE RULES BEAUTY. All you negative arseholes take heed. I test everything I see scientifically. Its way better when you design experiments to natures prime rules. I was born with the gifts of mind that others have no idea how to control. Mensa tested me. No one gets a hold on me. I hide behind the magic of the Chameleon. I create consiously for karma. Its my true wealth. I get Empathy from others I help. Its fun.
Wait till 7 years is up. You’ll see a fantastic new world. The kids will design it and the designs are simply Sublime. Virally Sublime.
We are 12 like minded Angels from SUBLIME DESIGN.
12 is for Family in nature. 12 tribes of Abraham and all that. Base 12 was more imbedded in successful civilizations before we dumbed down the entire world. Can anyone find where it is said the Dark Ages are at an end. As long as it was written in truth I will accept it. But I have looked all over and cant find anything without hidden agenda. so I assume the Light Ages are coming soon.
The Convergence of Religion and Science is already out there in thought and light. Science admitted to GOD. Ha Ha Ha. Wait till you see what happens next. Its very very cool. Its all through the kids and the convergences of thought. The infinite faceted crystal water within our lives records all. It can be asked for any answer and it will show you. We are water and salt arent we all? Crystals hum and sing in frequency too.
The golden rule is something I really like to apply in User Interface Design. It gives the user a easy look on the screen.