Effective Visual Communication

1. Effective Visual Communication Sinoj Mullangath

2. Communication • Communication conveys “facts, concepts and emotions” • To convey something, one requires a language and a medium • A language requires letters, words, sentences and rules of usage (=grammar)

3. Visual Media • Print • Articles, Brochure, Manuals, Fine Arts • Motion • Films, Animations, Performances • Interactive • Websites, Online Help, CBTs, CD-ROM

4. Visible Language • Layout • Typography • Color • Texture • Imagery • Identity • Sequencing • Animation • Sound

5. Arts versus Design • Arts is a form of expression • Design is a form of communication

6. Communication & Design • Design* is creating an interface that communicates the objective appropriately and clearly in that medium • Medium • Objective • Appropriateness • Clarity * In this context

7. Interface Design Principles • To Organize: provide the user with a clear and consistent conceptual structure with grouping and hierarchy • To Economize: do the most with the least amount of cues • To Communicate: match the presentation to the capabilities of user perception

8. Organize • Consistency • Internal: same types of elements are shown in the same places • External: existing platforms and cultural conventions should be followed across user interfaces • Real world: consistent with real-world experiences, observations and perceptions of the user • Innovation: deviating from existing conventions, if it provides a clear benefit to the user

9. Organize • Screen Layout • Use a grid structure • Define spaces • Spread vs. Page Design • Standardize the structure • Easy to locate menus or dialogue boxes • Group related elements

10. Organize • Navigation • provide an initial focus for the viewer's attention • direct attention to primary, secondary, and peripheral items • assist in navigation through the material • simple learning curve

11. Economize • Four major points to be considered • Simplicity: include only the elements that are most important for communication • Clarity: meaning of the components are not ambiguous • Distinctiveness: important properties of the elements are distinct • Emphasis: important elements are easily perceived

12. Communicate • To communicate successfully, the interface must keep in balance: • Legibility • Readability • Symbolism • Multiple views • Typography • Color

13. Legibility & Readability • Easily noticeable and distinguishable elements • Legible Typefaces • Desktop Icons • Control Panel Symbols • Background Colors • Usage Environment • Comprehensible display • Easy to identify and interpret • Inviting and attractive

14. Symbolism • To communicate the content efficiently, carefully select and refine • Icons • Symbols • Charts • Maps • Diagrams • Photographs

15. Typography • Typefaces • Legible, clear and distinctive type faces to distinguish between different classes of information (max 3 faces) • Typestyles • Point size, italics, boldness, underline, color (max 3 styles) • Typesetting • 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

16. Typography • Composition • spacial unit + contrast • Weightage • chroma + lightness + thickness • Direction • height + positioning + style • Character • tight/space + type-dimension

17. Color (Plus) • Emphasize important information • Identify subsystems of structures • Portray objects in realistic manner • Depict time and progress • Reduce errors of interpretation • Add coding dimensions • Increase comprehensibility • Increase believability and appeal

18. Color (Minus) • Complex mechanisms • Display • Reproduction • Cross-platform issues • Color-deficient vision • Possible disturbing properties • Visual discomfort • Afterimages • Cross-culture issues

19. Color • Psychology • Individual character • Red = Hot, Vibrant, Passionate • Blue = Cool, Dependable, Depth • Yellow = Youth, Energy, Warmth • White = Serene, Calm, Clean • Purple = Rich, Royal, Classy

20. Color • Color wheel • Color groups • Warm colors • Welcoming • Too much = Stuffy • Cool colors • Composed • Too much = Cold

21. Color • Color groups • Complementary or Contrasting • Analogous or Harmonious • Monotone, Monochromatic, Dominance

22. Color • Organization • consistency of organization • group related items • infer a similarity among objects • complete and consistent grouping objects • color coding scheme • Economy • Communication • Symbolism

23. Color • Economy • design the display to first work well in black-and-white • to remember the meaning of usage of colors (5+/-2) • color emphasis to draw the user's attention • hierarchy of highlighted, neutral, and dark areas of display • maximum simplicity and clarity

24. Color • Communication • appropriate colors for the central and peripheral areas • color area vs. weightage • difference in chroma and value • environment & background • Symbolism • existing cultural and professional usage • connotations in cultures

25. Print vs Online • Space/ Gravity: Defined vs. Open • Composition: Planned vs. Changing • Volume: Pages vs. Scroll • Structure: Sequential vs. Random • User: Participate vs. Anticipate • Character: Static vs. Dynamic • Usage: confine vs. Freedom • Communication: One-way vs. Two-way

26. Print OR Online • Visual form consists of • Primary element(s) • Secondary element(s) • Peripherals • Grid • White spaces • Blind spots • Fillers

27. God is in the details sinojm@yahoo.com