With the growth of the Internet, a vast amount of content has been published online, and almost none of it adheres to any formal principles of margin and type areas, "laws of form" or page design "canons". In medieval times when books were a rarity and publishing houses were few, considerable time and effort was put into achieving the perfect layout, with most printed works relating to the Golden Ratio. Collectors of rare books appreciate the "truly beautiful" proportions of the pages. It was very rare for publishers to deviate from the two or three most common "canons of page design".
I first became aware of these canons when researching the Golden Ratio and its relevance to architecture, art and design. The Golden Rectangle, which is based on the Golden Ratio, is considered to be the most beautiful shape in the world. This is so for a reason. Many forms in nature follow the Golden Ratio, from the proportions of the human face, to the branches of trees, the patterns of sunflower seeds, or the cross sections of sea shells. The Golden Ratio is found in ancient architecture and design from the Parthenon to Zen gardens.
The Golden Ratio is expressed mathematically as (a+b)/a = a/b = φ. This simple mathematical statement is marvelously elegant. It simply says that the sum of parts a and b are to the larger part a, what a itself is to the smaller part b. Now, if a and b are taken to be quadrilaterals, the presence of two dimensions produces a curious phenomenon: the proportions of the rectangle b are identical to the proportions of the rectangle (a+b). This is known as the Golden Rectangle, and it is a Fibonacci series. It's recursive. Therefore b is also a Golden Rectangle, and can be divided into c and d, where (c+d)/c=c/d. And so on and so forth, ad infinitum. And therein we find the elegant spiral of the nautilus, the radiating pattern of the seeds of a sunflower, the rings of Saturn, a butterfly's wing, or as Leonardo Da Vinci's Vetruvian Man illustrates, the shape of the human body (some adhering a little more closely to the Golden Ratio than others, I hasten to add).
On to another canon of page design. There was a design sometimes known as "the Secret Canon" that was used in many medieval incunabula. It was used by Gutenburg, for example, and features margins of 1/9, 2/9 and a text area of the same proportions as the page.
There are a number of more (relatively) modern interpretations of how this ancient and beautiful layout were acheived, one of the more common being the Van de Graaf Canon, seen here.
The dark lines have been used to reconstruct the proportions of the Secret Canon. Here is an interesting challenge: see if you can determine in which order these diagonal lines had to be drawn in order to come up with the red text boundary. It's a great exercise to go through; it will make you start thinking like a page designer.
Notice how the red rectangular text area is the same proportion as the page itself (only smaller). Also notice the left and right magins, being 2/9 and 1/9 respectively for the left page, and how the left and right page together form a center margin of 1/9 + 1/9 = 2/9, equal to the outside edges.
There are a number of other canons for page design, many approximating the Golden Ratio or it's convergents.
Tschichold's Interpretation of the Golden Canon
Raul Rosarivo's Interpretation of the Golden Canon compared with Tschichold's Golden Canon.
Now, you're probably reading this on a computer screen, and computer screens are different than printed book pages, so it might seem a stretch to imply that medieval canons of design could apply to modern web page layout. But I happen to be writing this on a screen with 1280 x 800 resolution. And guess what 1280 by 800 is? It's 1.6, or φ, the Golden Mean. It seems after spending too long in the dark ages of digital incunabula, we might be on the cusp of a renaissance in digital layout. You've probably noticed LCD monitors shifting from the squat 1.3 ratio to the elegant wide-screen models that approximate the Golden Mean.
I'm not suggesting that designers everywhere should go out and study Fibonacci numbers and medieval typography. Rather, all of this points to (in my interpretation, at least) a more fundamental concept - that the human mind is, above all, a highly adapted pattern-recognition engine. That human beings, and perhaps all living things, are innately attracted to order and repetition. And perhaps this attraction to order, symmetry and repetition is a counterpart to entropy and the tendency towards chaos. Yin and Yang. The light and dark side of the force. But let's leave philosophy aside and return to the topic of layout.
Dealing with web pages as a medium, layout is generally more complex than a simple one or two-column type area. Banners, callouts, images and menus will all compete for screen real estate. But it's still possible to come up with a beautiful layout by following a few simple guidelines. Here are a couple simple rules of thumb I use when considering a page layout.
1. Consolidate Boundaries
Look at a web page and, scanning left to right, find all the edges you possibly can. The left-hand margin of the page. The edge of the first letter of each line of text. Every vertical line that forms a left or right-hand boundary for any section of the page. Edges of margins.
Now, draw imaginary vertical lines from the top of the page to the bottom, one line for every edge that you have found. As a general rule of thumb, the more of these vertical lines there are, the worse the design will look. Text justification is a great tool for consolidating boundaries. Be especially vigilant for boundaries on forms - they are often the very worst offenders.
2. Find Symmetry
Next, ask yourself if there is any symmetry in the pattern of imaginary vertical lines. For example, is the distance between two vertical lines on one side of the page the same as the distance between two vertical lines on the right side of the page. Scan the page from top to bottom and identify all the margins, like the space between paragraphs or the vertical margin above a banner. Once you have identified all margins, both horizontal and vertical, ask yourself why the margin is the width it is. If you can't find any logical reason why a margin has it's particular width, consider it a mistake. It should be that particular width because it forms part of a repeating pattern or adheres to a discernible ratio.
3. Use Patterns
Remember the idea that the human mind is a pattern-recognition engine. It's what makes music beautiful to us. Remember the Golden Ratio (especially the symmetry and repetition it embodies). It's what makes shapes, faces, and design beautiful to us. Use symmetry and repetition to base your layout on subtle patterns that the human mind will subconsciously pick up and find innately attractive. A pattern doesn't have to be boring, a mirror image, or based on multiples of two. Remember the number 3, once considered the divine number. Remember ninths of the secret canon (three times three) and consider using them as a guideline for creating margins and white space. Consider layout that reflects the symmetry of the end-user's screen itself, with horizontal and vertical margins being the same in proportion to the vertical and horizontal screen resolution of their monitor (easy to accomplish with percentages).
(Update - since originally writing this article, grid-based layouts have become increasingly popular. I recommend checking out the following resources on grid-based design.)
4. Need a shortcut? Use a Grid!
Grid-based design has evolved in response to some of these issues. Two popular examples are the 960 Grid System and Twitter Bootstrap grid system. For many examples of web sites designed with a grid, and interesting comments from designers about ratios, margins and the Golden Mean, check out this Smashing Magazine article.
----
Images courtesy of Wikimedia Commons
No comments:
Post a Comment