Hanalei, Hawaii 9/2/2010
438 Posts and Counting

Phi-ling Up Your UI

Monday, November 19, 2007 -

Math isn't just for breakfast anymore. In fact, it turns out, there's a lot you can actually do with Math, aside from using it to sound like you know a lot of stuff. Turns out that the Universe has some pretty nice, symmetrical goodies woven into the fabric of its underpants - goodies such as

  • Pi - a constant that lies at the core of radial geometry. We all know what Pi is, and so does Carl Sagan who used Pi as the final Universal God-given Palimpsest in his book "Contact" (if you haven't read it - smack yourself and go get it). One of the neatest endings to any book I've ever read.
  • e - the Economist's best friend and magical mystery power underlying a lot of human phenomena like population growth and Google's IPO. Yes indeedy, when Google IPO'd a few years back, they decided it would be fun to raise e-billion dollars ($2,718,281,828).

My favorite of all, however, is Phi - The Golden Ratio. If you don't know about Phi, well it's just "one of those things" that is pretty startling:

Some of the greatest mathematical minds of all ages, from Pythagoras and Euclid in ancient Greece, through the medieval Italian mathematician Leonardo of Pisa and the Renaissance astronomer Johannes Kepler, to present-day scientific figures such as Oxford physicist Roger Penrose, have spent endless hours over this simple ratio and its properties. But the fascination with the Golden Ratio is not confined just to mathematicians. Biologists, artists, musicians, historians, architects, psychologists, and even mystics have pondered and debated the basis of its ubiquity and appeal. In fact, it is probably fair to say that the Golden Ratio has inspired thinkers of all disciplines like no other number in the history of mathematics.

- Mario Livio, The Golden Ratio: The Story of Phi, The World's Most Astonishing Number

What is Phi? It's a natural ratio of proportion, found literally EVERYWHERE in nature (from Wikipedia):

In mathematics and the arts, two quantities are in the golden ratio if the ratio between the sum of those quantities and the larger one is the same as the ratio between the larger one and the smaller. The golden ratio is approximately 1.6180339887.

  • The proportion of your lower arm to your upper arm is Phi.
  • A nautilus shell's symmetry is based on Phi.
  • The ratio of successive Fibonacci numbers is Phi.
  • A DNA molecule is 34 angstroms long by 21 angstroms wide for each full cycle of its helix. These are Fibonacci numbers and are also governed by Phi. If you cut a DNA spiral into cross-section, the resulting shape is a decagon - two pentagons shifted 36 degrees. Pentagon geometry is based on Phi:
  • A 5-sided star (pentagram) is comprised of four unique line segments (red, green, blue, and pink below). The ratio of these is Phi:
  • Our understanding of beauty is based on symmetry, and this symmetry is based on the natural ratio of Phi. Artists and architects throughout time have known this, and have based their work using it's symmetric properties. Most of what we consider "beatiful" about the human face all begins with Phi:

Phi, as it turns out, is literally at the heart of symmetry and what "pleases the eye". All of the features that we find appealing in each other (the Universal Beer Goggles) are all based on Phi. OK - enough trivia.

How To Phi Up Your UI
The heart of HTML is math, and given that, we can use Phi until we go batty. All you have to do is start off with the largest element and then divide by 1.618 for each of the smaller elements. Below I've created an HTML table with the width set to 100% (since most pages these days are elastic). I've nested another table inside of it that is in a 1.618 ratio to the outer.

Since this table is elastic, all I need to do is make sure the larger of the cells in each table is 100%/1.618 = 62% (rounding) and the browser will do the rest:

   
 

 

Fonts
The next thing you can do is get your Header bits right. If we decide that we want our text on our page to be .9em (which is pretty standard. And use ems btw since they size properly with browser settings), we can multiply by 1.618 to grade up our H tags:

  • This is the standard text
  • H2 (.9 * 1.618)
  • H1 (.9*1.618 + .9)

Phi is an utterly fascinating number and if you have nothing to do - Google it and learn something new today!

Related


Gravatar
Trevor - Monday, November 19, 2007 - Good stuff Rob, Nice to think a little outside the box from everyday life writing code. I've read a few books on mathematics and its relationship to aesthetics and patterns found in the universe. Good stuff! -Trevor
Gravatar
adminjew - Tuesday, November 20, 2007 - --off topic
Rob, welcome back to the SubSonic Forums
Gravatar
Shawn Oster - Tuesday, November 20, 2007 - Holy crazy syncronicity.

I was watching BT's video for "1.618" last night, just staring at the number and video trying to remember where I knew that number from and suddenly it popped into my head from those long ago math and art classes. Another great place to use the golden ratio is in designing your work surface, a lot of desks that just "feel right" tend to have the golden ratio in there somewhere.
Gravatar
kevin - Tuesday, November 20, 2007 - "Pi also appears as the average ratio of the actual length and the direct distance between source and mouth in a meandering river (Stølum 1996, Singh 1997)."

...that one always seems to amaze me.
Gravatar
OmegaSupreme - Tuesday, November 20, 2007 - Great tip, people will find my site appealing but they wont know why :)
Gravatar
Damir - Tuesday, November 20, 2007 - The golden ratio is very fascinating stuff indeed... You can read more (probably everything) about it at http://goldennumber.net/ The site itself is pretty horrible, but there's lot of information on it. For those who would like to play with golden ration on their websites, there is a wordpress template from nice people at Information Architects that is based on it. You can get it from http://www.informationarchitects.jp/the-ideal-website/
Gravatar
Matt Casto - Wednesday, November 21, 2007 - That is some fascinating stuff. I never thought to combine this type of thing with development, but it totally makes sense. I'm going to try using this idea in some of the Silverlight stuff I'm doing. Thanks!
Gravatar
Morgan Croney - Monday, December 10, 2007 - Hey Rob, interesting... a friend forwarded me your link... sort of relates to my artwork where I create mathematical relations and see how they play out visually, check it out if interested: http://morgancroney.com Morgan
Gravatar
Jumping The 20 Fence - Rob Conery - CodeBetter.Com - Stuff you need to Code Better! - Thursday, May 21, 2009 - [...] seems the 80/20 thing is built in to the fabric of the universe, along with some other groovy numbers. Most large software companies have come to realize this – including [...]