What’s wrong with this picture?

The 1990s was an age of online graphic innocence. The WWW was populated with amateur personalised websites. Welcome now to the template age, where you can focus on content, and leave the packaging to others. At most you only need select from a range of page templates.

Facebook, Twitter, Flickr and blog content management systems encourage you to focus on what you want to say, your pictures and links. There’s no need to design the page.

For the technically minded this separation between form and content is also a feature of XML (extensible markup language), enabling you to format the same content according to different stylesheets. The graphical appearance of web pages has been professionalised — ie institutionalised, corporatised and anonymised.

I miss the good old days of badly drawn kittens, hearts, Gothic script muddled with Times New Roman, unaligned text and the pixelated clip art of amateur, home-spun personalised websites. At least it made the professionally designed work stand out from the rest. (Media amateurism has now shifted to videos and weblogs — anyone can be a filmmaker or journalist!)

Is there a method for producing good page design? The writings of the artist and Bauhaus teacher Wassily Kandinsky are often invoked to reinforce the rule-based nature of design. The title of his book, Point and Line to Plane, suggests a rigorous and scientific approach to composition: start with simple graphical elements, consider how they are arranged, and how they relate to each other.

The investigation should proceed in a meticulously exact and pedantically precise manner. Step by step, this “tedious” road must be traversed — not the smallest alteration in the nature, in the characteristics, in the effects of the individual elements should escape the watchful eye. Only by means of a microscopic analysis can the science of art lead to a comprehensive synthesis, which will extend far beyond the confines of art into the realm of the “onenesss” of the “human” and the “divine.” (p.21)

Fortunately it’s the theorist who is to embark on this journey, not the designer. The book is arguably a polemic to ground and justify abstract art in the face of art that represents (ie “objective” art). But those who believe art is grounded in Cartesian geometry part company with Kandinsky’s insistence on the sonic qualities of his graphic primitives, their “literary aftertaste” and the presence of heaven, home and earth in the construction of the square. This is theosophic design, synaesthetic, metaphorical and symbolic.

The tedious road

In a lecture on web design I usually present this personalised page layout with fake pride, extolling its virtues and invoking rules to justify its quality — the organisation along bilateral symmetry, the amusing content, the fact that it enables me to show off an environment I designed in a Tomb Raider level editor, the framing that defines its edges and gives it definition, and the fact that I’ve filled the page, a triumph when you have limited graphic means. The picture is graphically rich; the important text is picked out in sympathetic colours; it has variety, colour, personality – for what more could you ask?

When they detect my ruse we try and work out what if anything is wrong with the composition. The choice of components and words look somewhat random, but it’s an exercise in page layout not content. The symmetry is fine, but it’s not consistent across the whole picture. It’s not drawn precisely enough. The main border is all over the place. Some of the text is illegible. The meaning is not really very clear, and the images don’t relate to each other. The word “arbitrary” features prominently in our critique. Here are some further criticisms.

Lack of contrast in the use of colour; the areas of maximum contrast are not really the places where you want to focus the viewer’s attention (eg the messy frame); the attempted symmetry seems arbitrary; there’s annoying coincidence (eg one of the arbitrarily-placed pictures lines up with the centre line, and Lara Croft’s pony tail); the background is busy and distracting; the whole page is full of stuff, as if the designer is afraid of white spaces; there’s a mixture of fonts with no apparent reason; there may be humour or incongruity in the combination of images, but it’s not exploited to make a point; the designer doesn’t seem to be in control of the impression, meaning or mood of the image. Any humour, communication, or success is only accidental.

In summary the page does not look like the work of a designer. At best it invites charity rather than critique. Here are some alternatives, taming and ordering the same elements.

These attempts at least invite criticism in graphic design terms: too tentative, conventional, balanced, orthogonal; and improvements might be suggested in design terms: thinner, larger, lighter font, more relevant pictures. Rigour does not really account for the difference. Perhaps the most that can be said is that the latter participate in well-understood graphic languages.

There are many guides, online and off, for DIY page design. They follow several paths, providing

