Formal Elements of Design

Formal Elements of Design

A Quick Tour of the Formal Elements of Design

By Erik Brown

Let's start by defining three terms:

1.

Subject matter The immediate image. The outer surface. Mainly: what is it an image of? Does it represent something in the real world (a landscape? a paper form?), or is it completely abstract? This level of an image communicates through recognition of simulations, symbols, and icons.

2.

Formal elements The visual elements that make up your image or visualization. The formal elements include line, shape, tone (light vs. dark), color, space, texture, composition, etc. They are the building blocks of your screen image. Formal elements often don't communicate by recognition and analysis (like the subject matter), but rather by visual forces and perceptual effects.

3.

Content The meaning. It can be the core information to be communicated to the viewer. It can also mean the secret plan of the designer to communicate on a sublimated or gut level. Content is delivered through a coordination of subject matter and formal elements.

Abstract art banks on the idea that a wide variety of sensations, emotions, ideas can be communicated without resorting to any recognizable elements (there are more ways to skin a cat than just verbal-level communication). People are generally trained in verbal literacy, but far fewer learn visual literacy. Viewers of your work, however, do not need visual literacy to be affected by the form and design of your work. People who are swept away during a Spielberg film may not understand the cinematic techniques (editing, sound design, camera positioning, etc.) that are working their magic upon them, but are swept away just the same. This is because Spielberg and his crew are well-trained in visual literacy, and can transform a storyline into an Oscar winner (or at least a grand social phenomenon).

Multimedia visuals can suffer when reduced to a casual settlement of text vs. images. Every element of a 2-D visualization is capable of influencing the reception, clarity, credibility, mood and psychological resonance of the presentation. Some of this occurs at a pre-attentive level (as discussed in the Information Visualization textbook), although much of it happens throughout the duration of the viewing -- often in terms of low-level or subconscious analysis.

http://interactive.colum.edu/ecbrown/formal%5Felements/ (1 of 2)9/20/2003 5:58:33 PM

Formal Elements of Design

Sections:

Shapes and Forms

Space

Light

Color 1

Color 2

Composition 1

Composition 2

Dynamics

In Conclusion

http://interactive.colum.edu/ecbrown/formal%5Felements/ (2 of 2)9/20/2003 5:58:33 PM

http://interactive.colum.edu/ecbrown/formal%5Felements/color1.html


http://interactive.colum.edu/ecbrown/formal%5Felements/composition1.html


http://interactive.colum.edu/ecbrown/formal%5Felements/dynamics.html

http://interactive.colum.edu/ecbrown/formal%5Felements/conclusion.html

Formal Elements of Design: Shapes and Forms

Shapes and Forms

Index page

Let's review the Gestalt perception:

When we view data, we tend to organize information into patterns and groupings. Our brains dislike contending with large numbers of individualized pieces. As biological organisms, we tend toward the path of least resistance. This is apart from the fact that as conscious thinkers we crave visual excitement. When we are looking at a body of information, we will perceptually organize that data in subgroups to ease our computation.

Short line Stripes or square 2 shapes

Because we can create simpler groupings out many pieces of data, we are able to confront a great amount of complexity with relative comfort, as long as those pieces eventually relate to each other in a pattern.

Shapes are abstractions that allow us to fold our understandings of an object into a concise package. Consider this silhouette by Kara Walker:

http://interactive.colum.edu/ecbrown/formal%5Felements/shapes_forms.html (1 of 8)9/20/2003 5:58:40 PM


A silhouette allows us to recognize a shape's counterpart in reality,while confronting a minimum of visual information. Likewise, if a set of shapes alludes to a pattern of complex information (especially a familiar pattern), then we can view an even smaller amount of information and still achieve understanding. Our Gestalt mechanism will guide us toward a more complete visualization.



Simple shapes can be used to refer to much greater complexities.

Surrealist abstraction relied upon this phenomenon.



Two cocentric circles:

If I suggested this was a wheel or a donut, the shape could be digested without noticeable effort.

If I suggested the same shape was a lampshade from above, or a baseball about to strike a frisbee, the shape could become more difficult. As a wheel or donut, we have the clues we desire for this association. But in other cases, the shape could lose credibility as a representation.

With slight adjustments, they might improve:

Lampshade Frisbee and baseball

These new adjustments are easier because they isolate certain essential qualities of the conceptual sources.



Consider these chair representations:

All are legitimate representations, but only two will be acceptable for recognition. This is because shapes must fit certain conditions in order to become forms. Forms are complexes that impart some essential qualities of the object they represent, and thus become a more powerful representation. Shapes, in comparison, are complexes that are more symbolic and abstract, but can at least create recognition.

