Art and the Web: Form

We are excited to announce Carsonified’s first book called ‘Art and the Web: Line, Shape & Form’ written by Nick Pettit. This book is part of a larger series that Nick is writing about the elements and principles of art, as they relate to the web. We are releasing each chapter as a blog post on Think Vitamin and at the end, you will be able to download the entire book for free. — Ryan Carson.

Cover artwork for the book 'Art and the Web: Line, Shape, & Form'

Introduction to Form

Form is just like shape, except in three-dimensions instead of two. Unlike shape, form is essentially defined on its own, without the aid of other elements or principles. Space is the one exception to this rule. For example, a form can occupy a volume of space, and just as much as the form cuts through that space, the space cuts through the form. In other words, the form can be viewed as taking up a positive amount of space, or alternatively, the form can be viewed as being carved from thin air, defined by the negative space that surrounds it. Here’s a formal definition.

Form is a geometric figure that exists in three-dimensional space.

Form is capable of eliciting strong emotional responses because it closely maps to our everyday tactile experience. For example, a "button" is often more inviting than a link, because buttons actually exist in the real world. However, in the history of the web thus far, form hasn’t been leveraged nearly as often as shape. This most likely can be attributed to the two-dimensional nature of the web as a medium.

Venus of Willendorf (between 24,000 and 22,000 BCE) Venus of Willendorf (between 24,000 and 22,000 BCE)

Using web technologies, we try to paint beautiful and functional pictures on a 2D canvas, and although there are some instances where form has a role, the visual metaphors that have developed over the history of computing tend to favor "windows" and flat planes; essentially, shapes. So then, if the web is strictly confined to 2D space, how can we take advantage of form’s emotional response? Fortunately, artists and scientists over the past several centuries have already done all the hard work of solving this very quandary.

Depth

On a flat picture plane, we can’t actually create 3D objects or environments that a website visitor can physically walk into and explore. Developing technologies like augmented reality and holography may someday introduce lucid and emotional 3D experiences into our everyday lives, but for now, we’ll focus on the present. There are several techniques for creating the illusion of depth, and in general, there are no limitations on how they can be used in combination with one another.

Perspective

A detailed explanation of perspective is beyond the scope of this book, but it’s the culmination of several ideas like overlapping planes, foreshortening, and decreasing the scale of more distant objects. Many people from antiquity to the contemporary have contributed to the development of perspective, but the invention of modern geometric perspective is most commonly attributed to Filippo Brunelleschi, an Italian Renaissance artist living in the 15th century.

The basic idea behind perspective is that every straight line on an object converges towards one or more vanishing points on the horizon. Again, because of the 2D nature of the medium, it’s quite rare to see perspective utilized to its fullest extent. Only a few, very novel web designs will attempt to push page elements far back into the picture plane.

Paolo Uccello, Perspective study of a vase (1450s) Paolo Uccello, Perspective study of a vase (1450s)

Lighting

Lighting is another tool that can help create depth. When compared with perspective, this is a vastly more common technique for creating depth, and many modern designs feature lighting in some capacity or another. By applying subtle gradients and shadows to page elements, it’s possible to suggest to the site visitor that some page elements are slightly raised off the canvas.

The important thing to pay attention to is the direction of light. When making use of light in a design, it’s crucial that all page elements have highlights and shadows that are consistent with one another. Nothing breaks the illusion more than shadows being cast in different directions. It’s also generally a good idea to use a single light source, as multiple light sources can be complex to achieve, both technically and aesthetically.

Atmospheric Perspective

Have you ever looked at a distant mountain or skyscraper and noticed a slight gray haze? This is known as atmospheric perspective or aerial perspective. As the distance between the viewer and the object increases, the contrast between light and dark decreases. This phenomena occurs because direct solar radiation is scattered through molecules in the atmosphere, which increases the ambient luminance of distant objects, removing the appearance of dark shadows.

Similar to perspective, this technique is rarely seen in practice. While atmospheric perspective doesn’t directly relate to perspective, neither one is frequently utilized because they both rely on the presence of deep space. That’s not to say that web design as a whole is incapable of successfully leveraging these techniques; It’s just challenging.

Reflections

Reflections are the bane of many designers, because they’re often used even when they don’t add value to a design. However, a subtle mirrored reflection just below a page element can make it appear as though the element is firmly seated in space. When there are several staggered page elements with reflections, set against a solid color or a soft gradient, the perceived depth is even greater, because it appears as though each element is at a different distance from the viewpoint.

Parallax

This is a very interesting depth trick that isn’t found in static mediums like painting. Using some clever CSS, it’s possible to make elements in the foreground of a page pass by more quickly than elements in the background. This requires animation, or some interaction from the user, such as scrolling or resizing the browser window. It’s a novelty without much functional purpose, but there’s nothing wrong with some novelty every once in a while.

Caspar David Friedrich, Wanderer above the Sea of Fog (1818) Caspar David Friedrich, Wanderer above the Sea of Fog (1818)

Relief

When most people think of sculpture, they think of free-standing statues of David and other classical figures, carved in-the-round. These types of sculptures are not attached to any walls, and they’re intended to be viewed from any angle. However, web pages have much more in common with a different type of sculpture, known as "relief" sculpture. Bas relief, or low relief, is when the subject is severely flattened and attached to the background.

Bas relief of Atropos cutting the thread of life Bas relief of Atropos cutting the thread of life

One of the best ways to bring shallow depth to a web page is to think of the page as a slightly three-dimensional relief sculpture. Questions of how to apply CSS gradients and box shadows can be answered naturally, because when a site is imagined this way, it’s much easier to build a mental model of how light should be hitting page elements.

Umberto Boccioni, Unique Forms of Continuity in Space (1913) Umberto Boccioni, Unique Forms of Continuity in Space (1913)

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

11 comments on “Art and the Web: Form

    • Hey Christian,

      We don’t have an official release date yet, but it will most likely be next year. The last 3 posts are just the tip of the iceberg. :)

    • Hey Christian,

      We don’t have an official release date yet, but it will most likely be next year. The last 3 posts are just the tip of the iceberg. :)