Download - Design principles
![Page 1: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/1.jpg)
design pr incipleswhat you need to know
![Page 2: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/2.jpg)
•Basic principles of design
•Basic elements of design
•Layout and composition
•Communication
Contents at a glance
![Page 3: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/3.jpg)
•Balance
•Rhythm
•Proportion
•Dominance
•Unity
Basic principles of design
![Page 4: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/4.jpg)
•Relation of elements in composition with regards to their visual weight.
•Relation to ideas of physical structure.
•Mass, gravity, edge.
•Symmetrical and Asymmetrical.
Balance
![Page 5: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/5.jpg)
Balance
Horizontal Symmetry
![Page 6: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/6.jpg)
Balance
Approximate Horizontal Symmetry
![Page 7: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/7.jpg)
Balance
Asymmetry
![Page 8: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/8.jpg)
•Repitition of elements with set intervals.
•Create a sense of movement.
•Regular,flowingandprogressiverhythm.
Rhythm
![Page 9: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/9.jpg)
Rhythm
Regular
![Page 10: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/10.jpg)
Rhythm
Flowing
![Page 11: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/11.jpg)
Rhythm
Progressive
![Page 12: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/12.jpg)
•Relative size of different elements in terms of scale.
•Also relates to balance and symmetry.
•Can also be used to describe depth.
Proportion
![Page 13: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/13.jpg)
Proportion
Proportion
![Page 14: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/14.jpg)
Proportion
Proportion - Depth
![Page 15: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/15.jpg)
•Can also be described as emphasis.
•Distribution of weight through various elements.
Dominance
![Page 16: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/16.jpg)
Dominance
Dominance
![Page 17: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/17.jpg)
Dominance
Dominance
![Page 18: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/18.jpg)
•Relation between elements of a design and the compostition as a whole.
•Tie it together to show wholeness.
•Break it apart to show variety.
•Principles based on Gestalt theory of how our mind organizes visual information.
Unity
![Page 19: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/19.jpg)
Unity
Unity Gestalt
![Page 20: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/20.jpg)
Basic principles of design
![Page 21: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/21.jpg)
•Color
•Line
•Shape
•Form
•Texture
Basic elements of design
![Page 22: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/22.jpg)
•Color ◦ Meaning in different contexts and cultures.
◦ Red = Love OR Red = Danger/Warning
◦ Statistical preferences according to how the eye works.
•Line ◦ Direction, purpose, intent.
◦ Lead gaze or obstruct gaze.
Color and Line
![Page 23: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/23.jpg)
•Shape ◦ The two dimensional shape of an object.
◦ Recognition of objects and weight.
•Form ◦ Three dimensional shape of an object.
◦ Shows volume and depth.
◦ Relation to real world - like in greyscale.
Shape and Form
![Page 24: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/24.jpg)
•Relates to the tactile response of touching physical objects.
•Design of some software applications.
•Sense of realness.
Texture
![Page 25: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/25.jpg)
•Rule of thirds ◦ If dividing a frame into thirds horizontally and vertically.
◦ The focus should be place on one of the intersections of those lines.
◦ The focus element should be differentiated from the background by contrast in either colour, shape, or form.
◦ There should be elements leading the gaze into that position.
Layout and composition
![Page 26: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/26.jpg)
•Grid based layout ◦ Baseduponlayingoutitemstoaligntoapre-definedgrid
to ensure balance, unity, and harmony.
Layout and composition
![Page 27: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/27.jpg)
Layout and composition
![Page 28: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/28.jpg)
◦ Editorial layout
◦ Applicable to content heavy designs
Layout and composition
![Page 29: Design principles](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54c751594a7959fc1f8b458d/html5/thumbnails/29.jpg)
•Typography ◦ Legibility vs Readability
◦ Design elements at the root.
◦ What are you saying?
•Separation of concern ◦ What is the job?
◦ Keep elements grouped logically in consumable “chunks”.
◦ Focus on the purpose in choosing content.
Communication