Principles and Elements of Design

In: Columns > Design in Theory and Practice

By Joshua David McClurg-Genevese

Published on April 17, 2006

In the last three articles, we discussed the fundamental concepts of design. We started with the principles of design—the underlying tenets of the profession dealing with the arrangement of objects in a composition. Next, we looked at the elements of design—the objects used to create the composition itself. Finally we looked at the medium of the Web, and at some of the constraints inherent in such an environment that could alter the way we use the principles or elements of design. Taken together, the topics covered thus far form the basis of any design education. And they can help any designer, whether a novice or professional, advance in their profession.

Bridging the Gap

So far we have looked at the fundamentals of design in a rather abstract way, discussing and illustrating the concepts using simple shapes and forms. This is an excellent way to introduce the principles and elements of design, but does not bridge the gap between theory and practice. In this article we will be reviewing many of the topics previously covered, but we will be doing so using actual Web sites so that we can see how everything we have been talking about fits together.

After much consideration, I chose to take all of the Web site examples used in this article from the CSS Zen Garden, created and managed by Dave Shea. I did this for a number of reasons. First, I want the focus to be on layout and design. The Zen Garden does this wonderfully by allowing graphic designers to alter a pre-existing page of content and navigation. This allows us to focus on the design and not be distracted by other concepts that, while equally important from a Web perspective, are not the focus of this review. Second, the Zen Garden is an experiment in the use of CSS for design on the Web, and inherently addresses many of the topics covered in the third article of the Design in Theory and Practice column.

Design Review

I have reviewed eight designs. I will discuss each one in detail, highlighting the principles and/or elements of design that they make best use of. I’ve included a sample screen shot and a more abstract view of the design highlighting the relevant principle or element. In addition, you can click on the title to go to the actual site in the Zen Garden for direct reference.

Balance

Centerfold

Balance usually comes in two forms, symmetrical and asymmetrical, and provides a sense of (or lack of) equilibrium that can create tension and visual weight.

The “Centerfold” design makes use of approximate horizontal symmetry. The weight may be a bit heavy towards the right side of the page, but in general it feels pretty balanced. This is in part because the imagery that is used incorporates a good amount of white, and the graphic text is thin and unobtrusive. These elements blend into the background well, and do not become too dominant in any one place. The subtle greens that are used are done so sparingly, but allow a bit of highlighting for the navigational elements of the page.

This design is a good example how symmetry can be used to create a sense of balance. It is a fixed-width design that runs about 520 pixels in width, and is centered in the browser.

Rhythm

Manhattan Edition

Rhythm is a repetition or alternation of objects, often with defined intervals. There are many different kinds of rhythm, often defined by the feeling or emotion that is evoked when looking at it. The three kinds of rhythm that we looked at in The Principles of Design were: regular, flowing and progressive.

The “Manhattan Edition” design makes use of a regular rhythm in the upper part of the page as well as in the right-hand navigational elements of the design. This creates a sense of movement in the sky and adds a good amount of texture to the overall design. It is complemented by the texture in the buildings, and the texture created by the font chosen for the title of the page and major headings. It is contrasted with the overall smoothness of the black on the lower parts of the page, and the soft glow used for content areas.

There is a definite sense of juxtaposition in this design, one that is enhanced through the use of rhythm as texture. The “Manhattan Edition” illustrates how textual objects can take on a more abstract, textured element in a design. The font chosen works well with the other textures on the page, and has a sense of rhythm unto itself that complements the overall design. It is a fixed-width design that runs about 756 pixels wide, and is aligned left in the browser.

Proportion

Museum

Proportion is usually defined as a comparison of dimensions or distribution of forms. It looks at the relationship in size and scale between objects in a composition. Proportion can be used to help define symmetry and visual weight, and can often create a sense of tension that focuses the eye.

“Museum” is a good example of how proportion can be used in a design to draw the eye to specific areas on the page, specifically through the use of small silhouettes standing in the environment in the design. The top image leads you into the setting by drawing your eye back towards the opening in the wall where the first silhouette is standing. Scrolling down you find that the content in the page follows more of these silhouettes, and you are drawn towards the tension created by their comparison with that of the content frames. You also get the sense that the silhouettes are looking at the frames on the wall, in an almost implied sense of continuance. The comparison of scale draws the eye in, and the implied continuance leads you to the content.

The lack of color in this design also helps to put the focus on the value structure of the page, which naturally highlights the proportion used in the composition. The use of line and form to create the illusion of three dimensions also helps to guide the eye to specific areas of the page. It is a fixed-width design that runs about 762 pixels wide, and is centered in the browser.

Dominance

Pretty in Pink

Dominance is a principle of design that relates to emphasis and visual weight in a composition. It often establishes perspective, and resolves where the eye is led to first when looking at a design. There are three stages of dominance: dominant, sub-dominant and subordinate.

