SlideShare a Scribd company logo
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
 
Elements And Principles of Art
Elements And Principles of ArtElements And Principles of Art
Elements And Principles of Art
kpikuet
 
Imaging and Design for Online Environment
Imaging and Design for Online EnvironmentImaging and Design for Online Environment
Imaging and Design for Online Environment
Richard Meriveles
 
Elements Of Visual Design
Elements Of Visual DesignElements Of Visual Design
Elements Of Visual Design
hweeling
 
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
Lauren Martin
 
Basic layout principles
Basic layout principlesBasic layout principles
Basic layout principles
Sherwin Manual
 
Elements of Design
Elements of DesignElements of Design
Elements of Design
Gena Montgomery
 
Plan601 e session 2 lesson
Plan601 e session 2 lessonPlan601 e session 2 lesson
Plan601 e session 2 lesson
rkottam
 
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
Cheldy S, Elumba-Pableo
 
Designelements
DesignelementsDesignelements
Designelements
Mark Creegan
 
Presentation1
Presentation1Presentation1
Presentation1
daqueenglee
 
Graphic design tips_a
Graphic design tips_aGraphic design tips_a
Graphic design tips_a
micheledavis111
 
Layout Principles 1
Layout Principles 1Layout Principles 1
Layout Principles 1
Graeme Smith
 
Graphic Design Principles
Graphic Design PrinciplesGraphic Design Principles
Graphic Design Principles
DCPS
 
ADV1100 Workshop for Faculty
ADV1100 Workshop for FacultyADV1100 Workshop for Faculty
ADV1100 Workshop for Faculty
jspevack
 
Openings in walls
Openings in wallsOpenings in walls
Openings in walls
Julian Swindell
 
Dtp
DtpDtp
Dtp
MPCI
 
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
Lauren Martin
 
What is an Effective Layout?
What is an Effective Layout?What is an Effective Layout?
What is an Effective Layout?
Kern Learning Solution
 
Proximity: Principles of Graphic Design
Proximity: Principles of Graphic DesignProximity: Principles of Graphic Design
Proximity: Principles of Graphic Design
Armin Heurich
 

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

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

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

一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
stgq9v39
 
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
t34zod9l
 
一比一原版(UofT毕业证)加拿大多伦多大学毕业证如何办理
一比一原版(UofT毕业证)加拿大多伦多大学毕业证如何办理一比一原版(UofT毕业证)加拿大多伦多大学毕业证如何办理
一比一原版(UofT毕业证)加拿大多伦多大学毕业证如何办理
bel9p89b
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
hw2xf1m
 
一比一原版(falmouth毕业证书)法尔茅斯大学毕业证如何办理
一比一原版(falmouth毕业证书)法尔茅斯大学毕业证如何办理一比一原版(falmouth毕业证书)法尔茅斯大学毕业证如何办理
一比一原版(falmouth毕业证书)法尔茅斯大学毕业证如何办理
xnhwr8v
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
340qn0m1
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
wkip62b
 
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
k4krdgxx
 
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build  Your Online Presence 2024.pptxBest Digital Marketing Strategy Build  Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
pavankumarpayexelsol
 
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
67n7f53
 
Dilatometer for measurement of materials
Dilatometer for measurement of materialsDilatometer for measurement of materials
Dilatometer for measurement of materials
ankitsinglaisro
 
一比一原版(brunel毕业证书)布鲁内尔大学毕业证如何办理
一比一原版(brunel毕业证书)布鲁内尔大学毕业证如何办理一比一原版(brunel毕业证书)布鲁内尔大学毕业证如何办理
一比一原版(brunel毕业证书)布鲁内尔大学毕业证如何办理
aprhf21y
 
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
02tygie
 
Rethinking Kållered │ From Big Box to a Reuse Hub: A Transformation Journey ...
Rethinking Kållered │  From Big Box to a Reuse Hub: A Transformation Journey ...Rethinking Kållered │  From Big Box to a Reuse Hub: A Transformation Journey ...
Rethinking Kållered │ From Big Box to a Reuse Hub: A Transformation Journey ...
SirmaDuztepeliler
 
一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理
一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理
一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理
k4krdgxx
 
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
qbydc
 
Plastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdfPlastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdf
RPWORLD Manufacturing
 
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
p74xokfq
 
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
ka3y2ukz
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 

Recently uploaded (20)

一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
 
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
 
一比一原版(UofT毕业证)加拿大多伦多大学毕业证如何办理
一比一原版(UofT毕业证)加拿大多伦多大学毕业证如何办理一比一原版(UofT毕业证)加拿大多伦多大学毕业证如何办理
一比一原版(UofT毕业证)加拿大多伦多大学毕业证如何办理
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
 
一比一原版(falmouth毕业证书)法尔茅斯大学毕业证如何办理
一比一原版(falmouth毕业证书)法尔茅斯大学毕业证如何办理一比一原版(falmouth毕业证书)法尔茅斯大学毕业证如何办理
一比一原版(falmouth毕业证书)法尔茅斯大学毕业证如何办理
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
 
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
 
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build  Your Online Presence 2024.pptxBest Digital Marketing Strategy Build  Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
 
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
 
Dilatometer for measurement of materials
Dilatometer for measurement of materialsDilatometer for measurement of materials
Dilatometer for measurement of materials
 
一比一原版(brunel毕业证书)布鲁内尔大学毕业证如何办理
一比一原版(brunel毕业证书)布鲁内尔大学毕业证如何办理一比一原版(brunel毕业证书)布鲁内尔大学毕业证如何办理
一比一原版(brunel毕业证书)布鲁内尔大学毕业证如何办理
 
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
 
Rethinking Kållered │ From Big Box to a Reuse Hub: A Transformation Journey ...
Rethinking Kållered │  From Big Box to a Reuse Hub: A Transformation Journey ...Rethinking Kållered │  From Big Box to a Reuse Hub: A Transformation Journey ...
Rethinking Kållered │ From Big Box to a Reuse Hub: A Transformation Journey ...
 
一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理
一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理
一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理
 
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
 
Plastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdfPlastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdf
 
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
 
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 

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