Principles of DesignPrinciples of Design

The principles use the elements of design to create a composition.

Elements of DesignElements of Design

The building blocks of design.

BalanceBalance

Balance is the act of comparing or estimating two things, one against the other, and the

contrast between:

BalanceBalanceBalance is a feeling of visual equality in

shape, form, value, color, etc. Balance can be symmetrical or evenly balanced or asymmetrical and un-evenly balanced. Objects, values, colors, textures, shapes, forms, etc., can be used in creating a balance in a composition.

BalanceBalance

◦Empty space (white space) and filled space◦Text and images◦Color and no colors and different colors◦Textures against flat colors

Balance in compositionBalance in composition

There are three different types of balance when using color, shape, and position:◦Symmetry◦Asymmetry◦Radial symmetry

Examples of radial balanceExamples of radial balance

BalanceBalance

What is it and how is it achieved on a flat surface? To answer this question, we must first think of a three dimensional work of art.

If the pieces were not physically balanced or anchored, they would fall over.

BalanceBalance

For images created on a flat surface such as a canvas the same principle of balance applies.

However, instead of having actual or physical balance, the artist needs to create an illusion of balance, referred to as visual balance.

BalanceBalance

In visual balance, each area of the painting suggests a certain visual weight, a certain degree of lightness or heaviness.

For example, light colors appear lighter in weight than dark colors.

Brilliant colors visually weigh more than neutral colors in the same areas.

BalanceBalance

Warm colors, such as yellow tend to expand an area in size, whereas cool colors like blue tend to contract an area.

And transparent areas seem to visually weigh less than opaque areas.

BalanceBalance

Balancing the components of a painting can best be illustrated by weighing scales or a child's playground see-saw.

Visually the scale can be pictured as an apparatus for weighing or a see-saw which has a beam poised on a central pivot or fulcrum.

BalanceBalance

In using this scale or see-saw, balance is not achieved through an actual physical weighing process, but through visual judgment on the part of the observer.

In this respect, visual balance refers to a "felt" optical equilibrium between all parts of the painting.

To balance a composition is to distribute its parts in such a way that the viewer is satisfied that the piece is not about to pull itself over. When components are balanced left and right of a central axis they are balanced horizontally. When they are balanced above and below they are said to be balanced vertically. And when components are distributed around the center point, or spring out from a central line, this is referred to as radial balance.

There are two forms of visual balance. These are symmetrical balance, also known as symmetry or formal balance, and asymmetrical balance, also known as asymmetry or informal balance.

Symmetrical balanceSymmetrical balanceSymmetrical balance is when the weight is

equally distributed on both sides of the central axis.

Symmetry is the simplest and most obvious type of balance. It creates a secure, safe feeling and a sense of solidity.

Symmetrical balance can be achieved in two ways.

One way is by "pure symmetry," and the other way is by "approximate symmetry."

Symmetrical balanceSymmetrical balanceIn pure symmetry identical parts are

equally distributed on either side of the central axis in mirror-like repetition.

A good example of pure symmetry is the human face. It is the same on both the right side and the left side of the nose.

Pure symmetry has its place in certain art works, however, because of its identical repetition, pure symmetry for a composition can easily become too monotonous and uninteresting to look at.

Symmetrical balanceSymmetrical balanceApproximate symmetry on the other

hand has greater appeal and interest for the viewer.

The two sides of a composition are varied and are more interesting to view.

Even though they are varied somewhat, they are still similar enough to make their repetitious relationship symmetrically balanced.

Symmetrical or formal Symmetrical or formal balancebalance

You can usually identify at least one of three lines of symmetry.◦Horizontal◦Vertical◦Diagonal

Symmetrical balanceSymmetrical balance

Examples of symmetrical balanceExamples of symmetrical balance

Examples of asymmetrical balanceExamples of asymmetrical balance

Asymmetrical Balance Asymmetrical Balance

The use of asymmetry in design allows for more freedom of creativity, because there are unlimited arrangements that may be devised using asymmetrical balance.

