Visual Design Principles

 

Good design is really about simplicity. You know you have a good design when there is nothing more to remove; your interface is simple and effective.

Dicky Williams
ePuck.com

 

Introduction
There are four visual design principles that you can apply to the design of just about anything. Whether you are designing a resume, web page, flyer, brouchure, lesson plan, or computer software interface, the "look" of the product will determine whether your message is effectively communicated.

Proximity: Group Related Items
The principle of proximity states that related items should be placed physically close together and unrelated items should have space separating them. The placing of interface items close together gives visual clues to logical organization of the information or functionality. Review the following examples. Notice how the image to the left does not use proxmity to provide visual unity while the example to the right unifies the disparite shapes by using proximity.


Violates Principle of Proximity

Visual Unity Through Proximity

Repetition: Repeat Visual Elements Througout Design
The principle of repetition states that the designer repeat some element through the product. The repeating aspect ties the work together. For example, compate the two images below. The left image is various shapes that have nothing in common except that they are the same color. There really is no unifiying characteristic. The example on the right adds a repeating circle around each shape. The circle helps create a sense of visual unity through repetition. Any aspect of a design can be repeated: color, shape, texture, font style and size, etc.


Lack of Unity; No Repetition

Visual Unity Through Repetition of Circle

Alignment: Align Elements In Order to Create Visual Unity
The principle of alignment states that the designer should use alignment of elements as a tool to create visual unity or organization. Designers recommend that each element placed in a work should have at least some alignment with another element on the page.


Lack of Unity; Poor Alignment

Visual Unity Through Alignment

Contrast: Use Contrast to Add Visual Excitment and Draw Attention
The principle of contrast states that the designer should make elements very different (add contrast) in order to make the design interesting and direct attention. The newsletter design to the left is a simple neat layout. But it lacks elements that make the design interesting. Notice how the improved design to the right uses contrast


Lack of Contast

Contrast Draws Your Eye to the Page

Proximity, repetition, alignment, and contrast are four principles that can greatly improve your interface designs. If you apply these principles effectively your design will look more professional and will communicate your message more clearly.

Activity 1: Be sure to apply these 4 design principles to your Personal Skills Portfolio and your Final Instructional Design Project!