SlideShare una empresa de Scribd logo
1 de 24
Visual Principles      Robert Heinich
Goals of Visual Design 1. Ensure legibility   2. Reduce effort (cognitive load)   3. Increase active engagement   4. Focus attention   Example:  http://www.kidsknowit.com/   Example:  http://pbskids.org/
Role of Visual Design     ,[object Object],        Iconic symbol                   ,[object Object],        Attention         Elicit emotion   ,[object Object],        Storage/Retrieval         Organize         Illustrate relationships    ,[object Object],[object Object]
Age/Development (section vs. whole)
Culture
Socioeconomic background
Preference     Effectiveness   ,[object Object],        Decode:             View                                                         Critique             Analyze                  Encode:             Create             Produce             Sequence
Visual Design Processes  Procedures   ,[object Object],        What visual and verbal components will enhance the display?   ,[object Object],        What underlying pattern(s) will you choose for the elements?   ,[object Object],        How will you arrange the elements within the pattern?           
Visual Elements ,[object Object],                                                 Writing a Narrative Essay     ,[object Object],          ,[object Object],       
Verbal Elements ,[object Object],         Serif ("feet") - printed text          San Serif (no "feet") - online text          Limit 4 (bold, italic, fonts, etc.)           ,[object Object],        Lowercase - 1/2" = every 10 feet of             viewing distance   ,[object Object],           O P T I C A L    S P A C I N G     ,[object Object],         Contrast           Audience needs
Visual Appeal ,[object Object],          ,[object Object],    ,[object Object], 
Have you ever read a document where the author has decided to center a long-ish block of text (kind of like I am doing here?)  Isn't it a little harder to read this text when it's centered than it would be if it were left-justified? We might argue that it is just a matter of convention, that we are just used to reading text that is left justified. But the principle of alignment suggest that creating a strong implied line connecting objects on the page creates cohesion.  
  Pattern    Establish an underlying pattern to decide how the viewer's eye will flow across your display.   Major factors that affect the overall look:   ,[object Object]
shape
balance
style
color scheme and appeal,[object Object]
  Grids keep complex alignments all lined up.
  It's okay to break alignment when it serves a specific purpose such as to intentionally create tension or draw attention to a specific element of the page. (Also an example of asymmetical balance.)
Rule of Thirds, Shape and Balance     "Rule of Thirds" - elements arranged along any of the one-third dividing lines take on importance and liveliness.   Shape - use a pattern that attracts and focuses attention.   Balance - balance is achieved when the "weight" of the elements in a display is equally distributed.
  all over balance    rule of thirds and asymmetrical balance
    use of shape
Color Scheme   Complementary colors lie opposite each other on a color wheel.   Analogous colors lie next to each other on the color wheel. Warm colors excite Cool colors calm
  Color Appeal           Cheerios uses complementary colors to appeals to consumers.  The main colors are warm, exciting colors. Johnson's uses analogous cool colors to appeal to consumers.

Más contenido relacionado

La actualidad más candente

Graphic Design Principles
Graphic Design PrinciplesGraphic Design Principles
Graphic Design Principles
Armin Heurich
 
Lecture 5 space and texture
Lecture 5 space and textureLecture 5 space and texture
Lecture 5 space and texture
Dimple Sharma
 
humanities principle of visual art
humanities principle of visual arthumanities principle of visual art
humanities principle of visual art
ayacastillo25
 

La actualidad más candente (20)

Principles of design
Principles of designPrinciples of design
Principles of design
 
Graphic Design Principles
Graphic Design PrinciplesGraphic Design Principles
Graphic Design Principles
 
Lecture 5 space and texture
Lecture 5 space and textureLecture 5 space and texture
Lecture 5 space and texture
 
Graphic Designing Presentation (Tips & Tricks)
Graphic Designing Presentation (Tips & Tricks)Graphic Designing Presentation (Tips & Tricks)
Graphic Designing Presentation (Tips & Tricks)
 
Visual principles
Visual principlesVisual principles
Visual principles
 
Elements of design (1)
Elements of design (1)Elements of design (1)
Elements of design (1)
 
Fundamentals of Drawing
Fundamentals of DrawingFundamentals of Drawing
Fundamentals of Drawing
 
