Effective Visual Communication


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
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
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]