The Cure for Fluid Fever

layout normallayout abnormal

Fluid web page layouts are very 2010.

I have to confess that, over the past 5 years, I’ve spent way too much time staring at the web pages of fluid sites, mesmerized by the elements on these pages as they squish and expand, like an accordion, based on how wide I would make my browser window.

As this effect has lost its novelty I’ve yearned to see web layouts that get back to using the age-old principles of 2D design.

As a part of this wish I’m working to develop a grid that’s based on the so called Golden Spiral (as shown in the left illustration, above). This grid will be very helpful to web designers who are interested in visual composition.

If many of you cringe at hearing the words “Golden Spiral” I would not be surprised. I don’t believe that I’ve ever seen a symbol on the Web that has been as badly misused, and misrepresented, as this Spiral. I may have even seen, somewhere on the Web, this beautiful Spiral used to locate Mona Lisa’s left nostril. As though Leonardo was thinking “to hell with my overall composition … the left side of Lisa’s nose is all that matters to me!”.

letter A normal and abnormal

The use of 2D proportions is well understood by typographers.

Most serious typographers would not subject the letter “A” of Robert Slimbach’s wonderful Minion typeface to this kind of torturous compression, just to make it fit onto my tablet or smartphone. In an unexamined fluid design world, this letter’s harmonious 2D proportions would disappear. The intended design of the letter form would become distorted.

For this same reason, entire 2D layouts that are placed into fluid web environments would only produce distorted caricatures of their intended forms.

The cure for this problem is to use a set of different fixed layouts. Fixed layouts would be intentionally designed for different viewing devices, and each would maintain the integrity of its proportions.

Too many web developers scoff at visual designers that think of web pages as fixed canvases. These developers represent the designer’s wish to master the art of visual communications — through the use of fixed layouts and carefully considered proportions — as an inordinate urge to control the fate of the Web-viewing world.

These same developers tend to associate their automated layout programs with the non-attachment of the Eastern mystics. They argue that we shouldn’t be attached to how forms are arranged on a webpage. Some even try to make the case that the medium itself is not meant to support fixed 2D designs.

For my own part, I’d love to see more web designers reclaim this 2D aspect of design. It would broaden the way communications are transmitted on the Web.

The Parent and the Child

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 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.

Web Design, and the Future of Web Communications

arabic calligraphy
Alphabet Geo

There has been a great deal of discussion around the idea of designing web page “layouts from the content out”. In this article I want to begin by briefly looking at the phrase “web design”. I’ll go on to look at two different approaches to web design. I’ll also offer my interpretation of what designing “layouts from the content out” might mean.

Design as De-Sign

If, by the word de-sign, I can conceive of a process where something called “A” takes on a sign-ificance relative to something else called “B”, then the word design can be thought of as built upon a relationship between “A” and “B”. In this way two things can become connected, and an instance of communication can occur.

But, there are many different ways that things can relate to one another.

One way is to relate things semantically. For example, a child’s alphabet block can be semantically related to things such as a toy, a wooden cube, or a learning aid.

Another way is relate things visually. For example, the same alphabet block can be visually related to things such as a poppy seed (scalar relationship), or an egg (shape relationship).

So, for now I might think of the word de-sign as a verb which can be exchanged with the verb, to relate. When I use the phrase “designing a website” I can exchange this with the phrase “relating parts of a website”

In a super-simplistic way, the building blocks of a basic website are HTML, CSS and Javascript. For the purpose of this post I’ll look at only the first two of these building blocks.


HTML is the set of building blocks that deals with semantic relationships. As an HTML designer, the question that I would ask myself is: “What semantic relationships will I make in this site?” If my name was David Rosen I might ask myself how putting the words “Got Democracy?” on my Home page would semantically (and semiotically?) connect with the 1993 “Got Milk?” ad campaign.


CSS is the set of building blocks that deals with visual relationships. As an CSS designer, the question that I would ask myself is: “What visual relationships will I make in this site?” If I’m designing a website layout for a company called Sevenfold Organic Sunflower Seeds, then I might consider using CSS to set up visual ratios that are observed in sunflowers (perhaps a webpage that had the proportions of 1:1.618).

