principles of design the principles use the elements of design to create a composition
TRANSCRIPT
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.