1. Effective Visual Communication Sinoj Mullangath

2. Komunikasi Komunikasi menyampaikan “fakta, konsep dan emosi” Untuk menyampaikan sesuatu, diperlukan bahasa dan media Bahasa memerlukan huruf, kata, kalimat dan aturan pemakaian (tata bahasa)

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