importance of principles of design

8/19/2019 Importance of Principles of Design

1/68


2/68


3/68


4/68

Importance of principles of design

The principles of design are made up of various mixes

of the elements of design all put together in one design,

making our design look better.

principles of design become very important for artists.

They are the devices that we need to use and will

unknowingly use, since they make our design look

nicer and become more visually appealing to people

who are looking at our work. That is why the principlesare important, too make our artwork look visuallyappealing, catch people’s eyes and get good reviews.


5/68


6/68

Elements of design

• Line

• Shape

• Size

• Direction


7/68

Elements of design

• Texture

• Value

• Space

• Text


8/68

Elements of design

LINE – The linear marks made with a pen or

brush or the edge created when two shapes

meet.

SHAPE – A shape is a self contained defined

area of geometric (squares and circles), or

organic (free formed shapes or naturalshapes). A positive shape automatically creates

a negative shape.


9/68

Elements of design

DIRECTION – All lines have direction –

Horizontal, Vertical or Oblique. Horizontal

suggests calmness, stability and tranquillity.

Vertical gives a feeling of balance, formality andalertness. Oblique suggests movement and

action.

SIZE – Size is simply the relationship of the

area occupied by one shape to that of another.


10/68

Elements of design

TEXTURE – Texture is the surface quality of a

shape – rough, smooth, soft hard glossy etc.

COLOUR – Colour is light reflected off

objects. Color has three main characteristics:

hue or its name (red, green, blue, etc.), value

(how light or dark it is), and intensity (how

bright or dull it is).


11/68

Principles of design

• Balance

• Gradation

• Propotion

• Rhythm


12/68


• Unity of proximity

• Repetition

• Contrast

• Emphasis

• Alignment


13/68


BALANCE – Balance in design is similar tobalance in physics. A large shape close to thecenter can be balanced by a small shape close

to the edge. Balance provides stability andstructure to a design

PROXIMITY – Proximity creates relationship

between elements. It provides a focal point.Proximity doesn’t mean that elements have tobe placed together, it means they should bevisually connected in someway.


14/68


ALIGNMENT – Allows us to create order and

organisation. Aligning elements allows them to

create a visual connection with each other.

REPETITION – Repetition strengthens a

design by tying together individual elements. It

helps to create association and consistency.

Repetition can create rhythm (a feeling of

organized movement).


15/68


CONTRAST – Contrast is the juxtaposition of opposingelements (opposite colours on the colour wheel, orvalue light / dark, or direction – horizontal / vertical).

Contrast allows us to emphasize or highlight keyelements in your design.

Proportion- refers to the relative size and scale of the

various elements in a design. The issue isthe relationship between objects, or parts, of a whole.This means that it is necessary to discuss proportion interms of the context or standard used to determineproportions.


16/68


Rhythm- can be described as timed movement

through space; an easy, connected path along

which the eye follows a regular arrangement of

motifs. The presence of rhythm creates

predictability and order in a composition. Visual

rhythm may be best understood by relating it to

rhythm in sound..


17/68


Emphasis- is also referred to as point of focus,

or interruption. It marks the locations in a

composition which most strongly draw the

viewers attention. Usually there is a primary, or

main, point of emphasis, with perhaps

secondary emphases in other parts of the

composition.


18/68


Gradation employs a series of motifs patterned

to relate to one another through a regular

progression of steps. This may be a gradationof shape or color. Some shape gradations may

in fact create a sequence of events, not unlike

a series of images in a comic strip.


19/68

Gestalt Theory

Gestalt psychologists have come up with lists

to summarize basic principles of visual

perception, which have become invaluabletools for design

This theory also helps the designer influence

the viewer by controlling how the design isviewed.


20/68

The Key Ideas Behind Gestalt

Theory•EMERGENCE (THE WHOLE IS IDENTIFIEDBEFORE THE PARTS)

•REIFICATION (OUR MIND FILLS IN THE GAPS)

•MULTI-STABILITY (THE MIND SEEKS TO AVOIDUNCERTAINTY)

•INVARIANCE (WE’RE GOOD AT RECOGNIZING

SIMILARITIES AND DIFFERENCES)


21/68

EMERGENCE (THE WHOLE IS

IDENTIFIED BEFORE THE PARTS)

Emergence is the process of forming

complex patterns from simple rules.

