Smashing Magazine - we smash you with the information that will make your life easier. really.

first!

Useful tips for Beginner’s…
From India-Chennai

Thanks great article and really well written and easy to understand. To use grid is truly one of the most important things in a great design.

Very nice. loving it.

*mystification of the common beginner mind, I should say.

I was talking about this over 2 months ago..

There isn’t scientific evidence that the divine proportion is better than other proportion system.

great post

That’s silly. Every site would look the same if they all used the ‘golden ratio’. No one notices that, I think there are more important elements of design than a arbitrary ratio. This is just trying to apply some rules to what designers and artists simply see as: ‘knowing what looks good’

Demandware, when i saw the image i thought, nice design.Then you got the raster out, rule of thirds, 2 points straight on!
So our eye should be guided into the right direction.
But oh god when you click on it, all the nice rules, ideas, rule of thirds they get blasted away by this HUGE flashing center text, with stock photo’s fading in and out. I’m no pro but in my opinion this site went from beautiful to horrible.

This is a great tool for everyone..great job guys…

Awesome post. That will give me something new to try with my next design – Thanks!

Questi sono concetti che un grafico editoriale acquisisce nei primi anni di formazione. Si parte SEMPRE dal formato per determinare le dimensioni delle colonne di testo e della gabbia, la griglia, eccetera.

Comunque è sempre bene ricordarle certe cose ^_^

feels like my fundamentals of design class all over again :)

Did you guys saw the episode from south park where a lawyer was using the cehwbaka defense to win a trial. That’s exactly what you guys did. You used a simple logicaly remarc to justify something that’s not entierly usefull. I’m just wondering why 1.618. I usually partition my designs acording to the client’s needs. And i prefer 550px (main column) 40px (margin) 310px (sidebar).

For those who don’t understand what this is, let me try to explain. The Golden Ratio (http://en.wikipedia.org/wiki/Golden_ratio) is a ratio that produces rectangles of equal aspect ratio but of different scale, forever, starting from a base rectangle. It is “a” compositional strategy, not “the” compositional strategy and I think that as designers we have an obligation to understand what the strategy is and what it is trying to solve.

I have seen people diagramming how this ratio is found throughout nature, architecture etc. Sometimes it seems to be like the “Number 23″ (Jim Carrey movie) and arbitrary.

My argument for not bashing it is that it is just a rule and an attempt at clarifying composition. I like when people give me design rules because it gives me a starting point. Many great musicians, artists, scientists actually had an education in the rules of their profession and it confuses me when people try to scoff at people showing rules and strategies. By knowing more about the rules, you are able to intelligently break them and have more control over your own output rather than accidentally making something wonderful (or not).

Sorry for the rant. I’ve gone through a tough semester of being criticized by teachers who are expecting me to produce great new things without actually teaching…

I already used the divine proportion and the rule of thirds, but I have to say your article is very clear, and good explanations are never enough!

Great work!

I have never heard of “Devine Proportion” before but I have used the idea before without knowing its terminology. As a designer, you definitely need to feel the harmony of items on your design rather than placing it logically. But sometimes, logical placements of items on the design make sense too. I hope that made any sense.

You may have a look at this article, very interesting and complete but in french.

Good overview of an important design concept that is often forgotten!

There are many Websites out there using the golden ratio, not exactly but approximately. There are many Designer who use it without knowing about it. This article shows very well how you can work with it and what the advantages are.

One word to the golden ratio:
3:5 is a good rule of thumb, but you can go further. The summation of 3 and 5 is 8, which is the next number in the sequence that is called “Fibonacci sequence”. The next higher number is always the summation of the last two numbers in the sequence. So the next numbers are 13 (5+8), 21 (8+13) and so on. All these pairs of numbers have approximately the ratio 1.618, which is the golden ratio.
So, what can you do with it. For example, you can divide your page into a grid of 21 sections. Then you can build two columns, one with 8 and one with 5 sections. First you have your page divides by the golden cut, second you can use the remainig sections for the grid within the two columns.

Useful Post!! Thanks

960 pixels definitely seems like the right size for any website (that should be displayed on a 1024×768 res), because it factors into so many numbers. This article reminds me a lot of http://www.960.gs which uses a grid to break down the 960 layout into 12 or 16 chunks, and then grouping the chunks to create completed (if somewhat arbitrary) columns.

This article (and example site) don’t make sense—the dividing-up of the sample layout using the “divine proportion” rule doesn’t support the articles claims at all.

Most designers will agree I would think: this “golden rule” comes from the gut, eye, and brain. You either naturally have the ability to balance layouts, or you don’t. You can learn, but nothing will replace your gut instinct as a designer.

These rules don’t apply to the millions of possible variables that exist with design for the screen, browser, and web.

Using the ‘golden rule’ or dividing a text up into 9 sections might work for static texts such as posters, but there are too many factors that affect the size of flexible text such as a web page.

Another problem is that this fad for grids will lead designers to make decisions about the organisation of their site that might not be appropriate. For example, if you’re following the ‘golden rule’ then you’re more likely to use at least two columns when one might suffice. More so if you’re dividing the page up into 9 sections (and placing elements in an absolute horizontal position is very difficult).

very bad example. Demandware.com blows. it’s nice looking but the UI is bad. The Call to Actions are not clear. the top header navigation isn’t that great. Why do you think this site is a good example? please tell me. I know others do NOT agree with this as being good. Can someone shead some light on this please.

thanks!

In terms of the “feeling” the harmony vs. the “logical” approach. To be on point or to be a master designer you have to be logical. The divinity nature of the Phi ratio (1.618) is that it “harmonizes” with nature. So you use it logically because only in its structure and precision will you tap into the frequency in which all things in nature have been designed. From the flowers to the university. The relational space between the roots to a trees branches to one plant to another even to the frets on a guitar. All are DESIGNED.

I’ve been reading up on the Divine Proportion in web-design for a while now, and though I understood it before, this article and your comment put it in perspective for me.
I completely agree though, I’d love to see a ton of examples where Phi and the Rule of Thirds is put into good use.

Well before every newbie starts following it religiously and every ‘mature’ designer takes person pride in refuting it. At least understand what it was. Yes, it’s scientifically proven, that number is what it is because of science.

The greeks tried to figure our what looked best esthetically so they made shapes of all sizes and explored all ratios, and they, using their eyes, voted on what looked best. That number won’t make EVERYTHING MAGICALLY BETTER, but to humans, it looks ‘right’ or natural. and no amount of nay-saying can change that.

You may use it in your work or composition or not, but I think it’s odd that of those designs that don’t use it, the most perfect ones are the ones that approach the Golden Section on their own, where among those designs that do use it, it’s hard to find a failure. Sure they may not be stellar, but it’s a good rule of thumb and it can’t possibly hurt.

Good article, thanks.

Cool
:)