Asymmetrical BalanceAsymmetrical Balance

The way to use asymmetry is by balancing two or more unequal components on either side of the fulcrum by varying their size, value or distance from the center.

Asymmetrical Balance Asymmetrical Balance

Asymmetrical balance is when both sides of the central axis are not identical, yet appear to leave the same visual weight.

It is a "felt" equilibrium or balance between the parts of a composition rather than actual.

If the artist can feel, judge or estimate the various elements and visual weight, this should allow him/her to balance them as a whole.

As a result, a more interesting composition will occur in the work.

Examples of The Effective Use Examples of The Effective Use Of BalanceOf Balance

This flower resting a tea cup on the left is a good example of radial balance. The pedals radiate out from a central point.

On this side radial balance is created by the flowers which spring out of the center of the vase.

Horizontal BalanceHorizontal Balance

Vertical BalanceVertical Balance

Do you see the vertical balance suggested in the painting on the left? Look at where the foreground ends and you will quickly see how it is balanced by the building in the background

This painting on the right is a little more obvious in it's vertical balance. Notice how the three objects in the top part of the painting balance the apparent heaviness of the one object (the plate of pancakes) in the lower part of the painting.

ContrastContrast

Contrast is the juxtaposition of opposing elements

ContrastContrast

“The difference in brightness between the light and dark areas of a picture, such as a photograph or

video image ”

“The use of opposing elements, such as colors, forms, or lines, in

proximity to produce an intensified

effect in a work of art “

Example of Nature ContrastExample of Nature Contrast

ContrastContrast

Contrast in art and design occurs when two related elements are different.

The greater the difference the greater the contrast. Contrast adds variety to the total design and creates unity.

It is what draws the viewer's eye into the painting and helps to guide the viewer around the art piece.

ContrastContrast

Contrast in art also adds visual interest. Most designs require a certain amount of contrast. Too much similarity of the components in any design becomes monotonous.

In other words the use of too little contrast can cause a design to be bland and uninteresting.

On the other hand too much contract can be confusing. Just the right amount of contrast engages the viewer's participation in comparing various components of the work.

ContrastContrast

For instance, the viewer will compare light and dark areas of a painting, wide lines and thin lines, light-weight forms and heavy forms, filled spaces and unfilled spaces, etc.

The key to working with contrast is to make sure the differences are obvious. The most common ways of creating contrast are by creating differences in:

ContrastContrast

The key to working with contrast is to make sure the differences are obvious. The most common ways of creating contrast are by creating differences in:

• size• value• color• type

• texture• shape• alignment• direction

• movement

ContrastContrast

Contrast in the painting on the right is much more subtle. Contrast this painting is in texture. Notice the hard texture on the fence as contrasted with the softness of the butterflies and the kittens. Also a contrast exists between the soil and the foliage.

In the painting on the left is another example

of contrast between light and darkness.

ContrastContrast

On the right a contrast exists between the lights and darks. Also notice the contrast of the roundness of the objects in the foreground against the flatness of the background.

The contrast in the illustration to the left is quite obvious. Notice the contrast of the light background (wall) with dark foreground (table cloth) and the contrast of the dark shadows on the tea pot and cup against the wall and with the lights of the same objects against a dark window.

There is also a contrast of thin and thick lines in the napkin, straight and curved lines, and don't miss the dark steam as contrasted with the light clouds off in the distance

EmphasisEmphasis

Emphasis is used to make certain parts of their artwork stand out and grab your attention. The center of interest or focal point is the place a work draws your eye to first.

EmphasisEmphasisEmphasis: To

express with particular stress or force.

What message is stressed here?

EmphasisEmphasisEmphasis is the stressing of a particular

area of focus rather than the presentation of a maze of details of equal importance. When a composition has no emphasis nothing stands out. However the effective use of emphasis calls attention to important areas of the painting. By placing emphasis on certain areas of the composition, an artist creates elements of interest which causes the eye to return to again and again.

 

EmphasisEmphasisOne way of achieving emphasis is by creating

