L1 | IMAGING AND DESIGN FOR ONLINE ENVIRONMENT

• 8 BASIC PRINCIPLES OF GRAPHIC LAYOUT

  1. proportion
  2. balance
  3. contrast
  4. rhythm
  5. unity
  6. harmony
  7. emphasis
  8. layout
• PROPORTION

  • Regulate the size between one part and another
• BALANCE

  • Visual weight of objects, texture, colors, and space is evenly distributed.
• 2 TYPES OF BALANCE

  • symmetrical
  • asymmetrical
• SYMMETRICAL

  • elements on either side of the center of a composition in an equally weighted manner
• ASYMMETRICAL

  • inequality between two sides of a picture
• CONTRAST

  • Visual elements placed close together noticeably differ from each other
• RHYTHM

  • Repetition (repeating similar elements consistently) and variation (changes in shape, size, position or elements)
  • Pattern created by elements repeatedly and varied
• UNITY

  • Unify layout elements such as typography, illustrations, colors, etc.
  • Elements will support and complement each other so that the focus is obtained according to the desired goal.
• HARMONY

  • Suitability of one part with another
  • Can be in the form of:
  • Line and shape
  • Texture and color
• EMPHASIS

  • Something that becomes the focus or gets the attention first.
• LAYOUT

  • Can be divided into several parts (4, 3, and 2 parts) 
• ONLINE IMAGE FILE

  • jpeg
  • gif
  • png
• JPEG (jpg)

  • Joint photographic experts group
  • file types ending in .jpg
  • images that have been compressed to store a lot of information in a small size file.
  • Produced by digital photography.
• GIF 

  • Graphic Interchange Format
  • file types ending in .gif
  • compresses images
  • compression is lossless (no detail is lost in the compression, but the file can’t be made as small as a JPEG).
  • extremely limited color range suitable for the web but not for printing.
• PNG 

  • Portable Network Graphics
  • file types ending in .png
  • allows for a full range of color and better compression.
  • used almost exclusively for web images, never for print images.
• COLOR WHEEL

  • primary colors
  • secondary colors
  • tertiary colors
• PRIMARY COLORS

  • Red, Yellow, Blue 
• SECONDARY COLORS

  • Orange, Violet, Green 
• TERTIARY COLORS

  • Completes the color wheel to 12 basic colors
  • Created by mixing one primary color with an equal part adjacent, secondary color.
  • Red-violet, blue-violet, blue-green, yellow-green, yellow-orange, red-orange, red-violet
• • TINTS - Blended with white.
  • TONES - Blended with gray.
  • SHADES - Blended with black.
• WHY IS BLACK OR WHITE NOT ON THE COLOR WHEEL?

  • BLACK
  • Complete absence of colors
  • WHITE
  • Presence of all colors simultaneously
• PROPORTION

  
• BALANCE

  
• REPETITION

  
• RHYTHM

  
• UNITY

  
• LAYOUT

  
• EMPHASIS

  
• YELLOW (COLOR WHEEL AND EMOTIONS)

  • optimism, clarity, warmth
• ORANGE (COLOR WHEEL AND EMOTIONS)

  • cheerful, friendly, confidence
• RED (COLOR WHEEL AND EMOTIONS)

  • excitement, youthful, bold
• PURPLE (COLOR WHEEL AND EMOTIONS)

  • creative, imaginative, wise
• BLUE (COLOR WHEEL AND EMOTIONS)

  • trust, dependable, strength
• GREEN (COLOR WHEEL AND EMOTIONS)

  • peaceful, growth, health
• GRAY (COLOR WHEEL AND EMOTIONS)

  • balance, neutral, calm
• 2 TYPES OF CONTRAST

  1. SIZE CONTRAST
  2. COLOR CONTRAST