When attempting to identify an

object, we first seek to identify itsoutline. We then match this outline

pattern against shapes and objectswe already know to find a match.


22/68

REIFICATION (OUR MIND FILLS IN

THE GAPS)

Reification is an aspect of perceptionin which the object as perceived

contains more spatial information

than what is actually present. As we

attempt to match what we see to thefamiliar patterns we have stored in

memory, there isn’t always an exact

match.


23/68

MULTI-STABILITY (THE MIND

SEEKS TO AVOID

UNCERTAINTY)

Multi-stability is the tendency of

ambiguous perceptual experiences

to move unstably back and forth

between alternative interpretations.Some objects can be perceived in

more than one way.


24/68

INVARIANCE (WE’RE GOOD AT

RECOGNIZING SIMILARITIES AND

DIFFERENCES)

Invariance is a property of perception

in which simple objects are

recognized independent of their

rotation, translation and scale. Sincewe often encounter objects from

different perspectives, we’ve

developed an ability to recognize

them despite their differentappearance.


25/68

Gestalt Principles

• Law of simplicity

• Closure

• Symmetry and order

• Figure/Ground

• Uniform connectedness

• Common regions

• Proximity

• Continuation


26/68

Gestalt Principles

• Common fate

• Parallelism

• Similarity

• Focal point

• Past experiences


27/68

Proximity

The principle of proximity or

contiguity states that things

which are closer together

will be seen as belongingtogether .


28/68

Similarity

Similarity means there is a

tendency to see groups whichhave the same characteristics so

in this example, there are three

groups of black squares and three

groups of white squares arrangedin lines.

The principle of similarity states

that things which share visual

characteristics such as shape,size, color, texture, value or

orientation will be seen as

belonging together.


29/68

Common Fate

Suppose both principles ofproximity and similarity are in

place - then a movement takes

place - the dots begin to move

down the page.They appear to change

grouping


30/68

Good Continuation

The principle ofcontinuity predicts the

preference for

continuous figures. We

perceive the figure astwo crossed lines

instead of 4 lines

meeting at the center.


31/68

Closure

Related to principle of goodcontinuation, there is

a tendency to close simple

figures, independent of

continuity or similarity. Thisresults in a effect of filling in

missing information or

organising information

which is present to make awhole


32/68

Area and Symmetry

The principle of area statesthat the smaller of two

overlapping figures is

perceived as figure while

the larger is regarded asground.

The principle of the

symmetrical figure is that it

is seen as a closed figure.

Symmetrical contours thus

define a figure and isolate it

from its ground


33/68

FIGURE/GROUND

The figure/ground principleis based upon the

relationship between an

object and the surrounding

space. Figure/ground isalso referred to as positive

and negative space, the

positive being the object

and the negative referringto the space around it.


34/68

SIMPLICITY

The law of simplicity

indicates that our mind

perceives everything in its

simplest form. The image

below, for example, when

studied in depth is madeup of individual

components that have no

meaning when viewed

separately, yet our mindautomatically perceives

them in combination to

spell out the word ‘logo’.


35/68

Parallelism

Elements with the same or

very similar slopes are

associated as a single group.

When designing, we often

change the inclination of our

texts to match surroundingarrows or curves because it

makes the entire figure look

more visually compact. In this

poster created to advertisethe font Futura, different text

areas are grouped using the

principle of parallelism.


36/68

Continuity

Elements are visuallyassociated if they are aligned

with each other. Lines are

perceived as a single figure

insofar as they’re continuous.The smoother their segments

are, the more we see them as

a unified shape.


37/68

Common Region

When we find severalelements that are part of a

single region, we associate

them as a single group.

Consider a design for a badgewhere there is a combination

of text, objects and a banner.

All three of those elements are

perceived as belonging to theunified badge.


38/68

Element Connectedness

We perceive elements as beingunited if they are connected by

other elements. An easy way to

think about this principle in

action is an infographic orflowchart where arrows help

connect one figure (or text

block) to the next.


39/68

PAST EXPERIENCES

“Elements tend to be

perceived according to an

observer’s past

experience.”

Past experience is perhaps

the weakest gestaltprinciple. In conjunction

with any of the other

principles, the other

principle will dominate overthe past experience

principle.


40/68

FOCAL POINTS

“Elements with a point ofinterest, emphasis or

