1. d e sign pr in ciples
wh at yo u ne e d to kno w

2. Contents at a glance
• Basic principles of design
• Basic elements of design
• Layout and composition
• Communication

3. Basic principles of design
• Balance
• Rhythm
• Proportion
• Dominance
• Unity

4. Balance
• Relation of elements in composition with
regards to their visual weight.
• Relation to ideas of physical structure.
• Mass, gravity, edge.
• Symmetrical and Asymmetrical.

5. Balance
Horizontal Symmetry

6. Balance
Approximate Horizontal Symmetry

7. Balance
Asymmetry

8. Rhythm
• Repitition of elements with set intervals.
• Create a sense of movement.
• Regular, flowing and progressive rhythm.

9. Rhythm
Regular

10. Rhythm
Flowing

11. Rhythm
Progressive

12. Proportion
• Relative size of different elements in terms
of scale.
• Also relates to balance and symmetry.
• Can also be used to describe depth.

13. Proportion
Proportion

14. Proportion
Proportion - Depth

15. Dominance
• Can also be described as emphasis.
• Distribution of weight through various
elements.

16. Dominance
Dominance

17. Dominance
Dominance

18. Unity
• 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.

19. Unity
Unity Gestalt

20. Basic principles of design

21. Basic elements of design
• Color
• Line
• Shape
• Form
• Texture

22. Color and Line
• 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.

23. Shape and Form
• 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.

24. Texture
• Relates to the tactile response of touching
physical objects.
• Design of some software applications.
• Sense of realness.

25. Layout and composition
• 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.

26. Layout and composition
• Grid based layout
◦◦ Based upon laying out items to align to a pre-defined grid
to ensure balance, unity, and harmony.

27. Layout and composition

28. Layout and composition
◦◦ Editorial layout
◦◦ Applicable to content
heavy designs

29. Communication
• 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.