Effective Visual Communication Sinoj Mullangath
Communication <ul><li>Communication conveys “facts, concepts and emotions” </li></ul><ul><li>To convey something, </li></u...
Visual Media <ul><li>Print </li></ul><ul><ul><li>Articles, Brochure, Manuals, Fine Arts </li></ul></ul><ul><li>Motion </li...
Visible Language <ul><li>Layout </li></ul><ul><li>Typography </li></ul><ul><li>Color </li></ul><ul><li>Texture </li></ul><...
Arts versus Design <ul><li>Arts is a form of expression </li></ul><ul><li>Design is a form of communication </li></ul>
Communication & Design <ul><li>Design*  is creating an interface that communicates the objective appropriately and clearly...
Interface Design Principles <ul><li>To Organize:  provide the user with a clear and consistent conceptual structure with g...
Organize <ul><li>Consistency </li></ul><ul><ul><li>Internal:  same types of elements </li></ul></ul><ul><ul><li>are shown ...
Organize <ul><li>Screen Layout </li></ul><ul><ul><li>Use a grid structure </li></ul></ul><ul><ul><ul><li>Define spaces </l...
Organize <ul><li>Navigation </li></ul><ul><ul><li>provide an  initial focus  for the viewer's attention </li></ul></ul><ul...
Economize <ul><li>Four major points to be considered </li></ul><ul><ul><li>Simplicity:  include only the elements that are...
Communicate <ul><li>To communicate successfully, the interface must keep in balance: </li></ul><ul><ul><li>Legibility </li...
Legibility & Readability <ul><li>Easily noticeable and distinguishable elements </li></ul><ul><ul><li>Legible Typefaces </...
Symbolism <ul><li>To communicate the content efficiently, carefully select and refine </li></ul><ul><ul><ul><li>Icons </li...
Typography <ul><li>Typefaces </li></ul><ul><ul><li>Legible, clear and distinctive type faces to distinguish between differ...
Typography <ul><li>Composition </li></ul><ul><ul><li>spacial unit + contrast </li></ul></ul><ul><li>Weightage </li></ul><u...
Color (Plus) <ul><li>Emphasize important information  </li></ul><ul><li>Identify subsystems of structures  </li></ul><ul><...
Color (Minus) <ul><li>Complex mechanisms </li></ul><ul><ul><li>Display </li></ul></ul><ul><ul><li>Reproduction </li></ul><...
Color <ul><li>Psychology </li></ul><ul><ul><li>Individual character </li></ul></ul><ul><ul><ul><li>Red = Hot, Vibrant, Pas...
Color <ul><li>Color wheel </li></ul><ul><li>Color groups </li></ul><ul><ul><li>Warm colors </li></ul></ul><ul><ul><ul><li>...
Color <ul><li>Color groups </li></ul><ul><ul><li>Complementary or Contrasting </li></ul></ul><ul><ul><li>Analogous or Harm...
Color <ul><li>Organization </li></ul><ul><ul><li>consistency of organization </li></ul></ul><ul><ul><li>group related item...
Color <ul><li>Economy </li></ul><ul><ul><li>design the display to first work well in black-and-white </li></ul></ul><ul><u...
Color <ul><li>Communication </li></ul><ul><ul><li>appropriate colors for the central and peripheral areas </li></ul></ul><...
Print vs Online <ul><li>Space/ Gravity:  Defined vs. Open </li></ul><ul><li>Composition:  Planned vs. Changing  </li></ul>...
Print OR Online <ul><li>Visual form consists of </li></ul><ul><ul><li>Primary element(s) </li></ul></ul><ul><ul><li>Second...
God is in the details [email_address]
Upcoming SlideShare
Loading in …5
×

Effective Visual Communication

13,771
-1

Published on

Principles of Visual Communication explained in a simple manner. Was presented at a workshop organized by STC, used as reference material by some design schools.

