------------------------------------------------------------------------------
MC logo
Design
[^] CSc 302 Outlines
------------------------------------------------------------------------------
<<Images Site Design>>
  1. Forms.
    1. Point, line, plane, volume.
    2. Basic shapes: circle, rectangle, triangle, square and other regular polygons.
    3. Path: Direction of motion.
    4. Size, texture, color.
    5. Stroke: The outline of the figure.
    6. Fill: The contents of the area.
    7. Combining shapes: Separate, touching, overlapping, punched, intersected, coincident. (p. 46)
  2. Psychology.
    1. Figure v. ground.
    2. Objects are grouped by proximity.
    3. Objects are grouped by similarity.
    4. Closes gaps and completes shapes.
    5. Mind prefers regularity, with vertical and horizontal.
  3. Other principles.
    1. Balance.
    2. Positive and negative space.
    3. Repetition, rhythm and pattern.
      Interruptions draw attention.
  4. Colors
    1. Color wheel.
      1. Primary, secondary, tertiary colors.
      2. Complimentary colors: Opposite on the wheel.
        Split compliments: One color off the compliment.
      3. Analogous colors: Nearby on wheel.
    2. Warm and cold.
    3. Tints and tones: Create unity. (For instance, this or this.)
    4. Interactive color wheel.
  5. Typography.
    1. You have somewhat limited control over fonts displayed on the browser.
    2. Terms (see p. 57, 58): Font, Type family, Stroke, Thick/thin, Condensed, Expanded, Tracking, Kerning, Baseline, x-height.
    3. Measurements: Point, pica.
    4. Leading: Space between lines.
    5. Classifications.
    6. Serif/Sans serif.
    7. Using fonts.
      1. Browser resource. (Say whatever you want in HTML, if it's not there, it won't happen.)
      2. Arial, Verdana, Trebuchet, Times Roman.
      3. Sans for headings, serif for text (Like this one).
      4. Decorative fonts for headers. Generally make them into graphics. For instance.
      5. Don't use too many fonts. It's a web page, not a ransom note.
      6. Use white space for emphasis.
      7. Reversed colors make text look smaller.
        Reversed colors make text look smaller.
        .
<<Images Site Design>>