The golden ratio in form design
Designing a form was very much easier back in the days when all we had
was a monochrome screen displaying text. The screen was 80 characters by
25 lines and that was the shape of your form. FoxPro 2 for DOS gave us
character-based windows but for most of the time we still used the entire
screen area from force of habit. These days the graphical user interface
(GUI) has given us lot more flexibility but this flexibility brings the
drawback we have to make a lot more design decisions every time
that we start a new form. Making decisions takes time and our life has
been a little easier since we decided to restrict ourselves to a few
standard form sizes.
Forms are rectangular and rectangles come in many shapes. At the extremes
a rectangle can be tall and thin or short and fat but somewhere in the
middle of the range there must be a shape that looks just right. Artists
and architects believe that the "just right" appearance
comes when the ratio between the lengths of the sides is close to
1.618:1, the golden ratio. This form is 491 x 303 pixels and has
sides in that ratio:
If you want to see an everyday example of the golden ratio, take
a look at a credit card. Sizes vary slightly but 86 x 53 mm is a
typical size and 86/53 is 1.62.
Properties of the golden ratio
A rectangle in the golden ratio has the unusual property that you
can cut a square out of it and be left with a smaller rectangle
which is also in the golden ratio. In mathematical terms:
width/height = height/(width - height)
If you multiply this out and solve the quadratic equation you'll
get answers of 0.618 and 1.618. Simple arithmetic proves that these
answers are correct:
1/1.618 = 0.618
1/0.618 = 1.618
1.618 - 1 = 0.618
The value of 1.618 is not exact because the golden ration does not
have an exact value. It is an irrational number like pi and mathematicians
use the symbol phi (φ) to represent the exact value of
The form above is 491x303 pixels, as close as I could get to a ratio
of 1.618 without fractional pixels.
If you remove a square of 303 pixels you are left with 188x303 pixels,
another ratio close that is to 0.618.
Remove a square of 188 pixels from this smaller rectangle and you are left
with 188x115 pixels, again very close to 1.618.
Golden ratios within a form
Looking at it geometrically:
Splitting the form horizontally in the ration 1.618:1 gives a
nice balance between the two main areas of the form. The square
of 303 pixels holds the name and address information and the
golden rectangle of 188x303 splits into a smaller square and yet
Going back the the original point about having to decide what
size the forms have to be, we've bypassed this decision by picking
four basic sizes for our forms:
- 794x491 - fills an 800x600 screen nicely
- 187x116 - big enough for a textbox and a couple of buttons
Using this restricted range holds the application together nicely because
the user sees a consistent range of forms rather than a mixture of short
and tall and fat and thin. The two larger forms always appear in landscape
orientation but the smaller ones are sometimes useful in portrait form too.
Just as an aside, we usually design for an 800x600 screen because that
seems to have replaced 640x480 as the lowest resolution we see in
commercial office use. We can never rely on being able to use the full 600 pixel
height of this screen because the user will always have the Windows status
bar at the bottom of the screen and may well have a Terminal Services bar
and Office bar taking yet more pixels off the height.
These form sizes are only a guide. If a form really needs to be a different
size then we choose a size which meets the needs of that particular form. Most
of the time though we just pull one of these standard forms out of the
and get on with the job.