Phi, phi, design notes

Just for the sake of me jotting this down somewhere…

Phi (the golden ratio) is approximately equal to 1.6180339887498948482.

phi is the decimal part of that: .6180339887498948482.

When laying out two column widths on a web page, using phi as the percentage of the wider column often provides a nice visual balance.

So, two columns would be set to width: 62% and width: 38%, which together add up to 100%, in order to approximate this ratio.

We’ve used this in the past on a few sites, including Wharton Center. I know we’ve used it to help layout others, but I just can’t think of any other sites right now.

Author: Davin Granroth

Davin is Chief Operating Officer for Covenant Eyes, Inc. in Owosso, MI, USA, where he gets to mix his background in user experience design, research, and strategy with the operation of a software company. For more, see his LinkedIn profile.

Leave a Reply

Your email address will not be published. Required fields are marked *