Principles and Elements of Design

A Web Design Review

Got something to say?

Share your comments on this topic with other web professionals

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

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.

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.