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

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Recently uploaded (20)

Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
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)
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
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
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 

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