Human-Computer Interaction for CSAI

by Albert Major

Typography, Layouts, and Color Theory

1. Typography Fundamentals

• Serif vs. Sans-Serif
  • Serif: Typefaces with small decorative lines or "feet" at the ends of strokes. Often associated with history or traditional formats.
  • Sans-Serif: "Sans" means "without" (from French/Latin). These typefaces lack the decorative feet. They are often viewed as modern or basic.
  • Contextual Usage: An author (Ellen Lupton) might use Serif for a book cover about history but Sans-Serif for a book titled "New Basics," using the font style to reinforce the message of the content.
• Monospace Typefaces
  • Definition: A font where every character occupies the exact same amount of horizontal space.
  • Coding Application: Heavily used in code editors (like VS Code).
  • Benefits:
    • Readability: The vertical alignment of characters makes code easier to scan.
    • Debugging: Because letter widths are uniform, line lengths are consistent. If a semicolon is missing or a character is off, the visual misalignment helps spot the error immediately. This is critical for languages like C++ or Python where structure matters.
• Kerning and Spacing
  • Concept: The adjustment of space between individual letters. Good typography balances this space so it looks visually even, not just mathematically equal.
  • Student Exercise: Graphic design students often have to hand-draw gigantic letters to learn the intuition of stroke width and spacing.

2. Historical Context (Steve Jobs' Influence)

• The Mac Connection: The lecturer bro referenced Steve Jobs' Stanford commencement speech.
• Calligraphy: After dropping out of college, Jobs audited a calligraphy class where he learned about serif/sans-serif typefaces and proportionally spaced fonts.
• Application: This artistic knowledge was integrated into the first Macintosh computer. It was the first computer to prioritize beautiful typography. Windows later copied this, establishing the standard for modern digital text.

3. Design Rules and Layouts

• The "Three Font" Rule:
  • Never use more than three different fonts in a single screen or design.
  • Usage: Assign functions to specific styles (e.g., Bold for Titles, Medium for Content).
  • Consistency: Keep colors consistent. If a title is black, do not randomly make body text blue unless it serves a function.
• Text Alignment
  • Left-Aligned: Standard for English and most western languages.
  • Right-Aligned: Used for languages like Arabic or Hebrew.
  • Centered: Indicates a break in flow, such as a quote or a summary in the middle of an article. It draws the eye to the center.
  • Justified: Text is spaced so both left and right edges are straight (like a newspaper).
  • Algorithmic Context: The lecture noted that calculating where to end a line in justified text (line breaking) is a Dynamic Programming problem in Computer Science.
• Grids
  • Definition: A structural framework made of intersecting vertical and horizontal lines.
  • Components:
    • Columns & Rows: The main containers for content.
    • Margins: The empty space between the content and the edge of the screen/device.
    • Gutters: The space between individual grid cells.
  • Functions:
    • Hierarchy: Tells the user what is a title vs. what is content.
    • Reusability: Allows designers to create a "card" (e.g., photo + text) and replicate it across the design without rebuilding it.
    • Efficiency: Standardizes the interface for both the designer and the user.

4. Color Theory

• Functional Color: In HCI (Human-Computer Interaction), color is functional, not just aesthetic.
  • Rule: If you change the color, you signal a change in functionality.
  • Example: If a button is Green on one page and Yellow on another, the user assumes they do different things.