Web Systems Design and Online Consumer Behavior [Electronic resources] نسخه متنی

What Lies Beneath: Three-dimensional environments in two-dimensional form

Michael Pick, Designer

www.csszengarden.com/019

MIND PLAY AND IMAGE ASSOCIATION form a part of how Michael Pick generates his ideas. In this instance, he began thinking about public gardens in New York City and took a number of digital photos. As he was working with the images in Adobe Photoshop, he noticed that his work bore a resemblance to an ant farm. This led to the idea of creating an underground scene rather than a more traditional aboveground garden.

From that start, he was led to think about other items one might find underground. A flow of ideas rushed forth to inspire the spooky, strange, and still somehow beautiful What Lies Beneath.

Creating Environments

Most Web pages focus on delivering information in some reasonably usable and attractive way. While designers are always encouraged to come up with fresh ideas, we all have to admit that the majority of Web-site needs are, by necessity, pretty conventional 2D blends of imagery and text.

NoteVRML hasn't gone away. In fact, it's still being studied and used in certain situations. Information on the open-source version of VRML, OpenVRML, can be found at www.openvrml.org.

Exceptions to this do exist. Very early on in the Web's life, a technology known as VRML (Virtual Reality Modeling Language) emerged. By plotting specific points within a simulated environment, developers could create 3D models for delivery via a Web page. Then, using a VRML plug-in, visitors could view the models.

NoteLearn more about Apple's QuickTime VR at www.apple.com/quicktime/qtvr.

A bit later, Apple introduced QuickTime VR, which allows designers to take sequential, panoramic photos and stitch them together using QuickTime VR utilities. Again, a plug-in is necessary to view QTVR, but the end result is a simulated, photorealistic environment that can be viewed on a Web page.

NoteThe Web3D Consortium is an open-standards project dedicated to the study and promotion of 3D standards for the Web (www.web3d.org).

Of course, 3D movies and games can be delivered to the Web as long as they are supported in some way by a browser or plug-in, such as Flash, Shockwave and other video audio, and related formats.

Only once in a while do we find ourselves fortunate enough to explore the Web medium itselfwithout virtual reality tools and specialty software, and with a little more, well, depth! Instead of limiting our imagination to the two-dimensional realm, we might find ourselves, as Pick did, having an opportunity to dig a little deeper and create an actual environment.

Simulating environments is a broad study involving complex theory and science. A good place to start learning about simulated environments is in computer game development.

It stands to reason that as computer games become increasingly realistic and visually compelling, many lessons can be gained from studying some of the principles of game design.

Understanding the Details

The striking visuals of What Lies Beneath are powerful because of the detail within the design. In the shadowy depths, we find things that would naturally appear beneath the earth, even though we might not immediately think of them as being there.

One of the duties of the designer is to see the world in sufficient detail to adequately re-create an environmentor, as in the case of What Lies Beneath, to evoke a sense of that environment.

This means that you must learn to understand details and not just see them. When you walk into a room, you're going to immediately note the obvious: walls, windows (or lack of windows), and furnishings.

But what about the textures? The cracks in wood, the peeling paint, the crumbling plaster, the cracked or discolored glass? Similarly, how well do we notice light and shadow? What about the overall sense of the room: Is it heavy? Light? Spacious? Cramped? All of these questions will reveal details that go beyond the obvious, and they are precisely the details required for a sense of realism to emerge.

In What Lies Beneath we see this detail everywhere, including the ants that initially inspired the design's overall theme (FIGURE 1).

Figure 1. Marching ants in What Lies Beneath (image lightened for clarity).

Creating A Sense of the Real

It's interesting to note that creating a sense of the real doesn't necessarily mean being photorealistic. The imagery within What Lies Beneath isn't photorealistic per se, but it creates a very strong sense of realism.

The idea is for the imagery to be evocative of the real. When creating imagery that merely brings to mind rather than replicates something found in nature, think about the following concepts:

Pay close attention to edges. This is something that beginning art students learn the hard way in figure-drawing classes. The tendency is to try to draw a line to represent the edge of a woman's arm, for example. What the student quickly learns, though, is that it isn't as simple as that. Edges in reality come about as a play between line, light, shadow, and positive and negative space. These in turn create what we perceive as a line (FIGURE 2).

Figure 2. Edges are not specific lines. Rather, they are made up of interplay between light and shadow, line and space (image lightened for clarity).

Be aware of shape. Look around you and find an objectany object. Examine it closely and determine its shape. For most objects, you'll find that there are combinations of shapes, and this is an important distinction. We can't just say a teacup is a circle. It has circles, surely, and arcs, but depending upon the teacup design, there may be other shapes that make it distinct.

Texture in imagery helps create a realistic sense of an object's qualities. To create the dirt in What Lies Beneath, Pick took a photo of a traffic-light control box on Houston Street in New York. Interestingly, it's the texture of the boxan unrelated objectthat creates the realistic impression of earth (FIGURE 3).