A common example of a shape-to-form translation is when the shape needs to become more three-dimensional. I could say that the following is a cube:

Or I can make adjustments so that the cube idea is more plausible:

Here are a rectangle and a trapezoid:



I could also tell you that these are sheets of plywood. The trapezoid is a better representative because it takes on the behaviors of a plywood sheet on the floor viewed from a normal standing position. In comparison, the rectangle still recalls too many other possibilities (it could easily be a lightswitch plate, or the side view of a cylinder). The trapezoid represents the plywood regardless of the fact that it lacks some important characteristics of plywood sheets -- specifically: four ninety-degree angles and two sets of parallel edges. The innacuracy of these essential features is compensated by adopting some real-world behaviors (distortions in space) that help us to relate to it as an object. Creating forms with 2-D shapes involves some give-and-take: certain essential characteristics are sacrificed (accuracy, for instance) so that other realistic characteristics may be acquired. When dealing with space and the illusion of three dimensions, this give-and-take is known as foreshortening.

Consider a reverse application. Photographers use machines that create 2-D representations of reality. These machines record so much detail that the results cannot help being complex and realistic forms. Modernist photographers, interested in using reality as a gateway to abstraction, can cause reality to behave as a pattern of 2-D shapes.



They can also frame reality in a way where the original forms lend themselves to a bit of identity confusion.

This is possible through angling the camera and cropping the image of reality in a way that information within the frame of the photograph loses context and support from its larger home environment. The resulting photo, by transforming forms into shapes (or more flexible forms), can become more interesting by becoming prone to multiple interpretations.



back to top

Next section --->

Shapes and Forms Space Light Color 1 Color2 Composition 1 Composition 2 Dynamics In Conclusion








Formal Elements of Design: Space

Space

Index page

Space is one of those attributes that we borrow from our real-world experience to enhance our 2-D displays. In slight cases (such as drop-shadows), it involves a minor deviation from absolute flatness. In video game space (especially first-person shooters) it pulls all the illusionistic stops. In either case, we are dealing with implied space: an orchestration of formal elements to create the perceptual/psychological effects of space.

Here, we see a triad of squares, positioned from front to back:

There should not be any reason for us to see it this way. All three shapes could exist on the same plane and simply connect from edge to edge. The "middle" and "background" "squares" appear as such because we prefer it. Our brain, which craves the path of least resistance, would rather compute three identical and simple squares than try to cope with three separate shapes (two of which having more edges and angles than a simple square). This is how overlapping works. Spatial illusion is a suspension of disbelief. We choose to perceive a 2-D arrangement as 3-D, because it satisfies our brains to do so, and because the arrangement of formal elements on the 2-D plane are conducive to this perception.

These faces by Picasso work differently:

http://interactive.colum.edu/ecbrown/formal%5Felements/space.html (1 of 9)9/20/2003 5:58:47 PM


The head on the left is more complete than the head on the right, so it should be foreward. The mouth and chinlines are shared, and therefore it is unresolved as to whether these elements belong to one woman or the other. Picasso has created a drawing which vibrates between 3-D overlapping and a 2-D pattern.

Consider the foreshortened plywood sheet. The type of spatial illusion involved is different than just a matter of back vs. front. The form seems to actually suggest depth. If I put the form in an environment that also had a similar sort of depth, then the overall illusion would be much more solid.

Western culture (among some others) have greatly emphasized depth in 2-D images, and it has in fact fallen in and out of favor through history. The Greeks and Romans developed it, but the early Christian world rejected it, only to slowly rediscover it towards the Gothic period. The Renaissance world developed it into a science, and it reigned supreme over image-production until the nineteenth century.

Depth in 2-D displays is simply a phenomenon where a subdivision of parts into "forward" and "backward" categories becomes easier to compute than a rigid 2-D pattern.



Here, the grey background is perceived as continuous, even though it is broken up into nine separate rectangles. The black bands become a different category of forms, occupying a more "foreward" position in space.

Consider this cube:

We could regard this as a purely 2-D arrangement of one rectangle, four trapezoids (two different types), and two triangles. Instead, we tend to view this pattern as six identical squares meeting edge-to-edge, and we solve this pattern more comfortably -- enjoying the magic trick of seeing two dimensions become three. In order to do this, we ignore some of the evidence before our eyes. Four of those six squares are not truly squares (four equal sides, four ninety-degree angles). They are foreshortened - sacrificing inherent qualities to enable us to perceive implied space.

Medieval image-makers ran into a problem when gathering multiple spatial forms into the same image space. They didn't seem to belong to the same place and time:



