Beautiful classicalProportions
Without symmetry and proportion there can be no principles in the design of any temple; that is, if there is no precise relation between its members as in the case of those of a well shaped man.Vitruvius, De Architectura
Having trouble with that layout? Looking for an orderly arrangement but tired of Swiss grids?
The "Fourth of Four" or "Fibonacci Sequence" is an easy and beautiful method of arranging compositions on the web. Like the golden ratio, the Fibonacci Sequence is an infinite series of nestable ratios which can be combined into aesthetic wholes. But it is also much easier to calculate with and much better suited to working in pixels.
Is this a golden rectangle?
If not, is it too wide or too tall?
Designing peaceful compositions requires a scale of harmonious proportions, not just individual ratios.
A single golden rectangle is neither easy to spot nor particularly remarkable. The golden section is beautiful because it can be used to create an infinite series of values, all in harmonious relation to each other and the whole work.
But golden proportions are hard to work with in web design. They are hard to sketch, hard to calculate, and require careful thought with rounding and left-over pixels.
As a result, many designers gloss over the golden ratio and use one approximation, the rule of thirds. Composing with basic ratios of 1:1, 1:2 and 2:3 creates an overall harmony while remaining near the golden ratio.
Sometimes three size aren't enough. When you need a larger set of proportions, consider the Fibonacci Sequence.
No
The sides of this rectangle have the same ratio as the one above: 1:1.635, hard to distinguish from the golden ratio. Yet after subtracting three squares, the inner rectangle is plainly disharmonious. Deviation from the golden ratio is difficult to discern by sight, but deviations from a scale of golden proportions are easy to spot.
The terms of the Fibonacci Sequence are easy to remember:
1 1 2 3 5 8 13 21 …
Each number is the sum of the two previous. Despite this simple definition, the sequence has interesting mathematical properties:
- As with the golden ratio, the terms can be related geometrically in an infinitely-nested rectangle. Therefore the terms form a harmonious series of interrelated proportions.
- As the sequence progresses, the ratio between one number and the next gradually approaches the golden ratio.
It also has one important advantage for designers:
- The terms are whole numbers. Unlike dealing with the golden ratio, you can quickly guess, sketch, and calculate what things will look like.
So the next time you have to sketch a layout for an 800px-wide design, consider a primary area of 500px and a secondary area of 300px. If you split these areas again, consider doing so in the ratios 2:3 and 1:2, again yielding round values and attractive ratios.
When I use this method in my designs, I find that:
- The design ‘holds together’ immediately, just as with a Swiss grid. The elements seem to be placed in precisely the correct location, and the white space between them is activated.
- The final appearance is more traditional than with a Swiss grid.
- I feel much more free to experiment with different ratios without recalculating the entire layout. I have more room to design deeply-nested bits of small content with the ratios I want rather than constantly worrying about absolute gridlines.
In summary
The Fibonacci Sequence provides useful proportions for designing beautiful and traditional-looking web sites. Although not appropriate for all projects, it is an excellent tool to keep in mind, along with Swiss grids and the golden ratio.
For more on the debate about the golden ratio in classical architecture, see: “Misconceptions about the Golden Ratio”.
Great article Adam. As an artist I agree that this seems to give much more simply implemented design ideas than struggling with the Golden Section (I would also say that the results are better). Also it is interesting I think that Boethius, working in the sixth century AD predated Fibonacci by several hundred years; and in fact Boethius was pulling together work from the ancient Greeks who were working hundreds of years before him.David Clayton, Artist-in-Residence, Thomas More College
Postscript: shouldn’t we go to the extra effort to use the golden ratio?
Design books often use classical buildings such as the Parthenon to illustrate the use of the golden ratio in design. But without calculators or even decimal notation, the ancient Greeks were unable to calculate with irrational numbers. In reality, all art and architecture was composed with whole-number fractions that approximated the golden ratio.
The Roman architect Vitruvius wrote the definitive text on classical architecture, De Architectura. His chapter on proportions argues that all architectural proportion finds its source in the human form and describes this form with the proportions 3:5:8. He then shows how these proportions can be used in architecture.
The late Roman scholar Boethius improved on this by defining an infinite sequence of values that included 3, 5, and 8. Although today called the “Fibonacci Sequence” because of the mathematical work of Fibonacci studying the sequence, its first name was “The Fourth of Four” in a list of ten sets of proportions proposed by Boethius.
Boethius’ proportions systematized Classical art and formed the basis of Medieval and Renaissance art and typography. They were even the basis of the popular literati game Rithmomachy.
Some of the world’s greatest artists learned composition according to the proportions of Boethius. We could do worse than try them ourselves.