Effective Visual Effective Visual CommunicationCommunication

Sinoj Mullangath

KomunikasiKomunikasi

• Komunikasi menyampaikan “fakta, konsep dan emosi”

• Untuk menyampaikan sesuatu, diperlukan bahasa dan media

• Bahasa memerlukan huruf, kata, kalimat dan aturan pemakaian (tata bahasa)

Visual MediaVisual Media

• Print Articles, Brochure, Manuals, Fine Arts

• Motion Films, Animations, Performances

• Interactive Websites, Online Help, CBTs, CD-ROM

Visible LanguageVisible Language

• Layout• Typography• Color• Texture• Imagery• Identity• Sequencing• Animation• Sound

Arts versus DesignArts versus Design

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

Communication & DesignCommunication & 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 PrinciplesInterface 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

OrganizeOrganize

• Consistency Internal: same types of elements are shown in the same places

External: existing platforms andcultural conventions should befollowed 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

OrganizeOrganize

• 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

OrganizeOrganize

• 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

EconomizeEconomize

• 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

CommunicateCommunicate

• To communicate successfully, the interface must keep in balance:

Legibility Readability Symbolism Multiple views Typography Color

Legibility & ReadabilityLegibility & 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

SymbolismSymbolism

• To communicate the content efficiently, carefully select and refine

• Icons•Symbols•Charts•Maps•Diagrams•Photographs

TypographyTypography

• 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

TypographyTypography

• Composition spacial unit + contrast

• Weightage chroma + lightness + thickness

• Direction height + positioning + style

• Character tight/space + type-dimension

Color (Plus)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)Color (Minus)

• Complex mechanisms Display Reproduction

• Cross-platform issues• Color-deficient vision• Possible disturbing properties

Visual discomfort Afterimages

• Cross-culture issues

ColorColor

• Psychology Individual character

•Red = Hot, Vibrant, Passionate•Blue = Cool, Dependable, Depth•Yellow = Youth, Energy, Warmth•White = Serene, Calm, Clean•Purple = Rich, Royal, Classy

ColorColor

• Color wheel• Color groups

Warm colors•Welcoming•Too much = Stuffy

Cool colors•Composed•Too much = Cold

ColorColor

• Color groups Complementary or Contrasting

Analogous or Harmonious

Monotone, Monochromatic, Dominance

ColorColor

• Organization consistency of organization group related items infer a similarity among objects complete and consistent grouping

objects color coding scheme

• Economy• Communication• Symbolism

ColorColor

• 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

ColorColor

• 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 OnlinePrint 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 OnlinePrint OR Online

• Visual form consists of Primary element(s) Secondary element(s) Peripherals Grid White spaces Blind spots Fillers

God is in the detailsGod is in the details

sinojm@yahoo.com