The Elements and Principles of Design applied to Web Design

Definitions referenced from, "Design for Communication, Conceptual Graphic Design Basics", by Elizabeth Resnick

The Elements of Design

Line is the element of length as a mark connecting any two points. Lines can organize, direct, separate, be expressive, suggest an emotion, or create rhythm. They can join elements or divide them using a rule, which is a line that separates one element in a design from another. Let's take a look at some examples:

Shape refers to the external outline of a form or anything that has height and width. An example would be the three basic shapes: the circle, the square, and the triangle, considered to be the fundamental shapes found in all design. Examples of shape in web design:

Texture is the look and feel of a surface. In two-dimensional form, texture is essentially visual and adds richness and dimension to work. Texture can also refer to pattern, which is visual texture. Examples:

Space refers to the distance between shapes and forms, but it is best understood in design as white space or negative space—terms used to refer to the empty but often active areas that are void of visual elements. Examples here:

Size is how big or small something is in scale to other objects. Scale refers to the process of making size relationships. Unless there is a scale of reference within a design, it is impossible to discern the relative size of objects and the meaning they represent. Examples of size and scale:

Value is the relative lightness or darkness of an area or object. Value adds dimension by creating the illusion of depth in a design. With the addition of color, you can create and convey a mood to enhance a strong concept. Examples of value:

Once the concept is formally realized, it will need to be applied. The principles of design—balance, emphasis, rhythm, unity, and contrast—define the structural foundation of a design and determine how the various design elements are organized within the web page.

The Principles of Design

Balance occurs when all the design elements are equally distributed through the design. There are essentially two types of balance: symmetrical and asymmetrical. Symmetrical elements are arranged equally on both sides of a composition to suggest a stable or static motion. Asymmetrical elements create a deliberate imbalance to suggest variety or dynamic movement. Examples of balance:

Emphasis indicates the most important element on the page based on the message. It's the element that stands out and gets noticed first. The most emphasized visual element in a design is called a focal point because it attracts the viewer's attention first. How can you create emphasis in a design? By taking an element and making it bigger, bolder, or brighter, by putting it in a contrasting color, or by surrounding it with white space. Examples of emphasis:

If you are going to exploit the principle of emphasis in a web design layout, make sure that you have a good reason for doing it, otherwise it could cause frustration and confusion in the user.

Rhythm is a pattern created by repeating elements. Rhythm denotes the movement in the way that elements direct our gaze to scan the message for understanding the information. The term sequence is used to refer to the viewing order of the elements and to determine the flow of a multipage publication such as a magazine, book or large web site. Examples:

Unity is achieved when all the design elements relate to one another and project a sense of completeness. A viewer will always seek unity in a message. Without it, the viewer will lose interest. Designers use ideas drawn from gestalt theory to help unify their designs. Gestalt theory is the psychological process by which a viewer unites disparate design elements into a whole form that is greater than the sum of its parts. Two such ideas are grouping and figure/ground. Grouping happens when elements are close together and visually appear as part of a group. Figure/ground occurs when a viewer can identify an object (figure) as a shape distinct from its background (ground). This perception is dependent on the design principle of contrast.

On a basic level, unity in design can be achieved when all of the elements within the design or layout relate to each other. For example, an image must relate to the text it is next to, otherwise the overall message will not make sense to the viewer.

Unity is what makes the content attractive and understandable to the viewer. Where there is no unity in the design, the message can appear confusing and undesirable to the viewer.

Contrast stresses the visual differences in size, shape, and color between the elements to enhance the perception of a message intended. Contrast also draws and directs the viewer's attention to specific areas of information. Examples: