A new grid based on the golden ratio.
What I love most of my job as UX designer is the possibility to draw inspiration from the work of people engaged in quite different businesses than mine: this means that much creative input might derive from observing a lively discussion at the café, or from the way yoghurts are arranged in the refrigerated section of a supermarket or, like in this case, from a book that takes a scientific and fascinating approach to typography.
Last week I was starting to set the grid for redesigning a customer’s website and trying at the same time to tidy up my desk a little. Among the various books that were cluttering the desk, apart from such treasures as “Visualize This” and “Pervasive Information Architecture”, the recent renovation works at my flat/office had brought to light other treasures I had lost sight of, such as “The Elements of Typographic Style” by Robert Bringhurst, which I had proudly purchased some four years ago in London.
I love typography. I have an insane passion for fonts. I love them so much that I cannot find satisfaction in the few days of work that alone would not be enough to quench my desire to learn more and more about them. To compare combinations of serif and sans-serif. To understand the signals sent by a risky combination, one of those that will always be on the razor’s edge.
Fonts are fragile objects only apparently: the rules for using them (and building them), as well as the fact of “living inside a grid” make them safe and sound.
I also love rules. A few weeks ago I posted on my Tumblr page an interview with Nick Cave, because he is an example of how rules are not necessarily an obstacle to the freedom of expression and creativity.
Speaking of fonts and rules, while flipping through Bringhurst’s book I was reminded of the golden ratio.
The Golden ratio
The golden ratio exemplifies the notion of proportion and was stated formally by the Pythagoreans in the 6th century B.C.. Without getting in the detail of mathematical formulas, the golden ratio is a number given by the ratio of two different lengths, and its value is approximately equal to 1.6180.
Like Pythagoreans, Fibonacci too theorized the notion of harmonic ratio in another mathematical form. Independently from the Pythagoreans’ statements, he took the start from this question: “what happens if we all continue to breathe and no-one dies?.” The answer is in the series named after its inventor, represented by a sequence of integers that propagate towards infinity in the form of a spiral:
0 - 1 - 1 - 2 - 3 - 5 - 8 - 13 - 21 - 34 - 55 - 89 - 144 - 233 - 377 - 610 - 987 - 1597 - 2584 - 4181 - 6765…
In this succession, every number following the first two is the sum of the two preceding numbers. The Fibonacci sequence may be represented with the Fibonacci spiral, where every side of the squares inside the spiral corresponds to a number in the sequence.
In nature, Fibonacci’s spiral and the notion of harmonic ratio of the golden ratio are everywhere: pineapples, pinecones, sunflowers, sea urchins, snails, chambered nautilus and – unbelievable for those who may have a donut too many to atone for – even in the human body. Even the iPod was built taking the golden ratio into account. And Penguin Classics books were sized 111 x 180 mm (phi = 1.62).
Having this “something” in mind, and as my customer’s website was still struggling to take shape, I decided to go out for a breathe of fresh air. And took another book with me.
Connecting the dots
Turin is a very lively town, but at the same time it is a place where architecture has not yet come to terms with modernity.
I sat on a bench facing the building site for a new skyscraper that is going to rise right in front of the future central station (also under construction) and started leafing through the book I had carried along.
While reading “Designing for emotion” by Aaron Walter (which, honestly, takes very little time and is extremely satisfactory) – and feeling part of one among the most eclectic and versatile groups of professionals in the recent decade – the idea that rules are not necessarily an impediment to creativity grew stronger and stronger, just like the concrete layer that was being cast right at that moment to erect the eleventh floor of the skyscraper in front of me.
While my eyes lingered lazily watching the cranes, I happened to raise the book, holding it as a sunscreen between my eyes and the top of the building. By mere coincidence, the book was open on page 21, where Walter talks about redesigning Twitter and superimposing the typical “spiral” of the golden ratio to the Twitter page layout as we know it (see image below).
In the redesign of Twitter, for Doug Bowman and his team users came first, even before intercepting any specific cognitive and behavioral pattern.
Bowman tried in the first place to answer to man’s primeval need to recognize himself in the creations of artistic and industrial production, a need dictated by the continuous, narcissistic attempt to reward our ego and our emotions. How could this be achieved?
In his escalation from a rural to a metropolitan environment, man has gradually lost the aesthetical references that supported his primeval longing for beauty, harmony and symmetry.
In order to make up for this, in very plain terms, man has tried to bring the country into town, not only by planting trees along the avenues but also, at a micro-level, by ‘stealing’ the rules through which nature expresses itself.
The golden ratio is one of these rules. From the height of his experience, Bowman had understood that the web too might appropriate that sense of harmony that typography, industrial design, figurative arts, architecture and even music had already inherited from nature.
A step forward: the Golden Grid
The notion of applying the golden ratio to the web is therefore nothing new. To apply it to the overall page layout and not only to the horizontal arrangement of page items was the natural development of a week of fortunate insights and happy moments of serendipity.
Starting from Nathan Smith’s excellent work and from 960 Grid System, I built a grid that takes account of the vertical dimensions of the lines according to the harmonic proportion of the golden ratio.
After the walk, and after I had completed the grid, I quickly resumed working on my customer’s website, that had been languishing for a couple of days.
I noticed a number of improvements in the quality of my work since I started using the Golden Grid:
- speed: arranging the items in the page is no longer a matter of guesswork;
- consistency: page items refer to pre-defined measurements (height and width of base blocks);
- harmony: the overall proportions of the layout and the specific ratios between the objects are those of the golden ratio;
- creativity: finding solutions that break old patterns is exciting. Doing so within a pre-defined grid is even more exciting, I think;
- certainty: more experimental freedom, because there is no risk to disrupt the harmonic terms that are the foundation of what we are set to communicate. Which is, nine times out of ten, beauty.
The Golden Grid is compatible with the Baseline Grid created by the Teehan+Lax agency using 960 Grid System as the basis.
Together, these may become a very powerful tool to speed up and enhance the designing work.
You may download Photoshop, Fireworks, OmniGraffle, Illustrator, InDesign, Pixelmator templates, and Flash files and tutorials for a quicker set-up of the Golden Grid from the website www.thegoldengrid.com.