typography
 typography typography
typography
 
Intro to Graphic Design Elements
Intro to Graphic Design ElementsIntro to Graphic Design Elements
Intro to Graphic Design Elements
 
CARP Design Principles
CARP Design PrinciplesCARP Design Principles
CARP Design Principles
 
Composition and layout
Composition and layoutComposition and layout
Composition and layout
 
Visual design principle
Visual design principleVisual design principle
Visual design principle
 
Principles of Design - Graphic Design Theory
Principles of Design - Graphic Design TheoryPrinciples of Design - Graphic Design Theory
Principles of Design - Graphic Design Theory
 
humanities principle of visual art
humanities principle of visual arthumanities principle of visual art
humanities principle of visual art
 
The Language of Design.pdf
The Language of Design.pdfThe Language of Design.pdf
The Language of Design.pdf
 
An Introduction to graphic design
An Introduction to graphic designAn Introduction to graphic design
An Introduction to graphic design
 
Visual Design Elements
Visual Design ElementsVisual Design Elements
Visual Design Elements
 
Empowerment technology Myrene B.Cantos
Empowerment technology Myrene B.CantosEmpowerment technology Myrene B.Cantos
Empowerment technology Myrene B.Cantos
 
The Joshua Tree Epiphany
The Joshua Tree EpiphanyThe Joshua Tree Epiphany
The Joshua Tree Epiphany
 
Principles Of Design 1
Principles Of  Design 1Principles Of  Design 1
Principles Of Design 1
 

Destacado (9)

Visual Principles
Visual PrinciplesVisual Principles
Visual Principles
 
Visual principles
Visual principlesVisual principles
Visual principles
 
Visual principles
Visual principlesVisual principles
Visual principles
 
Visual in Instruction
Visual in InstructionVisual in Instruction
Visual in Instruction
 
Types of Visuals
Types of VisualsTypes of Visuals
Types of Visuals
 
Chapter 5 balance
Chapter 5 balanceChapter 5 balance
Chapter 5 balance
 
Audio media
Audio mediaAudio media
Audio media
 
Visual Design Basics
Visual Design BasicsVisual Design Basics
Visual Design Basics
 
CHARACTERISTICS OF AURAL AND AUDIO MEDIA
CHARACTERISTICS OF AURAL  AND  AUDIO MEDIACHARACTERISTICS OF AURAL  AND  AUDIO MEDIA
CHARACTERISTICS OF AURAL AND AUDIO MEDIA
 

Similar a Visual Principles

Week 5 -Designing For Eye Appeal 3
Week 5 -Designing For Eye Appeal 3Week 5 -Designing For Eye Appeal 3
Week 5 -Designing For Eye Appeal 3
Stark State College
 
Principlesofdesign10
Principlesofdesign10Principlesofdesign10
Principlesofdesign10
ahill7
 
The Elements and Principles of Design A Guide to Design Term.docx
The Elements and Principles of Design A Guide to Design Term.docxThe Elements and Principles of Design A Guide to Design Term.docx
The Elements and Principles of Design A Guide to Design Term.docx
todd701
 
Designing Visuals for Instruction
Designing Visuals for InstructionDesigning Visuals for Instruction
Designing Visuals for Instruction
Mhelane Herebesi
 

Similar a Visual Principles (20)

Week 5 -Designing For Eye Appeal 3
Week 5 -Designing For Eye Appeal 3Week 5 -Designing For Eye Appeal 3
Week 5 -Designing For Eye Appeal 3
 
Designing Infographics
Designing InfographicsDesigning Infographics
Designing Infographics
 
IVC - Lesson 14
IVC - Lesson 14IVC - Lesson 14
IVC - Lesson 14
 
Principlesofdesign10
Principlesofdesign10Principlesofdesign10
Principlesofdesign10
 
The Elements and Principles of Design A Guide to Design Term.docx
The Elements and Principles of Design A Guide to Design Term.docxThe Elements and Principles of Design A Guide to Design Term.docx
The Elements and Principles of Design A Guide to Design Term.docx
 
Designing Visuals for Instruction
Designing Visuals for InstructionDesigning Visuals for Instruction
Designing Visuals for Instruction
 
