Effective Visual Communication Sinoj Mullangath

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)

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)

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

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

Layout

Typography

Color

Texture

Imagery

Identity

Sequencing

Animation

Sound

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

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

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

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

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

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

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

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

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

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

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 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

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

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

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

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

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

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 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 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

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

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

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

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

Visual form consists of

Primary element(s)

Secondary element(s)

Peripherals

Grid

White spaces

Blind spots

Fillers

God is in the details [email_address]