I am available for freelance work - HIRE ME

Imperfect Perfection: The Golden Ratio

posted by Matt Ward on Jul 31, 2010.

The question of perfection is always an interesting one, and this is as true in design as anything else. However, the question of what constitutes perfection is certainly up for debate. In this article, we will look at both this question and the concept of the golden ratio, as we formulate the notion of an imperfect perfection.

As designers, many of us are frequently concerned with achieving some form of perfection in our work. Indeed, I touched on the issue of the quest for pixel perfect web designs in a previous post a few months ago.

Yet, even as we strive for perfection at some level, the question that invariably arises is: what is perfection? Or, more specifically, what is perfection in design? There are all kinds of philosophical and theoretical treatises on the nature of perfection, specifically in the realm of aesthetics, many of which have been briefly summarized in an article over on Wikipedia.

In Western culture, probably one of the most well known examples of a study of perfection in proportion is Leonardo’s very famous Vitruvian Man, as shown here:

The Vitruvian Man drawing by Leonardo da Vinci

The Vitruvian Man drawing by Leonardo da Vinci

Accompanied by a variety of notes, this particular drawing visualizes Leonardo’s own theoretical concept of the proportions of the perfect human male, though it should be noted that much of Leonardo’s own thinking was guided by the writings of Roman architect Vitruvius. Indeed the Wikipedia article about the famous drawing states that it “was made as a study of the proportions of the (male) human body as described in Vitruvius”, and goes on to describe those perfect proportions.

Obviously, these proportions are meant to represent the ideal human body, and are very rarely actually replicated in the real world. They certainly don’t represent me. The point, however, is not to evaluate the validity of Leonardo’s (and Vitruvius’) theories, but rather to highlight them as a well known example of the theory and concern over proportion in perfection and beauty.

The image of the Vitruviun Man also places an emphasis on symmetry. Although there are probably few people (if any) in the world who are perfectly symmetrical between their left and right sides, there is a generally held assumption that such balance is ideal, and something to be desired. I’ve seen entire articles and tutorials about retouching photos in order to improve the symmetry of a face – reshaping eyes, noses, teeth so that they balance each other properly. There’s also the matter of removing scars, blemishes and other so-called “imperfections” – a word that is very telling in and of itself.

We also see this same concept of balance within the Vitruviun Man’s own proportions. Here are some examples from the Wikipedia article, showing how some these proportions work:

  • the length of a man’s outspread arms (arm span) is equal to his height
  • the distance from the hairline to the bottom of the chin is one-tenth of a man’s height
  • the distance from the top of the head to the bottom of the chin is one-eighth of a man’s height
  • the distance from the bottom of the neck to the hairline is one-sixth of a man’s height

It’s interesting to note that these proportions are based on perfect fractions, thereby breaking the body down over a grid of equally proportioned segments – something that should sound very familiar to most designers.

And, of course, the grid does very much the same thing for a design’s layout that the Vitruvian proportions do for the idealized male anatomy. The grid consists of a number of equally spaced and equally sized units, which in turn allows for the elements contained within those units to maintain an identical proportion to each other. At its fundamental core, the grid is a means of enforcing one form of perfection onto a design.

Yet, if this form of perfection is found in repeated, fractional proportions, where every measurement is ultimately a multiplication of a single, common denominator, then what do me make of other theoretical concepts like the golden ratio?

The Golden Ratio - image from Wikipedia Article

The Golden Ratio - image from Wikipedia Article

Phi (Φ) is the term used to represent this golden ratio, which is essentially a proportional relationship that is generally accepted to have a strong visual beauty, and which has a long history as part of the philosophy and theory of aesthetics. Turning once again to Wikipedia,

two quantities are in the golden ratio if the ratio of the sum of the quantities to the larger quantity is equal to (=) the ratio of the larger quantity to the smaller one.

Though not really all that complex, that definition might be a little mathematical. What it basically means is that there is an implicit, repeating relationship in the size of elements based on a very specific ratio between those elements, rather than on some unalterable and external constant. In other words, it’s a relative proportion rather than an absolute proportion, which is what we typically see in a grid.

We also see a difference in its repetition. Whereas a grid is the repetition of a standardized unit (say, 60px over 12 columns, with 20px gutters), the repetition of the golden ratio is not, since each reiteration must be in proportion to the one that precedes it. In this example, we can see the golden ratio used to create a spiral.

Fibonacci Spiral from the Golden Ratio - image from Wikipedia

Fibonacci Spiral from the Golden Ratio - image from Wikipedia

Notice how each subsequent segmentation is directly related to the one the precedes it. It is this relationship that makes this particular type of proportion relative rather than absolute.

