The founder of a startup business decides to redesign the look and feel of his website. He wants to find a way to better connect with his audience, and needs to have the design work as well on a mobile device as it does on a desktop computer.
One morning, after preparing his coffee, he fires up his laptop, and heads over to wordpress.org/themes. His optimism grows as he reads that WordPress has 2,901 free themes to choose from.
He types the words “sleek and earthy” into the Search field of the theme directory. These two words capture the essence of his startup’s service. WordPress displays several themes that match this search. He opens up the demos for these themes, and is discouraged to find that the look and feel of the themes are very different from the particular sleek-and-earthiness that he’s looking for.
This imaginary scenario is not so far from reality.
Why, for example, does WordPress’s “Enigma” theme not feel very enigmatic to me? Sure, the theme’s Home page includes a big banner of a nighttime-in-the-city scene, but the general layout of the page doesn’t resonate with what I would consider enigmatic, or mysterious.
This is where a custom website becomes a smart alternative to readymade themes.
I recently designed a custom site for Annie Finch, a noted American poet. Over the course of several discussions with Annie — discussions about the idea or feeling that she wanted the look of her site to communicate — some of the recurring qualities that came up were earthy, natural, elemental and sleek. In many of our talks there was also a strong undercurrent related to the activity of birthing and mothering. The activity behind creative works are often compared to birth giving, and this comparison was very clear in Annie’s participation in the design of her site. It was hard not to connect the Home page of the new site with one of Annie’s books, titled Home Birth (a collection of poems about pregnancy, birth and nursing).
Based on all of these exchanges I developed several visual compositions. After a number of revisions we arrived at a visual layout that we felt most clearly communicated these qualities and activities.
The Desktop Version of the Layout:
On the face of it the visual composition of the website’s Home page includes a portrait of the poet, and a scene from nature: a lake where Annie likes to work.
Behind this face there’s the visual composition’s undercurrent or understructure. This understructure is made up of a series of invisible, abstract areas. These areas are arranged to subconsciously communicate1 the relationship between the Parent and the Child. The quality of Nature is also represented. This is done by incorporating what mathematicians call the Root 5 Rectangle, an area that relates to proportions found in the growth of natural organisms.
When you click on the second thumbnail image below you’ll see the spatial relationship that exists between the Parent and the Child. Here, the Parent is the vertically-oriented, central rectangle of the Home page (represented by its diagonal), and the Child is the smaller, horizontally-oriented rectangle that’s nested inside the Parent. The Child possesses the same proportions as the Parent. It’s a microcosm of the Parent. Both of these rectangles, although different in scale, are related to the proportions of the equilateral triangle. This Child area is reserved for what Annie calls her Weekly Spells.
When you click on the third thumbnail image you’ll see how the lateral regions of the Home page are connected to the unfolding of the Root 5 Rectangle. The first and third “moves” of this upward unfolding correspond with the upper and lower boundaries of the lake image.
The Home page is a story about Annie’s work, but it also becomes a story about the connection between the Parent, the Child and Nature.
It’s important to keep in mind that there is no formula to setting up these abstract areas. If the content of the Home page were to undergo some significant changes then a new arrangement of abstract areas would be needed. The goal of this new visual arrangement would still be to communicate the same qualities as before.
The Mobile Version of the Layout:
The challenge in developing layouts across different viewing devices is to apply device-specific understructures that will communicate the same qualities.
There are many different ways to do this, and for the portrait version of a smartphone I decided to simply scale down the original understructure in a way that would correspond to the proportions of the smartphone’s viewfinder.
The amazing thing about human perception is that a person can “fill in the blanks” in cases where parts of the composition do not fall within the boundaries of the screen, window or viewfinder. This is not too different from the Closure principle of the Gestalt theory of visual perception.
For the mobile version of Annie’s Home page only about half of the understructure lies within the viewport (see Figure 5). The Parent/Child and Root-5 relationships are maintained, but most of the Root-5 areas fall outside of the viewport. It has been said that human beings are attuned to seeing/feeling certain proportions, and that these proportions wash over us when we take in visual impressions of the natural world2. These proportions relate to the growth and movement of living organisms.
Despite the fact that most of the Root-5 areas are outside of the smartphone’s viewport the arrangement of the visual elements that fall within this viewable area is such that the Root-5 areas are implied (see Figure 6). In this way the relationships between the Parent, the Child and Nature are maintained.
Designing web pages in this way would require a shift in the way that people think about user interfaces. A user interface can be based on a visual hierarchy that helps the viewer navigate the page, and it can also be used as a field where proportional relationships support the story that one wishes to share.
Beyond user interfaces the design process that I’ve described here would require a change of attitude in how we think about productivity. The speed of production has to be measured alongside of the quality of production.
1These invisible areas have been used for millennia. Perhaps the closest thing to this that can be found over the past hundred years is the European theory of gestalt and, more specifically, the principle of closure.
2See The Elements of Dynamic Symmetry, by Jay Hambidge.