Journal

Design and the Divine Proportion

  • Posted on: January 06, 2005
  • In: Design
  • Comments closed

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 Design. Phi creates the Divine Proportion (so called by the renaissance artists because of it’s abundance in the known universe, they thought it was created by God), the Divine Proportion is used by artists and designers.

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:

poster size showing Divine Proportion

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:

Final poster designed using the Divine Proportion

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.

Comments

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.

David Lee's Gravatar

David Lee
Fri 7th Jan 2005
at 5:29 am

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.

Mark Boulton's Gravatar

Mark Boulton
Fri 7th Jan 2005
at 6:11 am

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 :(

andy's Gravatar

andy
Fri 7th Jan 2005
at 12:18 pm

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.

Mark Boulton's Gravatar

Mark Boulton
Sat 8th Jan 2005
at 12:35 pm

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

brian's Gravatar

brian
Mon 10th Jan 2005
at 12:33 am

... mark not andy ! errr

brian's Gravatar

brian
Mon 10th Jan 2005
at 12:34 am

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.

Mark Boulton's Gravatar

Mark Boulton
Mon 10th Jan 2005
at 2:33 pm

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.

michael h's Gravatar

michael h
Thu 13th Jan 2005
at 10:05 am

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

david ull eleftheriou's Gravatar

david ull eleftheriou
Fri 14th Jan 2005
at 9:50 am

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.

Paulo's Gravatar

Paulo
Tue 18th Jan 2005
at 4:55 am

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.

Julie's Gravatar

Julie
Wed 19th Jan 2005
at 7:39 pm

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.

Mark Boulton's Gravatar

Mark Boulton
Thu 20th Jan 2005
at 12:28 pm

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 Ring's Gravatar

Darryl Ring
Fri 4th Mar 2005
at 9:06 pm

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.

Mark Boulton's Gravatar

Mark Boulton
Sat 5th Mar 2005
at 11:11 am

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.

Darryl Ring's Gravatar

Darryl Ring
Sat 5th Mar 2005
at 8:06 pm

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.

meashman's Gravatar

meashman
Wed 22nd Jun 2005
at 8:02 pm

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

James's Gravatar

James
Wed 8th Feb 2006
at 10:11 am

Commenting is not available in this section entry.

A picture of Mark BoultonI'm a graphic designer from near Cardiff in the UK. I've been a designer for over ten years now and primarily work on the web. I'm still partial to a bit of print every now and then though. I used to work for Agency.com in London as an Art Director before working as a Senior Designer for the BBC in sunny Cardiff. This was all before I took leave of my senses and formed my own design consultancy, Mark Boulton Design Ltd.

I've got a thing about grids and typography and occasionally ramble on about them to anyone who will listen.

If you're after simple, clean and effective web design; let me know.