post-art

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?

Texture

A wooden crucifix from the Louvre

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?

Shadows

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.

The Seine in Paris at sunset

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.

Bird in Flight, by Brancusi

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.

Decoration

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.

Texture

A lamp in Paris as the sun is setting

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.

Shadows

An example of a 3-d wire frame for web design

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.

Decorations

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

Two italian terra cotta dogs photographed on polaroid film by Ted Drake

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.

Painting by Carravaggio

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.

post-low vision

Creating an alternate lay-out for those with low vision

comparison of normal and low-vision versions of alcalapetcare.com
At the recent @media conference, Joe Clark challenged web designers to create an alternate version of web sites for those with low vision.

“Go west young (wo)men and create a site that has complete navigation and text wrapping at all font sizes. ”

I’ve spent the past hour or so creating a low-vision version of the web site for Alcala Pet Care in Encinitas.

To do this, I changed the background of the body, wrap, and header. The page now spans the entire browser, text is larger, the page is dark with light text, and link colors have changed. To make it look a bit more stylish, I gave the top nav a background glow and the main content section drops a shadow over the header. These two style elements took the majority of developing time.

The top nav uses a sliding door approach to allow the list to grow and shrink with larger font sizes and screens. Normally, sliding doors require multiple elements, such as a div and a header to anchor the images. I didn’t want to adjust the html on the pages, so I added the right edge of the nav background to the header background. I then added the stretching background to the list itself. If this doesn’t make any sense at all to you, visit the above article.

To get the glow on the main content section, I used a background image with alpha transparency on the maincontent div and gave it negative offset to make the shadow hover over the header. Alpha transparent images have subtle gradations over a transparent background. This gives us the ability to place a semi-transparent image over a variety of background colors with no un-intended conflicts. Unfortunately, Internet Explorer does not support alpha transparency, so I used a series of filters to give modern browsers the nice shadow and IE gets a simple top border.

I still need to add the link to allow users to select the low-vision style sheet. However, if you have Firefox, you can view it by selecting View>Page Style>low vision.

The CSS is still a bit rough, but hey, I’m in Paris and I’m working on CSS instead of sight-seeing.

post-@media

@media conference in London and all its wrappings

As the seemingly token non-presenting american at the @media conference in London, I would like to thank those that put this event together.

It was a pleasure to join the Brits and others as they passed standards-based web design around as easily as the sugar for tea. Speaking of tea, the only bitter element of the whole conference was a particularly nasty cup of lemon-ginger tea. whoa, whoever decided to mass-market this dried paint remover ought to have their head examined. But then again, this is the same country that leaves a jar of marmite on the table for guests.

The @media conference brought standards-based web design and accessibility experts together for a fab confab. Opinions were expressed, debated, rejected, and re-examined. And then Joe Clark put the mike down for the next person. I wasn’t expecting such passion from one of our neighbors up north, a canuck with an opinion or two. Now, I know Canadians are not cold fish, after all, NoMeansNo is from up north, need I say more?

As a veteran of museum conferences, the accessibility points were already rather familiar for me though many in the audience probably felt overwhelmed with the added responsibilities.

On the second day, Joe laid down the gauntlet and challenged designers to begin re-reading his article on alistapart.com about creating big, chunky versions of web sites for the sight impaired. It will be interesting to see how these develop. Why not take advantage our sites’ potential.

I herebt promise to develop a Clark-like site for one that I recently completed, www.alcalapetcare.com. It will also be interesting to see some aggressive designs come out of this challenge. In his closing presentation, Andy Clarke criticized the lack of eye candy on the web sites of accessibility experts. So, can we begin creating these big, chunky, easy to read variations that are also attractive?

other highlights

I had the distinct pleasure of meeting Molly Holzschlag. I have been bantying around the idea of writing a book on semantic conversions of existing web sites. A national best seller, I’m sure. Molly gave me some sound advice and I will approach the project with an open mind.

I also had a chance to meet Andy Clarke of All That Malarkey.

When the @media conference was first announced, I thought.. hey, cool, a conference in London the same time that I will be in Paris. What a great opportunity. After the glow dissapated, I had to think twice about going, this was not going to be a cheap trip. Hotel, chunnel, airfare, and conference admission set me back well over $2,500. Sure, I’ve seen Zeldman before and could wait until southbysouthwest to see Molly and others. But Andy Clarke was somebody I wanted to listen to. His site has given me many great tools for building sites. His use of definition lists for form items and building a coding guide to a page have saved me many hours in designing. So thanks Andy for giving us a hell of a presentation.

While I enjoy the geek meetings as much as anyone, I’m not a pub person. So, instead of basking in the free beer at the conference party, I met up with the artist Fraser Diesel and discussed art, design, and posed for some sketches. It was a less geeky, but equally satisfying alternative.

Finally, I don’t think I’ve ever heard so many Canucks and Americans saying wanker and bullocks in two days. Here’s to a great conference and hopefully I’ll see everyone again next year. Maybe they can talk Big John and Holly into coming up from down under.

post-reboot

A comedy of errors

May 1 reboot.

A day for web designers to launch new versions of their web site en masse and to relish the glory of all that is new.

After weeks of procrastinating and last minute design ideas, I jumped into my site only to see things fall apart. However, here it is. A new design.

I wanted to have a fluid layout with left and right columns set and the center column fluid. I used a WordPress theme as the backbone and did some customization to get it to work the way I wanted. I’d like to say that I will fix a few issues with smaller screens, but I’ve got way too many projects to finish before then.

Coming soon: Photo gallery, a redesign story for the Museum of Fine Art in Puerto Rico, I-tunes connection, and some google adwords will come back.