In the web design world semantics and visual presentation are artificially separated, but in reality they are inseparable. I can’t look at the content of a web page, and tune-out the visual shape of the letters that make up this content. Ignoring one or the other of these two design approaches can only result in dysfunctional layouts.

In my opinion, understanding the importance of the relationship between semantic design and visual design is more important than choosing between an outside-in process, or an inside-out process.

What Means “Layouts from the Content Out”?

The idea of designing “layouts from the content out” has been set in opposition to the idea of creating “layouts from a canvas in”. The “content out” idea seems to associate the word “content” with things like “text” or “images”. However, the promoter of the content-out idea does not explicitly state whether this text/image components are being related to one another semantically, visually or both.

Going back to our example — that is, to the phrase “a child’s alphabet block” — I can approach the four words of this phrase semantically or visually.

With a semantic approach I can imagine a web page layout where the four words of the phrase are used as self-sufficient points of departure for a series of fluid visual arrangements. As such the four words can be setup to flow, shrink and expand based on the characteristics of the devices, browsers, or even other HTML elements within which they’re being viewed. This self-sufficient cluster of words is designed to be independent of other words or images, and is related only to associations with other words in our language. It is not visually related to any specific layout.

With a visual approach I can imagine a web page layout where the four words of the phrase are used in deliberate, specific, non-fluid relationships. In this case:

  • the shape of each part of a single letter is visually related to the shape of the whole letter
  • the shape of each whole letter is visually related to the shapes of its neighboring letters, to form whole words
  • the shape of each whole word is visually related to the shapes of its neighboring words to form single lines (a.k.a. measures) of text
  • the shape of each measure of text is visually related to its neighboring measures to form the whole textural areas we call paragraphs
  • the shape of each whole text area is visually related to any images, titles and or symbols that make up the whole layout

Of course, to get anyone to give some of their attention to this visual approach I would need to give it a snappy name. Perhaps calling it “Centrifugal Composition” would work — as distinguished from the outside-in, “Centripetal”, composition that takes place when a large shape is subdivided into smaller shapes.

Which Way to Go?

I believe that a semantic approach that ignores visual relationships is doomed to fail as a vehicle for good-quality human communications on the web (or in print).

On the other hand, the visual approach, taken separately from the semantics of a given website project, will fall into what many critics refer to as the “pretty pictures” syndrome.

A more holistic design process is one that carefully considers the relationship between the semantic and the visual. This process has a lot to offer to people that are truly interested in communicating via the web. It is based on the understanding that semantic content and visual form cannot live without one another.

One More Look at the “Content-Out” Idea

The argument is often made that the content-out approach is the only viable solution in a world where viewing devices are constructed to every imaginable size and pixel density.

To this, I say that I can either offer myself up as a slave to the device manufacturers, or voluntarily place myself in the service of human communication.

If, as a consumer, I decide to purchase all of Samsung Galaxy’s two dozen screen-size mobile devices, then I should be willing to accept that, for the most part, my communications with others will be deprived of any meaningful visual component. In this environment, the only way that I can think of for a web designer to develop stable and meaningful visual relationships is to make use of the centrifugal composition process. The result is not ideal, in that I’m left with a composition that’s detached from the perimeter of my viewing device. A floating composition.

If, instead, I was asked to agree to only have access to two standardized sizes of Samsung’s two dozen Galaxy products, then I would gladly accept this device restriction. I would know that our beloved web designers could take back the millennia-old practice of visual communications, that a visual composition could include the perimeter of the viewing device, and that the site for my future sunflower company would communicate with other people in a more comprehensive way.

Neuroscience and Visual Communications

head study thumbnails

In my ongoing study of how certain visual compositions can evoke certain experiences I came across a field of research called affective neuroscience. One idea in this research is that facial expressions can cause emotional experiences1.

This brought me back to an interest in the relationship between biomorphic (in this case facial2) and geometric forms. It also prompted me to develop another study … this time, on the ability of people to discern very subtle changes in visual arrangements. Points on the corners of the mouth, lines between the eyebrows, and planes of the cheek muscles all relate to one another in the same way that visual elements are related in a composition.

