Using the Golden Grid to Better Communicate Web Page Content

sunflower

The golden rectangle has been associated with the growth pattern of living things. Subconsciously, this organic pattern resonates with us.

Introduction

This same golden rectangle is of particular use to the web designer who’s interested, not only in harmoniously composing visual elements on a web page, but in setting up what could be called visual meridians along which viewers can scan web page content. If it’s used with care it can help readers to conceptually organize this content. In the face of ever-changing web content, and always-proliferating viewing devices, the idea of using fixed, two-dimensional proportions — typically used in the domain of print design — has largely been set aside by many web designers as unworkable and inefficient.

In what follows I’ll present the benefits of, and practical methods for, using the fixed proportions of the golden ratio as a basis for designing clear web page layouts. With a little help from CSS pre-processors, CSS media queries, and a good jQuery content scroller, there’s no longer a reason why a designer can’t adapt these proportions to a mobile phone, tablet or the next “net fridge”. The greatest obstacle is that it requires a re-examination of the view that the optimal approach to page design for the Web is to be found in the fluid layout.

I’ll begin by setting up working definitions for terms such as harmony, hierarchy and continuity. After that I’ll do a quick survey of some of the current approaches that web designers are using to try to visually organize and harmonize content. I’ll end by providing an overview of a process that uses a construct that will be referred to as the golden grid. This process results in web page compositions that help the site visitor better understand and interact with the content.

Some Definitions

Harmony: In the context of this article, the term harmony will be used to refer to any composition that exhibits a unified diversity. The focus in this article will be on the ways in which areas can be harmoniously related. Color harmonies are another important area of study, but will not be addressed here.

Hierarchy: This can be defined as an arrangement or classification of things according to relative importance or inclusiveness. Visual analogies, connections between the macroscopic and the microscopic, and thought patterns can enter into the hierarchical structure of a web page.

Continuity: We can describe this as the principle of perception which states that readers tend to continue lines and shapes beyond their ending points.

A Quick Survey of Current Approaches

Soon after div elements made their appearance there were many web pages that lacked an organizing principle. Web page compositions had a wonderful diversity of elements, but were not clearly unified. As such they could not be considered harmonious.

In the composition below there are eleven squares of diverse sizes. The long red diagonal line is the major pathway of the overall area of the composition. It represents the initial scan that a Western reader will make when presented with a configuration of shapes. The short red diagonal is what Jay Hambidge calls a “reciprocal”. The reciprocal is perpendicular to the major diagonal, and it defines a smaller area that is analogous in its proportions to the overall area. Later, I’ll illustrate how visual analogies like this can help readers subconsciously organize web page content.

In this first configuration we can see that there is no correspondence between the eleven squares and the red pathways of the overall area.

 

fig 02

 

1. checkerboard-grid approach to visual organization

With the advent of grid systems, compositions could be clearly organized and unified. But, because they were (and still are) comprised of homogenous visual elements, the layouts that were based on these grids could not be considered harmonious. The illustration below shows thirty-two squares in a checkerboard pattern. There are underlying connections, but there’s no diversity in the sizes of the squares.

While the squares can be combined — e.g., for doubling the width of a particular text column — these combinations would always only give us whole number multiples of the same square unit. The reader will subconsciously perceive layouts based on these kind of grids as qualitatively mechanical, static and monotonuos. The quality found in the growth of living things is missing.

 

fig 03

 

2. the golden ratio approach to visual harmony (1 to 1.618)

Theme designers are currently using the golden ratio in their CSS. It’s not uncommon to find properties like margin: 0 0 .618em or line-height:1.618 sprinkled throughout the style.css file of a WordPress theme.

While these theme designers recognize the value of this ratio, the current momentum of the “fluid layout” industry — and its requirement that width properties be “decoupled” from height properties — limits their ability to use the ratio in the two-dimensional world.

For the purposes of two-dimensional design the golden ratio only has value when it’s applied across two, interdependent, dimensions. Whatever harmony is felt in observing the pattern on the head of a sunflower would be lost if this pattern were to either be squeezed in only one dimension (as occurs when using percentage-widths and fluid layout architectures), or be uncoiled into a linear, one-dimensional, string of ratios.

