d e sign pr in ciples
wh at yo u ne e d to kno w
Contents at a glance

•	 Basic principles of design

•	 Basic elements of design

•	 Layout and composition

•	 Communication
Basic principles of design

•	 Balance

•	 Rhythm

•	 Proportion

•	 Dominance

•	 Unity
Balance

•	 Relation of elements in composition with
   regards to their visual weight.

•	 Relation to ideas of physical structure.

•	 Mass, gravity, edge.

•	 Symmetrical and Asymmetrical.
Balance




          Horizontal Symmetry
Balance




   Approximate Horizontal Symmetry
Balance




          Asymmetry
Rhythm

•	 Repitition of elements with set intervals.

•	 Create a sense of movement.

•	 Regular, flowing and progressive rhythm.
Rhythm




         Regular
Rhythm




         Flowing
Rhythm




         Progressive
Proportion

•	 Relative size of different elements in terms
   of scale.

•	 Also relates to balance and symmetry.

•	 Can also be used to describe depth.
Proportion




             Proportion
Proportion




             Proportion - Depth
Dominance

•	 Can also be described as emphasis.

•	 Distribution of weight through various
   elements.
Dominance




            Dominance
Dominance




            Dominance
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.
Unity




        Unity Gestalt
Basic principles of design
Basic elements of design

•	 Color

•	 Line

•	 Shape

•	 Form

•	 Texture
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.
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.
Texture

•	 Relates to the tactile response of touching
   physical objects.

•	 Design of some software applications.

•	 Sense of realness.
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.
Layout and composition

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

 ◦◦ Editorial layout

 ◦◦ Applicable to content
    heavy designs
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.

Design principles

  • 1.
    d e signpr in ciples wh at yo u ne e d to kno w
  • 2.
    Contents at aglance • Basic principles of design • Basic elements of design • Layout and composition • Communication
  • 3.
    Basic principles ofdesign • Balance • Rhythm • Proportion • Dominance • Unity
  • 4.
    Balance • Relation ofelements 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 ofelements 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 sizeof 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 alsobe described as emphasis. • Distribution of weight through various elements.
  • 16.
    Dominance Dominance
  • 17.
    Dominance Dominance
  • 18.
    Unity • Relation betweenelements 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.
  • 21.
    Basic elements ofdesign • 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 tothe 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.
  • 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.