Monday, February 7, 2011

The viewport is a lie... show me your gradients!

One of the over-arching concepts taught early-on in art school is that the picture plane is a lie. This is more than fodder to nourish the broody discontent of first-year art students looking for mainstream ideas to doubt. It's also a fundamental concept for understanding why some websites look "flat" and some look positively sumptuous.

The concept that an image on a two-dimensional picture plane is only a representation of a three-dimensional spatial reality is something that we should be conscious of... especially in a culture that revolves so much around pictures of things. Especially again, for us who develop websites.

What is it that has me once again pondering the conceptual aspects of modern art? I'll tell you...


What's the connection here? It has a lot to do with what we see in the real world versus what we see on a computer display. Over the past year or so, I've been in love with subtle gradients on websites. Not rainbow gradients, or those harsh cyan to sand colored stripes people used to try to pass off as "chrome" in the early days of the web. I'm talking about those subtle, rich tones that at first glance look like a solid colour, but upon closer inspection hold an array of shades and tones.

Here's a beautiful example from


That lovely pink background pops so much because it's made up of a rich gradient.
What's this got to do with reality, man?

Envision yourself holding a poster in your hands. Think about the colors. Then think about the surface of the paper it's printed on. Whether it's printed on glossy paper, matte paper, or something in between, there will be subtle color variations due to the light you're viewing it by and by the reflection of that light off the waves in the paper created by your fingers holding physically holding onto the page.

Our eyes don't often see these variations for what they are and instead we see the content on the page, the areas of printed color and, if we're thinking in design terms, whitespace.

We can use some of the same principles of print design when creating designs for the web, but one of the things about computers that is a little lack-luster is the feeling of things being "real". The printed page has a certain presence to it, which has to do with how the page itself interacts with it's real-world environment. The look of a page is determined by the light around it, the air or breezes around it, and the way your hand may be holding it.

A website, on the other hand, displayed within the confines of a monitor or display device, always seems to lack a little bit of this visual real-world interaction. Colors are typically flat and smooth. That has it's purpose, but doesn't create any three-dimensional depth or presence of "surface".

How to see what's really going on

Try a desktop color picker tool. I use a free tool called ColorPic, available here.
Open this tool, view the website. Grab color swatches from all over the gradient area and you'll actually see a vast variety of colors that make up that "solid" color.