Effective Visual Communication Sinoj Mullangath

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

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

Visible Language Layout Typography Color Texture Imagery Identity Sequencing Animation Sound

Arts versus Design Arts is a form of expression Design is a form of communication

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

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

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

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

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

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

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

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

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

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  char per line, flush left, avoid centering or justified or all caps text in a line, proper word spacing, paragraph indentation, and line spacing

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

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

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

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

Color Color wheel Color groups  Warm colors Welcoming Too much = Stuffy  Cool colors Composed Too much = Cold

Color Color groups  Complementary or Contrasting  Analogous or Harmonious  Monotone, Monochromatic, Dominance

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

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

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

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

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

God is in the details