This idea could be used to enhance the usefulness of Le Corbusier’s Modulor, and of modular scales in general. These scales are decidedly linear or one-dimensional, but they could be built-upon to more adequately address what, by nature, are two-dimensional entities. At the time of this writing, all of our devices have displays that are, by nature, two dimensional.

3. the golden rectangle approach to visual harmony

In contrast to the first three approaches, the golden rectangle is uniquely suited to developing compositions that are both diverse and unified (and therefore harmonious). In the illustration below, five squares in a spiral configuration are shown.

The only problem with the golden rectangle is that it lacks the flexibility of the checkerboard-grid systems. We don’t want all of our web page layouts to look like a set of spiraling squares. The designer will need something that combines the flexibility of a grid system with the inherent harmony of the golden rectangle. This is where the golden grid can be of use.

 

fig 04

 

The Golden Grid

The golden grid is nothing more that the golden rectangle oriented to the North, South, East and West. The result is a square comprised of five smaller squares (in white) and 4 smaller golden rectangles (in green). Nine areas in all.

 

fig 05

 

A General Overview of the Golden Grid Design Process

Here is a set of abstract illustrations that show how golden grids can be used. I’ll go through a process of developing a very simplistic layout for a web page. I begin with a simple division of a level-1 golden grid into areas that represent the web page’s header content, middle content, and footer content.

Here are the basic divisions of the level-1 grid, with the header content area color-coded in red, the middle content area in yellow, and footer content area in blue.

 

fig 06

 

Based on the sizes of the logo, banner image, and top navigation the design team decides to reduce the height of the header area. To do this, a level-2 grid (in green) is superimposed onto the level-1 grid, and the header area is brought up to correspond with the top row of this new grid. The size of this new level-2 grid is specifically related to the size of the level-1 grid using the golden ratio of 1:1.618.

Another way of saying the same thing is that if the overall web page (level-1 grid) is 960 pixels by 960 pixels, then the level-2 grid will be 960 x 0.618, or 593 pixels by 593 pixels. Here 0.618 is simply the reciprocal of 1.618.

A logo area is needed in the upper left corner. This is indicated using a slightly darker shade of red. For this example, a decision is made to have the width of the logo area match the width of the left column of the level-1 grid.

 

fig 07

 

In the same way that our drawing programs allow us to produce a rectangle by making a single diagonal movement, this new logo area encourages the reader to make a diagonal scan (represented with a red line). Using the design principle of continuity we may decide to place some high-level content (shown with an enhanced yellow) at the point indicated with the red circle. Adding a jQuery content scroller (shown in gray) to this new yellow area ensures that — even if the word-count of this high-level content is altered — the proportions of the area within which the content is presented remains fixed, and the integrity of the web page’s visual relationships are maintained.

 

fig 08

 

Using a level-3 grid (in purple) the content in this small, new area can be organized in a way that’s analogous to the content of the web page as a whole. In other words, in a similar way that that the overall web page has a header, body and footer, the small area can have its own header, body and footer. The introduction of these kind of visual hierarchies help the reader understand how the web page’s secondary (supporting) content is related to the primary (main) content.

 

fig 09

 

In addition to helping lead the reader’s eye, and organizing the content, we find that the separate parts of this simplistic web page layout are related to the whole in a harmonious way. There’s a diversity in the sizes of the component visual areas, and these component areas are unified with the whole.

These golden grids can be cascaded down to the scale of typographic header margins, paragraph margins, line heights, and even down to the scale of the letterforms themselves. The key is to maintain the proportions in two-dimensions.

 

fig 10

 

As layouts get more complex, a sequencing-by-design (i.e., a design that helps to lead the reader’s eye through a series of points on the page) will save the client the time and expense of using after-the-fact tools such as heatmaps or analytics.

 

fig 11

 

This golden grid design process is very flexible, and open-ended. All of the visual elements have a definite connectedness to the whole composition, and there’s a sound visual hierarchy that helps the reader to better understand the content.

 

fig 12

Leave a Reply

Your email address will not be published. Required fields are marked *