Stepping up our game, we arrive at the biggest elements with as much as three dimensions. Whereas a shape has a two-dimensional character, form is three-dimensional, having width, height and depth. However, because we can’t draw 3D shapes on paper or on the computer, form is merely a collection of shapes creating the illusion that an object has mass or volume. Form is what happens when multiple shapes come together in an elegant way to create a bigger element with more dimensions.
Creating this illusion of three-dimensional space is a very important aspect of any design, as it creates a sense of depth, realism and naturalness. Adding that third dimension makes some elements seem to pop out of your design, and some to recede. Adding depth adds a texture and dynamic quality to a design, even though the page is still flat.
Types of Forms
Forms can be real or illusory. Real form contains actual volume or physical weight, and are three-dimensional objects such as sculpture, architecture, and packaging. Illusory two-dimensional forms are perceptual, and give the illusion of three-dimensional space through several graphic conventions. Because this is a course on graphic design displayed on a web page, I will focus on the latter.
Just as we used basic shapes, we can use basic forms to establish any form. These basic forms are direct extensions of the basic shapes; squares becomes cubes, circles become spheres, triangles become pyramids.
When we convert a complex three-dimensional form into two-dimensional shapes, we say we project it onto a flat surface. There are multiple types of projections available to do so:
- Isometric: Easiest of projection methods where three visible surfaces of a form have equal emphasis. All axes are simultaneously rotated away 30 degrees from the picture plane and kept at the same angle, all lines are equally foreshortened, and the angle between lines is consistent.
- Axonometric: An axonometric (plan oblique) projection is a projection of a form viewed from a skewed direction, to reveal more than one of its sides in the same picture plane. To achieve this, axes are rotated 45 degrees.
- Linear Perspective: Realistic perspective, but also the hardest to do. It simulates optical distortions, making near objects appear large as far objects become small. The angle at which objects recede reflects the position of the viewer. Parallel lines converge in the distance or at the horizon.
(If you really want to fully understand linear perspective, I suggest you read the corresponding chapters from the drawing course.)
In contrast to linear perspective, isometric and axonometric projections depict volume without making elements recede into space; the result is often more abstract and impersonal. Additionally, all vertical lines remain vertical and all parallel lines remain parallel – which isn’t realistic, but people still understand the spatial meaning.
Principles of Depth
Aside from those projections, there are other visual cues that signal the viewer that depth of three dimensions are present in a design. These can – and should – be combined with projections, but can also be used outside of them. For example, you can make a bunch or circles seem to have depth simply by adding shadow behind them, in which case you don’t need to project anything.
The visual cues suggesting three-dimensional objects are:
- Overlapping: The object that is being overlapped seems farther away than the object that is overlapping it.
- Size: Smaller objects are perceived to be farther away.
- Height: The object higher up the page is perceived to be farther away.
- Texture: When a surface texture varies in density, areas of greater density are perceived to be farther away than areas of lesser density.
- Shading: Shaded areas are perceived farthest away from the light source, and light areas as closest.
- Atmospheric Perspective: Objects that are bluer and blurrier are perceived to be farther away. Alternatively, if some components of the design are extremely close to the viewer and not the main point of attention, you can blur them to make the design easier to look at.
Of all these cues, overlapping, size, and shading are by far the most important. In the real world, the surfaces of a form curving or facing away from the light appear darker than surfaces facing towards it. This effect suggest the rounding of a two-dimensional shape into a three-dimensional form.
Although shading seems like a difficult and elaborate process, light and shadow can be expressed in lots of different and simple ways, which will add a lot to any design. Therefore, next chapter will be about the first property we can alter on our design elements, which is Light.