Like a seasoned art critic, I’m often tempted to immediately put words onto a visual experience. But I see that when my word is found my experience is lost. How can I listen to the color and scalar relationships in another person’s painting — or to the expressions on my son’s face — with all of these words hovering around me?

head study 01

head study 02

head study 03

head study 04

head study 05


1 footnote #1
2 source for photo-image:

Facebook Logo Design and Geometry

I recently began to wonder about the design of Facebook’s “f” logo. I felt something very precise and deliberate in the placement of the white letter “f” within the blue square. This feeling, along with the subtle diagonal at the end of the letter’s cross stroke, made it impossible for me to resist doing yet another geometric study.

Facebook Geometry

According to traditional Western pictorial composition, our letter “f” is decidedly moving forward (that is, to the right) within its square blue stage. The base of the letter is thoroughly grounded at the bottom of the square, while it’s whispering bevel suggests an upward movement.

What if there was a similar geometry in the design of an orchid?

A Story for a Feng Shui Website


I designed, coded and recently launched this website for the wonderful R.D. Chin. Mr. Chin is a feng shui architect based in New York City. You can visit his site here. In his book, Feng Shui Revealed, Mr. Chin describes the principle of ch’i, which is said to be a “universal force or cosmic breath that all things are thought to possess”. He goes on to tell his readers about the imbalances that can occur when ch’i moves too quickly or too slowly through a space. Feng Shui is said to be a process of “ch’i management”, which includes the balancing of the principles of yin and yang. The design for the Home page of Mr. Chin’s site (see the first of the three thumbnail images above) unfolded as a sequence of twelve visual relationships, as shown below.

If I can resist the temptation to put things into words, is there a certain physical experience that’s felt when I look at each of the twelve arrangements below?

01 two circles meet


02 opposition and union


03 feng shui ba gua and the 8 directions of space


04 window


05 two circles meet


06 the body


07 octagonal child with small window above


08 octagonal child


09 mothers arms


10 mothers embrace


11 the Suns rays


12 horizon


Here are some larger views of the web pages:



1The feng shui practicioner makes use of an octagonal “map” known as the bagua. Perhaps this relates to Bada Shanren’s reference to the points of a compass, that “symbolize the eight directions of space which each painter worthy of the title must be capable of opening up with a single brushstroke.” You can read more about this idea in the Sea of Ink, by Richard Weihe (Translated by Jamie Bulloch).

Layered Communications

Colleen Cox 1_smColleen Cox 4_sm

I think that it’s important to emphasize that, even though I use geometric points, lines and planes to study the visual compositions that I include in this blog, the compositions themselves are not necessarily created using geometry. Someone can create a strong design without picking up a compass or straight edge.

When writing about strong designs I recall compositions that have communicated with me in very direct ways. The impressions that I receive when looking at these compositions may bypass words altogether, and instead be experienced as a brief, sequential movement of energies through my body.

These physical experiences may, in turn, produce corresponding emotional or ideational experiences.

For example, when looking at this still life painting (Fig. 1) by Colleen Cox1, I experience a kind of visceral collectedness. A certain stillness. Next, I become aware of an interplay between visual symmetry and asymmetry, and some subtle movements begin.

Fig. 1   
Colleen Cox 1 cropped

In studying this composition geometrically I see three worlds altogether.

The first world is about symmetry, and it’s main characters are the two peaches, symmetrically centered along the horizontal dimension (Fig. 2).

Fig. 2   
Colleen Cox 2 cropped

The second world is asymmetrical, and it’s actors are two vessels. One wide, the other narrow. One higher, the other lower. One full of flowers, the other perhaps(?) empty (Fig. 3).

Fig. 3   
Colleen Cox 3 cropped

The third world extends beyond the visible painting. In this world the peaches and vessels begin to move away from the center, but a new symmetry emerges (Fig. 4). This new symmetry has no actors to speak of, unless it’s an unassuming daisy that faces out toward the viewer. In any case this lighter-colored daisy becomes the center of a circle. A square is nested inside of this circle. An equilateral triangle is nested inside of the square, and it then projects its way downward until it rests on the table top.

