SlideShare a Scribd company logo
1 of 35
CHAPTER 2
Visual Design
Visual Design Elements


•Line         •Space

•Color        •Texture

•Typography   •Value

•Form/Shape
Line
Types
  •Vertical- Represents dignity, formality, stability and
  strength.
  •Horizontal- Represents calm, peace and relaxation.
  •Diagonal- Represents action, activity, excitement and
  movement.
  •Curved- Represents freedom, the natural, having the
  appearance of softness and creates a soothing feeling
  or mood.
Vertical Lines
Horizontal Lines
Diagonal Lines
Curved Lines
Color
             Color has an immediate
         and profound effect on a design.
Types
  •Warm Colors
        •Reds, oranges, yellows

  •Cool Colors
        •Blues, purples, greens

  •Colors can affect how humans feel and act.
Color
• Keep it simple
     • Limit number of fonts per page and per site
     • Use the same fonts consistently throughout the site
• Make good font choices
     • Sans serif vs. serif
     • Commonly installed fonts
     • Mood
• Readability
• USE CAPITALIZATION SPARINGLY
• Font Moods
• What mood does this font evoke for you?

    • What about this one? Is it formal? Casual?
    • Would this font give your page a professional look? Why or why not?

    •What assumptions about the content
• Would you make from this font?
•
Form and Shape
The shape, outline, or configuration of anything.
        Examples
           •Squares      •Ovals
           •Circles      •Rectangles
           •Ellipses     •Triangles
Form and Shape
Space
     By incorporating the use of space
 in your design, you can enlarge or reduce
              the visual space.

Types
  •Open, uncluttered
  spaces
  •Cramped, busy
  •Unused vs. good
  use of space
• Positive and negative space refers to the juxtaposition of
  figure and ground in a composition. The objects in the
  environment represent the positive space, and the
  environment itself is the negative space.
• white space is often referred to as negative space
Texture
 The surface look or feel of something.

Types
  •Smooth surface
        •Reflects more light and, therefore, is a more
        intense color.
  •Rough surface
        •Absorbs more light and, therefore, appears darker.
Smooth Texture
Rough Texture
Value
The relative lightness or darkness of a color.


Methods
   •Shade
      Degree of darkness of a color
   •Tint
      A pale or faint variation of a color
Visual Design Principles
There are five principles that encompass
an interesting design.
• Balance
• Rhythm
• Emphasis
• Proportion and scale
• Unity
Balance

Parts of the design are equally distributed to create a sense
of stability.
There can be physical as well as visual balance.
Types
    •Symmetrical or Formal Balance
    •Asymmetrical or Informal Balance
    •Radial Balance
    •Vertical Balance
    •Horizontal Balance
Balance
    Asymmetrical or Informal Balance

Parts of the design are not identical but are
           equal in visual weight.
Balance
    Radial Balance

Design Elements radiate
outward from the center.
Balance
         Vertical Balance
The top and bottom parts are equal.
Balance
Horizontal Balance


The left and right
 parts are equal.
Repeated use of line, shape, color, texture or pattern.
Types
   •Regular rhythm
   •Graduated rhythm
   •Random rhythm
   •Gradated rhythm
Rhythm
           Graduated Rhythm

The beats of the element become closer or
       further apart as they move.
Rhythm
         Random Rhythm
The beats of the element are random
    or are at irregular intervals.
Rhythm
   Gradated Rhythm

The repeated element is
    identical with the
 exception of one detail
increasing or decreasing
   gradually with each
       repetition.
Emphasis
•Points of attention in a
design.
•The feature in a design that
attracts one’s eye.
•The focal point.
•Emphasis can be achieved
through size, placement,
color and use of lines.
•The most personal aspect
of a design.
Proportion and Scale
•Comparative relationships
between elements in a
design with respect to size.
•3:5 ratio is known as the
Golden Mean.
•Scale


   •The proportions or size
   of one part of the image
   in relationship to the
   other.
Unity
• Unity is applying consistent use of lines, color, and
  texture within a design.
• To be harmonious.
Unity

More Related Content

What's hot

Interior design by nunnicha
Interior design by nunnichaInterior design by nunnicha
Interior design by nunnicha
nunnichap
 
The elementsofdesign
The elementsofdesignThe elementsofdesign
The elementsofdesign
kellimccabe
 
Elements of design
Elements of designElements of design
Elements of design
kellimccabe
 
Elements of design
Elements of designElements of design
Elements of design
MsKPetty
 
Elements and Principles of Design in Photography
Elements and Principles of Design in PhotographyElements and Principles of Design in Photography
Elements and Principles of Design in Photography
ballardgraphicdesign
 