difference will capture andhold the viewer’sattention.”

This principle suggests

that our attention will bedrawn toward contrast,toward the element that isunlike the others in some

way. In the image below,your eye should be drawnto the square. It’s adifferent shape and color

from the other elements


41/68

Figure-Ground Relationship

Figure ground is a visual relationship

between foreground and background.

This is important to the perception ofimages, as the edges form the imagethat we see.


42/68

Three Distinct Types

• Simple Figure Ground

• Figure Ground Reversal

• Figure Ground Ambiguity


43/68

Simple Figure Ground

A simple figure ground is thecomposition (or diagram) ofwhat is perceived. A figureground can be anything with amain focus, but a diagrammatic

figure ground simplifiesperception. In architecture, thesite plan is often simplified toshow the relationships

otherwise not perceived, suchas the building's mass incomparison to itssurroundings.


44/68

Figure Ground Reversal

Figure ground reversal is theinversion of background and

foreground. This is often used in

logo designs and can

often ground an image. In a simplefigure ground the borders are

perceived as limitless, whereas

the figure ground reversal bounds

the image.


45/68

Figure Ground Ambiguity

Figure ground ambiguity is thevisual illusion with two alternate

viewpoints. This is similar to

figure ground reversal, but the

alternate image creates atotally different perception. In

this version of figure ground, a

pair of objects share a similar

edge.


46/68

Space as a Design Element

Space can be used to both separate and connectelements in a design. Wider spaces separate elementsfrom each other and narrower spaces connect elementsto reveal relationships between them. Overlapping

elements maximizes their relationship.By controlling and shaping space in our designs, wecreate rhythm, direction, and motion. We create design flow through our use of space.

Whitespace does three main things in a design.• Creates groupings of elements

• Creates emphasis and hierarchy

• Improves legibility


47/68

Space can be used to convey a variety of

meanings, some of which include

• Quality – wealth, luxury

• Solitude – abandonment, loneliness

• Cleanliness – bleached, washed

• Purity – unsullied, unadulterated

• Spirituality – sacredness, connection to something

greater

• Openness – distance, infinity• Calmness – placidity, inaction


48/68

How to Use Space in Design

Space in web design can be divided into to types.

Micro whitespace – is the space within elements,such as the margins surrounding text and the leading

between lines of text or the spaces between the

individual characters.

Macro whitespace – is the space between major

elements in your design. These spaces tend to be

larger and are usually immediately apparent


49/68

Micro Whitespace

Micro whitespace is concerned with spaces between

smaller elements. It’s space between list items and

space between an image and its caption. It also

includes the space between elements inside a larger

element.


50/68

Macro Whitespace

Boxes (borders and backgrounds) are often used to

enclose and connect some elements while separating

them from other elements or groups of elements.

Boxes can be overkill.


51/68

Connecting and separating elements

through contrast and similarity

• Size

• Shape

• Color• Value

• Texture

• Position

• Orientation


52/68

CONTRAST AND GESTALT

Figure-ground

One of the first things we do when viewing acomposition is to determine what’s the figure andwhat’s the background. This relationship helps to setcontext for everything else in the composition. Figureand ground need to contrast with each other or elsethe viewer will have difficulty determining which iswhich.

Focal points

These are elements of attraction and interest.They’re designed to look different from theirimmediate surroundings. The contrast is what helpsthem stand out and draw attention. The element thatstands out the most in the composition is thedominant element. Elements that stand out in acomposition but to a lesser degree are focal points.

.


53/68

SIMILARITY AND GESTALT

•closure

different elements that may be part of a similar whole

•symmetry and order

mirrored elements that appear to belong together

•uniform connectedness

similarity through visually connecting elements

•common regions

similar items enclosed together


54/68

SIMILARITY AND GESTALT

•proximity

similarity through enclosures in space

•continuation

similarity through rhythms in space

•common fate

similarity through movement

•parallelism

similarity through orientation


55/68

Visual Weight

Physical weight is a measure of the force that gravity

exerts on an object, but two-dimensional objects (such

as elements on a web page) don’t have mass and,

therefore, don’t have any physical weight. Visual

weight is a measure of the force that an element exerts

to attract the eye. Two-dimensional objects can attract

attention. The more an element attracts the eye, the

greater its visual weight.


56/68