The “Pretty in Pink” design makes use of dominance to place emphasis on certain parts of the page. The right-most column, where the content is, is the dominant part of this design. It is the largest area of color and makes use of big, reversed out, text for major headings. The center navigation column is the sub-dominant part of the page. It still comes forward in space and calls attention to itself, but uses less color and smaller text in a slightly smaller space—relegating it to the second degree of dominance. Finally, the left-most column with the logo and explanatory text is the subordinate object on the page. It falls farthest back in space, and importance.

In all, this is a good strategy for the design of a page where the emphasis is on the content and navigation. Another nice thing that this site does is stretch the dominant column so that the content wraps nicely regardless of browser or screen size. The design itself is aligned left in the browser.

Point

sub:lime

A point is the most basic element of design. It is a single mark in space that has position, but no extension. Often we see points grouped together to create line, or form, as in this example above.

The “sub:lime” design uses a pixelated image, that of two halves of a lime, at the top of the page and then extends this motif throughout the rest of the design. We can see how even though the image is pixelated, each pixel a point, we naturally group the points together to create the image of the two lime halves. The point is then extended to create the broad bands of color used to divide the areas of the page, and the lines used in the major content headings.

This site is a good example of how the elements of design can build upon each other to create a composition. It is a fixed-width design that runs about 715 pixels wide, and is centered in the browser.

Line

Subway Dream

The line is a natural extension of the point, and is characterized by both length and direction. Line can create contours and form, perspective and continuance, and when grouped together can help establish a sense of density or value.

“Subway Dream” uses line in a number of different ways. First, as a rigid element to help frame the page and separate the content areas from the background. Next, the illustrations that are used throughout the page rely heavily on line, and they have an organic quality about them that almost makes them feel like a sketch or drawing. The lighter elements in the middle-ground, drawings behind the woman, lines and navigational icons are entirely based on contour. The woman in the foreground has more form, yet still relies heavily on contour and line to help establish that form. Finally, the font chosen for the major headings is dominantly an organic line that helps to accent the overall design of the page.

This site is a good example of how you can focus on a single element of design and extend it to create a definite sense of unity in the composition. It is a fixed-width design that runs about 730 pixels wide, and is centered in the browser.

Form

Hedges

Shape is an element defined by its perimeter, and usually results from a closed contour. Form is often the term given to a shape in three dimensions, or a shape that gives the illusion of three dimensions. The three basic shapes (forms) are: circle (sphere), square (cube) and triangle (cone).

There is a definite sense of three dimensions in “Hedges,” despite the fact that we our frame of reference is two dimensional. There are a couple of techniques used to create this illusion. First, the imagery is drawn in perspective using two points in space to establish the angles at which all of the elements are aligned. Second, a good amount of value differentiation is used to establish highlights and shadows and to make the title text appear to be sitting on the ground. Finally, the use of the small figures helps to establish a sense of environment, making the overall illusion more believable. The figures are interacting with the forms, standing on top of them or digging holes in them, which helps to extend the sense of space in the composition.

This site is a good example of how you can create form through a simple extension of point and line. It is a fixed-width design that runs about 720 pixels, and is centered in the browser. The one exception to this is the top tree line which stretches to fill the space regardless of browser or screen size.

Color

El Collar de Tomas

Color is the eye’s response to wavelengths of radiation in the visible spectrum. There are three main components of color: hue, value and saturation. Hue is where the color is positioned on the color wheel and what most people think of when they think of color. Value is the lightness or darkness of a color, how much black or white is mixed with it. Saturation is the intensity of a color.

There are many different ways to describe the relationships colors have to one another. At first glance the color scheme of “El Collar de Tomas” appears triadic, but in reality it is analogous. The hues used are red, yellow and orange with gray-blue for accent. All of the hues are brought down to a mid-range value causing the yellow to appear almost green. In addition, it is surrounded by red and orange, which helps to extend the illusion by playing off of natural complements. The result is a very warm, very rich set of tones that feel full and vibrant despite being comprised of only three very closely related hues.

This site is an excellent example of how a very small selection of colors can feel like a very rich palette, through the manipulation of value and positioning in space. This design is a fixed-width design that runs about 770 pixels wide and is aligned left in the browser.

Conclusion

My first three Design in Theory and Practice columns investigated the fundamental concepts underlying the design profession. These concepts come in a variety of forms, from abstract tenets and objects used to construct a composition to constraints based on the medium in which we choose to design.

With this article we put everything together, and looked at how the fundamentals relate specifically to Web site design. We looked at how the principles and elements can be used to create various Web design compositions, and how the constraints of the Web invoke unique and differing designs.

Finally, a quick thanks goes out to Digital Web Magazine reader Austin Liu for pointing me in the direction of the CSS Zen Garden. In addition, thanks to Dave Shea for allowing the use of his site, and to all of the designers who sites were used as examples in this article.

• Add to Magnolia
• Add to My Yahoo!
• Add to Newsvine
• Digg this story
• Add to Del.icio.us

Related Topics: Web Design, Graphic Design, Basics