1.
Design Principles - Kabir Malkani* This presentation has been compiled from references available from the Internet. This is meant purely for educational purposes and the presenter does not claim to hold any ownership whatsoever; of the content (textual or graphical) included in this presentation. The ownership and copyrights of the following content belong to the respective brands /agencies / artists showcased in this presentation.

2.
Topics CoveredO Through this presentation we will learn about the:O Elements of DesignO The 8 Principles of Design O Balance O Optical Center O Types of Balance O Rule of Thirds O Whitespace O Emphasis / Dominance O Contrast O Proximity O Rhythm, Repetition & Movement O Proportion O Harmony O Unity & Variety

3.
The Elements of Design Line Direction Shape Size Color Value / Tone TextureA combination of these elements of Design results in what we call a “Composition” in traditionalart.For graphic design there are additional elements such as “Type” & “Graphic” which is neededto create a “Composition” or “Artwork” – whether you are designing for Print, Web or Mobile.

4.
The 8 Principles of Design1. Balance2. Emphasis / Dominance3. Contrast4. Proximity5. Rhythm, Repetition & Movement6. Proportion7. Harmony8. Unity & Variety

5.
#1. Balance: Optical CenterO To understand the concept of Balance we must understand the term “Optical Center” Geometrically Centered Optically Centered

6.
#1. Balance: Types of Balance"Balance" can be achieved through either:O Symmetric balance - Equal weights in all directions from optical center. It produces a stable, calming effectO Asymmetric balance - Heavier elements near the center are balanced by lighter elements farther awayO Radial Balance - where all elements radiate out from a center point in a circular fashion. It is very easy to maintain a focal point in radial balance, since all the elements lead your eye toward the center.

7.
#1. Balance: SymmetryO Examples of “Symmetrical Balance”: Web Design Traditional Art 7

8.
#1. Balance: AsymmetryO Examples of “Asymmetrical Balance”: Web Design Photography 8

9.
#1. Balance: Radial SymmetryO Examples of “Radial Balance”: Architecture Photography 9

10.
#1. BalanceO Identify the types of “Balance” in the following designs:

11.
#1. BalanceO Identify the types of “Balance” in the following designs:

12.
#1. Balance: Rule of Thirds

13.
#1. Balance: Rule of Thirds Photography

14.
#1. Balance: Rule of Thirds Magazine Cover Design

15.
#1. Balance: WhitespaceO “Whitespace” or “Negative Space” is the space between elements in a composition. Macro whitespace Micro whitespace

16.
#1. Balance: WhitespaceNo whitespace Active WhitespacePassive Whitespace

17.
#1. Balance: WhitespaceO Not all “Whitespace” has to be white Elegance & Sophistication Not-so-elegant!

18.
#1. Balance: Whitespace Less Whitespace = Cheap More Whitespace = Luxury

19.
#1. Balance: WhitespaceO Using “Whitespace” to communicate more… Can you identify what the “Whitespace” communicates through the following logos?

20.
#1. Balance: WhitespaceO Examples of good web design using “Whitespace”

21.
#2. Emphasis / DominanceO “Emphasis / Dominance” resolves where the eye goes first when looking at a design.O There are three stages of “Emphasis / Dominance” within a composition: O Dominant: The object given the most visual weight, the element of primary emphasis that advances to the foreground in the composition. O Sub-dominant: The element of secondary emphasis, the elements in the middle ground of the composition. O Subordinate: The object given the least visual weight, the element of tertiary emphasis that recedes to the background of the composition.

22.
#2. Emphasis / DominanceO Examples of “Emphasis” in Advertising

23.
#2. Emphasis / DominanceO Identify the “Dominant”, “Sub-dominant” & “Subordinate” elements in this Advertisement

24.
#3. ContrastO “Contrast” occurs when two elements in a composition are different.O “Contrast” is NOT ONLY brought about using a stark difference in Color but other methods as well…For example: O it could be different colors between the text and the background color. O It could be a heading set in a big, bold, grungy font combined with a sans-serif font for the body text. O It could be a difference between a large graphic and a small graphic or O it could be a rough texture combined with a smooth texture.O Our eyes like contrast.O The important thing about “Contrast” is that the elements should be completely different. Not just a little bit different.

25.
#3. ContrastO If used well, Contrast is attractive to the eye. One of the main reasons to use contrast in your designs, whether for print or web, is to grab attention