Fig. 4   
Colleen Cox 4

I think that the visual story of this particular painting would make a wonderful compositional basis for a verbal story having to do with different layers of reality. If anyone knows of such a verbal story (a poem, a short-story, an “about us” page of a website dedicated to sustainable design?) I hope you’ll post it here.


1 The title of this painting is Red Daisies and Peaches. More paintings by Colleen Cox can be seen at Neptune Fine Art.

Intuition, Geometry and Shanren’s Paintings — II



Here’s another example of how a painting by Bada Shanren can be seen in terms of what I’ve been referring to as Compositional Storytelling. Along with my other articles I hope this example serves to illustrate the potential for applying Compositional Storytelling to web page design.

The yin yang symbol is sometimes associated with a pair of fish. This symbol is said to represent the underlying unity in what is normally perceived as a multitude of dualities. In the compositional studies below there’s a fish that’s nested not within half of a yin yang circle, but within the left half of an equilateral triangle. As a left side necessarily implies a right side, this might be seen as a first hint at the dualistic quality of the composition.

The watery area below the fish reiterates this dualistic quality. Its underlying geometry of exactly two squares, which sit side-by-side, fill the pictorial space all the way to the bottom corners.

In the context of these underlying compositional dualities one might expect the painter to have included a second fish. Instead, Shanren’s fish is alone, and inhabits only one half of the triangle. Why is this fish without its other half?

Bada Shanren A

Maybe this is a bit of a different fish. One that’s all too aware of its own internal dualities (see illustrations below).

The upper part of the red diagonal line (i.e. the diagonal line with the arrowheads) reveals the path from the fish’s eye up to the ideas expressed by the characters in the top left corner. The lower part of this same diagonal line traces the downward movement from the eye of the fish to the bottom of the composition. This lower movement may be suggesting that our fish is also able to see its rootedness to the earth below.

In a similar way its tail meets with a vertical line that, in turn, bridges the highest and lowest part of the painting.

Bada Shanren B

If you’ve seen or designed things based on an interest in proportion, rhythm, scale, and storytelling I hope you’ll share them here.

If the Goal is to Communicate with Intention then Compositional Storytelling Offers More Possibilities than Responsive Web Design

Note: The illustrations and comments in this post are not meant to be
thought of as a technique, but to be felt as an attitude.

This post includes the following sections:

Form and Content
How Does this Relate to Web Design?
The Nine-Point Sun Dance
The Old Man with The Ladder
How can Compositional Storytelling be Applied to a Web Page?

37 Moon Connects to Food

A Woman Feeding a Bird in the Moonlight1, circa 1800

Form and Content
back to top

The phrase “Content is King” is often used by web designers as the underlying principle upon which to build sites, but for me this phrase brings up a lot of questions.

I’m not an expert on the written works of Ancient Greece, but from the superficial studies that I’ve made it seems that Aristotle had some ideas about the art of effective speaking, and effective writing. It appears that one of these ideas involved the distinction between the content (logos) of a speech and the form or style (lexis) by which this content was presented.

The following two sentences may help to illustrate the difference between these two aspects of communicating:

She walked across the street.

I placed one foot in front of the other until I reached the other side of the street.

If I’m understanding Aristotle’s idea, the content of these two sentences is the same, but the form in which these sentences are expressed is different. From my quick read it sounds like both of these aspects of communicating depended on one another, and that one of these aspects by itself was not seen as being the King.

The same distinction between content and form also applies to visual works, as shown in the following two images of two different paintings:

Tangerine_01_small              Tangerine_02_small

Here again, the content of these two paintings is the same, but the form by which they are presented is different.

In both paintings2 the content is a tangerine, with its leaves, on some kind of wooden platform. However, the form by which the branch and leaves in the first painting relate to the corners of the picture communicates something different from the form by which the branch and leaves in the second painting relate to its corners.

This ability of visual form to communicate through a kind of pictorial body language has been recognized and put to use for thousands of years. Form and content have been thought of as inseparable.

Form and content are one.

How does this relate to web design?
back to top

I think that if the main reason for the existence of the Web is so that we might effectively communicate with one another, then the form by which web pages are visually presented should be carefully addressed.

