Uploaded byRavi Bhadauria
Principles of Design
Ravi Bhadauria gave a presentation at ADMEC Multimedia Institute on design principles for digital designers. He discussed key elements of design like line, shape and color. He explained principles of gestalt theory and how it relates to visual perception. Some principles covered included proximity, similarity, continuity and past experiences. Bhadauria also discussed using techniques like contrast, repetition and alignment. He emphasized the importance of managing visual weight and direction to create hierarchy and flow. Students were assigned projects applying the principles to blogs, infographics or web templates.
More Related Content
Principles of Design
- 1. A Workshop byRavi Bhadauria at ADMEC Multimedia Institute A Must for All Digital Designers www.admecindia.co.in
- 2. ADMEC MULTIMEDIA INSTITUTE Leaderin Animation & Digital Media Education ISO 9001 : 2008 CERTIFIED www.admecindia.co.in | www.graphic-design-institute.com Phones: +91-9811-8181-22, +91-9911-7823-50 R A Presentation by: Ravi Bhadauria
- 3. Preface & Acknowledgment DearReader, 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 points helpful in my lecture on “Design Principles for Digital Designers” in the classroom. 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, Instructor (Web and Visual Designing) Director ADMEC Multimedia Institute http://www.admecindia.co.in
- 4. What are yougoing 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 direction ● Projects www.admecindia.co.in
- 5. www.admecindia.co.in The Design Principles areproven concepts useful to arrange the structural elements of a design.
- 6. Elements of Design Designelements 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.
- 8.
- 9.
- 11. Principles of Design Themost intrinsic principles are: ● Balance ● Gradation ● Proportion ● Rhythm ● Emphasis ● Unity or Proximity ● Repetition ● Contrast ● Alignment www.admecindia.co.in
- 12.
- 13. Principles of Design Thedescriptive principles of how we visually perceive objects begins with the principles of gestalt, because many of the design principles we follow arise out of gestalt theory. www.admecindia.co.in
- 14. www.admecindia.co.in The gestalt principles areabout perception and what is visually communicated by objects.
- 15. Gestalt Theory The KeyIdeas Behind Gestalt Theory 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) “The whole is other than the sum of the parts.”
- 16. Gestalt Theory Emergence (thewhole is identified before the parts) 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 Emergence (thewhole is identified before the parts) www.admecindia.co.in
- 18. Gestalt Theory Reification (ourmind 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 Multi-stability (themind seeks to 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 Invariance (we’regood 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.
- 22. Gestalt Principles 1. Lawof Simplicity (Law of Prägnanz) 2. Closure 3. Symmetry and order 4. Figure/Ground 5. Uniform Connectedness 6. Common Regions 7. Proximity 8. Continuation 9. Common Fate 10. Parallelism 11. Similarity 12. Focal Point 13. Past Experiences
- 23. Gestalt Principles Law ofPrägnanz (Good Figure, Law of Simplicity) “People will perceive and interpret ambiguous or complex images as the simplest form(s) possible.”
- 24. Gestalt Principles Law ofPrägnanz (Good Figure, Law of Simplicity)
- 25. Gestalt Principles Law ofPrägnanz (Good Figure, Law of Simplicity)
- 26. Gestalt Principles Closure “When seeinga complex arrangement of elements, we tend to look for a single, recognizable pattern.”
- 27. Gestalt Principles Symmetry andOrder “People tend to perceive objects as symmetrical shapes that form around their center.”
- 28. Gestalt Principles Figure/ Ground “Elementsare perceived as either figure (the element in focus) or ground (the background on which the figure rests).”
- 29. Gestalt Principles Uniform Connectedness “Elementsthat are visually connected are perceived as more related than elements with no connection.”
- 30. Gestalt Principles Common Regions “Elementsare perceived as part of a group if they are located within the same closed region.”
- 31. Gestalt Principles Proximity “Objects thatare closer together are perceived as more related than objects that are further apart.”
- 32. Gestalt Principles Continuation “Elements arrangedon a line or curve are perceived as more related than elements not on the line or curve.”
- 33. Gestalt Principles 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 Parallelism “Elements thatare parallel to each other are seen as more related than elements not parallel to each other.”
- 35. Gestalt Principles Similarity “Elements thatare visually connected are perceived as more related than elements with no connection.”
- 36. Gestalt Principles Focal Points “Elementswith a point of interest, emphasis or difference will capture and hold the viewer’s attention.”
- 37. Gestalt Principles Past Experiences “Elementstend to be perceived according to an observer’s past experience.”
- 38. Space and Figure-GroundRelationship 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 as the positive elements that we place on the canvas. Design is an arrangement of both shapes and space. To work more effectively with space, you must first become aware of it and learn to see it — learn to see the shapes that space forms and how space communicates. “White space is to be regarded as an active element, not a passive background.”
- 39. Space and Figure-GroundRelationship
- 40. Space and Figure-GroundRelationship What is the depth?
- 41. Space and Figure-GroundRelationship What is the depth?
- 42. Space and Figure-GroundRelationship There are three types of figure-ground relationships: ● Stable (down left) ● Reversible (down center) ● Ambiguous (down right)
- 43. Space and Figure-GroundRelationship Figure-ground is not the only gestalt principle in which space plays a prominent role. Two others are these: ● Proximity ● Closure
- 44. Space As ADesign Element 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. Macro-space makes text more inviting. Micro-space makes it more legible. ● Micro-space ● Macro-space
- 45. Space As ADesign Element Space can also convey attributes other than quality, such as: ● sophistication, ● simplicity, ● luxury, ● cleanliness, ● solitude, ● Openness. Design is ultimately an arrangement of shapes, and that includes the shapes formed by space. Don’t be afraid to use space. View it as an important design element under your control.
- 46. Connecting and SeparatingElements 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 SeparatingElements Through Contrast & Similarity Contrast and Gestalt ● Figure-ground ● Focal points
- 48. Connecting and SeparatingElements Through Contrast & Similarity Similarity and Gestalt ● Closure ● symmetry and order ● uniform connectedness ● common regions ● Proximity ● Continuation ● common fate ● parallelism
- 49. Visual Weight andDirection 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 and to the perceived direction of visual forces as visual direction. Both are important concepts to understand if you want to create hierarchy, flow, rhythm and balance in your composition.
- 50. Visual Weight andDirection Visual Weight
- 51. Visual Weight andDirection Visual Direction
- 52. Visual Weight andDirection How Do You Measure Visual Weight? Although there is no device to measure it yet you can use your experice to manage and judge it. Followings are few feature to manage it. ● Size ● Color ● Value ● Position ● Texture ● Shape ● Orientation
- 53. Visual Weight andDirection How Do You Measure Visual Weight? You don’t have to limit yourself to the primitive features above. You can use additional characteristics to control visual weight. ● Density ● Local white space ● Intrinsic interest ● Depth ● Saturation ● Perceived physical weight
- 54. Visual Weight andDirection Visual Weight and Gestalt ● Figure-ground ● Proximity ● Similarity and contrast ● Focal point ● Past experience
- 55. Visual Weight andDirection Visual Direction You can think of direction as real or imaginary lines that point from one element to another or that connect different elements. The lines don’t need to be visible. If visual weight is about attracting the eye to a particular location, then visual direction is about leading the eye to the next location. Some useful characteristics to manage the visual direction. ● Shape of elements ● Location of elements ● Subject matter of elements ● Movement ● Structural skeleton
- 56. Visual Weight andDirection Visual Direction and Gestalt ● Uniform connectedness ● Continuation ● Common fate ● Parallelism
- 57. Visual Weight andDirection The Overall Direction of a Composition One more concept of visual direction is that every composition will be seen to have a dominant direction, whether horizontal, vertical or diagonal. ● A horizontal direction makes the composition appear calm and stable. ● A vertical direction adds a sense of formality, alertness and balance. ● A diagonal direction suggests movement and action.
- 58. Projects of theclass ● Create a blog/ presentation/ infographic on the topics which you learnt today in my class and submit to me at info@admecindia.co.in in 7 days. ● Design a poster/ web template which follows all the design principles and processes which we discussed in last 8 classes of visual designing. Thanks ADMEC Multimedia Institute www.admecindia.co.in +91-9811-8181-22, +91-9911-7823-50
- 60. Helpline 1: +919811-8181-22 Helpline 2: +91 9911-7823-50 URL: http://www.admecindia.co.in R Want to read more on visual designing http://www.graphic-design-institute.com ADMEC MULTIMEDIA