For the past eight Thursdays I’ve been helping our neighbor’s thirteen year old son, J, to develop his observational drawing skills. In an age where anyone can take a photograph of anything in their environment with their iPhone, it seems to be increasingly rare to find a young person who has an interest in directly observing the visual world.
Translating the three-dimensional world onto a two-dimensional paper does not come naturally to many of us. Among the many different exercises that J and I have tried up until now, the two most engaging have been the practice of “blind contour” drawing, and the practice of drawing with the old Albrecht Durer perspective grid.
In addition to providing a welcomed break from the digital world in which I’m so often immersed, I get to spend some analog time with a great kid.
Here are some studies that I made of several designs produced by the iconic American architect, Frank Lloyd Wright. Although the extent to which Wright made deliberate use of the golden ratio is not well documented, the following visual studies reveal that, in a number of his works, the 1.618 ratio played a central role. With each quarter turn of any golden spiral its distance from its origin point increases (or decreases) by a ratio of 1 to 1.618.
How can we apply the principles of what Wright referred to as organic architecture to the design of a web page? What impact would impressions received from organically designed web pages have on our time spent online?
1. Roloson Row Houses1
2. Kinder Symphony, balloons and confetti for the Avery Coonley Playhouse
3. Windows for J.J. Walser House
1 Much of the credit for the Roloson House study goes to John Morris.
I heard a bird calling outside my window today. This prompted my strange brain to wonder whether a bird call could be used as a source of inspiration for laying out a set of text columns.
When I first scan a visual composition — whether it’s a painting or a web page — my eye lands on the various parts of this composition at distinct moments in time. These moments can be assembled into a rhythm that evokes the sound of a time-keeping device, or they can be arranged in accordance with a rhythm from nature. In the two videos below I wanted to illustrate how the relative widths of a set of three text columns — as well as the spaces between the columns — could be connected with these different rhythms.
video 1 of 2: metronome-based design
video 2 of 2: whip-poor-will-based design
Audio Source for Video 2: Birds of North America, at http://www.mbr-pwrc.usgs.gov/id/songwav.html
I came across a discarded metal salt shaker a number of years ago. Its form and ornamentation struck me. The tactility, weight and scale of the shaker left me with the impression that this object was made to feel like an extension of my hand. I later learned that this shaker was made in the late 1920s. It may seem like a strange thing to say, but I felt that in holding and looking at this salt shaker there was a certain kind of remote communication between the designer of this object and myself.
In the previous post I provided a couple of pictures to show how a careful attention to the grouping of, and spacing between, typographic areas can help clarify a business’s drink menu.
In this post, I’m including an illustration of how the design of the menu can be taken one step further.
Beyond merely grouping and separating typographic elements, I used a set of interdependent golden-ratio spirals to help visually unify all of the diverse parts of the menu. The illustration below is a sort of “x-ray” of the layout from the previous post. In much the same way that a well-tuned stringed instrument is necessary for creating various musical harmonies, a carefully-proportioned set of figure/ground areas are needed to create visual harmonies.
I recently came across a website template that’s currently being sold by a very popular web publishing service. The theme of the template is pre-designed to appeal to bar/restaurant owners, and the default layout allows business owners to publish their food and drink menus. The sample photographs used in this demo-site are rich in detail and color. The fonts are clean in appearance.
As a whole, this web template makes a bold first impression.
So, I make up my mind to pay a first-time visit to this imaginary tavern. I call my friend, and together we take an imaginary walk to this make-believe establishment. We sit down at one of the small outdoor tables, and proceed to order drinks. My friend decides to Continue reading →
Over the past five or six years web designers have worked at devising “fluid” alternatives to “fixed” web page layouts. The increase in the variety of screen sizes has prompted a search for visual layouts that can easily be modified.
However, many of the new layout methods do not make use of visual composition.
Unlike a painter’s canvas, viewers of web pages only see a section of the whole page at any given moment. To move from one section of the page to another, a scroll bar is used.
In contrast, traditional composition is all about meaningfully connecting the different visual sections with the whole. So why bother with composition when the web page as a whole will never be seen, and isn’t composition even less necessary if we’re talking about viewing web pages on a phone?
These questions prompted me to take a closer look at a physical scroll, to find out how people from the past have approached composition for scrolls, and to see how their methods could be used to create compositions for the web.
Figures 1 and 2 show a section of a Chinese scroll1, and a compositional analysis of the same section.
NOTE: Thanks to flying_leaves for questioning two of the diagrams below. I’ve since clarified the two diagrams, and have included them here.
Below is an infographic that illustrates how things that occur in Nature can be applied to design. It provides an example of how a conceptual hierarchy (in this case, CARS > PICKUPS > 4-CYLINDER) can be supported by a corresponding visual hierarchy. Verbal analogies are translated into visual analogies: 4-CYLINDER is a subset of PICKUPS as PICKUPS is a subset of CARS.
Proportions are a good way to visually illustrate analogies that are presented in typographic form. In this infographic, proportions are used to determine the relative x-heights of headings, subheadings and body copy. The negative spaces between successive lines of text are given equal consideration. Even the width of the text columns (i.e. measures) can be included in this network of proportions.
I recently designed this website for a CSA farm that’s located a few of miles away from my house. The entire design is based on the phi (or “golden”) ratio that I mention in earlier posts.
The red spirals in the second image show how the individual web page elements connect with the larger whole of the page. None of these red lines are seen by the site visitor, but the proportions of the site are felt to be harmonious. Continue reading →
The golden rectangle has been associated with the growth pattern of living things. Subconsciously, this organic pattern resonates with us.
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.