Figure 3. The texture of a traffic-light control box conveys a sense of earth (image lightened for clarity).

Depth is truly what conveys the sense of dimension, even in two-dimensional environments. In geometry, the x-axis refers to the horizontal and the y-axis refers to the vertical. The z-axis provides us with the third dimension. Depth relates to the z-axis: Take width and height, add that third axis point, and depth occurs. Depth perception in two-dimensional design is determined by the shadow and light of edges. You can see back in Figure 2 how the darker areas look like real grooves within the earth.

The simulation of gravity is important, too. In two-dimensional design, this is created by the visual weight of images on a page. In simulated environments, the same principles apply, but there also must be some indicator of things being drawn to the bottom-most point within the design. The darkest, most solid area of What Lies Beneath is the bottom-most portion of the underground scene, which helps to create this sense of gravity (FIGURE 4).

Figure 4. A very dark, heavy portion of What Lies Beneath creates a sense of gravity (lightened for clarity).

When creating a representation of three-dimensional objects in a two-dimensional design, the combination of several of the aforementioned features may result in the illusion of mass.

In the context of visual design, mass can be described as the two-dimensional appearance of a three-dimensional object, meant to create the illusion that the object stands out from the space around it. Consider these principles:

A solid comprises color and texture.

An object's volume comprises its length, width, and depth.

Mass is the result of grouping such visual elements, giving the ultimate appearance of a realistic object (FIGURE 5).

Figure 5. The image of a human femur beneath the earth conveys mass (lightened for clarity).

NoteWhile there's overlap between the mathematical and design definitions of mass, solids, and volume, they are somewhat different because of how the concepts are applied within each respective field.

Finally, choosing something from nature and placing it in a simulated environment can strengthen the simulated effect. In this case, the image of the odd-looking star-nosed mole provides a creepy sensation for the viewer that strengthens the veracity of the rest of the design (FIGURE 6).

Figure 6. Creepily real: the star-nosed mole.

Working With Levels

Another issue Web designers rarely encounter is working with levels. Levels are exactly what they sound likeindividual strata within an environment. The concept of levels makes total sense when we think of an office building. Each floor is a different level.

In game development, an awful lot of attention is placed on architecting realistic levels within the game environment. Game designers often study how architects and environmental designers approach the designing of buildings.

Some of the important concepts we can learn from architecture, environmental design, and game development when creating leveled environments include the following:

Each level is unique in line, space, and scale.

Each level is still integrated in some way, still connected to the levels above and below it.

There is a natural transition between surfaces.

There is always a focal point or point of emphasis within the design.

As mentioned earlier, the conveyance of gravity is critical. Humans expect objects to be pulled downward in some way.

There are three distinct levels within What Lies Beneath: the sky (FIGURE 7), the grass (FIGURE 8), and the underground section (FIGURE 9).

Figure 7. The topmost level of the design is the sky.

Figure 8. The intermediate level is the grass (lightened for clarity).

Figure 9. The bottom portion creates the underground level.

When studying these images, we can see that the concepts apply. The individual levels have their own unique quality. Each level is integrated with a design transition to the level above it (FIGURE 10) and the level below (FIGURE 11). The focal point in this case is everything underground.

Figure 10. Transitioning from the topmost to the intermediate level. Notice how you can see spots of sky among the grass.

Figure 11. The transition from the grass to the underground is conveyed with a progressive darkening, showing the grass as it's rooted in the earth (lightened for clarity).

Interestingly, the underground level naturally creates a gravitational pull with its greater height and weight and darker color than those of the topmost and intermediate levels of the design.

Unrealistic Imagery in Simulated Environments

We all know that head and body text and links simply don't exist underground. However, Pick employed techniques that make these unrealistic objects appear integrated with the design.

Examine the header text (FIGURE 12). You can see that he has taken the type and distressed it. When scratches and dirt are added to the text, it fits in better with the rest of the imagery.

Figure 12. Distressing the type helps integrate it more effectively within this environment.

Pick also chose his color scheme sensibly. The link color is taken from the lighter portions of the star-nosed mole. This extends the sense of light and therefore combines the links more effectively with the overall sense of the design (FIGURE 13).

Figure 13. Sticking to a single color drawn from the immediate environment helps keep the unrealistic type contextual.

It's no accident that there are no hover colors or other colors to the link effects, but simply an underline upon hover. This restricts the introduction of more potentially unrealistic items.

If Pick had made the decision to use other colors for links, say the blue of the sky or the green of the grass, it would have destroyed the illusion because it would have introduced the unique qualities of independent levels into a level where those qualities simply do not belong.

As a result, the integrity of the overall approach remains intact.

Dimensional Lessons

By and large, it is the experimental nature of the CSS Zen Garden that offered up the freedom to explore working with a design that simulates the underground environment. It took Michael Pick's clever mind and eye for detail to pull off such a unique design.