Design Principles for All the Designers

1. of Must to Know for Must to Know for All Designers All Designers www.admecindia.co.in A Workshop by Ravi Bhadauria at ADMEC Multimedia Institute A Workshop by Ravi Bhadauria at ADMEC Multimedia Institute

2. of A Presentation by: Ravi Bhadauria R ADMEC MULTIMEDIA INSTITUTE ADMEC MULTIMEDIA INSTITUTE Leader in Animation & Digital Media Education Leader in Animation & Digital Media Education ISO 9001 : 2015 CERTIFIED ISO 9001 : 2015 CERTIFIED www.admecindia.co.in www.admecindia.co.in | | www.graphic www.graphic- -design Phones: +91 Phones: +91- -9811 9811- -8181 8181- -22, +91 design- -institute.com institute.com 22, +91- -9911 9911- -7823 7823- -50 50

3. Preface & Acknowledgment Preface & Acknowledgment Dear Reader, Dear Reader, ADMEC Multimedia Institute is a growing institute which provides industry oriented training to the world at large. Being a multimedia institute we offer training for designing content for the advertising and publishing on various medias also. This presentation is one of the best presentations from our study material for our weekly workshops which ADMEC conducts every week at the center. We want to share this with the world so that everyone can take benefits from our efforts. This presentation contains all the points helpful in my lecture on “Design Principles for All the Designers” in the classroom whether they are graphic, web, animation, video editor, multimedia designer or from any other design discipline e.g. fashion, interior, architectural designing. We express thanks to many books and websites, specially Google for making it one of the best presentations of all the time. Thanks Ravi Bhadauria, Ravi Bhadauria, Instructor (Web and Visual Designing) Director ADMEC Multimedia Institute www.admecindia.co.in

4. What are you going to learn today? What are you going to learn today?  Why principles of design are very important?  Essential design elements  Common design principles  Gestalt design principles of visual perception  Space and the figure-ground relationship  Use of Contrast and Similarity in designs  Visual weight and visual direction  Projects www.admecindia.co.in

5. The Design Principles are proven concepts useful to arrange the structural elements of a design. www.admecindia.co.in

6. 1. 1. Elements Elements of Design of Design Design elements are the basic units of a painting, drawing, design or other visual piece and include:  Line  Shape  Direction  Size  Texture  Value  Space  Text www.admecindia.co.in

7. Elements of Design Elements of Design

8. Elements of Design Elements of Design

9. Elements of Design Elements of Design

10. 2. 2. Principles Principles of Design of Design The most intrinsic principles are:  Balance  Gradation  Proportion  Rhythm  Emphasis  Unity or Proximity  Repetition  Contrast  Alignment www.admecindia.co.in

11. Principles of Design Principles of Design The descriptive principles of how we visually perceive objects begins with the principles of gestalt gestalt, because many of the design principles we follow arise out of gestalt theory gestalt theory. www.admecindia.co.in

12. Principles of Design Principles of Design Gestalt psychology is a school of thought objects and scenes can be observed in their simplest forms objects and scenes can be observed in their simplest forms. Sometimes referred to as the 'Law of 'Law of Simplicity’, proposes that the whole of an object whole of an object or scene is more important than its individual parts important than its individual parts. school of thought that believes all Simplicity’, the theory more Gestalt psychology proposes a unique perspective on human perception. According to Gestalt psychologists, we don't just see the world, we actively interpret what we see, depending on what we are expecting to see. www.admecindia.co.in

13. Principles of Design Principles of Design A famous French author, Anaïs psychologist, framed that idea in an interesting way: Anaïs Nin Nin, who was not a 'We 'We do not see the world as it is; we see it as we do not see the world as it is; we see it as we are.' are.' Gestalt psychology encourages people to 'think outside of the box' the box' and ‘look look for for patterns patterns’. 'think outside of www.admecindia.co.in

14. The gestalt principles are about perception and what is visually communicated by objects. www.admecindia.co.in

15. 3. 3. Gestalt Gestalt Theory Theory The Key Ideas Behind Gestalt Theory “The whole is other than the sum of the parts.” There are several key ideas behind gestalt.  Emergence (the whole is identified before the parts)  Reification (our mind fills in the gaps)  Multi-stability (the mind seeks to avoid uncertainty)  Invariance (we’re good at recognizing similarities and differences)

16. Gestalt Theory Gestalt Theory Emergence ( Emergence (the whole is identified before the parts identified before the parts) ) the whole is Emergence is the process of forming complex patterns from simple rules. When designing, keep in mind that people will identify elements first by their general form. A simple well defined object will communicate more quickly than a detailed object with a hard to recognize contour. www.admecindia.co.in

17. Gestalt Theory Gestalt Theory Emergence (the whole is identified before the parts) www.admecindia.co.in

18. Gestalt Theory Gestalt Theory Reification ( Reification (our mind fills in the gaps our mind fills in the gaps) ) Reification is an aspect of perception in which the object as perceived contains more spatial information than what is actually present. www.admecindia.co.in

19. Gestalt Theory Gestalt Theory Multi Multi- -stability ( stability (the mind seeks to the mind seeks to avoid uncertainty avoid uncertainty) ) Multi-stability is the tendency of ambiguous perceptual experiences to move unstably back and forth between alternative interpretations. www.admecindia.co.in

20. Gestalt Theory Gestalt Theory 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. www.admecindia.co.in

21. Gestalt Theory Gestalt Theory Invariance

22. 4. 4. Gestalt Gestalt Principles Principles 8. Continuation 1. Law of Simplicity (Law of Prägnanz) 9. Common Fate 2. Closure 10. Parallelism 3. Symmetry and order 11. Similarity 4. Figure/Ground 12. Focal Point 5. Uniform Connectedness 13. Past Experiences 6. Common Regions 7. Proximity

