Digital Web Magazine

The web professional's online magazine of choice.

The Elements of Design

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 August 15, 2005

The Design in Theory and Practice column is dedicated to helping the reader gain a better understanding of Web design. The first step in this process is getting a grasp on the fundamentals. To achieve this, we need to realize that the discipline of Web design is inherently part of a larger whole. The fundamental concepts underlying Web design have been inherited from the larger field of design, and indeed from other art forms in general. This means that we need to momentarily step away from the medium of the Web and adopt a broader perspective.

Introduction

In The Principles of Design we looked at half of the basic tenets that underlie the field of design. The principles of design represent the basic assumptions of the world that guide the design practice, and deal with the arrangements of objects in any given composition. In this column we investigate the other half of the tenets, the elements of design, in an effort to bring together a solid foundation on which we can base all future investigations.

What are Elements of Design?

The elements of design are the basic components used as part of any composition. They are the objects to be arranged, the constituent parts used to create the composition itself. In most situations the elements of design build upon one another, the former element helping to create the latter, and the elements described in this column are arranged as such. We will be focusing on the elements of point, line, form (shape), texture and color.

Point

A point is an element that has position, but no extension. It is a single mark in space with a precise, but limited, location. Alone it can provide a powerful relation between negative and positive space, but when grouped with other points the Gestalt grouping principal of closure tends to kick in and the brain compulsively connects the points together. Line or form is a natural result of multiple points in space.

Point Multiple points in space Closure
Point Multiple points in space Closure

Line

A line is an element characterized by length and direction. Lines create contours and form, and are often used to convey a specific kind of feeling or point to an important feature in a design. Lines are also used to create perspective, and dominant directional lines are often adopted to create a sense of continuance in a composition. In addition, lines that are grouped together often create a sense of value, density or texture.

Organic line Rigid line Differing line weights
Organic Rigid Differing weights

Form (Shape)

The simplest definition of shape is a closed contour, an element defined by its perimeter. The three basic shapes are: circle, rectangle (square) and triangle. Form is the shape and structure of a dimensional element within a given composition. Form can be both two-dimensional and three-dimensional and can be realistic, abstract or somewhere in between. The terms form and shape are often used synonymously, which is why they are both included here. In reality, form is derived from the combination of point, line and shape.

A closed contour Dimensional forms
Contour Dimensional

Texture

Texture is used to create surface appearance, and relates to the physical make-up of a given form. Texture often refers to the material that something is made of, and can be created using any of the elements previously discussed. Texture is both a visual and a tactile phenomenon.

Rough texture Organic texture
Rough texture Organic texture

Color

Color is the response of the eye to differing wavelengths of radiation within the visible spectrum. The visible spectrum is what we perceive as light. It is the part of the electromagnetic spectrum that we can see. The typical human eye will respond to wavelengths between 400-700 nanometers (nm), with red being at one end (700 nm), violet at the other (400 nm) and every other color in between these two.

There are many different kinds of color systems, and many different theories on color. We will get into that kind of detail in a later column. For now we will focus on the basics, using a color wheel for illustration purposes. There are three main components of color:

Hue, value, saturation examples

Color harmonies

Color harmonies serve to describe the relationships certain colors have to one another, and how they can be combined to create a palette of color.

In these examples, a subtractive color space was used for illustrative purposes.

Complementary color harmony Analogous color harmony Triadic color harmony
Complementary Analogous Triadic

Color spaces

Color is typically organized in a hierarchal fashion, based on how colors are mixed. A color space helps to define how the colors are mixed, based on the medium in which the colors are used. There are two different kinds of color spaces:

Subtractive color space Additive color space
Subtractive color space Additive color space

Related Concepts

There are many additional concepts that are related to the elements of design. These can include specific terms and/or techniques that are in some way based on one or more of the above ideas. In they end, they add to the collection of compositional tools available for use by the designer.

Typography

Typography is the art of arranging typefaces, selecting style, line spacing, layout and design as a means of solidifying language. There are many facets to typography, and only a brief investigation will be started here based around some common terms.

Typographic examples

Pattern

Pattern is the repetition of shape or form. It can also reflect the underlying structure of a design by organizing the surfaces or objects in the composition. There are many different kinds of patterns:

Movement

Movement can be defined as motion of objects in space over time, and is often described in one of two ways:

Conclusion

We have thoroughly explored the fundamental concepts of the field of design. The principles of design give us a way of looking at the world. The overarching axioms of the profession affect the designer universally, and provide guidance for any composition. The elements of design discuss the components of the composition itself, and provide the designer with a basic set of tools to begin working with.

In order to explore the fundamentals of design, we needed to step back a bit away from any one medium. Now it is time to focus in on the Web. In the next column we will investigate the constraints of designing for the Web that can effect how we make use of the principles and elements of design. We will look at medium-specific concepts, such as screen resolution, graphics compression and color mixing in additive spaces.

Call for Submissions

The fourth column in the Design in Theory and Practice column will be a review of concepts discussed in the previous three. We will tie together everything we have looked at so far, taking all of the principles and elements of design and seeing how they are put into practice. We will use the medium of the Web to find real-world examples of how this is done.

In order to do this, we will need examples of Web sites that make good use of one or more of the fundamental concepts we have been talking about. If you know of any sites that do, please send me an email (or post a comment) explaining why you think so, and a link to the site for consideration. I will include as many of them as I can.

Additional Resources and References

There are many resources available about all of the topics covered in this article, both online and off. The following is a small list of some of the ones I am aware of, but is by no means exhaustive.

Related resources on the Web

  1. Art, Design, and Visual Thinking
  2. Wikipedia.org/wiki/typography
  3. Typographica - A Journal of Typography
  4. Counterspace
  5. Munsell Color Science Laboratory
  6. Pantone

Related books

  1. The Pantone Guide to Communicating with Color
  2. The Elements of Color
  3. The Elements of Typographic Style
Got something to say?

Share your comments  with other professionals (16 comments)

Related Topics: Graphic Design, Web Design, Basics, Color, Typography

 

Joshua David McClurg-Genevese lives and works in Columbus, Ohio USA. An accomplished escapist, when not sitting in front of a computer, he is happiest with paintbrush or pencil in hand illustrating and writing his own little world.

Media Temple

via Ad Packs