Online Learning Visual Design Principles

Before we discuss what are some of the design principles that you can apply to on-line content, we should define what we mean by "Design". This is one of those words that are ever-present in every industry that produces something, but it often means something different to every person invoking its meaning.

For this discussion, we are making the argument that to design something is to plan its inception, production and use, and that the application of consistent principles can improve the utility of that thing. In the case of on-line educational content, this means a plan of the purpose, presentation and evaluation of that content using accepted instructional design principles. Yet, we are working in a format that requires the consideration of other applications of design ideas from other fields. The use of media types such as typography, images, and audio are directly constrained by the on-line distribution method in both presentation and technical considerations.

In other words, if we are going to produce educational content on-line, we either need to be adept in the realms of education, project management, Internet technology, graphic design, audio design and web development and design, or we need a competent team to support our efforts. However, the development procedures of each team will vary to such an extent that we may be responsible for several areas within a project or be forced to change hats due to resource constraints. We may not be experts in every area, but we had better be certain that we are at least passingly knowledgeable, if for no other reason than to know how to assign and evaluate tasks for other members.

In a nutshell, we should look at design as applying certain general principles taken from various disciplines to the varied elements of our content in order to make that content more usable and effective. To do this, we need to draw from ideas as varied as graphic design, information architecture, instructional design, web design and development, typographic design, audio development and others.

Basic Visual Design Elements

It is likely that a large portion of the on-line content we develop will be presented in a visual form. For this reason, it is relevant to consider what are some accepted visual design principles being used by professionals and what we might learn from them to apply to our work. However, the principles are typically applied to elements, or building blocks of visual representations that we should at least note in passing, though they may not all apply to our definition of elements or how we will apply the principles. A list of these elements might include:

point

space

shape

tone

form

mass

line

texture

pattern

time

light

color

Basic Visual Design Principles

Though lists of visual design principles will differ from individual to individual, most lists will contain some arrangement of the following:

scale - typically contrasting one object with another

proportion -typically comparing elements of an object to its other elements

balance - often represented as an idea of symmetry

pattern - typically referring to the movement or placement of elements within a design

emphasis - usually a focal point

These principles are interpreted with differing intent depending on the application, so it becomes difficult find a definitive list, so we will merely suggest this list as an example:

Symmetry/Asymmetry - positioning elements in relation to one another

Proximity - grouping of elements or objects to signify meaning

Alignment - an application of symmetry that includes positioning of elements along a line in relation to one another

Repetition - the repeating of elements to build significance the in the eyes of the viewer

Dynamics - the "movement" or apparent progression of elements according an orderly or disorderly pattern

Hierarchy - assigning a visual order or dominance to elements

Emphasis - to create a visual focal point

Contrast - using obviously disparate elements to create emphasis

Unity - combining all elements into a harmonious presentation

Symmetry/Asymmetry

Symmetry is naturally attractive to viewers, because we are taught that it is beautiful. We appreciate symmetrical elements because we immediately understand elements better when they are reflective of each other. Equal and opposing elements make sense and, in the visual sense, are usually considered beautiful. Asymmetrical elements within a group are often disturbing and even unnerving to many observers. The outward appearances of our own bodies are symmetrical, so it is understandable that this is a naturally attractive construct.

Proximity

The proximity of elements denotes their relationship to each other. Elements that are closer have a stronger relationship than those that are visually distant. This can apply to images or text, and is a clear visual indicator for the viewer as to relationships.

Alignment

When objects are aligned along an imaginary or apparent line in a composition, relevance and order is strengthened for the viewer. Arranging visual elements within grids is a long-standing and common practice within visual design.

Repetition

Repetition reinforces relevance of an element by signifying the importance of that element to the viewer. They may miss it on the first viewing, but after a sequence of repeated elements appear, they begin to understand that the element is important. Repeated elements such as colors or shapes also form a connection between different functioning elements, and provide a subconscious link to them in the mind of the viewer.

Dynamics

Every visual collection of elements has some type of "feeling" to it. If that dynamic is organized and focused, then the "feeling" experienced by the viewer should be close to what the creator intended. If however, the elements do not support the intended dynamic, then the impression of the viewer may be inconsistent with what the creator intended.

Hierarchy

People inherently wish to understand what is most important in a visual arrangement, so that they can more easily derive meaning from the work. By providing a clear delineation between the relevance of visual elements, the viewer can more easily know what they should be looking at, in what order, and for what reason. Lack of a hierarchy leads to confusion and wandering of the eye.

Emphasis

This idea is related to hierarchy, in that, by providing one particular aspect for the viewer to immediately focus upon, the creator can then establish an order for the viewer to follow, or at least get across a main point.

Contrast

Sometimes, the best way to emphasize an element is to present its antithesis to the viewer. This highlights the significant features of the element by their absence in its opposite.

Unity

The ultimate goal of any visual design is not to draw attention to this or that element in isolation, but create a coherency between all elements, in order to present a message. Design that holds no message is flat and uninteresting, and ultimately ignored by the viewer as being irrelevant. If design elements can be coerced into reinforcing a unified message or impression then, the design serves its purpose.

The http://www.unseenaudience.com site is devoted to assisting developers of on-line educational material to produce better content through a deeper understanding of: instructional design, project management, information architecture, distance-learning design techniques, and electronic media creation methods and technologies.