Design Principles and Elements
Design Principles and ElementsDesign Principles and Elements
Design Principles and Elements
 
Visual Arts Web Lec (1).pptx
Visual Arts Web Lec (1).pptxVisual Arts Web Lec (1).pptx
Visual Arts Web Lec (1).pptx
 
Multimedia design principles
Multimedia design principlesMultimedia design principles
Multimedia design principles
 
Principles and elements of design
Principles and elements of designPrinciples and elements of design
Principles and elements of design
 
Visual Arts Web Lec.pptx
Visual Arts Web Lec.pptxVisual Arts Web Lec.pptx
Visual Arts Web Lec.pptx
 
Design Basics for Non-Designers
Design Basics for Non-DesignersDesign Basics for Non-Designers
Design Basics for Non-Designers
 
Data visualization data sources data types
Data visualization   data sources   data typesData visualization   data sources   data types
Data visualization data sources data types
 
Visual principles2
Visual principles2Visual principles2
Visual principles2
 
Introduction to Graphic Design.pdf
Introduction to Graphic Design.pdfIntroduction to Graphic Design.pdf
Introduction to Graphic Design.pdf
 
Introduction to Graphic Design- Elements and Principles of Art
Introduction to Graphic Design- Elements and Principles of ArtIntroduction to Graphic Design- Elements and Principles of Art
Introduction to Graphic Design- Elements and Principles of Art
 
Print Ads
Print AdsPrint Ads
Print Ads
 
The Principles of Good Design
The Principles of Good DesignThe Principles of Good Design
The Principles of Good Design
 
Yr8 vcd logos
Yr8 vcd logos Yr8 vcd logos
Yr8 vcd logos
 
Design principles
Design principlesDesign principles
Design principles
 

Último

Último (20)

Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
 
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the Classroom
 
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 

Visual Principles

  • 2. Goals of Visual Design 1. Ensure legibility   2. Reduce effort (cognitive load)   3. Increase active engagement   4. Focus attention   Example:  http://www.kidsknowit.com/   Example:  http://pbskids.org/
  • 3.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12. Have you ever read a document where the author has decided to center a long-ish block of text (kind of like I am doing here?)  Isn't it a little harder to read this text when it's centered than it would be if it were left-justified? We might argue that it is just a matter of convention, that we are just used to reading text that is left justified. But the principle of alignment suggest that creating a strong implied line connecting objects on the page creates cohesion.  
  • 13.
  • 14. shape
  • 16. style
  • 17.
  • 18.   Grids keep complex alignments all lined up.
  • 19.   It's okay to break alignment when it serves a specific purpose such as to intentionally create tension or draw attention to a specific element of the page. (Also an example of asymmetical balance.)
  • 20. Rule of Thirds, Shape and Balance     "Rule of Thirds" - elements arranged along any of the one-third dividing lines take on importance and liveliness.   Shape - use a pattern that attracts and focuses attention.   Balance - balance is achieved when the "weight" of the elements in a display is equally distributed.
  • 21.   all over balance   rule of thirds and asymmetrical balance
  • 22.     use of shape
  • 23. Color Scheme   Complementary colors lie opposite each other on a color wheel.   Analogous colors lie next to each other on the color wheel. Warm colors excite Cool colors calm
  • 24.   Color Appeal           Cheerios uses complementary colors to appeals to consumers.  The main colors are warm, exciting colors. Johnson's uses analogous cool colors to appeal to consumers.
  • 25. Arrangement Proximity - put related elements close together.   Directionals - are used to direct the viewers to "read" the display in a particular sequence.   Contrast - Dark figures show up best on light grounds and light figures show up best on dark grounds.   Consistency - Be consistent in use of elements on computer screens, overhead slides, or handouts.   Examples   http://coe.sdsu.edu/eet/articles/designprin1/start.htm
  • 27.
  • 29. Visual Application Challenge     With your group, create a visual to utilize in your final class project using the principles discussed.
  • 30. References Heinich, R, Molenda, M, Russell, J.D., & Smaldino, S.E. (Ed.).      (2002). Instructional media and technologies for learning:      visual principles. Columbus, Ohio: Merrill Prentice Hall.