What's hot (19)

Rhythm
RhythmRhythm
Rhythm
 
The Ultimate How-To of Interior Designing
The Ultimate How-To of Interior DesigningThe Ultimate How-To of Interior Designing
The Ultimate How-To of Interior Designing
 
Comm via printed media 07
Comm via printed media 07Comm via printed media 07
Comm via printed media 07
 
Interior design by nunnicha
Interior design by nunnichaInterior design by nunnicha
Interior design by nunnicha
 
Basic principles of graphics and layout
Basic principles of graphics and layoutBasic principles of graphics and layout
Basic principles of graphics and layout
 
Intro to Graphic Design Elements
Intro to Graphic Design ElementsIntro to Graphic Design Elements
Intro to Graphic Design Elements
 
The elementsofdesign
The elementsofdesignThe elementsofdesign
The elementsofdesign
 
Contrast as a principle of interior design
Contrast  as a principle of interior designContrast  as a principle of interior design
Contrast as a principle of interior design
 
Elements of Graphic Design
Elements of Graphic DesignElements of Graphic Design
Elements of Graphic Design
 
Use of shapeShapes in design
Use of shapeShapes in designUse of shapeShapes in design
Use of shapeShapes in design
 
Elements and Principles of Design (Updated)
Elements and Principles of Design (Updated)Elements and Principles of Design (Updated)
Elements and Principles of Design (Updated)
 
Elements of design
Elements of designElements of design
Elements of design
 
Elements & Principles of Design
Elements & Principles of DesignElements & Principles of Design
Elements & Principles of Design
 
Line activity
Line activityLine activity
Line activity
 
Elements of design
Elements of designElements of design
Elements of design
 
Elements and Principles of Design in Photography
Elements and Principles of Design in PhotographyElements and Principles of Design in Photography
Elements and Principles of Design in Photography
 
Element of design
Element of designElement of design
Element of design
 
Lecture 1 b definition of principle of design
Lecture 1 b definition of principle of designLecture 1 b definition of principle of design
Lecture 1 b definition of principle of design
 
Creative Industry Lecture 2 a b color form and space
Creative Industry Lecture 2 a b color form and spaceCreative Industry Lecture 2 a b color form and space
Creative Industry Lecture 2 a b color form and space
 

Viewers also liked

Quiz 2 _ MMD2093_2
Quiz 2 _ MMD2093_2Quiz 2 _ MMD2093_2
Quiz 2 _ MMD2093_2
sephia17584
 
Elements of Art and Principles of Design
Elements of Art and Principles of DesignElements of Art and Principles of Design
Elements of Art and Principles of Design
damaba78
 
KCC Art 141 Chapter 6 Color Pattern Texture
KCC Art 141 Chapter 6 Color Pattern TextureKCC Art 141 Chapter 6 Color Pattern Texture
KCC Art 141 Chapter 6 Color Pattern Texture
Kelly Parker
 
Form, Line, Plane, Space, Texture & Color
Form, Line, Plane, Space, Texture & ColorForm, Line, Plane, Space, Texture & Color
Form, Line, Plane, Space, Texture & Color
tanyalangford
 
The Visual Elements of Art: TEXTURE
The Visual Elements of Art: TEXTUREThe Visual Elements of Art: TEXTURE
The Visual Elements of Art: TEXTURE
Rosa Fernández
 
Basics Of 3 Dimensional Design
Basics Of 3 Dimensional DesignBasics Of 3 Dimensional Design
Basics Of 3 Dimensional Design
Mark Creegan
 

Viewers also liked (20)

Microsoft excel
Microsoft excelMicrosoft excel
Microsoft excel
 
Group ofdmg11
Group ofdmg11Group ofdmg11
Group ofdmg11
 
Open book q
Open book qOpen book q
Open book q
 
Dia
DiaDia
Dia
 
Quiz 2 _ MMD2093_2
Quiz 2 _ MMD2093_2Quiz 2 _ MMD2093_2
Quiz 2 _ MMD2093_2
 
Quiz 01 _dnm
Quiz 01 _dnmQuiz 01 _dnm
Quiz 01 _dnm
 
Test
TestTest
Test
 
visual and tectile textures
visual and tectile texturesvisual and tectile textures
visual and tectile textures
 
Design Elements- Texture, Color, Form + Function
Design Elements- Texture, Color, Form + FunctionDesign Elements- Texture, Color, Form + Function
Design Elements- Texture, Color, Form + Function
 
Elements of Art and Principles of Design
Elements of Art and Principles of DesignElements of Art and Principles of Design
Elements of Art and Principles of Design
 
