INTRODUCTION Basic Design Principles Proximity Visual Hierarchy Visual Hierarchy Symmetry /...

11
INTRODUCTION INTRODUCTION

Transcript of INTRODUCTION Basic Design Principles Proximity Visual Hierarchy Visual Hierarchy Symmetry /...

Page 1: INTRODUCTION Basic Design Principles Proximity Visual Hierarchy Visual Hierarchy Symmetry / Asymmetry Symmetry / Asymmetry Repetition Unity Contrast.

INTRODUCTIONINTRODUCTION

Page 2: INTRODUCTION Basic Design Principles Proximity Visual Hierarchy Visual Hierarchy Symmetry / Asymmetry Symmetry / Asymmetry Repetition Unity Contrast.

Basic Design PrinciplesBasic Design PrinciplesProximityProximity Visual HierarchyVisual Hierarchy Symmetry / Asymmetry Symmetry / Asymmetry RepetitionRepetition Unity Unity Contrast Contrast Dynamics Dynamics EmphasisEmphasis

Page 3: INTRODUCTION Basic Design Principles Proximity Visual Hierarchy Visual Hierarchy Symmetry / Asymmetry Symmetry / Asymmetry Repetition Unity Contrast.

Basic design principles are used to organize or position the structural elements of design. These principles are the fundamental concepts that will assist you to communicate the key theme of your composition. As such they can be applied to each element of your design or to your composition as a whole.

It is necessary to develop a visual awareness to identify how these principles are used in the composition of every day design. In : illustrations  photographs  animations  websites  billboards, and  posters Developing a visual awareness will give you the skills necessary to critically analyze and constructively criticize the design work you engage in. This will allow you to develop a method of solving graphic problems in reference to the following basic principles of design.

Page 4: INTRODUCTION Basic Design Principles Proximity Visual Hierarchy Visual Hierarchy Symmetry / Asymmetry Symmetry / Asymmetry Repetition Unity Contrast.

ProximityProximity The basic theory of The basic theory of proximity proximity is is

concerned with the arrangement or concerned with the arrangement or categorisation of elements that relate categorisation of elements that relate to one another. To understand why, to one another. To understand why, when elements of a similar nature are when elements of a similar nature are grouped together the information grouped together the information becomes a visual unit. This provides a becomes a visual unit. This provides a viewer with a visual clue as to the viewer with a visual clue as to the concept you are communicating concept you are communicating rather than being confronted with a rather than being confronted with a scattering of unrelated graphical scattering of unrelated graphical elements. When a number of graphic elements. When a number of graphic elements are close in proximity a elements are close in proximity a relationship is implied. If elements relationship is implied. If elements are logically positioned they connect are logically positioned they connect to form a structure to your design, to form a structure to your design, this is also known as Visual this is also known as Visual Hierarchy. Hierarchy.

Page 5: INTRODUCTION Basic Design Principles Proximity Visual Hierarchy Visual Hierarchy Symmetry / Asymmetry Symmetry / Asymmetry Repetition Unity Contrast.

Visual HierarchyVisual Hierarchy    

Visual HierarchyVisual Hierarchy arranges elements to create focal points arranges elements to create focal points by positioning their priority within a concept as a whole. by positioning their priority within a concept as a whole. To do this you will need to ask yourself what the key To do this you will need to ask yourself what the key elements of your design are, which graphics elements of your design are, which graphics communicate your concept most strongly? Which communicate your concept most strongly? Which graphics support your concept and how could you graphics support your concept and how could you illustrate them to create a visual structure from most to illustrate them to create a visual structure from most to least important? You may consider displaying your least important? You may consider displaying your graphics using different sizes and colours to give them graphics using different sizes and colours to give them visual weight. visual weight.

Visual weight refers to the relative size and scale of the Visual weight refers to the relative size and scale of the various elements in a design. This gives meaning to the various elements in a design. This gives meaning to the relationship between objects, or parts, of a whole. Scale relationship between objects, or parts, of a whole. Scale is used to create the contrasting relationship of size is used to create the contrasting relationship of size between elements in a composition.between elements in a composition.

