The angles of growth on the head of a sunflower are expressed through the angles of the Golden Ratio.
… the Golden Section that is. If you have never encountered this concept in the past, you have certainly seen it in action. The Golden Section is a ratio (specifically 1 : 1.61803398874989) that has deep roots in math [the Fibonacci sequence], art and nature. It is a naturally recurring pattern – nearly everywhere. From the chambers in a chambered nautilus to the pattern of seeds on the head of a sunflower to the way that corn forms on a corn cob, or the way a pine cone grows. It is also called the Divine Proportion. DaVinci used it on the Last Supper, le Corbusier used it as the basic proportion for many of his most famous buildings, the Parthenon and the Great Pyramids use the ratio to attain balance and pleasing, stable structure.
Since very early in the history of human thought and language, the golden section has been used to create designs that are balanced and naturally pleasing to the human eye. You have seen these patterns … but may not have known about the underlying structure that informs the design. The ratio creates a spiral pattern when mapped over itself – and this spiral is common in nature. So what does this have to do with web design? Though it may seem counterintuitive, using a natural ratio as the foundation for a web grid structure makes good sense. 
The Golden Section is a natural place to start when creating an underlying structure (or grid) for a web page. If you base your layout on a clear grid - the design will naturally make sense to look at. In very practical terms – start with a square of any dimension, say 600px. To create your width and height based on the golden section; multiply by 1.618 (970px) then subtract the original dimension to get your secondary width (370px). This may sound like an odd dimension – but many designs are being based on this kind of proportionality. Let’s look at a couple of examples.
Wordpress – one of the most popular platforms for blogs – and increasingly a standard for light Content Management Systems – has a whole array of themes, especially 3 column themes, that have a golden grid as their foundation. These themes just seem to look right, even if we can’t explain why.
The Disney website is very 'busy' and yet there is still a clear grid structure supporting the curves and rectangles.
Go to Disney, and you will notice immediately the overall ratio of width to height is nearly perfect for a golden section … then look deeper into the design and start to see more golden rectangles showing up in the main video window, in the small imagery at the bottom of the page, and even in the XD logo on the left hand side. Did they do this consciously? Probably not. My guess would be that the designers charged with this huge site naturally think in proportions that line up with the golden section. You and I have been raised to view this proportion as natural and ‘right’.
Coke also uses a layered design of proportioned rectangles.
Now let’s take a look at the Coke web site – we see again the same basic dimensionality built into the site, and built into the smaller sections displayed on the site. One of the beautiful things we can learn from the Fibonacci’s and from the golden section is a lesson in hierarchy. A layered web design, with sections that build on the smaller sections and multiple points of overlap, will hold our interest longer than a straight layout that looks like a long string of words on a page. So in your next design – go for the gold. And if you are ready to have a team step in and give you the assistance you need to create a functional and beautiful web site – call Hen’s Teeth Network.
Next time I will talk about typography and what we can learn from the monks of the middle ages.
Boysen Hodgson / Designer
Hen’s Teeth Network
Tags: 1:1.618, DaVinci, fibonacci, golden section, leCorbusier