I feel that the visual form, or visual composition, of a web page plays a significant role in communicating a story to others.

Unfortunately, this role is presently in neglect. Instead, there’s the push to further strengthen the concept of Content as King. The most recent push in this direction can already be seen all over the Web, and is based on a technical innovation called “Responsive Web Design”. You’ve probably seen it in use. You may have been viewing a certain web page (say microsoft.com3), and then decided to decrease the width of your browser window. In doing so you’ve seen that the entire visual composition is automatically rearranged to adapt to the changing width of this browser window, as shown in these two screenshots.

microsoft_01              microsoft_02

This change in the window’s format alters the form in the same way as in the tangerine compositions, with one important difference:

While the painter of the tangerines was aware of how changing the composition would change the story that he was communicating, Microsoft’s website designers were relying on the Responsive Web Design technique so that they could have an automatic tool to make all of the visual elements fit. How the visual parts of their web page fitted together to communicate a story was not an important consideration. Getting all of the parts to fit was.

Put another way, the Microsoft designers must have felt that the ease with which the visual form is “auto-composed” — each time the shape of the browser window is altered — is of greater value than the clarity by which a stable and deliberate visual composition can communicate.

In the rest of this post I’ll try to clearly illustrate a particular attitude toward visual composition. I call it Compositional Storytelling, but the name doesn’t really matter. What does matter, at least as I see it, is that it can be a means of strengthening communications across the Web. All that’s needed to practice Compositional Storytelling is a stable, fixed layout, web page.

An Example of Compositional Storytelling:
The Nine-Point Sun Dance

back to top

Fig. 1   There once was one point.
01 one point

Fig. 2   One radiating point.
02 one radiating point

Fig. 3   This one point had a wish to communicate with another point like itself.
03 two radiating points

Fig. 4   A line of communication was quickly made between these two points.
04 line of movement

Fig. 5   The two points wanted a field to look at, so they found another couple of points.
05.Combine four radiating points_sm

Fig. 6   They built a fence around the field.
07.Combine area of movement

Fig. 7   Within the field they placed a North Flag, a South Flag, a West Flag, and an East Flag.
09.Combine up down left and right

Fig. 8   Their days were a bit cloudy so they decided to move the flags to clear the field.
10.Combine up down left and right 2

Fig. 9   In the center of the field they placed a cup to catch the rays of the Sun.
12.Combine center

Fig. 10   After a time they agreed that it was safe to remove the fence.
14.Combine 9 points

Fig. 11   After drinking the Sun’s rays from the cup their radiations became so fine and bright that they could no longer be seen. Even the flags began to radiate so that, including the cup, there were nine points in all.
16.Combine 9 points 2

Fig. 12   The North Flag (now called the North Point) wished to hold dances with the other eight points, and these dances were made up of one Home position, and twenty four different gestures. Twenty five gestures in all.
17.2 gestures

Fig. 13    All nine points agreed to use one of the gestures as the beginning to a dance of its own. They practiced this dance for twenty one days, and then performed it for the enjoyment of the Sun.
18 3 visible lines of movement

Fig. 14   Two of the Actors in this dance were dressed in Red.
19 3 visible lines of movement plus a wish to set up a communication between two red points

Fig. 15   The Two Red Actors made their radiations less fine during the dance so as to add color to their performance.
20 two radiating red points

Fig. 16   The story for the dance would end with a connection between The Two Red Actors. This wished-for connection was marked with a red line.
21 red line of movement

Fig. 17   But, to be able to connect, The Red Actors needed a green line.
22 wish to tell the story of how the two red points can only connect with the presence of the green line

Fig. 18   They soon realized that they would not be able to get to this green line unless they had a special blue ray of light to help them find the ends of the green line. So, they worked together to set up this blue ray.
23 short file name

Fig. 19   The Two Red Actors moved the blue ray to the West, until they found one end of the green line.
24 blue line is moved to the left until it relates to the green line in a clear way

Fig. 20   Then The Two Red Actors moved the blue ray to the East, until they found the other end of the green line.
25 blue line can also be moved to the right until it relates to the green line in a clear way

