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.
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.
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.
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.
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: Where the color is positioned on the color wheel. Terms such as red, blue-green, and mauve all define the hue of a given color.
* Value: The general lightness or darkness of a color. In general, how close to black or white a given color is.
* Saturation: The intensity, or level of chroma, of a color. The more gray a color has in it, the less chroma it has.
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.
* Complementary: A complementary relationship is a harmony of two colors on the opposite side of the color wheel. When complementary colors are placed side-by-side they tend to enhance the intensity (chroma) of each other, and when they are blended together they tend to decrease the intensity of each other.
* Analogous: An analogous relationship is a harmony of colors whose hues are adjacent to one another on the color wheel. Analogous colors tend to be families of colors such as blues (blue, blue-violet, blue-green) and yellows (yellow, yellow-orange, yellow-green).
* Triadic: A triadic relationship is a harmony of three colors equidistant from one another on the color wheel. Primary colors and secondary colors are examples of color triads.
In these examples, a subtractive color space was used for illustrative purposes.
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: A subtractive color space is the traditional color space that most people refer to when they talk about color. It is pigment-based color, as in the mixing of paint. In a subtractive color space, the pigments manipulate the wavelengths that our eyes see. The absence of any pigment produces white, and all pigments blended together produces black.
o Primary colors: Red, yellow, blue
o Secondary colors: Orange, green, violet
* Additive: An additive color space is an electronic color space. It is light-based color, as in the mixing of color on the computer. In an additive color space, light is added to the screen in differing amounts to produce color. The absence of any light is black, the presence of all light, or light at full intensity, is white.
o Primary colors: Red, green, blue
o Secondary colors: Yellow, magenta, cyan
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.
* Baseline: The line on which all letters rest.
* Beardline: The line reached by the descenders of lowercase letters.
* Bowl: The round or elliptical parts of a letterform.
* Cap line: The line reached by the top of uppercase letters.
* Counter: The white space enclosed by a letterform, whether completely or partially.
* Extenders: Extenders are the parts of letters that extend either below the baseline (descenders) or above the midline (ascenders).
* Midline: The top of lowercase letters such as a, c, e and the top of the torso of lowercase letters such as b, d.
* Serif: A stroke added to either the beginning or end of one of the main strokes of a letter.
* Stem: The main stroke of a letter that is generally straight and not part of a bowl.
* Topline: The line reached by the ascenders of lowercase letters.
* X-height: The distance between the baseline and midline of an alphabet. The x-height is usually the height of the unextended lowercase letters.
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:
* Flowing: A flowing pattern is based on the repetition of an undulating line, and reflects a natural meandering through a composition.
* Branching: A branching pattern is the repetition of forking lines, or patterns of deviation. These kinds of patterns can be found in almost all plants, and in many other places in the natural world.
* Spiraling: A circular pattern, or a pattern that winds in and around itself.
Movement
Movement can be defined as motion of objects in space over time, and is often described in one of two ways:
* Literal: Literal movement is physical movement. Examples of literal movement include: Products such as the automobile, motion pictures and dance.
* Compositional: Compositional movement is the movement of the viewer’s eye through a given composition. Compositional movement can be either static or dynamic. Static movement jumps between isolated parts of a composition. Dynamic movement flows smoothly from one part of the composition to another.
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.
Source: www.digital-web.com