center of interest, a.k.a. a focal point. A focal point is an area where the eye tends

to center. It is the focus of the viewer's attention.

A focal point is created by making one area of element of the painting dominant, or most important visually with all other areas contributing but subordinate.

is canceled out.

EmphasisEmphasis

The focal point may be the largest, brightest, darkest, or most complex part of the whole, or it may get special attention because it stands out for some other reason.

No more than one component should vie for primary attention. Where several components get equal billing, emphasis

EmphasisEmphasis

The second way to create emphasis is by contrasting the primary element with its subordinates, or emphasis can be created by a sudden change in direction, size, shape, texture, color, tone or line.

EmphasisEmphasis

No matter what element is chosen for emphasis it should never demand all the attention.

Emphasis is necessary, but a good composition is one in which all the elements work together for a unifying effect.

In this painting it is easy to see how the artist used light to emphasize the chef. He stands out as the main focal point of the entire the painting.  

The artist created emphasis in this painting through the use of color. By painting the cowboy's shirt red he was able to create a center of interest.

ProportionProportion

Proportion describes the size, location or

amount of one thing compared to another.

ProportionProportion

Proportion in art is the comparative harmonious relationship between two or more elements in a composition with respect to size, color, quantity, degree, setting, etc.; i.e. ratio.

A relationship is created when two or more elements are put together in a painting.

ProportionProportion

This relationship is said to be harmonious when a correct or desirable relationship exists between the elements.

This refers to the correct sizing and distribution of an element or object which creates good proportion.

Good proportion adds harmony and symmetry or balance among the parts of a design as a whole.

ProportionProportion

When the principle of proportion is applied to a work of art it is usually in the relationship of size.

That is, the size of one element of the composition as compared to the size of another related element.

ProportionProportionIn the instance of a relationship of size

a comparison is made between the:◦height, width and depth of one element to

that of another ◦size of one area to the size of another area ◦size of one element to the size of another

element ◦amount of space between two or more

elements

ProportionProportionProportion is usually not even noticed

until something is out of proportion. When the relative size of two elements being compared seems wrong or out of balance it is said to be "out of proportion".

For example if a person has a head larger than their entire body, then we would say that they were out of proportion.

Good ProportionGood Proportion

There are several ways for achieving good proportion:

Place together elements which are similar in character or have some feature in common.

Create major and minor areas in the design, as equal parts can quickly become monotonous and boring. However, the differences in size must not be so great as to make the parts appear unrelated and therefore, out of harmony with each other.

Good ProportionGood Proportion

Arrangement of space should be in such a way that the eye does not perceive a standard mathematical relationship. Dividing up the composition in halves, quarters and thirds should be avoided. A subtle relationship creates a more dynamic design.

Create harmony in the art work. Harmony is an agreement between the shapes that stresses the similarities of all parts. In other words, the shape of one part should "fit" the shape of the adjoining elements. Shapes should "fit" properly in their positions and spaces.

There is a real sense of proportion in each of the two paintings above. Without the effective use of the principle of proportion you would not experience the majesty of the mountain cliffs in the painting on the left or the towering height of the trees in the painting on the right.

In the two paintings above proportion emphasizes the distance of the ship and the vastness of the ball room.

PatternPattern

Pattern is created by repeating an element (line,

shape or color) over and over again.

GradationGradation

Gradation of size and direction produce linear perspective. Gradation of color from warm to cool and tone from dark to

light produce aerial perspective. Gradation can add interest and movement to a shape. A gradation from dark

to light will cause the eye to move along a shape.

Graphic design Graphic design principlesprinciples

Graphic design principles are ways in which elements are used together.

Movement Balance

Emphasis Unity

MOVEMENTMOVEMENT

Movement is the use of lines, color, and repetition to create the illusion of motion.

MovementMovement

Curved forms or lines Repetition of geometric forms Fuzzy lines or outlines

AlignmentAlignment

“Nothing should be placed on the page arbitrarily. Every item should have a visual connection with

something else on the page.”

AlignmentAlignment