Study your design concept and take note of what attracts Study your design concept and take note of what attracts your eye first, where do you look next and how does your your eye first, where do you look next and how does your eye move around the visual elements of your design? Is a eye move around the visual elements of your design? Is a relationship implied in the ordering, grouping and relationship implied in the ordering, grouping and placements of yourplacements of your graphical elements? graphical elements?

Page 6: INTRODUCTION Basic Design Principles Proximity Visual Hierarchy Visual Hierarchy Symmetry / Asymmetry Symmetry / Asymmetry Repetition Unity Contrast.

The principle of alignment focuses on the placement of The principle of alignment focuses on the placement of graphical elements and their relationship to each other and as a graphical elements and their relationship to each other and as a whole. Following the principle of proximity, alignment allows a whole. Following the principle of proximity, alignment allows a visual connection with elements in your design to be formed visual connection with elements in your design to be formed even if they are not close in proximity. Alignment helps to create even if they are not close in proximity. Alignment helps to create unity and balance.unity and balance.

Balance is the concept of visual equilibrium. It is the Balance is the concept of visual equilibrium. It is the combination of opposing elements in a composition that results combination of opposing elements in a composition that results in visual stability. Most successful compositions achieve in visual stability. Most successful compositions achieve balance using symmetrically or asymmetrically.balance using symmetrically or asymmetrically.

Symmetry refers to the organisation of elements in which a Symmetry refers to the organisation of elements in which a balanced visual hierarchy is achieved through the alignment of balanced visual hierarchy is achieved through the alignment of graphics along a horizontal or vertical axis. This means that your graphics along a horizontal or vertical axis. This means that your design can be reflected precisely over a central axis like a design can be reflected precisely over a central axis like a mirrored image.mirrored image.

In contrast, design elements that display an unbalanced visual In contrast, design elements that display an unbalanced visual weighting that are made up of elements differing in size, colour weighting that are made up of elements differing in size, colour and shape are organized and positioned against one another to and shape are organized and positioned against one another to create asymmetry. create asymmetry.

Symmetry / AsymmetrySymmetry / Asymmetry  

Page 7: INTRODUCTION Basic Design Principles Proximity Visual Hierarchy Visual Hierarchy Symmetry / Asymmetry Symmetry / Asymmetry Repetition Unity Contrast.

RepetitionRepetition

Repetitive elements throughout a design Repetitive elements throughout a design piece can be used to enhance and clarify piece can be used to enhance and clarify information. Repetition adds visual interest information. Repetition adds visual interest to your design, and helps to identify to your design, and helps to identify elements that belong together. It can be elements that belong together. It can be considered a way of adding consistency to considered a way of adding consistency to your design.your design.

The consistent repetition of graphic The consistent repetition of graphic elements works to create visual unity. elements works to create visual unity. These elements can be as simple as These elements can be as simple as colour, spatial relationships, a shape, a colour, spatial relationships, a shape, a texture or a typeface. Sometimes repetitive texture or a typeface. Sometimes repetitive elements are not identical in appearance elements are not identical in appearance but are in fact so similar that their but are in fact so similar that their connection is clear. connection is clear.

Page 8: INTRODUCTION Basic Design Principles Proximity Visual Hierarchy Visual Hierarchy Symmetry / Asymmetry Symmetry / Asymmetry Repetition Unity Contrast.

UnityUnity

UnityUnity is the underlying principle is the underlying principle that sums up all of the principles that sums up all of the principles and elements of design . Unity and elements of design . Unity refers to the combination of all refers to the combination of all elements successfully working elements successfully working together to achieve a sense of together to achieve a sense of harmony in your design. This can harmony in your design. This can be achieved through the be achieved through the consistent use of graphic consistent use of graphic elements. Using repetition or elements. Using repetition or patterns is one of the most basic patterns is one of the most basic factors in creating a strong sense factors in creating a strong sense of unity. of unity.

Page 9: INTRODUCTION Basic Design Principles Proximity Visual Hierarchy Visual Hierarchy Symmetry / Asymmetry Symmetry / Asymmetry Repetition Unity Contrast.

