CSS Zen Garden: Burning

Filed Under: Web & Design, Visual Arts.

The following is a submission to the CSS Zen Garden, a popular gallery showcasing web page layouts that rely entirely upon CSS metadata.

To view what you see in the screenshot, please visit:

• Zen Garden Entry’s Link

The CSS Zen Garden is a very important project because it gives designers the chance to utilize practical, but relatively new web standards to show other designers that nearly any sort of attractive design can be created through the use of these standards. Although greater lobbying efforts need to be made on the doorsteps of toolmakers like Adobe and Macromedia, tangible examples like those shown at the Zen Garden are one of the most important requirements to encourage the adoption of web standards like CSS.

Although one can argue that the creation of such a project is inevitable because of its importance, I applaud Dave’s creativity and perserverance in making this particular project work.

Artwork

I am hopeful that my submission addresses the stigmas behind CSS-based design methodology by introducing original artwork. I believe a great deal of sucess relies upon adoption by artists and their collaborative efforts. Of course, this idea begs the question of how CSS can set artists free. I do not know the answer, but such an idea partly explains why I decided to create this piece.

The artwork showcased in this piece was created by my mother, Ethel Davis. Perhaps some time I will invite her to write a short piece about the pastel’s roots and inspirations.

You can find more artwork by her at:

• etheldavisgallery.com

My original submission showcased a different painting by my mother. This older version is shown below.

To view what you see in the screenshot, please visit:

• alazanto.org/zen2/backup

When Dave Shea responded to the submission, he appeared to like to overall design, but suggested that I try using another painting (after he browsed her collection of artwork). His reservations were as follows:

• The original painting contained too many primary colors.
• Because I had used a regular flatbed scanner to scan this painting, the paper’s texture was over-emphasized, making the scan look like a rough chalk drawing.

I agreed with these reservations in principal and set out to use another painting. I finally chose “Bruising of the Head of Christ” because of the color, simplicity and the use of diagonal lines accented my design.

Typography

For quite some time I have understood that I need to purchase more fonts. I will confess that I am a slightly bit jealous of designers like Douglas Bowman for this very reason. In time, I will begin to develop more of a collection. However, I am only beginning to seriously study the wider field of graphic design. I have much to learn.

For the title I used Garamond Italic. For the primary headers I used Regular Garamond. The font fits well with the classy look towards which I strive. I especially appreciate the styling of the italic “z” in the title.

In the primary headers, the difference in height between capital and small letters help give the body content a very “serious” and “enlightened” quality. I increased the tracking slightly to emphasize this effect. Lastly, a slight glow helps distinguish these headers from the body text.

For the body text, I chose Times New Roman. This was a difficult choice, and I know I will be critisized for the choice. I personally do not think that Times is the best serif font available for web work. However, after reading Dave Shea’s article on how CSS can be used to make the font much more attractive, I decided to use the font in order to demonstrate how CSS can make the “old and boring” attractive enough for any design.

For secondary headers and the subtitle, I used a free pixel font - the name of which escapes me. These fonts work well in many cases because they are easy to read, and, in the particular font I used, give the design a modern accent. Fads change, and I am sure they won’t always be so pervasive.

For lists and other secondary text, I used Verdana. This is a very common font, and it was designed specifically for the web. It is especially useful for small type.

Inspirations

This layout may have a familiar look to it - especially if you have seen other CSS Zen Garden entries. After completing my last submission, I knew that I had finally returned to the style and commitment that I abandoned almost four years ago. Once I returned to that old path, I decided to spend some time quietly studying the most recent trends.

As the Zen Garden shows, designers have many methods of tackling design problems by using CSS. Two methods that really caught my eye were those of Radu Darvas and Didier Hilhorst.

Radu was able to overcome monumental challenges through the use of elegant drop shadows placed along his minimal showcase of sunflowers and their textures. He demonstrated immense depth and space by using a very zen approach.

Didier demonstrated a facinating study of boxes, negative space and positive space. He juxtaposed these three elements in a cheerful manner. The design doesn’t feel boxy, but very open. His use of color and space keep the reader’s focus on all the important elements while maintaining a sense of both strength and grace.

With my design, I attempted, and in my opinion, failed at combining the most attractive facets of these two designs. At first glance, my composition will look very similar to Didier’s design. I follow a similar grid and even adopt a few of his style choices in the top margin, bottom margin and right list of navigational links.

Because the showcased pastel is very bold, I chose toned-down, yet bold colors. I tried to pick colors that paired well with the painting while maintaining a distinction between the art, body text and navigational elements.

While implementing the new painting into the design, I had great difficulty finding a background color for the body text. Shades of blue weighted the painting down, leaving too much focus on the reds contained in the painting. Purple did much of the same. Shades of brown failed at giving the body text an identity of its own. Turquoise, while seemingly a good choice, clashed with the painting.

Out of frusteration, I finally left the original green alone. Green incorporates the desirable contrast of blue, but retains the warmth seen in the rest of the painting. So, while the color doesn’t exist anywhere in the painting itself, it successfully balanced the composition.

Where Does it Fail?

Simply put, the composition lacks grace. More particularily, I’m not sure if I approached the idea of a sidebar correctly. The blue-grey background carries all the way to the bottom of the screen which, in my opinion, detracts focus from the body text as the reader scrolls down. Should I have made the color darker? Should I have produced more of a contrast between the active elements and the passive background? Perhaps I will better understand this challenge in time.

There is also a little trick to creating CSS that I continue to struggle with. Basically, semantic elements like headers, body text or navigational list items are all the designer should work with when styling the ideal CSS-based layout. In this composition, I commonly reverted to using the optional “extra divs” to add styling. Such a practice is not a crime by any means, but as the old saying goes, “form follows function.”

Published: 5 years ago