. |
 |
. |
|
|
|
|
|
|
|
|
|
. |
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.
|
|
 |
|
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).
|
|
|