Web Design 12: Elements and Principles of Design

Websites and other visual media depend heavily on the elements and principles of design. Elements of design can be thought of as the basic building blocks that make up visual art. In fact, all artwork–whether good or bad–will contain most of the seven elements of design. Principles of design can be thought of as how we apply the elements of design. What we do with the elements determines how effective (or ineffective) our websites look.

Over the next few classes, you will learn and identify the elements and principles of design in websites and other print media (such as flyers and magazines). It is expected that you develop your critical skills as you critique other’s work. Specifically, you will identify the strengths and weaknesses and provide suggestions for improvement in achieving effective layout designs.

Elements of Design

  1. LINE: Line can be considered in two ways. The linear marks made with a pen or brush or the edge created when two shapes meet.
  2. SHAPE: A shape is a self contained defined area of geometric or organic form. A positive shape in a painting automatically creates a negative shape.
  3. DIRECTION: All lines have direction – horizontal, vertical or oblique. See notes on direction.
    • Horizontal suggests calmness, stability and tranquility.
    • Vertical gives a feeling of balance, formality and alertness.
    • Oblique suggests movement and action.
  4. SIZE: Size is simply the relationship of the area occupied by one shape to that of another.
  5. TEXTURE: Texture is the surface quality of a shape – rough, smooth, soft hard glossy etc. Texture can be physical or visual; websites are restricted to visual. See notes on texture.
  6. COLOUR: Colour also includes hue, saturation, tints and shades. See notes on colour.
  7. VALUE: Value is the lightness or darkness of a colour and includes tones. See notes on tonal contrast.

Principles of Design

  1. UNITY: Achieving visual unity is a main goal of graphic design. When all elements are in agreement, a design is considered unified. A good balance between unity and variety must be established to avoid a chaotic or a boring design.
  2. SYMMETRY: Symmetry does not mean that both sides of a photo have to be equal, but that there is the same amount of information on each side.
    • Formal Balance: Both sides are symmetric in shape.
    • Informal Balance: Bright objects attract the eye more than dark objects, so fewer (or smaller) bright objects can create asymmetrical balance with a greater number of dark objects.
  3. HIERARCHY: A good design contains elements that lead the audience through each element in order of its significance. The type and images should be expressed starting from most important to the least.
  4. CONTRAST: Dominance and emphasis are created by contrasting size, positioning, color, style, or shape. The focal point should dominate the design with scale and contrast without sacrificing the unity of the whole. Using the relative size of elements against each other can attract attention to a focal point. When elements are designed larger than life, scale is being used to show drama.
  5. SIMILARITY: Planning a consistent layout is an important aspect in web design to make their focal point visible; repetition may also help consistency. However, too much similarity is boring. It is key to find the balance between similarity and contrast.

Task: Design Critique 1