Visual Design Basics VisualDesignBasics

• DEFINITION: Design is the process of arranging visual elements to create an image.

Visual Design Basics • Line/Dot • Shape • Volume • Scale • Spatiality • Lighting • Color • Perspective Visual Design Elements

Visual Design Basics Line/Dot Dot The simplist irreducibly minimum unit of visual communi- cation One Dimension

Visual Design Basics Line/Dot Line When dots cannot be distinguished from each other they become a line. A line is a dot in motion. One Dimension

Visual Design Basics Shape Shape Line describes shape. Three basic shapes. Two Dimensions

Visual Design Basics Shape Shape Shape creates a figure/groun d relationship. Two Dimensions

Visual Design Basics Volume Three Dimensions Volume Representing 3-dimensional space in 2-dimensional form – an illusion.

Visual Design Basics Scale Scale Scale is estabilshed by relative size. Large established by small.

Visual Design Basics Spatiality The way space is used in design is important to the perception of objects or other elements of the design.

Visual Design Basics Lighting Lighting defines our perception of objects by showing shape, texture, and color and by creating contrast.

Visual Design Basics Color aesthetic emotional red: anger, danger

Visual Design Basics Perspective Perspective Showing dimension the way it looks in nature by representing parallel lines as converging.

Visual Design Basics • Balance • Proportion • Movement • Contrast • Unity Visual Design Principles

Visual Design Basics Principles of Design Formal BalanceFormal Balance Informal BalanceInformal Balance Weights: size, shape, colorWeights: size, shape, color Balance The way elements in a design relate to one another to create a visually effective communication.

Visual Design Basics Principles of Design Axial(Formal) Balance Elements of the composition arranged equally around both sides of an imaginary central axis. Two forces of equal strength that pull in opposite directions.

Visual Design Basics Balance Dynamic (Informal) Balance Multiple forces pulling in different directions – not a state of rest but of equal tensions.. The interplay of elements with unequal but offsetting visual weights.

Visual Design Basics Principles of Design Proportion The way sizes of elements relate to one another generally within the area of the visual field. The relative size and visual weight of different elements in a design.

Visual Design Basics Principles of Design Movement The way elements in a composition lead our eyes along and force them to scan the composition. Achieved by line, shape, color, juxtaposition.

Visual Design Basics Principles of Design MOVEMENT There are three directional forces which create the illusion of motion: Horiz./Vert. Horiz./Vert. Diagonal Diagonal Curve Curve Curve Diagonal Horiz./Vert.

Visual Design Basics Principles of Design Contrast Elements in a composition have meaning based on their contrast with other elements. Differences may be in size, shape, color, texture, brightness

Visual Design Basics Principles Of Design Contrast/Tone Means for differentiating visual information Relative darkness, lightness

Visual Design Basics Principles of Design Unity The way elements in a composition relate to one another to produce a sense of completeness and wholeness. Gestalt: the effect of the whole is greater than the sum of the individual parts.

Visual Design Basics Productivity Using Graphs &Diagrams

Visual Design Basics Terminology Data

Visual Design Basics Terminology Data Observation

Visual Design Basics Terminology Data Observation Variable

Visual Design Basics Terminology Data Observation Variable Plotted Variable

Visual Design Basics Terminology Data Observation Variable Plotted Variable Range

Visual Design Basics Terminology Data Observation Variable Plotted Variable Units $

Visual Design Basics Terminology Data Observation Variable Plotted Variable Scale $ A B C D E F G H I J

Visual Design Basics Terminology Data Observation Variable Plotted Variable Grid $ A B C D E F G H I J

Visual Design Basics Types of Graphs Horizontal BarHorizontal Bar

Visual Design Basics Types of Graphs Line

Visual Design Basics Types of Graphs Pie/Area

Visual Design Basics Graphs–Examples Multi-Bar

Graphs–Examples Combination Line & Bar

Visual Design Basics Graphs–Examples 3-D Scatter

Visual Design Basics Graphs–Examples Pictograph Pictograph

Visual Design Basics Diagrams Tree Diagram