All that being said, then, how does something like the golden ratio fit into the definition of perfection? Clearly, it doesn’t follow the same sort of structure as the perfection that we see in the Vitruvian Man. Indeed, by those standards, it might almost seem to be imperfect. Yet the intricate mathematical detail that drives the golden ratio certainly seems to suggest that there is something very intentional about the it – something that certainly could not have occured by accident or thoughtless, and which does seem to imply a certain innate perfection of its own.

This, of course, brings us firmly into the world of paradox, and I would like to propose the idea that the golden ratio is one example of what I would call “imperfect perfection” in design. While it certainly does not fit into the strictly repeating proportions of the traditional grid, it remains an important design concept that can be utilized with great success – even within a grid based design (something that I am currently working on).

Ultimately, the point of this article is not to look at the Vitruvian Man, the grid or the golden ratio in great detail. That has been done before. Instead, what I want to highlight is how there exists a fundamental difference between these two forms, both of which can help us move towards a theoretical perfection (though whether we can ever actually attain it entirely is another debate entirely).

I also think that there are some other, similar “imperfections” that come into play in design – things that may seem to contradict traditional concepts of what is visually perfect, but which can potentially help to improve your designs. Over the coming weeks and months, I plan to continue this series on Imperfect Perfections, and discuss some of the other things that I have discovered through my own reading and experience.

So what do you guys think? Do you agree, disagree? Do you take an entirely different stance? Do you see more of a relationship between the Vitruvian Man, the grid and the golden rule that what I’ve covered here? I’d love to hear your thoughts and opinions on this one!

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Jul 31, 2010

Claudia says:

That’s one of the few posts all around the web that poses attention on the “beauty” of design and the designers =)

Personally I’m one of the true believers of the Divine Proportions of Fibonacci, tho in those perfect proportions THERE must be imperfections so to make everything (from design to every common thing in the kitchen) look, feel and be perfect!

Jul 31, 2010

PixelPlague says:

I’ve been using Phi since I began web-design. The grid looks much better. You could use phiculator to calculate the ratios. Also, Matt, you could’ve said that phi’s value is 1.61.

Aug 2, 2010

crunk says:

Research has found that for conveying information, the golden ratio actually works worse than conventional layouts. So the choice for perfection/imperfection becomes a choice between appealing design and appealing information technology.

Rule of thirds might create interesting photography, that doesn’t mean that product photo’s should adhere to this rule, or even convey more information to potential buyers with this rule.

Aug 2, 2010

Matt Ward says:

Interesting observation. Can you cite any of this research? I would be interested in reading the findings for myself.

Aug 4, 2010

The Enj Kat says:

Hi Matt,
Interesting post. For an expanded discussion of this, you might like “Geometry of Design”, by Kimberley Elam, Princeton Architectural Press, 2001.

Cheers!

Aug 5, 2010

Alex says:

Great post. But I must notice that the golden ratio was first applied to the Parthenon of Athens manu centuries before Leonardo. The space between each pillar as well as other elements of the Parthenon is in accordance to phi. The name phi comes from the name of the architect of Parthenon, Phidias.

Aug 5, 2010

Dg8tal says:

Great article! I am really passionate about art designed using the golden ratio. Although the phi rectangle is considered ideal, I find most articles I read on the subject never mention the other mathematically pleasing rectangles such as the root 2, root 3, root 4, root 5, 1.5, and the root phi. Each rectangle has it’s own unique characteristics, and dominant directions. I find these can be used as great starting grids as an alternative to the phi rectangle.

Feb 2, 2011

Jon says:

can anyone help me write a paragraph on if the golden ratio is a vaild standard for perfection ?

Jun 23, 2011

Jed says:

Has anyone noticed that in recent years, the shape of computer monitors seemed to be “just right” – and then in the last year or two, they started to seem unbalanced again? That’s because through the mid to late 00′s, then ratio (horizontal:vertical) moved from 4:3 to 16:10. Then someone decided that computers are only for watching movies, so they went to a 16:9 ratio – same as HDTVs. The 16:10 ratio was very close to the golden ratio. Sadly, that wasn’t enough to deter marketers who saw an opportunity to give customers less and tell them they were getting more.

Oct 13, 2011

Warren van Niekerk says:

Great article! It was helpful to me to loosen the rigidity of a grid layout and be open to alternatives.

I think that having a creative constraint (almost any will do) provides a framework around which to build.

An example in constrained writing is the novel Gadsby, by Ernest Vincent Wright, written entirely without the letter e

A constraint is a decision, which eliminates many alternatives and frees the mind to focus on what is important.

Leave a Comment

Links

  1. CSS Brigit | Imperfect Perfection: The Golden Ratio
  2. designfloat.com
  3. zabox.net
  4. Wochenend-Lektüre #5 – FRONTAND

Top Commenters

Thanks so much to these awesome people for joining in on the discussion!

Copyright © Echo Enduring Media 2009-2014