As the desire to see space resembling our real-world experiences increased, an organized system based on math was discovered during the Renaissance. No longer would image-makers have to figure out how to forshorten forms, one object after another, in hopes that they might appear to belong in the same place. Now they could apply a preliminary guidance system for the whole image, and fit objects into it accordingly. This system was known as linear perspective.

Linear perspective is a mapping of items along the x and y coordinates, and it instructs us on how to create the angling lines involved in foreshortening. Each of these maps involves a horizon line and a vanishing point. The vanishing point is that point as which space moves away from us and shrinks into eternity. If a facet



of a shape is facing us squarely, we will employ its edges and the vanishing point to construction diminishing edges. Since both shapes obey the structure dictated by the horizon line and vanishing point, it will then seem reasonable that they are both existing in the same type of implied space.

With two vanishing points, we can come up with something a bit more complex:

When multiple objects occupy the same space, we can establish their positions from backward to foreward without having to rely on overlapping. The "further away" objects are, the closer they are to the horizon line.

In this image, we can tell that the two balls close to the bottom edge are different sizes, but in comparing the two balls towards the left, they could arguably be the same size.

Consider this image by Salvador Dali:



The forms in this image are impossible, derived from dreams. He uses the techniques of traditional linear perspective (which were not hip for modern artists of his day) to create a tension between a credible space that we can relate to and an unlikely occurrence of events.

The position of the horizon line within the frame affects our relationship to the implied space - regardless of whether that line is visible in the final image. The horizon line is always at the level of our eyesight. If we are crouched low to the ground, that line is low in our field of vision. If we are standing on a stepladder, the line is high. This phenomenon is transferrable to our images.

a.

b.

c.

Building b was constructed with a low horizon line. It has a much more imposing character than building c, drawn with a high horizon line. This sort of effect is used all the time by filmmakers. Heroes and villians are often filmed from a low position, making them appear more powerful (by making us smaller with a lower line of vision). When a crane is used to film a scene from up high, we are



positioned above it - both literally and figuratively. These techniques affect the psychological atmosphere of such visual interfaces.

Atmospheric perspective is another sort of technique to inject believability into implied space. This technique is most obvious in photography as a result of a focusing lens and f-stops. The idea is that things that are close to us are very clear with good contrasts and color saturations. When things are far away there is more of the atmosphere in our way and it clouds our vision. Edges lose clarity, contrasts are reduced, and colors become more neutral. In drawing and painting, this effect can be exaggerated so that a group of objects that are rather close together (such as objects in a still life) can have more obvious categorization between "backward" and "foreward".

Consider this drawing by David Hockney:



By all rights, the rock bridge in the background should obey atmospheric perspective to make spatial illusion more effective. Instead, the large black shape ruins some of the illusionistic potential and slaps up against the picture plane. However, this does add something positive to the drawing. In an otherwise uneventful scene, this dark form becomes more imposing than it would if it were an appropriate grey tone. We can experience a greater relationship to the rock form as a "character" because it tends to reach forward to our distanced position. It short, since the drawing is structured according to principles of linear and atmospheric perspective. A violation of these principles in an isolated case can create interest and visual tension, even drama.

When atmospheric perspective is applied to abstract displays, the idea proposed is that there are levels of objects. Some levels are clearer and more distinct, and therefore make more effort to establish a relationship to us. Other levels lose substance or distinctiveness and relate less to us than the "forward" levels. If certain forms lose detail and have a similar color as the background, they will seem like background elements themselves, especially if held in comparison to other distinct and complex forms. So an abstract html webpage can absorb some of the atmospheric benefits that might seem exclusive to a 3-D simulation, and without resorting to blur effects or dropshadows.



Overall, utilizing aspects of spatial illusion in a CRT display not only decorates the page, but conceptually changes that display. The display will no longer be a 2-D abstraction that is an arrangement of the screen itself (or browser window). It can give us the sense that there is a space (of some sort) beyond the flatness of the screen. It becomes something for our imaginations to "enter into", because it is a suggestive space that is separate from the space we inhabit. In other words, think of human attention as a sort of fluid. We "flow" into spaces that we can see, simply because that is how fluid behaves. When a new space opens up, it is a new place for us to flow into. This is what makes spatial illusions desirable: they trigger this type of low-level participation.

back to top

Next section --->

Shapes and Forms Space Light Color 1 Color2 Composition 1 Composition 2 Dynamics In Conclusion








Formal Elements of Design: Light

Light

Index page