Lesson 6 1 a gestalt principle life application and understanding texture
Lesson 6 1 a gestalt principle life application and understanding textureLesson 6 1 a gestalt principle life application and understanding texture
Lesson 6 1 a gestalt principle life application and understanding texture
 
Interior color by design home...
Interior color by design  home...Interior color by design  home...
Interior color by design home...
 
KCC Art 141 Chapter 6 Color Pattern Texture
KCC Art 141 Chapter 6 Color Pattern TextureKCC Art 141 Chapter 6 Color Pattern Texture
KCC Art 141 Chapter 6 Color Pattern Texture
 
Color and texture in interior design ciu
Color and texture in interior design ciuColor and texture in interior design ciu
Color and texture in interior design ciu
 
Element of design texture
Element of design   textureElement of design   texture
Element of design texture
 
Form, Line, Plane, Space, Texture & Color
Form, Line, Plane, Space, Texture & ColorForm, Line, Plane, Space, Texture & Color
Form, Line, Plane, Space, Texture & Color
 
The Visual Elements of Art: TEXTURE
The Visual Elements of Art: TEXTUREThe Visual Elements of Art: TEXTURE
The Visual Elements of Art: TEXTURE
 
Basics Of 3 Dimensional Design
Basics Of 3 Dimensional DesignBasics Of 3 Dimensional Design
Basics Of 3 Dimensional Design
 
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming Convention
 
10 Insightful Quotes On Designing A Better Customer Experience
10 Insightful Quotes On Designing A Better Customer Experience10 Insightful Quotes On Designing A Better Customer Experience
10 Insightful Quotes On Designing A Better Customer Experience
 

Similar to Mmd 2093 ch2

Elements principles of photo
Elements principles of photoElements principles of photo
Elements principles of photo
Brooke Nelson
 
Balance & Proximity
Balance & ProximityBalance & Proximity
Balance & Proximity
coachhahn
 

Similar to Mmd 2093 ch2 (20)

Principles and Elements of Design.pptx
Principles and Elements of Design.pptxPrinciples and Elements of Design.pptx
Principles and Elements of Design.pptx
 
Principles of design_ppt
Principles of design_pptPrinciples of design_ppt
Principles of design_ppt
 
Design Elements and Principle Assignment.pptx
Design Elements and Principle Assignment.pptxDesign Elements and Principle Assignment.pptx
Design Elements and Principle Assignment.pptx
 
E & p of design
E & p of designE & p of design
E & p of design
 
Publication Design Chapter 02
Publication Design Chapter 02Publication Design Chapter 02
Publication Design Chapter 02
 
Elements principles of photo
Elements principles of photoElements principles of photo
Elements principles of photo
 
Line.pptx
Line.pptxLine.pptx
Line.pptx
 
Color theory2
Color theory2Color theory2
Color theory2
 
002 week of the 25th
002 week of the 25th002 week of the 25th
002 week of the 25th
 
Visual Media
Visual MediaVisual Media
Visual Media
 
Photography composition f
Photography composition fPhotography composition f
Photography composition f
 
IMM: Design Basics and Color
IMM: Design Basics and ColorIMM: Design Basics and Color
IMM: Design Basics and Color
 
Graphic Designing Presentation (Tips & Tricks)
Graphic Designing Presentation (Tips & Tricks)Graphic Designing Presentation (Tips & Tricks)
Graphic Designing Presentation (Tips & Tricks)
 
Principles of design
Principles of designPrinciples of design
Principles of design
 
Balance & Proximity
Balance & ProximityBalance & Proximity
Balance & Proximity
 
Zentangle
ZentangleZentangle
Zentangle
 
Principles of design
Principles of designPrinciples of design
Principles of design
 
elements of design.pdf
elements of design.pdfelements of design.pdf
elements of design.pdf
 
Elements and Priniciples of Design.pdf
Elements and Priniciples of Design.pdfElements and Priniciples of Design.pdf
Elements and Priniciples of Design.pdf
 
Principlesofdesign
PrinciplesofdesignPrinciplesofdesign
Principlesofdesign
 

More from sephia17584 (16)

Intro toflash
Intro toflashIntro toflash
Intro toflash
 
Mmd2153 intro
Mmd2153 introMmd2153 intro
Mmd2153 intro
 
Mmd2093 2 4
Mmd2093 2 4Mmd2093 2 4
Mmd2093 2 4
 
Mmd2093
Mmd2093Mmd2093
Mmd2093
 
Latihan
LatihanLatihan
Latihan
 