Published in: Design, Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
13,771
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
559
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide
  • Intro? Not telling CSS, JS, HTML, ASP or writing tools
  • Spatial layout. Visible language elements
  • Principles of …. Clear, consistent, concept
  • 1. Radio buttons, check boxes 2. Text tool 3. Stop signs in real world
  • Design the spread visual not the page.
  • Catch attention, eye movement, learning curve
  • Simple -- unless your objective is to confuse, entertain, or beautify, in which cases, overindulgence may be justified.
  • Legible fonts, in readable format
  • Character of type faces. Letters, words, sentence, grouped sentences, message For fixed-width fonts, justified lines of text can slow reading speed by 12 percent.
  • Spacing, smoothness, contrast, height, style, thickness
  • Color is one of the most complex elements in achieving successful visual communication. Used correctly, it can be a powerful tool for communication When color is used correctly, people will often learn more. Memory for color information seems to be much better than information presented in black-and-white
  • idea is to use color to augment black-and-white information Attention to the most important things
  • Red or green should not be used in the periphery of the visual field, but in the center. If used in the periphery, you need a way to capture the attention of the viewer, size change or blinking for example. Blue, black, white, and yellow should be used near the periphery of the visual field, where the retina remains sensitive to these colors. Mail box in US = blue, UK = red, greece = yellow
  • Book vs Dictionary on LOVE
  • Questions… discussions
  • Effective Visual Communication

    1. 1. Effective Visual Communication Sinoj Mullangath
    2. 2. Communication <ul><li>Communication conveys “facts, concepts and emotions” </li></ul><ul><li>To convey something, </li></ul><ul><li>one requires a language </li></ul><ul><li>and a medium </li></ul><ul><li>A language requires </li></ul><ul><li>letters, words, sentences </li></ul><ul><li>and rules of usage (=grammar) </li></ul>
    3. 3. Visual Media <ul><li>Print </li></ul><ul><ul><li>Articles, Brochure, Manuals, Fine Arts </li></ul></ul><ul><li>Motion </li></ul><ul><ul><li>Films, Animations, Performances </li></ul></ul><ul><li>Interactive </li></ul><ul><ul><li>Websites, Online Help, CBTs, CD-ROM </li></ul></ul>
    4. 4. Visible Language <ul><li>Layout </li></ul><ul><li>Typography </li></ul><ul><li>Color </li></ul><ul><li>Texture </li></ul><ul><li>Imagery </li></ul><ul><li>Identity </li></ul><ul><li>Sequencing </li></ul><ul><li>Animation </li></ul><ul><li>Sound </li></ul>
    5. 5. Arts versus Design <ul><li>Arts is a form of expression </li></ul><ul><li>Design is a form of communication </li></ul>
    6. 6. Communication & Design <ul><li>Design* is creating an interface that communicates the objective appropriately and clearly in that medium </li></ul><ul><ul><li>Medium </li></ul></ul><ul><ul><li>Objective </li></ul></ul><ul><ul><li>Appropriateness </li></ul></ul><ul><ul><li>Clarity </li></ul></ul><ul><ul><li>* In this context </li></ul></ul>
    7. 7. Interface Design Principles <ul><li>To Organize: provide the user with a clear and consistent conceptual structure with grouping and hierarchy </li></ul><ul><li>To Economize: do the most with the least amount of cues </li></ul><ul><li>To Communicate: match the presentation to the capabilities of user perception </li></ul>
    8. 8. Organize <ul><li>Consistency </li></ul><ul><ul><li>Internal: same types of elements </li></ul></ul><ul><ul><li>are shown in the same places </li></ul></ul><ul><ul><li>External: existing platforms and </li></ul></ul><ul><ul><li>cultural conventions should be </li></ul></ul><ul><ul><li>followed across user interfaces </li></ul></ul><ul><ul><li>Real world: consistent with real-world experiences, observations and perceptions of the user </li></ul></ul><ul><ul><li>Innovation: deviating from existing conventions, if it provides a clear benefit to the user </li></ul></ul>
    9. 9. Organize <ul><li>Screen Layout </li></ul><ul><ul><li>Use a grid structure </li></ul></ul><ul><ul><ul><li>Define spaces </li></ul></ul></ul><ul><ul><ul><li>Spread vs. Page Design </li></ul></ul></ul><ul><ul><li>Standardize the structure </li></ul></ul><ul><ul><ul><li>Easy to locate menus or dialogue boxes </li></ul></ul></ul><ul><ul><li>Group related elements </li></ul></ul>
    10. 10. Organize <ul><li>Navigation </li></ul><ul><ul><li>provide an initial focus for the viewer's attention </li></ul></ul><ul><ul><li>direct attention to </li></ul></ul><ul><ul><li>primary, secondary, </li></ul></ul><ul><ul><li>and peripheral items </li></ul></ul><ul><ul><li>assist in navigation </li></ul></ul><ul><ul><li>through the material </li></ul></ul><ul><ul><li>simple learning curve </li></ul></ul>
    11. 11. Economize <ul><li>Four major points to be considered </li></ul><ul><ul><li>Simplicity: include only the elements that are most important for communication </li></ul></ul><ul><ul><li>Clarity: meaning of the components are not ambiguous </li></ul></ul><ul><ul><li>Distinctiveness: important properties of the elements are distinct </li></ul></ul><ul><ul><li>Emphasis: important elements are easily perceived </li></ul></ul>
    12. 12. Communicate <ul><li>To communicate successfully, the interface must keep in balance: </li></ul><ul><ul><li>Legibility </li></ul></ul><ul><ul><li>Readability </li></ul></ul><ul><ul><li>Symbolism </li></ul></ul><ul><ul><li>Multiple views </li></ul></ul><ul><ul><li>Typography </li></ul></ul><ul><ul><li>Color </li></ul></ul>
    13. 13. Legibility & Readability <ul><li>Easily noticeable and distinguishable elements </li></ul><ul><ul><li>Legible Typefaces </li></ul></ul><ul><ul><li>Desktop Icons </li></ul></ul><ul><ul><li>Control Panel Symbols </li></ul></ul><ul><ul><li>Background Colors </li></ul></ul><ul><ul><li>Usage Environment </li></ul></ul><ul><li>Comprehensible display </li></ul><ul><ul><li>Easy to identify and interpret </li></ul></ul><ul><ul><li>Inviting and attractive </li></ul></ul>
    14. 14. Symbolism <ul><li>To communicate the content efficiently, carefully select and refine </li></ul><ul><ul><ul><li>Icons </li></ul></ul></ul><ul><ul><ul><li>Symbols </li></ul></ul></ul><ul><ul><ul><li>Charts </li></ul></ul></ul><ul><ul><ul><li>Maps </li></ul></ul></ul><ul><ul><ul><li>Diagrams </li></ul></ul></ul><ul><ul><ul><li>Photographs </li></ul></ul></ul>
    15. 15. Typography <ul><li>Typefaces </li></ul><ul><ul><li>Legible, clear and distinctive type faces to distinguish between different classes of information (max 3 faces) </li></ul></ul><ul><li>Typestyles </li></ul><ul><ul><li>Point size, italics, boldness, underline, color (max 3 styles) </li></ul></ul><ul><li>Typesetting </li></ul><ul><ul><li>40-60 char per line, flush left, avoid centering or justified or all caps text in a line, proper word spacing, paragraph indentation, and line spacing </li></ul></ul>
    16. 16. Typography <ul><li>Composition </li></ul><ul><ul><li>spacial unit + contrast </li></ul></ul><ul><li>Weightage </li></ul><ul><ul><li>chroma + lightness + thickness </li></ul></ul><ul><li>Direction </li></ul><ul><ul><li>height + positioning + style </li></ul></ul><ul><li>Character </li></ul><ul><ul><li>tight/space + type-dimension </li></ul></ul>
    17. 17. Color (Plus) <ul><li>Emphasize important information </li></ul><ul><li>Identify subsystems of structures </li></ul><ul><li>Portray objects in realistic manner </li></ul><ul><li>Depict time and progress </li></ul><ul><li>Reduce errors of interpretation </li></ul><ul><li>Add coding dimensions </li></ul><ul><li>Increase comprehensibility </li></ul><ul><li>Increase believability and appeal </li></ul>
    18. 18. Color (Minus) <ul><li>Complex mechanisms </li></ul><ul><ul><li>Display </li></ul></ul><ul><ul><li>Reproduction </li></ul></ul><ul><li>Cross-platform issues </li></ul><ul><li>Color-deficient vision </li></ul><ul><li>Possible disturbing properties </li></ul><ul><ul><li>Visual discomfort </li></ul></ul><ul><ul><li>Afterimages </li></ul></ul><ul><li>Cross-culture issues </li></ul>
    19. 19. Color <ul><li>Psychology </li></ul><ul><ul><li>Individual character </li></ul></ul><ul><ul><ul><li>Red = Hot, Vibrant, Passionate </li></ul></ul></ul><ul><ul><ul><li>Blue = Cool, Dependable, Depth </li></ul></ul></ul><ul><ul><ul><li>Yellow = Youth, Energy, Warmth </li></ul></ul></ul><ul><ul><ul><li>White = Serene, Calm, Clean </li></ul></ul></ul><ul><ul><ul><li>Purple = Rich, Royal, Classy </li></ul></ul></ul>
    20. 20. Color <ul><li>Color wheel </li></ul><ul><li>Color groups </li></ul><ul><ul><li>Warm colors </li></ul></ul><ul><ul><ul><li>Welcoming </li></ul></ul></ul><ul><ul><ul><li>Too much = Stuffy </li></ul></ul></ul><ul><ul><li>Cool colors </li></ul></ul><ul><ul><ul><li>Composed </li></ul></ul></ul><ul><ul><ul><li>Too much = Cold </li></ul></ul></ul>
    21. 21. Color <ul><li>Color groups </li></ul><ul><ul><li>Complementary or Contrasting </li></ul></ul><ul><ul><li>Analogous or Harmonious </li></ul></ul><ul><ul><li>Monotone, Monochromatic, Dominance </li></ul></ul>
    22. 22. Color <ul><li>Organization </li></ul><ul><ul><li>consistency of organization </li></ul></ul><ul><ul><li>group related items </li></ul></ul><ul><ul><li>infer a similarity among objects </li></ul></ul><ul><ul><li>complete and consistent grouping objects </li></ul></ul><ul><ul><li>color coding scheme </li></ul></ul><ul><li>Economy </li></ul><ul><li>Communication </li></ul><ul><li>Symbolism </li></ul>
    23. 23. Color <ul><li>Economy </li></ul><ul><ul><li>design the display to first work well in black-and-white </li></ul></ul><ul><ul><li>to remember the meaning of usage of colors (5+/-2) </li></ul></ul><ul><ul><li>color emphasis to draw the user's attention </li></ul></ul><ul><ul><li>hierarchy of highlighted, neutral, and dark areas of display </li></ul></ul><ul><ul><li>maximum simplicity and clarity </li></ul></ul>
    24. 24. Color <ul><li>Communication </li></ul><ul><ul><li>appropriate colors for the central and peripheral areas </li></ul></ul><ul><ul><li>color area vs. weightage </li></ul></ul><ul><ul><li>difference in chroma and value </li></ul></ul><ul><ul><li>environment & background </li></ul></ul><ul><li>Symbolism </li></ul><ul><ul><li>existing cultural and professional usage </li></ul></ul><ul><ul><li>connotations in cultures </li></ul></ul>
    25. 25. Print vs Online <ul><li>Space/ Gravity: Defined vs. Open </li></ul><ul><li>Composition: Planned vs. Changing </li></ul><ul><li>Volume: Pages vs. Scroll </li></ul><ul><li>Structure: Sequential vs. Random </li></ul><ul><li>User: Participate vs. Anticipate </li></ul><ul><li>Character: Static vs. Dynamic </li></ul><ul><li>Usage: confine vs. Freedom </li></ul><ul><li>Communication: One-way vs. Two-way </li></ul>
    26. 26. Print OR Online <ul><li>Visual form consists of </li></ul><ul><ul><li>Primary element(s) </li></ul></ul><ul><ul><li>Secondary element(s) </li></ul></ul><ul><ul><li>Peripherals </li></ul></ul><ul><ul><li>Grid </li></ul></ul><ul><ul><li>White spaces </li></ul></ul><ul><ul><li>Blind spots </li></ul></ul><ul><ul><li>Fillers </li></ul></ul>
    27. 27. God is in the details [email_address]
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×