FIBONACCI WEB DESIGN - designing web sites using harmonic proportion and Fibonacci numbers

Add two successive Fibonacci numbers such as 1, 2, 3, 5, 8, 13, ... and you'll get the next. The corresponding ratios 1/1, 1/2, 2/3, 3/5, 5/8, 8/13, 13/21, 21/34, ... converge to the harmonic proportion: 1/2 (square root of 5) - 1/2 = 0.618034... This so-called golden ratio divides the unit interval into segments of lengths a and b such that a/b=b. So the inverse of 0.618034... is 1.618034... whose square is 2.618034... etc. Many artists claim the human eye prefers the golden ratio over others. Let's use it to design web pages such as the one you are reading right now - compare examples to the right.

Note that certain artworks exploiting Fibonacci proportions are special cases of Low-Complexity Art based on the general Theory of Beauty.

Copyright notice (2005): Jürgen Schmidhuber will be delighted if you use the principles outlined here for your own web designs, provided you mention the source and provide a link to the present page.

Make web pages using the golden proportion and Fibonacci numbers! Like Professor Schmidhuber, whose web pages and talk slides are graphically structured based on these geometric principles. (Last update 2010; original version of this page: 2005)
.

Top: Cut-out of Schmidhuber's home page and Cogbotlab page, scaled down by powers of the harmonic proportion. Blue lines indicate recursive applications of the golden ratio, approximated through Fibonacci ratios with a base length of 2 pixels. That is, we multiply Fibonacci numbers by 2 to obtain object sizes (e.g., image widths and heights) of 2, 4, 6, 10, 16, 26, 42, ..., 754 pixels. We do this because 754 pixels yield a fine display width for many screens, while the "most desirable" (most accurate, minimal) base length of 1 pixel does not. Individual graphical elements such as the one to the right (for a New Kind of Empire) should follow the same fractal Fibonacci design rules whenever possible.

Once you have chosen a particular outline of your Fibonacci web design, such as the present 4 column page with column widths 178 / 288 / 178 / 110 pixels, additional design decisions are needed regarding the margins separating texts and other graphical elements. But don't agonize too long over how to select appropriate margin sizes! Schmidhuber's most elegant solution may be: no left margins for left-justified text; no right margins for right-justified text! Like in the present page, or the Cotesys page, or the STIFF project page, etc.

A base length of 90 pixels is not as precise as the 2 pixels used in the present page, but not bad either. Examples:
Robots
Goedel
machines
Evolution
Evo-RNN
Resilience
Curiosity
Physics
AI

Right: Alternative Fibonacci proportions for the Recurrent Network page and others. Again, blue lines indicate recursive applications of Fibonacci ratios, this time using a larger base length of 90 pixels. So we limit ourselves to object sizes of 90, 180, 270, 450, 720 pixels (multiples of 1, 2, 3, 5, 8).