No element has any connection to the others.

Elements aligned

AlignmentAlignment

Here’s a pretty standard layout, centered.Here’s a pretty standard layout, centered.

AlignmentAlignment

But look how much crisper it looks with alignment, plus some thought about proximity.But look how much crisper it looks with alignment, plus some thought about proximity.

AlignmentAlignment

Trapped white space pushes elements apart

Does the text go with the cartoon, or are they independent chunks of information? The ragged right type seems to separate the elements.

Does the text go with the cartoon, or are they independent chunks of information? The ragged right type seems to separate the elements.

AlignmentAlignment “Find a strong line and use it.” Flush right type makes use of image’s border.

Change the alignment, and it becomes obvious that they go together. Note the strong lines Robin Williams uses in this example to get alignment. Flush right type, strong vertical line on the cartoon.

Change the alignment, and it becomes obvious that they go together. Note the strong lines Robin Williams uses in this example to get alignment. Flush right type, strong vertical line on the cartoon.

AlignmentAlignment “Find a strong line and use it.” Flush right type makes use of image’s border.

Change the alignment, and it becomes obvious that they go together. Note the strong lines Robin Williams uses in this example to get alignment. Flush right type, strong vertical line on the cartoon.

Change the alignment, and it becomes obvious that they go together. Note the strong lines Robin Williams uses in this example to get alignment. Flush right type, strong vertical line on the cartoon.

RepetitionRepetition

Repeat some aspect of the design throughout the entire piece.”

RepetitionRepetition

When you get to the end of the information, does your eye just wander off the card?

Here we go with the band again. Not a bad card, right? But note the question here: Now look at the change ...

Here we go with the band again. Not a bad card, right? But note the question here: Now look at the change ...

RepetitionRepetition

Repeated bold type encourages reader to “bounce” between the two dominant typefaces

Boldfacing that number, so it pairs with the headline, really makes it jump, and it hold your eye on the information.

Boldfacing that number, so it pairs with the headline, really makes it jump, and it hold your eye on the information.

ProximityProximity“Proximity, or closeness,

implies a relationship.”

ProximityProximity

Key idea:

“Group related items together”

ProximityProximitySolution:Contents are

groupedContrast is added

with headlines/rules

ProximityProximity

Problem:

Reader’s eye Reader’s eye must bounce all must bounce all around card to around card to obtain informationobtain information

ProximityProximity

Solution:

Group together related elements

ProximityProximity

Problems:

The two items in top left are in close proximity but not related

Gaps separate related items

ProximityProximity

Solution:Regroup informationChange to caps/lowercaseUse squared edgesLet image break out of box

ProximityProximity

Problem:Everything is close

to everything else

ScaleScale

Dimensional element's defined by other elements of design-size relative to other art,

its surroundings, or in relation to human size. 

ScaleScale

Unusual or even unexpected scale can

certainly be used as a attention  grabber.Another consideration for size and scale is

to look at the elements within the creation itself.

.

ScaleScaleScale can attract in different ways.  It

can be use to draw attention to the unexpected or exaggerated - this is often the case in advertising.

Changing the natural scale is certainly not unusual.  It is frequently used in religious painting

ScaleScaleA scale model is a physical model, a

representation or copy of an object that is larger or smaller than the actual size of the object, which seeks to maintain the relative proportions (the scale factor) of the physical size of the original object.

ScaleScale

ScaleScale

ScaleScale

ScaleScale

Very often the scale model is smaller than the original and used as a guide to making the object in full size. Scale models are built or collected for many reasons.

VarietyVariety

A way of accomplishing this is to establish an approach which involves

theme and variations-repeating the same image, but in different sizes,

colors, values and shapes.

VarietyVariety

By varying the components of a visual design, the artist creates interest and avoids monotony.

HarmonyHarmony

Examples of the effective use of Harmony

It is easy to observe harmony in action in

nature. Notice how the individual wedges "fit"

the orange in the painting above.

In the coat of arms above we

observe how the different elements

"fit" together perfectly inside each other to