23. Gestalt Principles Gestalt Principles Law of Law of Prägnanz Prägnanz ( (Good Figure, Law of Simplicity Good Figure, Law of Simplicity) ) “People will perceive and interpret ambiguous or complex images as the simplest form(s) possible.”

24. Gestalt Principles Gestalt Principles Law of Law of Prägnanz Prägnanz

25. Gestalt Principles Gestalt Principles Law of Prägnanz Law of Prägnanz

26. Gestalt Principles Gestalt Principles Closure Closure “When seeing a complex arrangement of elements, we tend to look for a single, recognizable pattern.”

27. Gestalt Principles Gestalt Principles Symmetry and Order Symmetry and Order “People tend to perceive objects as symmetrical shapes that form around their center.”

28. Gestalt Principles Gestalt Principles Figure/ Ground Figure/ Ground “Elements are perceived as either figure (the element in focus) or ground (the background on which the figure rests).”

29. Gestalt Principles Gestalt Principles Uniform Connectedness Uniform Connectedness “Elements that are visually connected are perceived as more related than elements with no connection.”

30. Gestalt Principles Gestalt Principles Common Regions Common Regions “Elements are perceived as part of a group if they are located within the same closed region.”

31. Gestalt Principles Gestalt Principles Proximity Proximity “Objects that are closer together are perceived as more related than objects that are further apart.”

32. Gestalt Principles Gestalt Principles Continuation Continuation “Elements arranged on a line or curve are perceived as more related than elements not on the line or curve.”

33. Gestalt Principles Gestalt Principles Common Fate (Synchrony) Common Fate (Synchrony) “Elements that move in the same direction are perceived as more related than elements that are stationary or that move in different directions.”

34. Gestalt Principles Gestalt Principles Parallelism Parallelism “Elements that are parallel to each other are seen as more related than elements not parallel to each other.”

35. Gestalt Principles Gestalt Principles Similarity Similarity “Elements that are visually connected are perceived as more related than elements with no connection.”

36. Gestalt Principles Gestalt Principles Focal Points Focal Points “Elements with a point of interest, emphasis or difference will capture and hold the viewer’s attention.”

37. Gestalt Principles Gestalt Principles Past Experiences Past Experiences “Elements tend to be perceived according to an observer’s past experience.”

38. 5. 5. Space Space and Figure and Figure- -Ground Relationship Ground Relationship If you see graphic design as a process of arranging shapes on a canvas, then you’re only seeing half of what you work with. The negative space of the canvas is just as important of the canvas is just as important as the positive elements that we place on the canvas. negative space Design is an arrangement of both shapes and space. To work more effectively with space, you must first become aware of it first become aware of it and learn to see it see it — learn to see the shapes that space forms and how space communicates. learn to “White space is to be regarded as an active element, not a passive “White space is to be regarded as an active element, not a passive background.” background.”

39. Space and Figure Space and Figure- -Ground Relationship Ground Relationship

40. Space and Figure Space and Figure- -Ground Relationship Ground Relationship What is the depth? What is the depth?

41. Space and Figure Space and Figure- -Ground Relationship Ground Relationship What is the depth? What is the depth?

42. Space and Figure Space and Figure- -Ground Relationship Ground Relationship There are three types of figure There are three types of figure- -ground relationships: ground relationships:  Stable (down left)  Reversible (down center)  Ambiguous (down right)

43. Space and Figure Space and Figure- -Ground Relationship Ground Relationship Figure-ground is not the only gestalt principle in which space plays a prominent role. Two others are these: Proximity Proximity  Closure Closure 

44. 7. 7. Space Space As A Design Element As A Design Element Space can do the following Space can do the following: establish contrast, emphasis, and hierarchy; generate drama and tension; provide visual rest between groups of elements.    One of the more important functions of space is to improve readability and legibility and legibility. Macro-space makes text more inviting. Micro-space makes it more legible. Micro Micro- -space space Macro-space improve readability  

45. Space As A Design Element Space As A Design Element Space can also convey attributes other than quality, such as: sophistication simplicity luxury cleanliness solitude Openness       Don’t be afraid to use space Don’t be afraid to use space. View it as an important design element under your control.

46. 8. 8. Connecting Connecting and Separating Elements and Separating Elements Through Contrast & Similarity Through Contrast & Similarity A few characteristics, however, are most often used to show similarity and contrast. In no particular order, these are: size  shape  color  value  texture  position  orientation 

47. Connecting and Separating Elements Connecting and Separating Elements Through Contrast & Similarity Through Contrast & Similarity Contrast and Gestalt Contrast and Gestalt  Figure-ground  Focal points

48. Connecting and Separating Elements Connecting and Separating Elements Through Contrast & Similarity Through Contrast & Similarity Similarity and Gestalt Similarity and Gestalt  Closure  symmetry and order  uniform connectedness  common regions  Proximity  Continuation  common fate  parallelism

49. 9. 9. Visual Visual Weight and Direction Weight and Direction Every element in design have a visual force that attracts the attention of the readers. The greater the force, the more the user is attracted. These forces also appear to act on other elements, imparting a visual direction to their potential movement and suggesting where you should look next. We refer to this force as visual weight visual forces as visual direction visual direction. Both are important concepts to understand if you want to create hierarchy your composition. visual weight and to the perceived direction of hierarchy, flow flow, rhythm rhythm and balance balance in

50. Visual Weight and Direction Visual Weight and Direction Visual Weight Visual Weight