MyEffectiveVisualCommunication.ppt 1733KB Mar 29 2010 04:55:25 AM
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
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
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