• examples of good design
• lists of common errors
• a reminder about the components of composition, eg points, lines and planes, rhythm, centrality, balance, focus
• method: think about what you want to say, consider your audience, look for precedents, generate alternatives, test the design, modify, brainstorm, think of a metaphor, etc
• rules of composition and balance, and rules of proportion
• analysis of certain compositional languages
• sometimes there’s an appeal to aesthetic principles that have a basis in human psychology.

But practitioners, teachers and theorists of design like to keep such guidance at arms length. Here are some reasons.

Design knowledge is tacit and doesn’t conform to rules; you learn to design by doing it. Design is reflection in action. Design rules have to be interpreted, ie applied in particular contexts. There don’t seem to be any rules for how to apply rules. Rules are made to be broken; we want to discover something new. Methods and rules give a false sense of security; as if following the rules produces success; but often it doesn’t. Rules invariably contradict each other and apparent good practice (eg some guidelines say you should not have to scroll to see all the page content, and yet social network and weblog sites contradict this); some advise keeping white space to a minimum, others say white space relieves the eye. Graphic design is more than composition, which distracts from meaning. Rules, exercises, and formalism tends towards a kind of instrumental conformity, often thought to tame, marginalise and neutralise dissenting voices. (Think of how the reduction of the images above to issues of composition effectively neutralises any consideration of political content — and it’s there if you look.)

Many disciplines present their production graphically, including all the design disciplines, architecture, engineering, education, fashion, and the sciences (biology, physics, etc). To focus on graphical presentation as a compositional exercise can distract from and deprecate the work being so presented. The form-content distinction is artificial in any case. Good design need make no such distinction.

Here are some further approaches to page design, not exclusive of the above.

• Content is king; ignore form
• Usability and access are the focus
• Communication: What do you want to achieve/say?
• Optimise legibility
• Focus on function: form follows function
• Design for interaction
• Be historical: build on precedents
• Ask what does the medium want to do
• Just practice, iterate, and review
• Collaborate: invite contributions, employ crowd-sourced design
• Aim for disharmony and discord; or at least consider the relationship between the two
• Appropriate, steal and distort
• Exaggerate
• Organise in catalogues, collections and ledgers (make multiples)
• Focus on systems, networks and flows
• Make up your own (arbitrary) method and follow it to the letter

Manifestoes provide another source for thinking about design, as therapy during the tedium of travel. Here’s an excerpt from Carlo Carrà’s 1913 Manifesto, The Painting of Sounds, Noises and Smells, available at http://www.unknown.nu/futurism/.

The painting of sounds, noises and smells rejects: 1. All muted colors, even those obtained directly and without using tricks like patinas and glazes. 2. The banality of those velvets, silks and flesh tints which are too human, too refined, too soft, and flowers which are too pale and drooping. 3. Greys, browns and all muddy colors. 4. The use of pure horizontal and vertical lines, and all other dead lines. 5. The right angle, which we consider passionless. 6. The cube, the pyramid and all other static shapes. 7. The unities of time and place.

Perhaps overstatement and exaggeration provide antidotes to banality; a means of breaking out of the packaging.

Bibliography

• Coyne, Richard, John Lee, and Martin Parker. 2004. Permeable portals: designing congenial web sites for the e-society. IADIS International Conference: e-Society, Avila, Spain, Edited by P. Isaías, P. Kommers, and M. McPherson, (1) 379-386. PDF
• Desmet, Christy. 2001. Reading the Web as fetish. Computers and Composition, (18)55-72.
• Kandinsky, Wassily. 1979. Point and Line to Plane. Trans. H. Dearstyne, and H. Rebay. New York: Dover. First published in German in 1926.
• Knight, Terry Weissman. 2003. Computing with ambiguity. Environment and Planning B: Planning and Design, (30)165-180.
• Wingler, Hans M. 1969. The Bauhaus. Trans. W. Jabs, and B. Gilbert. Cambridge, MA: MIT Press.

Also see posts: Exaggeration, Walking the line, Architecture as the last fortress, Nomadology and colour.