Visual Design Basics VisualDesignBasics. DEFINITION: Design is the process of arranging visual...

Visual Design Basics

VisualVisualDesignDesignBasicsBasics


Visual Design BasicsVisual Design Basics

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


� Line/DotLine/Dot

� ShapeShape

� VolumeVolume

� ScaleScale

�SpatialitySpatiality

�LightingLighting

�ColorColor

�PerspectivePerspective

Visual Design ElementsVisual Design Elements


Line/DotLine/Dot

DotDotThe simplist The simplist irreducibly irreducibly minimum minimum unit of visual unit of visual communi- communi- cationcation

One DimensionOne Dimension


Line/DotLine/Dot

LineLineWhen dots When dots cannot be cannot be distinguished distinguished from each from each other they other they become a line.become a line.

A line is a dot A line is a dot in motion.in motion.

One DimensionOne Dimension


ShapeShape

ShapeShapeLine Line describes describes shape.shape.

Three basic Three basic shapes.shapes.

Two DimensionsTwo Dimensions


ShapeShape

ShapeShapeShape Shape creates a creates a figure/grounfigure/ground d relationship.relationship.

Two DimensionsTwo Dimensions


VolumeVolumeThree DimensionsThree Dimensions

VolumeVolumeRepresenting Representing 3- 3-dimensional dimensional space in space in 2- 2-dimensional dimensional form – an form – an illusion.illusion.


ScaleScale

ScaleScaleScale is Scale is estabilshed estabilshed by relative by relative size. size.

Large Large established established by small.by small.


SpatialitySpatiality

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


LightingLighting

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


ColorColoraestheticaesthetic

emotionalemotional

red: anger, dangerred: anger, danger


PerspectivePerspective

PerspectivePerspectiveShowing Showing dimension the dimension the way it looks in way it looks in nature by nature by representing representing parallel lines parallel lines as converging.as converging.


� BalanceBalance

� ProportionProportion

� MovementMovement

� ContrastContrast

� UnityUnity

Visual Design PrinciplesVisual Design Principles


Principles of DesignPrinciples of Design

• Formal BalanceFormal Balance• Informal BalanceInformal Balance•WeightsWeights: size, shape, color: size, shape, color

BalanceBalanceThe way elements in a The way elements in a design relate to one design relate to one another to create a visually another to create a visually effective communication.effective communication.


Principles of DesignPrinciples of DesignAxial(Formal) Axial(Formal) BalanceBalanceElements of the Elements of the composition composition arranged equally arranged equally around both around both sides of an sides of an imaginary imaginary central axis.central axis.

Two forces of equal strength that pull in Two forces of equal strength that pull in opposite directions . opposite directions .


BalanceBalance

Dynamic Dynamic (Informal) (Informal) BalanceBalanceMultiple forces Multiple forces pulling in different pulling in different directions – not a directions – not a state of rest but of state of rest but of equal tensions. .equal tensions. .

The interplay of elements with The interplay of elements with unequal but offsetting visual weights.unequal but offsetting visual weights.



ProportionProportionThe way sizes of The way sizes of elements relate to one elements relate to one another generally within another generally within the area of the visual the area of the visual field.field.

The relative size and visual weight of The relative size and visual weight of different elements in a design.different elements in a design.



MovementMovementThe way elements in a composition The way elements in a composition lead our eyeslead our eyesalong and along and force them force them to scan the to scan the composition.composition.

Achieved by line, shape, color, Achieved by line, shape, color, juxtaposition.juxtaposition.



MOVEMENTMOVEMENTThere are three There are three directionaldirectional forces which forces which create the illusion of create the illusion of motion: motion:

• • Horiz./Vert.Horiz./Vert.

• • DiagonalDiagonal

• • CurveCurve Curve

Diagonal

Horiz./Vert.



ContrastContrastElements in a Elements in a composition have composition have meaning based on meaning based on their contrast with their contrast with other elements.other elements.

Differences may be in size, shape, Differences may be in size, shape, color, texture, brightnesscolor, texture, brightness


Principles Of DesignPrinciples Of Design

Contrast/ToneContrast/ToneMeans for Means for differentiating differentiating visual visual informationinformation

RelativeRelative darkness, darkness, lightnesslightness



UnityUnityThe way elements in The way elements in a composition relate a composition relate to one another to to one another to produce a sense of produce a sense of completeness and completeness and wholeness.wholeness.

Gestalt: the effect of the whole is greater Gestalt: the effect of the whole is greater than the sum of the individual parts.than the sum of the individual parts.


ProductivityProductivity

Using GraphsUsing Graphs & &

DiagramsDiagrams


TerminologyTerminology

1 4 7 2 9 3 5 6 2 1 4 2 0 5 4 2 4 3 1 53 6 7 4 8 0 2 9 1 3

DataData



1 4 7 2 9 3 5 6 2 1 4 2 0 5 4 2 4 3 1 53 6 7 4 8 0 2 9 1 3

DataData

ObservationObservation

•



1 4 7 2 9 3 5 6 2 1 4 2 0 5 4 2 4 3 1 53 6 7 4 8 0 2 9 1 3

DataData


VariableVariable

•



1 4 7 2 9 3 5 6 2 1 4 2 0 5 4 2 4 3 1 53 6 7 4 8 0 2 9 1 3

DataData


VariableVariable

Plotted VariablePlotted Variable

••

•

• ••

••

•

•



1 4 7 2 9 3 5 6 2 1 4 2 0 5 4 2 4 3 1 53 6 7 4 8 0 2 9 1 3

DataData


VariableVariable


••

•

• ••

••

•

•RangeRange



1 4 7 2 9 3 5 6 2 1 4 2 0 5 4 2 4 3 1 53 6 7 4 8 0 2 9 1 3

DataData


VariableVariable


••

•

• ••

••

•

•UnitsUnits$$



1 4 7 2 9 3 5 6 2 1 4 2 0 5 4 2 4 3 1 53 6 7 4 8 0 2 9 1 3

DataData


VariableVariable


••

•

• ••

••

•

•ScaleScale$$

543210

A B C D E F G H I J



1 4 7 2 9 3 5 6 2 1 4 2 0 5 4 2 4 3 1 53 6 7 4 8 0 2 9 1 3

DataData


VariableVariable


••

•

• ••

••

•

•GridGrid$$

543210

A B C D E F G H I J


Types of GraphsTypes of Graphs

•Horizontal BarHorizontal Bar

1st Qtr

2nd Qtr

3rd Qtr

4th Qtr

0 50 100

1st Qtr

2nd Qtr

3rd Qtr

4th Qtr

NorthWestEast



LineLine

0

20

40

60

80

100

1stQtr

2ndQtr

3rdQtr

4thQtr

East

West

Nor th



Pie/AreaPie/Area

1st Qtr

2nd Qtr

3rd Qtr

4th Qtr


Graphs–ExamplesGraphs–Examples

Multi-BarMulti-Bar



Combination Combination Line & BarLine & Bar



3-D Scatter3-D Scatter



Pictograph Pictograph


DiagramsDiagrams

Tree DiagramTree Diagram

Visual Design Basics VisualDesignBasics. DEFINITION: Design is the process of arranging visual...

Documents

Transcript of Visual Design Basics VisualDesignBasics. DEFINITION: Design is the process of arranging visual...