SlideShare a Scribd company logo
1 of 17
Download to read offline
DMA103: Fundamentals of Digital Design




Principles & Elements
      of Design
Defining “Elements of Design”

     The elements of design are the
     basic components used as part of
     any composition.
     They are the objects to be arranged,
     the constituent parts used to create
     the composition itself.
     The building blocks of design


                               Source: http://www.digital-web.com/articles/elements_of_design/
2 Design Elements
       Color




     Typography




                  Source:http://www.digital-web.com/articles/elements_of_design/
Other Design Elements

  Line


 Shape


Texture


                 Source:http://www.digital-web.com/articles/elements_of_design/
Defining “Principles of Design”
      Principles of design are the
      laws of designing anything.
      It relates to how the elements
      are used.
      To have a good design, you
      should consider these principles
      for the best design possible.


                                 Source: http://www.jiskha.com/art/visual_arts/ped.html
8 Design Principles

Contrast     Balance
Repetition   Hierarchy
Alignment    Focal Point (Emphasis)
Proximity    Economy (Minimalist)




                         Source: http://www.jiskha.com/art/visual_arts/ped.html
Contrast

           • Contrast occurs when two elements
 Poor      are different.
Contrast   • The greater the difference the greater
           the contrast.
 Better    • The key to working with contrast is to make
           sure the differences are obvious.
Contrast
           • Four common methods of creating contrast
           are by using differences in size, value, color,
           and type.




                                       Source: http://desktoppub.about.com/od/contrast/ss/contrast.htm
Repetition

• Repetition occurs when one or a few visual
elements are repeated a number times or with
great or total consistency.
• Repeating visual elements such as line, color,
shape, texture, value or image tends to unify the
total effect of a work of art as well as create
rhythm.
• Repetition can take the form of an exact
duplication (pattern), a near duplication, or
duplication with variety.


                            Source: http://desktoppub.about.com/od/contrast/ss/contrast.htm
Alignment
• Alignment refers to the positioning of visual
elements relative to one another so that their
edges or axes line up.




                            Source: http://desktoppub.about.com/od/contrast/ss/contrast.htm
Proximity
• Proximity refers to elements near each other,
in spatial proximity, are perceived as belonging
together.




                            Source: http://desktoppub.about.com/od/contrast/ss/contrast.htm
Balance

• Balance refers to a feeling of visual
equality in shape, form, value, color, etc. 
• Balance can be symmetrical or evenly
balanced, asymmetrical and un-evenly
balanced, or radial emanating from a
central point. 
• Objects, values, colors, textures, shapes,
forms, etc., can be used in creating a balance
in a composition.




                          Source: http://desktoppub.about.com/od/contrast/ss/contrast.htm
Hierarchy
• The arrangement of visual elements according to importance 
• The designer determines which graphic elements the viewer will
see first, second, third, and so on.
• Sometimes referred to as Visual Dominance
• Can be achieved through isolation, placement, scale, contrast




                                                 Source: http://desktoppub.about.com/od/contrast/ss/contrast.htm
Economy
•The Principle of Economy is the idea that you use
as much as you need to communicate the message.
• It only contains the essentials.
• Ask yourself:
    • Is each element used to its maximum potential
    and impact by not over-using it?
    • If I remove this object, element or item, will it
    make the message clearer?
    • If I remove this object, element or item, will it
    make the design stronger?




                                 Source: http://desktoppub.about.com/od/contrast/ss/contrast.htm
Focal Point
• The (center of interest) is an area that first
attracts attention in a composition.
• This area is more important when compared to
the other objects or elements in a composition. 
• This can be by contrast of values, more colors,
and placement in the format
• Says, “See me FIRST!”
• Also referred to as Visual Emphasis




                             Source: http://desktoppub.about.com/od/contrast/ss/contrast.htm
Color
• Color is the response of the eye to differing
wavelengths of radiation within the visible spectrum.
• Color can create a focal point & often used
symbolically.
• Color can have cultural and emotional associations.
• Color can be associated with a brand and be chosen to
express a brand’s personality
• Color selection should enhance the readability of type.
• A color should always be selected in relation to the
other colors in the piece.



                                   Source: http://desktoppub.about.com/od/contrast/ss/contrast.htm
Typography
• Typography is the art of arranging typefaces, selecting
style, line spacing, layout and design as a means of
solidifying language.




                                  Source: http://desktoppub.about.com/od/contrast/ss/contrast.htm
Principles & Elements of Design

   • Contrast     • Hierarchy
   • Repetition   • Focal Point
   • Alignment    • Economy
   • Proximity    • Color
   • Balance      • Typography


                         Source: http://desktoppub.about.com/od/contrast/ss/contrast.htm

More Related Content

Viewers also liked

Elements & Principles of Art Design PowerPoint
Elements & Principles of Art Design PowerPointElements & Principles of Art Design PowerPoint
Elements & Principles of Art Design PowerPoint
emurfield
 
Basic layout principles
Basic layout principlesBasic layout principles
Basic layout principles
Sherwin Manual
 
