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
 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
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
sinojm@yahoo.com