do you use the golden ratio when designing a website?

do you use math to calculate your design? or are you a pixel-pusher?

recently I learned something from _freshface

and I found that tutorial on nettuts+ that describes what I mean for those that never heard of it http://net.tutsplus.com/tutorials/other/the-golden-ratio-in-web-design/

I hope this is a start of an interesting debate! I love this topic!

Great read: http://www.smashingmagazine.com/2010/02/09/applying-mathematics-to-web-design/

To contribute here with my own research. It’s not a well known fact and there are almost no images showing this on the web, so I made my own. It should be almost pixel perfect, if you dont believe me, try it on your own

Sorry for a MSPaint quality… Hope you get the point of the image, I tried to make it easy to understand.

Another hard to find PDF document and great case example on a website : www.freshface.cz/sneaks/phi.pdf

But please don’t think using a golden ratio is a holy grail. The holy grail for me is to have some kind of a system how I do things. You have to research and practice to make your own. You can then combine many things and the desired effect will still be there. These magic ratios could be a great start for beginners with web design, because it can keep the consistency throughout their theme. If you don’t have a system, you have countless of possibilities where to place elements and how big they can be. But if you will develop your own system/style, you can just grab a calculator and calculate like 1,2,3 possibilities, try them and then decide by eye which is better. This can significantly speed up your work flow

Yes! Even if only used in 1 direction (horizontal or vertical) it can work well. And if the dimensions are too big, you can keep dividing the area using the same ratio. Works great. I don’t get too crazy about it though, usually just use it for the bigger structural elements then base everything else off verticle rhythm, but again sometimes break that rule if something just isn’t working.

thanks for the tut and pdf _freshface

guys, let the comments roll!

That’s a nice image _freshface, I never thought about the iPod’s in such way!

Just as _freshface said, it’s not the holy grail. It can be useful for some designs but it can break the other. Just because every project is unique you can (or at least should) not use the same approach for every project.

You may also want to do some research about the rule of thirds or grid systems. I find these 2 very useful as well to lay out some elements.

Thanks guys for this great topic

I like Mark Boulton’s “Five simple steps to designing grid systems” series.

I found this site about grids http://www.thegridsystem.org/

are these all who use this technique on themeforest or are there more?

so much pixelpushers in here or what

http://stylizedweb.com/2010/03/10/golden-rectangle-golden-section-psd-guide

Nice thread!

This is a nice little app for grid layouts and generally structuring a page. Ive been using the trial recently and has a handful of other useful tools as well. Its osx only and costs $20, but comes with a trial period. Worth a look if you mainly design using grids etc http://ringce.com/slammer