Unit 2A Applied Information Technology

Week 5

 

The Principles and Elements of Design

By Joshua David McClurg-Genevese

 

Starting with the Basics

 

This article is about Web design—really, it is—though it may at times seem a bit distant and distracted. In my opinion, any good discussion about design begins with the fundamentals. Almost by definition, the primary tenets around which any field is based are universal: they can be applied to a variety of disciplines in a variety of ways. This can cause some confusion as principle is put into practice within the unique constraints of a particular medium.


We can group all of the basic tenets of design into two categories: principles and elements. For this article, the principles of design are the overarching truths of the profession. They represent the basic assumptions of the world that guide the design practice, and affect the arrangement of objects within a composition.


Web design is a relatively new profession compared to other forms of design, due to the youth of our medium. As with any design discipline, there are aspects of the Web design process that are unique to the medium, such as screen resolution, additive colour spaces and image compression. But too often these more unique details override our sense of the bigger picture. We focus on the fact that it is Web design and push aside core design concepts—concepts that can that make any project stronger without interfering in the more technical considerations later on.


The Principles of Design

There are many basic concepts that underly the field of design. They are often categorized differently depending on philosophy or teaching methodology. The first thing we need to do is organize them, so that we have a framework for this discussion.
We can group all of the basic tenets of design into two categories: principles and elements. For this article, the principles of design are the overarching truths of the profession. They represent the basic assumptions of the world that guide the design practice, and affect the arrangement of objects within a composition. By comparison, the elements of design are the components of design themselves, the objects to be arranged.


Let’s begin by focusing on the principles of design, the axioms of our profession. Specifically, we will be looking at the following principles:

  • Balance
  • Rhythm
  • Proportion
  • Dominance
  • Unity

 

Balance

Balance is an equilibrium that results from looking at images and judging them against our ideas of physical structure (such as mass, gravity or the sides of a page). It is the arrangement of the objects in a given design as it relates to their visual weight within a composition. Balance usually comes in two forms: symmetrical and asymmetrical.

 

Symmetrical

Symmetrical balance occurs when the weight of a composition is evenly distributed around a central vertical or horizontal axis. Under normal circumstances it assumes identical forms on both sides of the axis. When symmetry occurs with similar, but not identical, forms it is called approximate symmetry. In addition, it is possible to build a composition equally around a central point resulting in radial symmetry1. Symmetrical balance is also known as formal balance.

 

Asymmetrical

Asymmetrical balance occurs when the weight of a composition is not evenly distributed around a central axis. It involves the arranging of objects of differing size in a composition such that they balance one another with their respective visual weights. Often there is one dominant form that is offset by many smaller forms. In general, asymmetrical compositions tend to have a greater sense of visual tension. Asymmetrical balance is also known as informal balance.

Horizontal symmetry

a

b

c

Horizontal
symmetry

Approximate
horizontal symmetry

Radial
symmetry

Asymmetry

 

 

Rhythm

Rhythm is the repetition or alternation of elements, often with defined intervals between them. Rhythm can create a sense of movement, and can establish pattern and texture. There are many different kinds of rhythm, often defined by the feeling it evokes when looking at it.

  • Regular: A regular rhythm occurs when the intervals between the elements, and often the elements themselves, are similar in size or length.
  • Flowing: A flowing rhythm gives a sense of movement, and is often more organic in nature.
  • Progressive: A progressive rhythm shows a sequence of forms through a progression of steps.



d

e

f

Regular
rhythm

Flowing
rhythm

Progressive
rhythm


Proportion

Proportion is the comparison of dimensions or distribution of forms. It is the relationship in scale between one element and another, or between a whole object and one of its parts. Differing proportions within a composition can relate to different kinds of balance or symmetry, and can help establish visual weight and depth. In the below examples, notice how the smaller elements seem to recede into the background while the larger elements come to the front.
Proportion example 1
Proportion example 2

Dominance

Dominance relates to varying degrees of emphasis in design. It determines the visual weight of a composition, establishes space and perspective, and often resolves where the eye goes first when looking at a design. There are three stages of dominance, each relating to the weight of a particular object within a composition.

  • Dominant: The object given the most visual weight, the element of primary emphasis that advances to the foreground in the composition.
  • Sub-dominant: The element of secondary emphasis, the elements in the middle ground of the composition.
  • Subordinate: The object given the least visual weight, the element of tertiary emphasis that recedes to the background of the composition.

In the below example, the trees act as the dominant element, the house and hills as the secondary element, and the mountains as the tertiary element.
Dominance


Unity

The concept of unity describes the relationship between the individual parts and the whole of a composition. It investigates the aspects of a given design that are necessary to tie the composition together, to give it a sense of wholeness, or to break it apart and give it a sense of variety. Unity in design is a concept that stems from some of the Gestalt theories of visual perception and psychology, specifically those dealing with how the human brain organizes visual information into categories, or groups2.
Gestalt theory itself is rather lengthy and complex, dealing in various levels of abstraction and generalization, but some of the basic ideas that come out of this kind of thinking are more universal.


The Elements of Design

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

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 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 colour.


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.


k

Rigid line

l

Organic

Rigid

Differing weights

 

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.


m

n

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.


o

p

Rough texture

Organic texture

 

colour

colour 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 colour in between these two.
There are many different kinds of colour systems, and many different theories on colour. We will get into that kind of detail in a later column. For now we will focus on the basics, using a colour wheel for illustration purposes. There are three main components of colour:

  • Hue: Where the colour is positioned on the colour wheel. Terms such as red, blue-green, and mauve all define the hue of a given colour.
  • Value: The general lightness or darkness of a colour. In general, how close to black or white a given colour is.
  • Saturation: The intensity, or level of chroma, of a colour. The more gray a colour has in it, the less chroma it has.

q

colour harmonies

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

  • Complementary: A complementary relationship is a harmony of two colours on the opposite side of the colour wheel. When complementary colours 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 colours whose hues are adjacent to one another on the colour wheel. Analogous colours tend to be families of colours such as blues (blue, blue-violet, blue-green) and yellows (yellow, yellow-orange, yellow-green).
  • Triadic: A triadic relationship is a harmony of three colours equidistant from one another on the colour wheel. Primary colours and secondary colours are examples of colour triads.

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


r

s

Triadic color harmony

Complementary

Analogous

Triadic

colour spaces

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

  • Subtractive: A subtractive colour space is the traditional colour space that most people refer to when they talk about colour. It is pigment-based colour, as in the mixing of paint. In a subtractive colour space, the pigments manipulate the wavelengths that our eyes see. The absence of any pigment produces white, and all pigments blended together produces black.
    • Primary colours: Red, yellow, blue
    • Secondary colours: Orange, green, violet
  • Additive: An additive colour space is an electronic colour space. It is light-based colour, as in the mixing of colour on the computer. In an additive colour space, light is added to the screen in differing amounts to produce colour. The absence of any light is black, the presence of all light, or light at full intensity, is white.
    • Primary colours: Red, green, blue
    • Secondary colours: Yellow, magenta, cyan

Subtractive color space

Additive color space

Subtractive colour space

Additive colour space

 

Other Resources

Powerpoint on the Elements and Principles of Design

Principles of Graphic Design



Example pic