SlideShare uma empresa 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.

Mais conteúdo relacionado

Mais procurados

Liham ni rizal sa mga kabataang dalaga ng malolos
Liham ni rizal sa mga kabataang dalaga ng malolosLiham ni rizal sa mga kabataang dalaga ng malolos
Liham ni rizal sa mga kabataang dalaga ng malolos
Matthew Tancioco
 

Mais procurados (20)

What Are the Types of Infographics?
What Are the Types of Infographics?What Are the Types of Infographics?
What Are the Types of Infographics?
 
Principles of Design
Principles of DesignPrinciples of Design
Principles of Design
 
ELEMENTS AND PRINCIPLES OF ARTS
ELEMENTS AND PRINCIPLES OF ARTSELEMENTS AND PRINCIPLES OF ARTS
ELEMENTS AND PRINCIPLES OF ARTS
 
Basic Principles of Graphics and Layout
Basic Principles of Graphics and LayoutBasic Principles of Graphics and Layout
Basic Principles of Graphics and Layout
 
Story-Reading-Framework.pptx
Story-Reading-Framework.pptxStory-Reading-Framework.pptx
Story-Reading-Framework.pptx
 
Introduction to Graphic Design.pdf
Introduction to Graphic Design.pdfIntroduction to Graphic Design.pdf
Introduction to Graphic Design.pdf
 
Graphic Design Essentials by Rahul KULKARNI.
Graphic Design Essentials by Rahul KULKARNI.Graphic Design Essentials by Rahul KULKARNI.
Graphic Design Essentials by Rahul KULKARNI.
 
Book cover design
Book cover designBook cover design
Book cover design
 
3 p.e. lm q3
3 p.e. lm q33 p.e. lm q3
3 p.e. lm q3
 
Design Element Line 2
Design Element Line 2Design Element Line 2
Design Element Line 2
 
Cci1 lec 7 definition of design its elements and principle
Cci1 lec 7  definition of design its elements and principleCci1 lec 7  definition of design its elements and principle
Cci1 lec 7 definition of design its elements and principle
 
Multiple views and perspectives
Multiple views and perspectivesMultiple views and perspectives
Multiple views and perspectives
 
Visual design principle
Visual design principleVisual design principle
Visual design principle
 
How to design - Graphic design theory
How to design - Graphic design theoryHow to design - Graphic design theory
How to design - Graphic design theory
 
ELEMENTS OF ARTS
ELEMENTS OF ARTSELEMENTS OF ARTS
ELEMENTS OF ARTS
 
Chapter 3: Visual Design: Principles and Applications
Chapter 3: Visual Design: Principles and Applications Chapter 3: Visual Design: Principles and Applications
Chapter 3: Visual Design: Principles and Applications
 
Visual Communication lecture 4 1 rhythm, pattern and repetition
Visual Communication lecture 4 1 rhythm, pattern and repetitionVisual Communication lecture 4 1 rhythm, pattern and repetition
Visual Communication lecture 4 1 rhythm, pattern and repetition
 
Liham ni rizal sa mga kabataang dalaga ng malolos
Liham ni rizal sa mga kabataang dalaga ng malolosLiham ni rizal sa mga kabataang dalaga ng malolos
Liham ni rizal sa mga kabataang dalaga ng malolos
 
Rule of thirds power point
Rule of thirds power pointRule of thirds power point
Rule of thirds power point
 
K to 12 mapeh (arts) III complete objectives and subject matter
K to 12 mapeh (arts) III complete objectives and subject matterK to 12 mapeh (arts) III complete objectives and subject matter
K to 12 mapeh (arts) III complete objectives and subject matter
 

Destaque (7)

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
 

Semelhante 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
 

Semelhante 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

1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
QucHHunhnh
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
ZurliaSoop
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
KarakKing
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
AnaAcapella
 

Último (20)

1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
Spatium Project Simulation student brief
Spatium Project Simulation student briefSpatium Project Simulation student brief
Spatium Project Simulation student brief
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 

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.