effective visual communication l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Effective Visual Communication PowerPoint Presentation
Download Presentation
Effective Visual Communication

Loading in 2 Seconds...

play fullscreen
1 / 27

Effective Visual Communication - PowerPoint PPT Presentation


  • 278 Views
  • Uploaded on

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) Visual Media Print

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Effective Visual Communication' - adamdaniel


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
communication
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)

visual media
Visual Media
  • Print
    • Articles, Brochure, Manuals, Fine Arts
  • Motion
    • Films, Animations, Performances
  • Interactive
    • Websites, Online Help, CBTs, CD-ROM
visible language
Visible Language
  • Layout
  • Typography
  • Color
  • Texture
  • Imagery
  • Identity
  • Sequencing
  • Animation
  • Sound
arts versus design
Arts versus Design
  • Arts is a form of expression
  • Design is a form of communication
communication design
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
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
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
organize9
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
organize10
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
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
Communicate
  • To communicate successfully, the interface must keep in balance:
    • Legibility
    • Readability
    • Symbolism
    • Multiple views
    • Typography
    • Color
legibility readability
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
Symbolism
  • To communicate the content efficiently, carefully select and refine
      • Icons
      • Symbols
      • Charts
      • Maps
      • Diagrams
      • Photographs
typography
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
typography16
Typography
  • 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
color
Color
  • Psychology
    • Individual character
      • Red = Hot, Vibrant, Passionate
      • Blue = Cool, Dependable, Depth
      • Yellow = Youth, Energy, Warmth
      • White = Serene, Calm, Clean
      • Purple = Rich, Royal, Classy
color20
Color
  • Color wheel
  • Color groups
    • Warm colors
      • Welcoming
      • Too much = Stuffy
    • Cool colors
      • Composed
      • Too much = Cold
color21
Color
  • Color groups
    • Complementary or Contrasting
    • Analogous or Harmonious
    • Monotone, Monochromatic, Dominance
color22
Color
  • Organization
    • consistency of organization
    • group related items
    • infer a similarity among objects
    • complete and consistent grouping objects
    • color coding scheme
  • Economy
  • Communication
  • Symbolism
color23
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
color24
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
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
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

God is in the details

sinojm@yahoo.com