Capt. Horatio T.P. Webb

Web Design with Golden Sections -- Spring 2015

Version 1 -- 3/20/2016

There are 8 Golden Section templates shown on this page.

Four Landscape Golden Sections
(actual size 1618 pixels wide x 1000 pixels tall, png file, shown as 404 x 250) "Right Click", "Save as..."

golden1.png
golden2.png

golden3.png
golden4.png
Four Portrait Golden Sections
(actual size 1000 pixels wide x 1681 pixels tall, png file, shown as 250x404) "Right Click", "Save as..."

golden5.png
golden6.png

golden7.png
golden8.png

The Design Theory

The images above can be used as layout templates. There are two orientations of the Archimedes spiral: landscape (1.618... wide) by (1.000...tall); and portrait (1.618... tall) by (1.000...wide). There are four different rotations and flips for each of the the two orientations.

These 8 images are the results. Now for the theory.

The Golden spiral is based on the Fibonnacci sequence of numbers (see for example: https://en.wikipedia.org/wiki/Fibonacci_number). This sequence of numbers is:

1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144,...

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144,...

Starting with the numbers 0 and 1 (or 1 and 1), successive numbers in the sequence are obtained by adding the two previous numbers together. The general formula for the n^th number is:

F_n = F_n-1 + F_n-2

where F₀ = 0 and F₁ = 1. The mathematics is attributed to the Italian Leonardo of Pisa (aka Fibonacci) in 1202 but was known earlier in India in the second century BC.

	We can construct the spiral by starting with two squares -- each with side=1. The result is a sequence sizes of squares. The sizes are shown below. We can use this sequence as a scale for making squares with values for: top left height and width	Ratio of successive sides:

This ratio 1.6180339... of the lengths of two sides of a rectangle can be seen in the 8 templates above. The resulting rectangular shape is generally conceded to be the most pleasing rectangular shape and has been used for many artistic and architectural purposes.

The spiral itself is contructed by connecting successive 90^o arcs from the center of the spiral. These arcs define the successsively larger squares as can be seen in the corresponding image "golden3.png" above.

For the purposes of page design we would need to employ absolute positioned DIV blocks to define the work space for the page content.

Suppose we start with a workable sized HTML square DIV like 600 pixels. This would be the size of the largest square. The shape that will result will be 600 pixels tall and 600+(600*0.6189...) or about 971 pixels wide. So we want square DIV blocks with the sides:

600,370,229,141,87,54,33,20 as shown below.

The HTML would then be:

height 600
width 600
top 0
left 0

The small red box (number ten) is only 8 pixels square →

height 371
width 371
top 0
left 600

ht 229
wid 229
top 371
left 741

4
141x141
top459 left 600

The HTML is:

golden1.png	golden2.png
golden3.png	golden4.png

golden5.png	golden6.png
golden7.png	golden8.png