Fig. 21    At this point in the dance The Red Actors were able to finally connect, and their radiations became fine again.
26 short file name

Fig. 22   Their connection was made possible only because of a New Point. This is the point where the blue ray crossed the red line to meet with the East end of the green line. The North Point made this important New Point into a Small Circle.
27 a new point, shown with a small circle, is suggested where red meets blue

Fig. 23   The dance was finished.
28 the visible composition with the new small circle

Fig. 24    The nine points and one Small Circle did not realize it, but this is what the Sun saw at the end of the performance. It didn’t see the Two Red Actors. It didn’t see the green line. It didn’t even see the Small Circle. It only saw the movement of the blue ray, and the way that it had made a connection possible.
29 the invisible part of the composition tells the story of how the two red points will only be able to clearly communicate with the green line if this circle is located precisely where it can clearly connect these two red points to the green line

Fig. 25   After the performance The Two Red Actors wanted to see what would happen if they made another performance, but this time for the enjoyment of a lazy spider called Respi Web Dizzy. The Red Actors tried to move the whole Western and Eastern sides of the field together toward the center. Fortunately, the North Point saw what was happening, and pointed out to the Two Red Actors that the story of the Sun Dance would be lost forever if it were told to Respi Web Dizzy. The Two Red Actors realized that if the shape of their field was changed they would never be able to use the same Sun Dance Story to connect with each other. The red mark and the blue ray — those same two lines that had given the Sun so much pleasure before — would not fit well with the nine points. The North Point told The Two Red Actors that Respi Web Dizzy, being the lazy spider that he was, didn’t even enjoy listening to stories. It was too much work.
31 a decision is made to horizontally compress the composition, the relationships between the two red points the grren line and the small circle has been lost

Fig. 26   The nine points had many plans for other dances, using all kinds of different gestures, but they realized that if they were to ever change the shape of their dancing field they would first have to think of a whole new dance, with a whole new story.
16.Combine 9 points 2

The end.

The Old Man with The Ladder
back to top

There’s a story about two brothers playing at the well4. The older brother (small grey square on bottom left of the picture below) falls into the well, and the younger brother (small circle) seeks the help of The Old Man with The Ladder (the Old Man is the small square at right).
32 short file name larger

The composition from The Nine-Point Sun Dance story is placed over the story of The Old Man with The Ladder.
33 original composition

Imagine that the different parts of the grey picture of The Old Man with The Ladder are different elements of a web page. Here’s the effect on the story when the web page is developed using Responsive Web Design, and the width of the browser window is reduced. The younger brother (small circle) is no longer able to connect the Old Man (red dot at right) with the older brother (red dot at lower left corner). The visual story is lost.
34 composition based on a fluid layout and responsive design, visual story is lost

How can Compositional Storytelling be Applied to a Web Page?
back to top

A Woman Feeding a Bird in the Moonlight
35 Woman Feeding a Bird in the Moonlight

A woman raises her hand to the bird.
36 Woman Raises Hand to the Bird

The Moon connects to the food.
37 Moon Connects to Food

The woman’s eye is related to bird’s eye, the eye of the Moon, and
the rooftop.
38 short file name

The bird’s eye is related to the Moon, and to the straight line that
connects the Moon to the food.
39 short file name

The Moon’s eye is related to bird’s eye.
40 short file name

Part of the painting is used as a compositional under-structure
for a web page.
41 Part of Painting as Understructure for Web Page_sm

An overlay is added to this part of the painting.
42 Part of Painting as Understructure for Web Page 2_sm

The red lines represent the invisible part of the composition. These
lines tell the story of how the woman relates to the Moon and the
bird, and how the Moon relates to the food and the rooftop.
43 short file name_sm

The web page is superimposed onto the painting.
44 Web Page is Superimposed on the Painting_sm

The final web page … just add navigation.
45 Web Page Just Add Navigation_sm


1 Source: The British Museum; School/Style: perhaps Rajasthan School
2 Pear paintings by Jonathan Aller
3 Home page of Microsoft’s Website on October of 2013
4 See the story titled Tikki Tikki Tembo, by Arlene Mosel