I am a frustrated web site designer.
In 1996, Creating Killer Web Sites introduced the world to web sites built with artistic merit. While the coding is outdated, this book continues to have a strong impact on my Internet designs.
I don’t want to create pages that are strictly functional. I want to create designs that reflect my personality. I want to create pages that are more than a one-liner statement. I want to create web site designs that are functional AND artistic.
However, I have not been able to translate what I see and want into a web design.
Other art mediums require gestural movements. Line qualities change as pressure is applied to the pencil. Surfaces age and crack and the artist can affect the texture’s sheen, and luminosity. Colors flow organically and rarely do you see a sharp delineation.
But not on the web.
How can a web designer bring texture, history, and gesture into a web design?
There have been some advances in representing texture. Apple has made the brushed aluminum texture de-rigueur for the non-PC crowd. Shiny, luminescent buttons have been around for years. Emboss, glow, drop shadow, and inner shadow are all tools of the trade to give our web sites dimension.
But as successful as these effects may be, they lack the tactile quality of heavy woolen fabric, an ancient wooden crucifix scarred by years of candle smoke and burrowing insects, the sheen of a bronze sculpture touched by scores of people over the centuries, or the crusted surface of an ancient Buddha after generations of offerings.
Cameron Moll’s series “the Wicked Weathered Look” showed web designers how to give their graphic a weathered look.
While the wicked worn technique utilizes source material that is authentic in its wear, the process is still too exact. You cannot fake randomness. Walt Cotten taught me this difficult lesson when I was his student at SDSU. He would encourage us to close our eyes when we attacked a stone, negative, or assemblage. How can we, as web design artists, allow our designs to age naturally?
Drop shadows have also become an indispensable part of web design. The web is inherently a flat medium. Just as a drawing or photograph uses perspective and tonal values to create the illusion of three dimensions, the web designer uses shadows and glows.
In the natural world, there is normally a key light source and multiple fill and accent lights. The savvy designer will remember to use a global light source in Photoshop to avoid graphics that imply multiple key light sources. While this helps, it is rare to see the designer that incorporates the concepts of fill light and the effect of dimensional surfaces.
The tactile surface of a Rodin sculpture, with the impressions of his strong hands will not create the same shadows as the machine-smooth surface of a Brancusi Bird in Flight.
Architects and furniture designers use recessed lines to create shadow lines that separate the various planes of a building or table. An incised line below the tabletop can give it the illusion of floating on legs. Inset windows not only protect the interior from sun but may also give the building a sense of security and solitude within.
The Bauhaus rebelled against the elitist, decorative approach to architecture and design in the early 1900’s. Against the backdrop of Victorian, Pre-Raphaelite, and Art Nouveau, the Bauhaus ethics of pure classical lines and lack of ornamentation seemed revolutionary. The Craftsman movement in England and especially the United States also celebrated the simple lines and graceful proportions of handmade objects.
Were these movements a rejection of decoration or decoration for the sake of decoration? Certainly the textiles of both movements incorporated patterns and lines with a nod towards the textures of natural materials.
Andy Clarke recently wrote about creating a set of elements for his latest web site design before actually creating the layout. This allowed him to set the tone of the design before building. Each element was used with care. Often times, the bones of a site are built and decorations are added as jewelry. In today’s bling-obsessed world, this has often resulted in riotous pages that dismay the visitor.
While visiting the Louvre recently, I noticed the decorative elements of ancient paintings and objects. The Greek and Roman frescoes and mosaics use decorative elements to differentiate the various elements. The handwork of a tile setter on the mosaic floor of a bath keeps the design intriguing while not distracting from the central figures. The decorative embellishments in an illuminated manuscript illustrate the page’s contents while offering rest to the weary eye.
So, what are the answers?
I don’t have the answers, hence the first sentence of this essay.
I do, however, have some suggestions and those that are better web designers may have some more practical answers to increasing the visual power of web designs.
There is no substitute for natural texture. Use photographs of aged copper, the limestone walls of Paris, California beach sand at sunset, the whitewater of a river in Canada, or mineral deposits of a hot water pool in Iceland. Why try to recreate these elements in Fireworks when the real world is just outside.
For years, people have created rubbings of tombs and reliefs as souvenirs. Use this on your web site. Go outside with a piece of paper and pencil, find an interesting texture and capture it by placing the paper against the object and rubbing the backside with the pencil. Scan the paper and you have an authentic texture to work with.
Wire frames are used to co-ordinate the layout of a page. Why not use a wire frame to describe the three dimensions of a layout if you plan on using shadows. This would encourage the use of shadow lines, elements that catch a highlight and the scope of the shadow they cast on the surface below.
Objects do not have strong outlines. Light wraps around subjects and shadows blend into the lighter sections of an object. Study Carravaggio’s use of chiaroscuro or Leonardo Da Vinci’s sfumato techniques. Think about using backgrounds that dissolve rather than have outlines.
Study the light coming out of a sconce. There is a distinct play of light between the darker surface and the light reflecting on the wall.
Consider the purpose of your decorations. Are they meant to embellish or are they the star of your design. Use found decorations instead of creating them in your favorite imaging software. Appropriate the borders of photographs, prints, mosaics, tombstones, and more.
Usability and Accessibility
I want to create pages that are not accessible. I want to create pages that have texture so thick that the text is obscured in a blur of dried chemicals. I want to explore surfaces that have been etched by years of exposure to wind, rain, and the hands of passersby.
I want these in a web site but know that it would mean creating a web site that cannot be read and this violates my interest in accessibility. A site that offers content, should offer that content to everyone, regardless of ability. I can’t justify the dark, obscured site with low contrast for the visually adept and a bare, unstyled version for those with low eyesight.
Alternate style sheets could give visitors the option of choosing which design works the best for them. For instance Gerhard Richter has two distinct painting styles. His photo realistic, muted paintings of blurry photographs stand in stark contrast to his colorful abstract smears.
As I sit here writing this essay, the sun is dropping lower in the sky. The light is skimming across the Haussmann-era building next door to this coffee shop in Paris. The dentitions under the roof, the faux-columns framing a window with rococo flourishes are capturing bits of light and casting shadows within their crevices. The sun’s position in the sky has brought the surface to life.
I can’t wait to do the same to a web site.