The golden ratio and web design

article above

So i read some articles online about the golden ratio and web design and i was trying to figure out what’s a good way to size everything in my site to match.

From what i’ve read so far, the width of an element divided by 1.62 will equal the ideal height of the element.

and if i had a 2 column layout of 960 px.

i figure out my main column by dividing 960 / 1.618 = 593 .

then i subtract 960- 593= and get my sidebar. 367 is my width of the side bar.

width of main column/1.62=366 and 366 becomes the height of my main column.

for the sake of uniform height on the same row, i apply the same height to both columns.

But i run into a problem here, i wonder how i can apply these to my logo, since its kind of difficult to size it perfectly like that.

Am i understanding this design principle correctly or have i completely missed the point?

any guidance would be appreciated.

While it’s useful to know about things like the golden ratio and to keep them in mind, I don’t consider them much use on the web. The ancients who developed these principles were working mostly in stone, and later artists, architects and so on who kept the ideas alive were working on canvases, walls, plaster and so on—all fixed and inflexible media.

The web is different, being a flexible medium. Content on the web ideally needs to flex and reflow depending on the context in which it’s being seen, meaning that having elements set to fixed proportions is not possible and indeed counterproductive. Especially with height, setting heights on elements is disastrous, as it can easily lead to content spilling out of containers (for example, where system fonts are resized) and thus a totally broken layout. Certainly things like the rule of thirds can be useful when setting column widths etc., but I thik all this visual harmony stuff is overrated, personally [he ducks for cover, awaiting retaliation!] I prefer to look at my content and let it tell me what it needs, rather than force it into preconceived notions of what looks right.

thanks for the reminder about the height issue.

but if it’s a fairly static element in the site, setting the height shouldn’t be an issue right?

as long as i don’t have text in there, it should be fine?

for things like images , it should be fine to set the height ?

Still i could really use some more skill with this, as i am trying to improve my web layout skills.

And laying it out with proper white space is crucial to the site looking right .

Yes, although you don’t really need to set a height on images. You can just prepare them at the dimensions you want.

I still prefer to judge white space by eye, rather than by some kinds of rules. Again, these things vary a lot in adaptive environments, so I wouldn’t get to worried about it.