Microsoft excel
Microsoft excelMicrosoft excel
Microsoft excel
 
Quiz 2 oa
Quiz 2 oaQuiz 2 oa
Quiz 2 oa
 
Itc2093 intro
Itc2093 introItc2093 intro
Itc2093 intro
 
Quiz 3
Quiz 3Quiz 3
Quiz 3
 
Html
HtmlHtml
Html
 
Quiz 2 _ MMD2193
Quiz 2 _ MMD2193Quiz 2 _ MMD2193
Quiz 2 _ MMD2193
 
Treatment sample
Treatment sampleTreatment sample
Treatment sample
 
Rangkakerja sampel
Rangkakerja sampelRangkakerja sampel
Rangkakerja sampel
 
Ganttchart sample
Ganttchart sampleGanttchart sample
Ganttchart sample
 
Proposal sample
Proposal sampleProposal sample
Proposal sample
 
Story board
Story boardStory board
Story board
 

Recently uploaded

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 

Mmd 2093 ch2

  • 2. Visual Design Elements •Line •Space •Color •Texture •Typography •Value •Form/Shape
  • 3. Line Types •Vertical- Represents dignity, formality, stability and strength. •Horizontal- Represents calm, peace and relaxation. •Diagonal- Represents action, activity, excitement and movement. •Curved- Represents freedom, the natural, having the appearance of softness and creates a soothing feeling or mood.
  • 8. Color Color has an immediate and profound effect on a design. Types •Warm Colors •Reds, oranges, yellows •Cool Colors •Blues, purples, greens •Colors can affect how humans feel and act.
  • 10. • Keep it simple • Limit number of fonts per page and per site • Use the same fonts consistently throughout the site • Make good font choices • Sans serif vs. serif • Commonly installed fonts • Mood • Readability • USE CAPITALIZATION SPARINGLY
  • 11. • Font Moods • What mood does this font evoke for you? • What about this one? Is it formal? Casual? • Would this font give your page a professional look? Why or why not? •What assumptions about the content • Would you make from this font? •
  • 12. Form and Shape The shape, outline, or configuration of anything. Examples •Squares •Ovals •Circles •Rectangles •Ellipses •Triangles
  • 14. Space By incorporating the use of space in your design, you can enlarge or reduce the visual space. Types •Open, uncluttered spaces •Cramped, busy •Unused vs. good use of space
  • 15. • Positive and negative space refers to the juxtaposition of figure and ground in a composition. The objects in the environment represent the positive space, and the environment itself is the negative space. • white space is often referred to as negative space
  • 16. Texture The surface look or feel of something. Types •Smooth surface •Reflects more light and, therefore, is a more intense color. •Rough surface •Absorbs more light and, therefore, appears darker.
  • 19. Value The relative lightness or darkness of a color. Methods •Shade Degree of darkness of a color •Tint A pale or faint variation of a color
  • 20. Visual Design Principles There are five principles that encompass an interesting design. • Balance • Rhythm • Emphasis • Proportion and scale • Unity
  • 21. Balance Parts of the design are equally distributed to create a sense of stability. There can be physical as well as visual balance. Types •Symmetrical or Formal Balance •Asymmetrical or Informal Balance •Radial Balance •Vertical Balance •Horizontal Balance
  • 22.
  • 23. Balance Asymmetrical or Informal Balance Parts of the design are not identical but are equal in visual weight.
  • 24. Balance Radial Balance Design Elements radiate outward from the center.
  • 25. Balance Vertical Balance The top and bottom parts are equal.
  • 26. Balance Horizontal Balance The left and right parts are equal.
  • 27. Repeated use of line, shape, color, texture or pattern. Types •Regular rhythm •Graduated rhythm •Random rhythm •Gradated rhythm
  • 28.
  • 29. Rhythm Graduated Rhythm The beats of the element become closer or further apart as they move.
  • 30. Rhythm Random Rhythm The beats of the element are random or are at irregular intervals.
  • 31. Rhythm Gradated Rhythm The repeated element is identical with the exception of one detail increasing or decreasing gradually with each repetition.
  • 32. Emphasis •Points of attention in a design. •The feature in a design that attracts one’s eye. •The focal point. •Emphasis can be achieved through size, placement, color and use of lines. •The most personal aspect of a design.
  • 33. Proportion and Scale •Comparative relationships between elements in a design with respect to size. •3:5 ratio is known as the Golden Mean. •Scale •The proportions or size of one part of the image in relationship to the other.
  • 34. Unity • Unity is applying consistent use of lines, color, and texture within a design. • To be harmonious.
  • 35. Unity