HOW DO YOU MEASURE VISUAL

WEIGHT?

Develop an eye and then trust it. The areas of a

composition that attract our eye are those that have

greater visual weight. Learn to trust our eye.

Let’s start with the primitive features that I mentioned in the


57/68

Let s start with the primitive features that I mentioned in thelast post: size, color, value, position, texture, shape andorientation.

Size Large elements have more visual weight than small elements.

Color Warm colors advance into the foreground and tend to weighmore than cool colors, which recede into the background. Red

is considered the heaviest color and yellow the lightest.

Value Dark elements have more visual weight than light elements.

Position Elements located higher in the composition are perceived toweigh more than elements located lower in the composition.The further from the center or dominant area of a composition,the greater the visual weight an element will carry

Texture


58/68

Texture

Textured elements appear heavier than non-textured

objects. Texture makes an element appear three-

dimensional, which gives the appearance of mass andphysical weight.

Shape

Objects with a regular shape appear heavier than objectswith an irregular shape. The irregularity gives the

impression that mass has been removed from a regular

shape.

Orientation

Vertical objects appear heavier than horizontal objects.

Diagonal elements carry the most weight.

WE don’t have to limit yourself to the primitive features above


59/68

WE don t have to limit yourself to the primitive features above.we can use additional characteristics to control visual weight.

Density

Packing more elements into a given space increases the visualweight of the space. The viewer will perceive a larger or darkercombined element as opposed to several smaller and lighterelements.

Local white space White space appears to have no visual weight because it’sseen as empty. Any object placed within that space will seemheavier because of the space around it.

Intrinsic interest Some things are more interesting than others. The morecomplex or intricate an element, the more interest it will drawand the more it will attract the eye.

Depth


60/68

Depth

A larger depth of field gives an element in focus increased

visual weight, likely due to the contrast between the focus

and unfocused areas.

Saturation

Saturated colors appear heavier than desaturated colors.

Perceived physical weight

We know that a house weighs more than a shoe. An

image of a house will weigh more visually than an image

of a shoe, because we expect the house to weigh more.


61/68

VISUAL WEIGHT AND GESTALT

Figure-ground

Visual weights can be used to separate the two bygiving the figure more weight than the background.

Proximity

The space between elements leads to differentamounts of local white space and differentdensities of the objects within the space.


62/68

VISUAL WEIGHT AND GESTALT

Similarity and contrast

We can use visual weight to signal either. Contrast will leadto greater visual weight in the contrasting element. Elements

with similar visual weight will naturally exhibit similarity.

Focal point

Points of attraction in a composition are focal points, and

they carry more visual weight than other elements.

Past experience

The viewer’s experience will contribute to how much intrinsicinterest they think an element holds.


63/68

Visual Direction

If visual weight is about attracting the eye to a

particular location, then visual direction is about

leading the eye to the next location. Visualdirection is the perceived direction of visual

forces. Think of it as the direction you would

expect an element to move if it were in motion.

Although fewer characteristics are at our disposal than


64/68

Although fewer characteristics are at our disposal thanwith weight.

Shape of element

An element’s shape might create an axis through it and

this axis can suggest a direction. The prime axis is

typically seen as running parallel to an element’s visualdirection.

Location of elements

Visual weight is a force that can appear to attract or repel

a neighboring element. This force will move in a direction

that connects both elements.

Subject matter of element


65/68

Subject matter of element

An arrow, a pointing finger, or the gaze of the eye all

suggest looking in a certain direction.

Movement

An element could literally move through our design, andits movement will have a direction.

Structural skeleton

Every composition has a structural skeleton, with forces

that naturally run along and through different axes. This

probably needs a little more explanation.


66/68

VISUAL DIRECTION AND GESTALT

Uniform connectedness

The lines connecting elements have direction. An

eye gaze creates an imaginary line between theeye and whatever the eye is gazing at.

Continuation

This principle relates to elements arranged along aline or curve, as though they are moving in thedirection of the line or curve.


67/68

VISUAL DIRECTION AND GESTALT

Common fate

Elements seen as having a common fate are those

that move or appear to move in the same direction.

Parallelism

In order for elements to be seen as parallel, their

internal axes (the same ones that impart direction)

must be established.


68/68

Presented By:

Shruti Gupta

W b M t

importance of principles of design

Documents