ContrastContrastAn effective use of An effective use of contrast contrast enables you to enables you to add interest to your design by highlighting add interest to your design by highlighting specific graphic elements. This will result in a specific graphic elements. This will result in a more visually striking composition. To achieve more visually striking composition. To achieve this 'contrast' is employed as a means of this 'contrast' is employed as a means of creating a visual hierarchy among different creating a visual hierarchy among different graphic elements. It can be applied to graphic graphic elements. It can be applied to graphic elements, as light, dark, warm, cool, large, elements, as light, dark, warm, cool, large, small; etc.small; etc.

Contrast is most effective when it is strong; Contrast is most effective when it is strong; the focal point of a design is usually a result of the focal point of a design is usually a result of contrast where the eyes will naturally be contrast where the eyes will naturally be drawn. Here contrast can be used to direct the drawn. Here contrast can be used to direct the focus of a composition. When used as a device focus of a composition. When used as a device to emphasize or highlight design elements it is to emphasize or highlight design elements it is important to remember that an ineffective use important to remember that an ineffective use of contrast may result in confusion. of contrast may result in confusion.

Page 10: INTRODUCTION Basic Design Principles Proximity Visual Hierarchy Visual Hierarchy Symmetry / Asymmetry Symmetry / Asymmetry Repetition Unity Contrast.

DynamicsDynamics  DynamicsDynamics is the arrangement of visual elements in a is the arrangement of visual elements in a composition to suggest the illusion of movement or direction. composition to suggest the illusion of movement or direction. The effective use of dynamics in a design can add an emotive The effective use of dynamics in a design can add an emotive characteristic to your design making it appear restful and characteristic to your design making it appear restful and calming or active and energetic.calming or active and energetic.

Dynamics can exist in four basic forms: Dynamics can exist in four basic forms:

Rhythmic: A steady rhythm that creates predictability and order Rhythmic: A steady rhythm that creates predictability and order in a composition. Arrhythmic: Follows an unstructured rhythm in a composition. Arrhythmic: Follows an unstructured rhythm to add visual interest to a composition. Random: Without a to add visual interest to a composition. Random: Without a structured approach or a defined order that creates spontaneity structured approach or a defined order that creates spontaneity in a composition.Directional:  The use of graphic elements used in a composition.Directional:  The use of graphic elements used in such as way that implies a visual connection to lead the eyes in such as way that implies a visual connection to lead the eyes to move in a particular direction. to move in a particular direction. Creating a dynamic composition involves the use of patterns or Creating a dynamic composition involves the use of patterns or the repetition of graphic elements and movement to be effective the repetition of graphic elements and movement to be effective in its execution. The suggestion of motion by the use of in its execution. The suggestion of motion by the use of repeated structures creates dynamics.repeated structures creates dynamics.

Page 11: INTRODUCTION Basic Design Principles Proximity Visual Hierarchy Visual Hierarchy Symmetry / Asymmetry Symmetry / Asymmetry Repetition Unity Contrast.

EmphasisEmphasis    

EmphasisEmphasis refers to the focal point or centre of interest of a refers to the focal point or centre of interest of a composition. This is an area that is visually dominant and eye-catching composition. This is an area that is visually dominant and eye-catching that a designer has emphasized through the clever placement of that a designer has emphasized through the clever placement of graphic elements.graphic elements.

Used effectively in combination with the principle of visual hierarchy Used effectively in combination with the principle of visual hierarchy 'emphasis' can assist to establish a primary focus and an alternative 'emphasis' can assist to establish a primary focus and an alternative secondary emphases in another area of the composition. secondary emphases in another area of the composition.

Emphasis can be achieved by use of repetition to highlight and draw Emphasis can be achieved by use of repetition to highlight and draw attention to a repetitive element. When used with 'repetition' the attention to a repetitive element. When used with 'repetition' the emphasis is usually a break in the basic structure or visual rhythm of a emphasis is usually a break in the basic structure or visual rhythm of a pattern that causes your eye to pause or focus on a particular element. pattern that causes your eye to pause or focus on a particular element.

Contrast achieves emphasis by accentuating an area to visually Contrast achieves emphasis by accentuating an area to visually separate one element from another. Contrast in color, texture, scale, or separate one element from another. Contrast in color, texture, scale, or shape attracts attention to a definite area, which may consist of shape attracts attention to a definite area, which may consist of strategically positioned graphics to call attention to a single element of strategically positioned graphics to call attention to a single element of your design. your design.