great article!

btw does the design in on-demand is free?

im searching for something very similar….does anyone knows something?

funny…
about a year ago or so i looked up golden ratio on wikipedia. i though it might be interesting to use it on webdesign… now this :)
guess my unique idea isnt so unique at all :D
thx for the tips!

This was great. Definitely information you want to keep in the “front” of your mind when designing and developing a site.

Good :)

Marcos said above that there isn’t scientific evidence that proves that the Divine proportion is better than any other proportion. But, there is a little property about the number phi, or as you call it Divine Proportion. Given the definition of irrational number, it is possible to prove that phi is the “most” irrational of all the irrational numbers. Obviously, we have to define an irrational number and also define what we understood by “most”, but that is another story.

I loved this post, although I knew few rules but the way you guys explained here is really easy to get. (Proving the first law of usability: Don’t let user think :) ).
Great one
Thanks .. :)

Cool! Didn’t know that the Golden Ratio could be used in web design. Am gonna try it out on my website.

All this fawning over the use of a system which was designed for static proportions in geometry. Basically boils down to “looks pretty”, “I can do THAT in CSS” and “I’m not a coder, I’m an artist! look! see! An Artist!”.

The golden proportion, no matter how many straw men are flung at it, is not meant for communication of anything but aesthetic. How can a golden section be justified for Japanese textual content, or content that is displayed on a device with a 90×120 screen area, or content that scrolls? And how does it consolodate multiple viewpoints to nonrelated images?

Interfaces, specifically web designed, (and also like game design, while we’re at it) is stuck in the unholy aura of other media and needs to get some cohonas.

Computer interface art will have its davinci’s and boticellis, but going by the excessive fan boi-ness of most of the comments on this and most other web design “best practices” pieces we’re going to be waiting a long while yet.

Some people want to tell others what to do. Some people want to be told what to do. Decide which camp you’re in and act accordingly. Me? I want contemporary web design to be less formularised, less templated, less constrained by rules. And so do clients. So, break out from all these constraints and see where you end up. The divine rule, (and other ‘rules’) in my opinion, has absolutely no rlevance to screen based interactive design. Web design is a new medium so ‘go boldly …’ etc etc. But that’s my opinion.

thanks for sharing, i do have a few questions though.

a) how do i apply the golden ration corectly? &
b) how do i (re)balance the golden ratio?

You did not show examples of perfect proportion. You commented on badly designed sites.