#24 Learning experiment: Cathedral Tunnel Effect

BEFORE screen 8K pageweight. No purple background.

This somewhat bland webpage, above, weighs only 8K. To give you a speed-weight comparison, the average Internet webpage weight today is 1MB. Pageweight is the aggregate file sizes of all graphic and code elements summed together for one page. That means this page potentially loads 125 times faster than today's "average" webpages.

You may say, "Fast. Yes. But it's pretty boring." It's DELIBERATELY boring. But there is no waiting. All text on the page is HTML browser-safe type and readable by search engines. It loads instantaneously fast. That was part of the experiment. NOTE: The background color is not "black" but #333333, a very dark gray. Using black on screen produces a color that isn't naturally seen in nature. It can appear surreal. Toning it down helps.

Why Build a Boring Page?
Here's why --the next page is this one:

Black text over yellow flower petals. BEFORE.

It's as if the following screen just "bloomed." It appears bigger and lighter than if it were the lead page. Psychologically, this effect was used for centuries by architects. I call it the "Cathedral Tunnel Effect."

Cathedrals were deliberately built with a dark constricted passage /entrance hall that once you step out of it and into the grand hall caused an awe inspiring reaction. I'm not calling my demonstration that dramatic. But it can be put to good use. It also works well when switching the first pages dominant color to a "complementary color" on the following webpage. I've seen this done and it's beautiful. Think of it as using a full-coverage solid complementary ink color on the inside cover of a catalog. If you've seen that, you know what I'm talking about.

The effect is based on a physiological phenomenon inside the eye where the cones reverse and pleasure is actually generated in the brain from the visual stimulation. This effect is "free" and --as a bonus-- speeds up page loading because it is basically using HTML color which is simple code, not a heavy image file.

After some consultation with my brother, Brad Teare, he recommended trying some purple behind the text with blurred edges. Shown in the example below. This is a complementary color (somewhat) to the yellow on the following page.

purple-background-glow

AFTER screen 10K pageweight. With purple halo background.

It then seemed the next page with the former black-text-over-yellow-flower appeared bland or flat. Switching the text color to a purple helped --but not the same purple (#330033) as on the HOME page. It had to be lighter (#330066). The eye read the dark purple (#330033) text as black with all that surrounding yellow.

Purple text over flower petals. AFTER.

This is an optical effect known as "simultaneous contrast."

Two Big Questions: Legibility and Speed?
Do we lose the HTML Times New Roman type edges in this color experiment? Is it better? The button definitely is pulling the eye away from the text. Try to ignore that button-blunder. It needs a "reverse" color solution. The bright red is glaring. This was changed in the live demo (link at bottom of this post).

So Why Add the Purplish Background Glow?
We're doing an experiment based on Johann Wolfgang von Goethe's color theories of physiological color. There is some speculation complementary color resets the cones in the eye giving a pleasure sensation. Is it true? I don't know. From our experiment, does it seem more pleasant?

So the Questions remains: Was the 2.7K purple blur background a worthy effect? You tell me.

The experimental site was never commercialized. See the experiment live here >

It was all great creative fun.