Layout Principles 1
Layout Principles 1Layout Principles 1
Layout Principles 1
Graeme Smith
 
ADV1100 Workshop for Faculty
ADV1100 Workshop for FacultyADV1100 Workshop for Faculty
ADV1100 Workshop for Faculty
jspevack
 
Dtp
DtpDtp
Dtp
MPCI
 

Viewers also liked (20)

Elements & Principles of Art Design PowerPoint
Elements & Principles of Art Design PowerPointElements & Principles of Art Design PowerPoint
Elements & Principles of Art Design PowerPoint
 
Elements And Principles of Art
Elements And Principles of ArtElements And Principles of Art
Elements And Principles of Art
 
Imaging and Design for Online Environment
Imaging and Design for Online EnvironmentImaging and Design for Online Environment
Imaging and Design for Online Environment
 
Elements Of Visual Design
Elements Of Visual DesignElements Of Visual Design
Elements Of Visual Design
 
10 Design & Layout Principles Guaranteed To Improve
10 Design & Layout Principles Guaranteed To Improve10 Design & Layout Principles Guaranteed To Improve
10 Design & Layout Principles Guaranteed To Improve
 
Basic layout principles
Basic layout principlesBasic layout principles
Basic layout principles
 
Elements of Design
Elements of DesignElements of Design
Elements of Design
 
Plan601 e session 2 lesson
Plan601 e session 2 lessonPlan601 e session 2 lesson
Plan601 e session 2 lesson
 
Visual design: foundation of print design & production
Visual design: foundation of print design & productionVisual design: foundation of print design & production
Visual design: foundation of print design & production
 
Designelements
DesignelementsDesignelements
Designelements
 
Presentation1
Presentation1Presentation1
Presentation1
 
Graphic design tips_a
Graphic design tips_aGraphic design tips_a
Graphic design tips_a
 
Layout Principles 1
Layout Principles 1Layout Principles 1
Layout Principles 1
 
Graphic Design Principles
Graphic Design PrinciplesGraphic Design Principles
Graphic Design Principles
 
ADV1100 Workshop for Faculty
ADV1100 Workshop for FacultyADV1100 Workshop for Faculty
ADV1100 Workshop for Faculty
 
Openings in walls
Openings in wallsOpenings in walls
Openings in walls
 
Dtp
DtpDtp
Dtp
 
10 Design and Layout Principles Guaranteed to Improve Your Website V2
10 Design and Layout Principles Guaranteed to Improve Your Website V210 Design and Layout Principles Guaranteed to Improve Your Website V2
10 Design and Layout Principles Guaranteed to Improve Your Website V2
 
What is an Effective Layout?
What is an Effective Layout?What is an Effective Layout?
What is an Effective Layout?
 
Proximity: Principles of Graphic Design
Proximity: Principles of Graphic DesignProximity: Principles of Graphic Design
Proximity: Principles of Graphic Design
 

More from Julia Hutchinson (9)

Typography basics
Typography basicsTypography basics
Typography basics
 
EDC326: PickASeat 1
EDC326: PickASeat 1EDC326: PickASeat 1
EDC326: PickASeat 1
 
Intro To Typography
Intro To TypographyIntro To Typography
Intro To Typography
 
Faceball athlete tutorial
Faceball athlete tutorialFaceball athlete tutorial
Faceball athlete tutorial
 
Typographic quote examples
Typographic quote examplesTypographic quote examples
Typographic quote examples
 
How Could They Do That?!
How Could They Do That?!How Could They Do That?!
How Could They Do That?!
 
Graphic Design Basics (DMA103)
Graphic Design Basics (DMA103)Graphic Design Basics (DMA103)
Graphic Design Basics (DMA103)
 
The Design Process
The Design ProcessThe Design Process
The Design Process
 
Faceball athletetutorial
Faceball athletetutorialFaceball athletetutorial
Faceball athletetutorial
 

Recently uploaded

NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
Amil baba
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
cyebo
 
在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样
在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样
在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样
ykucop
 
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjWeek 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
joshuaclack73
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
Amil baba
 
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
Amil baba
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
yzeoq
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentation
ajroy0196
 

Recently uploaded (20)

Latest Trends in Home and Building Design
Latest Trends in Home and Building DesignLatest Trends in Home and Building Design
Latest Trends in Home and Building Design
 
Levi's Advertisement and camapign design
Levi's Advertisement and camapign designLevi's Advertisement and camapign design
Levi's Advertisement and camapign design
 
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
 
And that's about to change! (Service Design Drinks Berlin May 2024)
And that's about to change! (Service Design Drinks Berlin May 2024)And that's about to change! (Service Design Drinks Berlin May 2024)
And that's about to change! (Service Design Drinks Berlin May 2024)
 
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
 
Heidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD Portfolio
 
在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样
在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样
在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样
 
Cascading Style Sheet(CSS) PDF Notes by Apna College
Cascading Style Sheet(CSS) PDF Notes by Apna CollegeCascading Style Sheet(CSS) PDF Notes by Apna College
Cascading Style Sheet(CSS) PDF Notes by Apna College
 
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjWeek 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
 
