The Secret Labs’ Web Design Portfolio

Client

Jeffrey Bliss, a poet, writer and artist

Involvement

The Secret Labs designed, hosts, updates and maintains the site.

Launched

November 7, 2003

About the site

OceanShadow.com is a personal site for a poet and artist, which let us stretch things, artistically, more than we can on most sites.

It required a design as compelling and controversial as the content. The result is something that intentionally breaks some of the “rules” of “good” web design in order to carry the artistic concept forward.

While the result disturbs many of our peer web designers, in pre-release testing with ordinary humans, it received universal praise.

One of our Lab Rats wrote,

Oooh! Aahh! I immediately turned up the volume… just in case. Even though there was no sound I heard music when I saw this. Very cool. Visually stimulating. I wouldn't change a thing.

Another said,

[I] find it completely readable and clear. I think the scrolling of the text over the header graphic is a unique, if unintentional, effect. The transparency of the text box has a watery feel which is consistent with the theme of the site. I don’t find that it interferes with readability at all, and it actually adds a subtle depth to the overall presentation of the site. Good job!

Most importantly, the client is pleased. Which makes us pleased.

Background

There were three difficulties to overcome with this design.

First, the client has no computer. Communicating design concepts and draft layouts was done by postal mail.

Second, the client wanted a full-screen background image, despite this being unorthodox. Text would be completely unreadable if placed over the image he selected. We fuzzed it up a bit in Photoshop then used a semi-transparent backdrop behind the text. This lets the background image show through enough to carry the theme and evens it out considerably, making the text easier to read.

Third, Internet Explorer does not support semi-transparency on images. Semi-transparency is a key component in drop-shadows which we felt helped to carry the theme in the header logo graphic. Ordinarily, one uses drop-shadows on a solid color background, so it's a non-issue.  Here, we had to embed the header logo graphic in the background image.

What drives our peers nuts and delights real-life visitors is the effect the semi-transparent backdrop has when the page is scrolled. The text moves over the background image, including the header logo graphic.