create harmony.

Realistic, Stylized, Realistic, Stylized, AbstractAbstract

The less a work of art resembles something in the physical world, the more stylized it is.

Realistic, Stylized, AbstractRealistic, Stylized, Abstract

One of the fundamental properties of visual art is the degree to which it is realistic or

stylized (abstract).

realism        ◄—————————————————-------------►       stylization

A significantly stylized statue; note the rigid facial expression, stiff posture, and patterned hair texture.A very realistic statue. An extremely stylized

sculpture

One of the fundamental properties of visual art is the degree to which it is realistic or stylized (abstract). The less a work of art resembles something in the physical world, the more stylized it is.

A completely stylized painting

A significantly stylized painting;

note the simplified/distorted shapes and colors.

A very realistic painting

realism        ◄—————————————————-------------►       stylization

Art that resembles nothing in the physical world is called abstract, while art that portrays something recognizable (however distorted) is called representational.

One can also distinguish narrative art (which tells a story) and decorative art (which doesn't). A decorative work can be abstract or representational. A story (in the usual sense), however, can only be told through representational art.

This representational art

is narrative: the figures are involved in an action/story.

This representational art is decorative: the octopus is not doing anything, it is simply

"there".

Abstract art is inherently decorative

Rule of ThirdsRule of Thirds

The Rule of Thirds is based on the fact that the human eye is naturally drawn to a point about two-thirds up a page.

Crop your photo so that the main subjects are located around one of the

intersection points rather than in the center of the image:

More on RulesMore on Rulesrules of compositionthe rule of thirds golden section/rectangle. harmony balance discord drama.

Rule of ThirdsRule of Thirds

Your landscapes will be optimally pleasing to the eye if you apply the Rule of Thirds when you place your horizon line.

If the area of interest is land or water, the horizon line will usually be two-thirds up from the bottom.

Alternately, if the sky is the area of emphasis, the horizon line may be one-third up from the bottom, leaving the sky to take up the top two-thirds of the picture:

Rule of ThirdsRule of Thirds

It has been found that certain points in a picture's composition automatically attract the viewer's attention.

Similarly, many natural or man-made objects and scenes with certain proportions (whether by chance or by design) automatically please us.

Golden Section ruleGolden Section rule

Leonardo da Vinci investigated the principle that underlies our notions of beauty and harmony and called it the Golden Section.

Long before Leonardo, however, Babylonian, Egyptian, and ancient Greek masters also applied the Golden Section proportion in architecture and art.

Golden Section ruleGolden Section rule

To get a clearer sense of these special "Golden" composition points, imagine a picture divided into nine unequal parts with four lines.

Each line is drawn so that the width of the resulting small part of the image relates to that of the big part exactly as the width of the whole image relates to the width of the big part.

Points where the lines intersect are the "golden" points of the picture:

Diagonal ruleDiagonal rule

One side of the picture is divided into two, and then each half is divided into three parts.

The adjacent side is divided so that the lines connecting the resulting points form a diagonal frame.

According to the Diagonal Rule, important elements of the picture should be placed along these diagonals:

Linear elements, such as roads, waterways, and fences placed diagonally, are

generally perceived as more dynamic than horizontally placed ones:

CompositionCompositionThe combining of distinct elements to form a

whole

Don’t Be a Wimp Don’t Be a Wimp (in your (in your designs)designs)

Use ColorPlace information in frames and boxes (remove the lines)

Hierarchy, Hierarchy, HierarchyUse Clip Art to add to your materials

Make it FUN for you and your reader!

Contrast, Repetition, Contrast, Repetition, Alignment, and ProximityAlignment, and Proximity

Solution:

Contrast

Repetition

Alignment

Proximity

Here is an ad with all four principles being applied. How are they being used here? Here is an ad with all four principles being applied. How are they being used here?

SummarySummaryThe basis of good graphic design is use

of design elements and their thoughtful application in the form of design principles.

Clearly identify what you are trying to accomplish — use design to convey your message.

Brainstorm alternatives.