Light behaves strangely in 2-D visualizations. In architecture, theater, sculpture - we need actual light in order to see the stuff. In images, light is an attribute that is introduced to the medium. It is something wielded for purposes of emphasis, symbolism, and lifelike resemblance. Light can be an illumination that binds multiple objects to an idea of a shared time and place (such as with a light source from a particular angle). Light can also be a vector (a directional force), as in the case of a spotlight.

Medieval art, during a progressive interest in replacing abstraction with lifelike appearances, discovered that darkening objects near the edge caused the illusion of volume. The same was noticed when lightening objects near their center. If flesh has a local color, then the addition of black causes that color to recede into distance, and brightening it caused the color to leap forward. This is more than the viewer's understanding of the volumetric characteristics of solid objects -- it is a perceptual reaction.

http://interactive.colum.edu/ecbrown/formal%5Felements/light.html (1 of 9)9/20/2003 5:58:52 PM


Toward the Renaissance era, image makers realized that areas of darkness may be pushed to their blackest extremes, and the remaining highlights can still compose the picture.



In this Caravaggio painting, information is lost -- such as with David's sword-arm or Goliath's face. Object shadows mix with the cast shadows in a mutual obscuration of data. Nevertheless, the image does not suffer structurally. There is enough information in the illuminated zones to allow us to imaginatively finish the forms. Besides, the unclear mix of object and cast shadows is an effect we are familiar with in the real world. Structural integrity of objects is sacrificed somewhat for enhanced space and orientation.

When creating 3-D simulations, objects and surfaces are made to obey the same light source. Illuminations occur on the same side of each object, and shadows stretch in the same direction. By sharing a common pattern (light/shadow behaviors) multiple forms and objects can become linked -- by sharing the same space.

Shadows and lights may also obey the same structure of linear perspective that rules the objects.



Multiple light sources (such as in photography) can interfere with the spatially-descriptive effect of light and shadow. Photographers will often employ a main light source and weaker fill-lights to gently illuminate the regions in shadow. This way, the photographed subject can still enjoy the same effects of volume, space, and orientation that directed light can provide, but not so much information will be lost in the shaded zones. Fashion photographers may use a different approach. Models can be illuminated with strong lights from multiple directions, eliminating shadows. The image of the model will become more specialized because the common, earthly effects of light and shadow no longer apply.

In constructing images, shadows can be used for discerning the nature of the implied space, or even communicating characteristics of objects.

Each of these rectangles could equally be a 3-D structure, but it depends on the arrangement of the cast shadow for this idea to become credible.

Lighting effects are separate from the true nature of forms. Highlights change according to the placement and intensity of light sources. Shadows blend together and sacrifice some information while adding new information. Lighting has a slippery relationship to objects, and becomes extensible toward dramatic and symbolic territory. In other words, lighting adds and changes meanings of the original



forms.

In the top set of stones, light simply provides structure. In the second set, the volumetric structure is not as strong, but the tradeoff is the addition of dramatic interest.

For the Renaissance artist, light took on strong connotations of spiritual illumination vs. worldly darkness.



In contrast, the Impressionist artist was not interested in the light vs. darkness symbolism, but was very careful to observe ambient light effects and the actual colors that could be found in shadows. For an age where religion is eclipsed by science and rationality, old cliches of light vs. darkness (good vs. evil, enlightenment vs. ignorance, etc.) will seem far too outdated.

In this image by Mary Cassat, light does take on a symbolic role, but in a modernistic sense.The illumination of the space of the theater represents the shared public world. Characters in the painting engage this world from their dark and private booths. The content of this image is to demonstrate the changing roles of women in the 1800's: no longer confined strictly to the private household sphere, they have been achieving access to the public realm of commerce and society.



For the Modern artist - to whom obedience to traditions of pictorial illusionism were no longer interesting - effects of light and shadow could be exaggerated and molded into various forms.

Abstract Modernists employed tonal effects that did little to add any information about space or orientation, but it

allowed the artist to create zones that could represent the opposition of forces.



In this painting by Eric Fischl, the content of the scene is enhanced by the behavior of the woman's shadow. It extends from her body, tumbles across the boxes, and becomes an extension of herself than becomes distorted and fragmented. A curious relationship is established between the woman, her phone conversation, and the boxed items. Perhaps she has just moved (or moved away from) somewhere. Perhaps these boxes contain something that is significant to the person to whom she is speaking. Also, while her body is exposed by highlights, her face (identity) remains obscured in shadow. Without such attention to shadow placements, the scene would have been less complex, and perhaps no more eventful than simply a person stepping out of the shower to answer the phone.

back to top

Next section --->

Shapes and Forms Space Light Color 1 Color2






Composition 1 Composition 2 Dynamics In Conclusion






Formal Elements of Design

Documents

Transcript of Formal Elements of Design