Over centuries visual design has developed as a discipline that seems to supersede logic and reason. Visual designers can describe the characteristics of their work with words like complex, massive, colorful, disorganized, and even blah. But as a discipline, visual design has resisted anything resembling the cold realities of grammar or mathematical formalism.
Enter George Stiny.
George Stiny’s Shape is an interesting read for anyone interested in understanding the theory behind visual design, and debunks any idea that the visual cannot be mathematical. This book distils Stiny’s many years in researching shapes and their properties. He has developed a highly formalized understanding of shapes, and communicates it to his readers in what he calls a "shape grammar." This detailed grammar explains shapes and the ways they are used in design by means of a formal algebra. Although the author’s work was developed in his studies related to architecture, any discipline that relies on visual design can benefit from the deep thinking behind Stiny’s shape grammar. This book is not an easy read, but it nonetheless represents an important and innovative way of thinking about design theory.
Shape is divided into four sections. It begins with a lengthy, profusely illustrated overview of shapes and the author’s reasons for rigorously studying them. Stiny then introduces us to a highly mathematical approach to delineating and analyzing shapes, covering shape design, shape theories, and the background of shapes. He discusses the ways in which a grammar of visual mathematical arguments can be used to describe and construct shapes. Just like the grammar of any spoken language, shape grammar focuses on syntax; when shapes are deconstructed to this low level of detail, aesthetics and visual appeal do not play a role. Stiny ends this section by summarizing why shape grammars are important to him: "Shape grammars let me calculate with shapesthey let me use my eyes to decide what to do next. In this way they `unpack the rule-based dynamics of how form is created’ (pp. 58-59)." The second section of the book continues in the same vein, to help the reader understand this unfamiliar but useful approach to design.
In the third section, Stiny embarks on a profusely illustrated discourse in which he compares his design philosophy and structures with those of others, ranging from Paul Klee and Susan Langer to Marvin Minsky, C. S. Pierce, William James, Herbert Simon, Nelson Goodman, and Ivan Sutherland. Stiny analyzes the way shapes and these authors have depicted visuals. He compares shape grammars with Noam Chomsky’s verbal grammars and outlines the basic differences between the use of language as descriptors and an algebra that is visually based.
A Primer on Shape Grammar
To make his argument, Stiny presents the three main elements of his methodology: 1) the shapes themselves as the vocabulary of a shape grammar; 2) the spatial relations between shapes as the rules of the grammar; and 3) the computational procedures for operating on shapes as the schemas of the grammar. Stiny is a mathematician, so all his explanations for a grammar and the relationships among its structures are logic- and math-based. Instead of the numbers and letters we all learned in traditional algebra classes visual images are substituted.
The discussion of shapes and their grammar starts from the basicsthe building blocks for shapes. For Stiny, all shapes boil down to a few basic elementspoints, lines, planes, and solids. So even though the star in Figure 1a reveals itself as a multiplicity of triangles and chevrons, it can be built from, in this case, points and lines. Once we have shapes, then we can introduce all sorts of transformations, like the rotation and reflection shown in Figure 1b.
With these basic elements in place, Stiny adds more-complex operators to the grammar. Looking at Figure 2, if you start with two words from the shape vocabulary, Shape A and Shape B (Figure 2a), you can then perform operations on those shapes, like adding them together (Figure 2b). You might also define a rule stating that Shape A transforms to Shape A + Shape B (Figure 2c).
Once you’ve learned a rule of shape grammar, you can apply that rule to make many shapes. This is where Stiny introduces the schema concept, (and things start looking a little bit like design patterns). Using a schema from shape grammar, you can generate multiple applications of the rule to create a design. In a schema each successive design is generated from a previous design by applying a rule. So, the rule A → A + B can be called the schema X → Y, and we can apply it many times to the shapes A and B, as shown in Figure 3a. The same schema can be applied to two different shapes, as shown in Figure 3b.
Stiny’s visual reasoning is incredibly detailed. When you begin to immerse yourself in it, you may find it a compelling way of thinking about what we see. Stiny believes that these grammatical rules are a fundamental design tool; they allow the designer to produce an infinite complexity of designs in a reasoned way.
From Grammar to Composition
If you’ve followed Stiny to this point, the fourth section rewards you for all the hard work by introducing readers to the impact of this thinking on design. Here, Stiny describes and offers examples of rules and schemas for more-complex designs. Stiny’s rules are based on two premises: First, design is drawing, and second, design is calculating when you don’t know what you’re going to see and do next. The second premise neatly sums up how Stiny himself wants to approach design with shapes and rules.
More-complex shapes can be generated from rules that are a result of an analysis of a given design. Working with examples from Paul Klee’s Pedagogical Sketchbook , Stiny creates rules and schemas. For those of us familiar with Klee’s teaching materials, Stiny’s examples show rigidity far removed from the subtle variations that are characteristic of hand-driven work.
Stiny’s discussion and expansion of Klee leads into the part of the book where the power of shape grammars really becomes obvious. First, he uses shape grammar to deconstruct and extend the common Chinese lattice. After this, he moves into an extended architectural example to show how the analysis of a ground plan of a neo-Classical building (Andrea Palladio’s Villa Foscari) can develop shape rules that can be used to generate possibilities for similar but new ground plans. Using shape grammar, Stiny demonstrates how even these complex designs derive from simple rules and schemas.
Can Shape Grammars Be of Use to Interface Design?
Before the "so-what" factor kicks in, take a look at other examples of visual grammar as a source of design. Check out the seminal work of H. Koning and J. Eizenberg , architects who analyzed the essential features of Frank Lloyd Wright’s prairie houses and, through rules based on their analysis, generated many prairie-house designs in the very same style as the master’s.
Can this type of thinking be applied to user interface design? Think of patternsa less-formal application to design than shape grammars, but one based on a visual analysis, which categorizes designs according to their basic similarities. In A Pattern Language , Christopher Alexander analyzed architectural forms and created a dictionary of elements including windows and doors, based on similar uses and features.
Using a pattern approach to architectural windows, for example, a building designer can view many window types and select from a multitude of choices those that suit an overall design need. Carrying that analysis one step further, the mathematically inclined designer can choose a particular window pattern and build rules that not only define its parts (the vocabulary), but also the window’s relationship to the building (the relationship rule). From those rules, the designer can then create a schema to generate many variations of the chosen pattern and locate the window to a place in an overall structure. In other words, the designer is creating a shape grammar based on a pattern.
Interface designers can take the same approach, substituting the architectural window with that of a Web-page design. Try it. Pick any standard interface pattern and analyze it for its underlying structure and vocabulary. Are there rules that have already been defined for the pattern you choselike the shopping-carts metaphor, for example, for pages that sell something? Think about its essential elements and play out some basic rules for a set of shopping-cart pages based on the rules you have determined.
Generating Web Site Designs Based on Rules and Schemas
Patterns are another way of documenting design knowledgea procedure for finding ways to reuse existing designs or generate new ones. Within the past five years, patterns have become almost ubiquitous in the field of interface design (see, for example  and ). The patterns included in these booksas well as in other workscan readily be analyzed using Stiny’s shape grammars. Once the underlying organizational structure, vocabulary, and rules of a pattern are understood, Stiny’s work can help in generating new patterns based on the original pattern.
Shape grammars offer HCI professionals a way to infuse structure into their design patterns and to generate a multiplicity of variants using rules and schemasjust as Stiny, the architectural designer, has done using a Palladian floor plan. Shape-grammar reasoning helps to deepen the analysis of visual designs. It will help designers to think about how and why a shape style is produced, rather than simply defining a category of use.
To be sure, Stiny’s book is a daunting read, and understanding the logic of his visual arguments requires perseverance. If you do persist, you will find your thinking sharpened by his useful (though unusual) approach to concretizing a visual design.
For more about shape grammars, refer to an open-courseware class on shape grammars offered by MIT at http://ocw.mit.edu/OcwWeb/Architecture/4-520Fall-2005/courseHome.
3. C. Alexander, S. Ishikawa, M. Silverstein, M. Jacobson, I. Fiksdahl-King, and S. Angel, A Pattern Language: Towns, Buildings, Construction, Hardcover ed. New York, NY: Oxford University Press, 1977.
4. D. K. van Duyne, J. A. Landay, and J. I. Hong, The Design of Sites: Patterns, Principles, and Processes for Crafting a Customer-Centered Web Experience, Paperback ed. Boston, Massachusetts: Addison-Wesley Professional, 2002.
About the Reviewer:
Bernice Glenn, principal, Glenn & Associates, has more than 20 years’ experience as an information designer and content strategist. She develops Web sites, designs instruction, and authors how-to books and technical documentation for clients including Apple, Razorfish, Xerox, and McGraw-Hill, among others. She studied shape grammars with George Stiny at UCLA in the 1980s, and her MA thesis described shape grammars as a method for creating rules that defined a design descriptive feature, i.e., complexity. Her undergraduate degree was in film/graphic design.
To submit a book review, please email Gerard Torenvliet at firstname.lastname@example.org
415 Leggett Drive, P.O. Box 13330
Ottawa, Ontario, Canada K2K 2B2
©2007 ACM 1072-5220/07/0100 $5.00
Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee.
The Digital Library is published by the Association for Computing Machinery. Copyright © 2007 ACM, Inc.