Onyx Tiles Where Elegance Meets Durability
Onyx Tiles Where Elegance Meets DurabilityOnyx Tiles Where Elegance Meets Durability
Onyx Tiles Where Elegance Meets Durability
 
CADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product PhotosCADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product Photos
 
Naer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing ProjectNaer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing Project
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdf
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headers
 
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
 
Top 10 Website Designing Hacks for Beginners.pptx.pptx
Top 10 Website Designing Hacks for Beginners.pptx.pptxTop 10 Website Designing Hacks for Beginners.pptx.pptx
Top 10 Website Designing Hacks for Beginners.pptx.pptx
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentation
 

10 Basic Principles And Elements of Graphic Design

  • 1. DMA103: Fundamentals of Digital Design Principles & Elements of Design
  • 2. Defining “Elements of Design” The elements of design are the basic components used as part of any composition. They are the objects to be arranged, the constituent parts used to create the composition itself. The building blocks of design Source: http://www.digital-web.com/articles/elements_of_design/
  • 3. 2 Design Elements Color Typography Source:http://www.digital-web.com/articles/elements_of_design/
  • 4. Other Design Elements Line Shape Texture Source:http://www.digital-web.com/articles/elements_of_design/
  • 5. Defining “Principles of Design” Principles of design are the laws of designing anything. It relates to how the elements are used. To have a good design, you should consider these principles for the best design possible. Source: http://www.jiskha.com/art/visual_arts/ped.html
  • 6. 8 Design Principles Contrast Balance Repetition Hierarchy Alignment Focal Point (Emphasis) Proximity Economy (Minimalist) Source: http://www.jiskha.com/art/visual_arts/ped.html
  • 7. Contrast • Contrast occurs when two elements Poor are different. Contrast • The greater the difference the greater the contrast. Better • The key to working with contrast is to make sure the differences are obvious. Contrast • Four common methods of creating contrast are by using differences in size, value, color, and type. Source: http://desktoppub.about.com/od/contrast/ss/contrast.htm
  • 8. Repetition • Repetition occurs when one or a few visual elements are repeated a number times or with great or total consistency. • Repeating visual elements such as line, color, shape, texture, value or image tends to unify the total effect of a work of art as well as create rhythm. • Repetition can take the form of an exact duplication (pattern), a near duplication, or duplication with variety. Source: http://desktoppub.about.com/od/contrast/ss/contrast.htm
  • 9. Alignment • Alignment refers to the positioning of visual elements relative to one another so that their edges or axes line up. Source: http://desktoppub.about.com/od/contrast/ss/contrast.htm
  • 10. Proximity • Proximity refers to elements near each other, in spatial proximity, are perceived as belonging together. Source: http://desktoppub.about.com/od/contrast/ss/contrast.htm
  • 11. Balance • Balance refers to a feeling of visual equality in shape, form, value, color, etc.  • Balance can be symmetrical or evenly balanced, asymmetrical and un-evenly balanced, or radial emanating from a central point.  • Objects, values, colors, textures, shapes, forms, etc., can be used in creating a balance in a composition. Source: http://desktoppub.about.com/od/contrast/ss/contrast.htm
  • 12. Hierarchy • The arrangement of visual elements according to importance  • The designer determines which graphic elements the viewer will see first, second, third, and so on. • Sometimes referred to as Visual Dominance • Can be achieved through isolation, placement, scale, contrast Source: http://desktoppub.about.com/od/contrast/ss/contrast.htm
  • 13. Economy •The Principle of Economy is the idea that you use as much as you need to communicate the message. • It only contains the essentials. • Ask yourself: • Is each element used to its maximum potential and impact by not over-using it? • If I remove this object, element or item, will it make the message clearer? • If I remove this object, element or item, will it make the design stronger? Source: http://desktoppub.about.com/od/contrast/ss/contrast.htm
  • 14. Focal Point • The (center of interest) is an area that first attracts attention in a composition. • This area is more important when compared to the other objects or elements in a composition.  • This can be by contrast of values, more colors, and placement in the format • Says, “See me FIRST!” • Also referred to as Visual Emphasis Source: http://desktoppub.about.com/od/contrast/ss/contrast.htm
  • 15. Color • Color is the response of the eye to differing wavelengths of radiation within the visible spectrum. • Color can create a focal point & often used symbolically. • Color can have cultural and emotional associations. • Color can be associated with a brand and be chosen to express a brand’s personality • Color selection should enhance the readability of type. • A color should always be selected in relation to the other colors in the piece. Source: http://desktoppub.about.com/od/contrast/ss/contrast.htm
  • 16. Typography • Typography is the art of arranging typefaces, selecting style, line spacing, layout and design as a means of solidifying language. Source: http://desktoppub.about.com/od/contrast/ss/contrast.htm
  • 17. Principles & Elements of Design • Contrast • Hierarchy • Repetition • Focal Point • Alignment • Economy • Proximity • Color • Balance • Typography Source: http://desktoppub.about.com/od/contrast/ss/contrast.htm