26.
#3. ContrastO Contrast aids organization of information

27.
#3. ContrastO Contrast creates a focus

28.
#3. Contrast: Using ColorsLight colors appear larger than The same color looks clearerdark colors on the same against a dark background than itbackground. does against a light background. Any color appears more dynamic when it is displayed against a background of gray. * More details on idiosyncrasies of colors in Color Theory

29.
#3. ContrastO What is trying to be conveyed through the use of “Contrast” in the following designs?

30.
#4. ProximityO Proximity in design simply means that objects near each other are seen as a unit. Ad for a Sea-food Festival

31.
#4. ProximityO On your web page or your business card, related information is placed closely together and it forms a visual unit.

32.
#4. Proximity

33.
#4. Proximity: Beware of the “Gestalt”O When human beings look at a painting or a web page or any complex combination of elements, we see the whole before we see the individual parts that make up that whole. This idea of seeing the whole before the parts and even more the whole becoming more than the sum of its parts is Gestalt.

34.
#5. Rhythm, Repetition & MovementO The recurrence of a design element coupled with a certain order to the repetition provides continuity, flow and can be used to provide a sense of movement.Regular Rhythm Flowing Rhythm Progressive Rhythmoccurs when the intervals gives a sense of shows a sequence ofbetween the elements, movement, and is often forms through aand often the elements more organic in nature. progression of stepsthemselves, are similar insize or length.

35.
#5. Rhythm, Repetition & MovementO Repetition The design of these samples is unified because they repeat a branding element throughout the layout. This not only reinforces the brand, it also unifies the design layout. Product Design

36.
#5. Rhythm, Repetition & MovementO Rhythm helps move the viewers eye through a layout, directly or subtly. Rhythm is usually created by repeating an element and possibly changing it slightly. Rhythm helps deliver the message by controlling the viewers eye movement. It can also add "life" and interaction to an otherwise inanimate page layout. Print Advertisement

37.
#5. Rhythm, Repetition & MovementO Movement is created by using flow and direction. It is used to denote emotions such as restlessness, anger or happiness. The image below has a strong focus on dynamics though the use of line and light to bring a free spirited and energetic feel to the image of a dancer. The dynamics of the illustration makes it very easy to imagine the dancer springing to life and moving across the page. Illustration

38.
#5. Rhythm, Repetition & MovementO How would you identify “Rhythm, Repetition & Movement” in the painting below? Starry Night by Vincent Van Gogh

39.
#6. ProportionO “Proportion” is the relationship of one part to another or to the whole with respect to size and weight.

40.
#6. Proportion Wine Bottle and Cheese by John Zacchea

41.
#6. ProportionExaggerated Proportions can beused to convey a message /sentiment

42.
#7. HarmonyO “Harmony” is the visually satisfying effect of combining similar or related elements. O Adjacent colors O Similar shapes O Related textures

43.
#7. HarmonyO What are the elements that are giving the following designs a sense of “Harmony”?

44.
#8. Unity & VarietyO “Unity” and “Variety” are complementary concerns.O “Unity” is the appearance or condition of oneness. In design, unity describes the feeling that all the elements in a work belong together and make up a coherent and harmonious whole. When a work of art has unity, we feel that any change would diminish its quality.O “Variety”, on the other hand, provides diversity. Variety acts to counter unity. The sameness of too much unity is boring, and the diversity of uncontrolled variety is chaotic, but a balance between unity and variety creates life.

45.
#8. Unity & Variety CSS Stylesheets are a good example of how the principle of “Unity & Variety” dictates Web Design

46.
#8. Unity & VarietyO Identify in what way the following Design represents the principle of “Unity & Variety”? Book Cover

47.
#8. Unity & VarietyO Identify in what way the following Design represents the principle of “Unity & Variety”?Package Design: Package Design: EnergyTea Drink

48.
#8. Unity & Variety Glass Sculpture Ad Campaign

49.
#8. Unity & VarietyO Identify in what way the following Design represents the principle of “Unity & Variety”? Budweiser Beer Ad Campaign

50.
AssignmentO Create an artwork which represents at least 5 principles of Design discussed in this presentation O Choose from projects listed below: O Ad campaign (series of 3 or more Print Ads) O Package Design (at least a series of 3 different packaging samples) O Brochure Design (for a luxury or consumer brand) O Web Design (for a luxury or consumer brand)* Final Date for submitting this assignment is the 31st ofMarch 2013