• Solve communication problem between user and product
• Principles
• Focus
• Make core and essential part standout
• Match and support by others
  • Clean and Clear
• Aesthetically pleasing and elegant
• Remove non-essential and no use item
• Reduce distractions
• Avoid ambiguity
  • Simplicity
• Make it simple but not complicate
• Without much cognitive burden
• Reorganize and combine redundant item
  • Unity
  • Unified to produce coherent whole
  • Maintain harmony and cohesion
  • More aesthetic pleasing
  • Regularize & combine elements
• Consistency
  • Design and operation are same across different part

• Balance
  • Maintain harmony by distributing equal weight to elements, including negative space

• Visual Syntax
  • Structure: reinforce by consistent application of module
  • Predictability: respond to similar pattern & way
  • Efficiency: great production economies
  • Clear Focus: limited module reveals spatial logic
  • Flexibility: dealing with different situations
  • Maintainability and extensibility
  • Unity: tie elements work in concert for communication goal
  • Integrity: focus on goal by emergent form
  • Readability: divide content into manageable subsets
  • Control: predicts areas of interest and ease navigation through composition
  • Proximity: associate strongly with nearby elements
  • Similarity: share basic visual characteristics stronger
  • Continuity: prefer continuous, unbroken contours, closure as complete even with break
  • Maintain relationship: supplement & reinforce when visually related to one another
  • Focus by dominance of position, size & value using most effective visual cues
  • Balance: element arrangement with equal visual weigh to provide harmony & stability
  • Symmetry: identify axes especially vertical, balance info on each side
  • Alignment: reduce complexity, cleaner more understandable, major boundary, internal & external margin, align with something else
• Digital Media

Quality, resolution, performance, anti-aliasing, color and palettes, color depth, compression, 3d rendering, typography

• Functionality effective graphical user interface
• Appropriate:  apply color tone & style based on user profile
• Responsive to medium & size
• Follow big & close, path, faster point
• Element size (default/options), quantity
• Comprehensiveness

• Grid based design
  • Hierarchical, Baseline, Compound, Divisions, Message area, Icon, Menu
  • Establish perceptual layers by distinct regions, maximize similarity within minimize outside
  • Group by usage, rank importance, size/value/hue
  • Sharpening visual distinctions
  • Optical composition
  • Syntactic: internal structure
  • Semantics: relation between object and representamen
  • Pragmatics effect to interpreter
  • Group info flow pacing of content structure
  • Repetition of common element, widely spaced, consistent positing, common margins for rest, standard location & consistent presentation style
  • Organization & visual structure to provide visual pathway
  • Group to establish hierarchy for higher order unit
  • Bind functional unit together
  • Distinct from rest
  • Restructure & re-order info, right number of columns
  • Refinement, simplification, reduction, regularization, combination, e.g. scale, contrast, proportion
  • Divide into spatial zones with modules units and columns
  • Use of flowlines
  • Use of negative space for eye rest and direct attention to critical regions
  • Relative position show importance
  • Scale fit space and surrounding
  • Appropriate Coloring
  • Optical adjustment: perceptual not really actual, need optical adjustment for compensation
  • Impact
  • Visual Contrast by perceptual qualities of size, value, texture, hue, orientation, shape & position
  • Proportion: golden rectangle
  • Vertical: control height & spacing between controls
  • Horizontal: 3 times wider than vertical, 5-7 divisions
  • Differentiation & emphasis
  • Activity in predictable sequence
  • Interest: opposed visual qualities create tension, drama & excitement
  • Activity by elements exert influence on each other exaggerates their contrasting qualities
  • Eliminate unwarranted visual tension using space
  • Responsive and scalable for different screen resolution or font size
  • Test should be readable with proper spacing and avoid too many
  • International understandable icons
  • Elements: background, windows, panels, images, icons, video, sound, animation, text, buttons, controls
  • Modular
    • Generality
      • Omission of details represents broader object class
      • Represent higher groups -> essential characteristics
    • Cohesion – share qualities and easy recognize
      • Characterization – distinct features based on view point
• Form language, consistent size, orientation, layout, color, visual weight, same element
• Group if approximate or with similarity: continuance not fragmented even break, closed, symmetry (to known matter) or same movement (common fate)