User experience, web, technology

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.