Structure and tension

Balancing the need for a rational system of visual communication with creating experiences that are at least mildly human and alive.

The work that I do designing digital experiences for IBM (and our clients) is – unsurprisingly – often technically complex and requires a high degree of alignment with business workflow and process. This naturally lends itself to very structured and rational visual systems. The danger is that these imperatives can easily lead to experiences that contain the needed content and services within a logical information architecture but are visually dead. 

The gestalt principles of design as described in Rudolph Arnheim’s 1954 book Art and Visual Perception: A Psychology of the Creative Eye (Proximity, Similarity, Continuity, Closure, Area, Symmetry) are valuable tools for the creation of rational visual systems for complex problems, but even skilled application can still lead to a product that lacks emotional connection with its audience. 

When I first started my design career as a print designer for a small boutique, one of the design principals would daily repeat his favorite catch phrase, “weights and measures” (usually at the top of his lungs, with a vein throbbing on his temple). We junior designers lived in terror of his ridicule (it was not a very healthy environment), so none of dared ask what he meant by this phrase. I finally mustered the courage to do so, and he calmly explained that whether designing packaging, corporate identity, environmental graphics or anything else, a good designer first establishes a common denominator of measurement to undergird his or her work. If a rule is four points, then the gap between that rule and the next should be some multiple of four points. If there is a circle, then the radius should also be some multiple of that denominator and so on. Furthermore, this principle applies to color, typography, iconography and so on. Establish a rational system, and build all the elements within that system.

BUT, he was careful to point out, always look for an opportunity to break the system. Have a shape violate the grid. Introduce a color outside the spectrum. Invert a letter. Do so deliberately, with intent, and never arbitrarily. By introducing a discordant note you create tension, visual interest and stimulate a human reaction.

It wasn’t until later that I made the connection between what he was saying and Roland Barthes 1980 book on photography (among other things) Camera Lucida. In Barthes’ book he describes what he calls “stadium” and “punctum.” Stadium denotes the context (political, cultural, linguistic, historical, etc.) interpretation of the work, while punctum denotes a personally touching detail which establishes a human connection to the piece. It’s the discordant or visually surprising note that introduces tension. This principal can be seen throughout media, from photography to painting to film to literature to music and performance. Establish a system and give it a little kick.

Which brings me back to my original point (after a fair amount of rambling). In designing digital experiences for complex problems, it’s vitally important to establish a system of “weights and measures” that will ensure the vernacular is rational so that users can easily navigate and use the content and services they need to achieve their outcomes. But to make the experience human and compelling, it’s as important to look for opportunities to introduce a “punctum,” the discordant note that will add visual interest and tension and make it feel alive.