January 6th, 2005
Design and the Divine Proportion
Many designers, whether traditionally schooled or not, have trouble with composition. I’ve sat with plenty of designers who simply moves things around until they feel ‘right’.
Design is, in essence, communication (I know, I know, I rant about this enough, but this isn’t one of them) but the vehicle for communication is the design. One of the key components in the vehicle of communication is composition, and in design schooling it is something that is taught as something you should feel rather than create logically. This has always bothered me.
The feeling
When creating a design, or composing a photograph, we reach a point when we say ‘that’s right’ (or ‘that’ll do’ depending on the deadline and budget). How many of you create compositions based on feeling rather than logical thought? (come on, hands up). Well I do, but i’m beginning to think more about what underpins that feeling.
The Divine Proportion
Remember back to your art school? (If you went that is). Who remembers the Golden Section? Ok, so who understood it? Or more importantly, how to use it? Well I answered yes to all of those except the last one. I seem to recall the lecturers not fully understanding it either. Well, i’ll do my best to shed some light on it.
The Golden Section, or the Divine Proportion is a visual representation of a number called Phi (pronouned fi). Oh, and before I go on, yes I have read the Da Vinci Code! Anyway, Phi is a number produced by bisecting a line at a particular point (see diagram below.) Phi is 1.618033988749895, or by the numerical sequence called the Fibonacci sequence.
So, what has this got to do with design?
Well, in short, a lot.
The Phi is evident everywhere in universe — Nature, Space, Physics, Mathematics, Physics, Art and
So, here’s the thing. Using the Divine Proportion as a guide to your compositions can improve the communication of your design.
How? By creating a natural language your brain understands. If the unique ration Phi creates is all around us, it stands to reason that designs created this way are more comfortable to us and therefore do their job quicker and more effectively.
Using Phi in your designs
It’s all very well talking compositional theory, but putting it into practice is another thing entirely. Hopefully I can shed some light on it.
Let say for example you have to create a poster design. You start by deciding the size and dimensions of your paper. I start by deciding the height and the I want this to be a landscape poster. The height is going to be 64cm. So, I take that height and create a 64x64cm square from it. I then take 64cm and multiply it by 1.62 (you can use the whole sequence by rounding it up at the point is ok.) Which gives you 104cm. This is the full width of your poster. This is shown in the diagram below:
So, subtracting your initial height (64cm) from your new full width gives you the all important Divine Proportion line.
This is a very important compositional line and feels right. The poster can then be designed around this to create a balanced image. Here’s an example:
Conclusions
There’s nothing new in what i’ve said, in fact Da Vince was doing it all yonks ago. But this practical theory seems to have been lost in the design education system, being taught by design lecturers who themselves don’t understand the nuances of composition theory. Hopefully here i’m giving some understandable, but more importantly, practically information on how to compose designs based on logical thought and simple rules, rather than just ‘a feeling’.
If this has been helpful to you? Also if you have any other nuggets of design theory that could be added to this post let me know.
That was a very informative and useful article. It really interests me to hear of such theory, since I do not yet have actual design education yet. Thank you for sharing.
Hi David, Glad you liked it. Like I said in the post, this level of simple theory is generally lost in the translation of something as potentially complex as the Divine Proportion. Hopefully you can put some of this simple theory into practice.
Great article. You’ve done a great service by writing it. You’ve made the theory really approachable, and I hope it will cause others to investigate it more.
I found your site via Spectacle: http://www.returnofdesign.com/spectacle/
They had a link a few days ago to a nice little overlay program for assisting with divine proportion layouts: http://www.atrise.com/golden-section/
Unfortunately, it’s only for PC :(
Thanks Andy, thanks for the info on the referring link, and i’m glad you like the article.
Like you say, hopefully now maybe other designers will begin to see the potential in a theory that has been around for hundreds of years.
Thanks Andy, interesting article. Ok one question i have… so when looking at the web what do you suggest for monitor or above-the-fold proportions/measuring logic? ie: a design is optimized for 800x600 but will also be viewed by 50% of the users in 1024x768. i know you could follow the same logic and get columns easily… but there’s probably more to it than that on the web. thanks brian
… mark not andy ! errr
Hi Brian, For web stuff it’s a little different.
Firstly you have to consider if you’re designing using a fixed grid, or a flexible one. Either of these can retain a Divine Proportion relationship, but it’s easier to do it with a fixed grid.
I’d always advocate designing to the lowest denominator, ie 800 x 600 width (actually smaller) then all other resolutions upwards should be ok. A width of around 740 — 750px is ok for most browsers (it what I use and this site is built using a grid of three 250px columns don’t align to the Divine Proportion but are designed around “thirds” theory instead.)
With this kind of width there are a lot of opportunities for exploring grids using a number of compostional theories.
Hope that’s of some help, if not, let me know and i’ll drop you a mail going into some more detail.
Thanks, Mark. I have been looking for a basic hands-on article on the Golden Mean for a long time. This is the best that I have seen.
Very nice article we’d all do well as designers to incorporate the divine proportions into our work, not that I’m an expert or anything, but I learnt about it a few months ago and am trying to incorporate more of a mathemetical approach to my work, web design really isnt my thing though I can only get so into code and page layout, I’m more of an illustrator/painter and am gettin gmore and more into 3d design max maya etc. anyway heres a dope book I found some months ago on phi and the fibonacci #’s by this cat Huntley apparently it goes much deeper than just the golden rectangle, the fibonacci #’s apply to nature, the patterns to how trees and leaves branch off as well as how shells spiral all conform to the divine proportion, really nice site and lay out by the Mark if anyone happens to look at mine please forgive the crappy layout I’m pretty new to comp graphics and web design really isnt my thing pax romana
http://www.amazon.com/gp/reader/0486222543/ref=sib_dp_pt/102–5507194-5382507#reader-page
Brian,
What i liked most was your expression of design as communication. In such terms, the divine proportion is a mass communication, extremly precise but one way feeded. I saw once a god’s creation which was finished with tiny little patches, and so i realised then, that at the end quality most depends on “The Who” does it.
Mark, wonderful article. As a designer this is incredibly useful, since I never went to art school (I’m from the self-taught, “I design what I like to see” school of design, but am eager to learn.)
BTW, I found your site through Expression Engine’s forum.
Thanks Julie. Even for designers who went to art school, me included, the Divine Proportion can be a thing of incredible mystery.
I remember at school we were shown pictures that Da Vinci had drawn, complicated mathematical diagrams and equations. We were never shown simple techniques to incorporate it into our own work. We were never told to give it a try.
My guess is the teachers didn’t understand much about it either.
By using an extremely powerful recursive algorithm, I determined Phi to be equivelant to 61.80%. Okay, I just used a pocket calculator. This number seems to work quite nicely in a flexible width design.
Now, I don’t know about the thirds theory, but with that number, it would seem that thirds tie in pretty will with the Divine Proportion.
Darryl — The Rule of Thirds has been more widely adopted than the Divine Proportion simply because it’s easier to use as a compositional theory. It used a lot in photography and film.
Ah, it’s funny. Now that you mention it, I do totally remember it. It was driven into our heads back in high school graphics class.
After reading this entry, I’ve decided to try and follow Phi more closely in the design for my site.
Thanks for the great entry and additional information.
I’ve always used the Golden Mean and numbers derived thereof in my own designs. I never thought that other designers would use a similar, somewhat “esoteric”, device however.
I usually base all dimensions of a design off of the initial width and/or height. Although occassionally the numbers need to be “fudged” in favor of attractiveness.
Hi, I’m fascinated with Phi too, infact, it’s my “rant at strangers at a party when drunk” subject. Yes. Anyway, I made a simple little Flash gadget to help calculate “divine ratios” for designs etc… Phiculator!
Also, has anyone ever seen the “Marquardt Beauty Mask”? Made up of loads of lines, based on studies of “beautiful” faces and on Phi…? Pretty interesting… info on goldennumber.net
[…] Design and Divine Proportion […]
[…] Design and Divine Proportion […]
[…] Design and Divine Proportion […]
[…] El diseño y la Divina Proporción […]
[…] Design and Divine Proportion […]
[…] Design and Divine Proportion […]
[…] Design and Divine Proportion […]
[…] Design and Divine Proportion […]
[…] Design and the Divine Proportion | Mark Boulton Many designers, whether traditionally schooled or not, have trouble with composition. I’ve sat with plenty of designers who simply moves things around (tags: ping.fm) […]