Module 01: Digital vs Physical — Design & Code Foundations

01

The Four Fundamentals

The four fundamental differences between digital and physical media that affect every design decision.

01

Light vs Ink

Screens emit light directly into your eyes (additive RGB). Print reflects light off ink on paper (subtractive CMYK). This changes how colors appear and what's possible.

02

Pixels vs Dots

Screens use discrete pixels that can change color instantly. Print uses dots of ink that blend optically. Resolution and sharpness work differently in each medium.

03

Dynamic vs Static

Digital content can change, respond, animate, and update. Print is fixed the moment it's printed. This enables interactivity but requires different design thinking.

04

Cost Structure

Print costs per copy increase with quantity and color. Digital costs are upfront with near-zero marginal cost per viewer. This changes what's economically feasible.

02

Spotting Code by Sight

As a designer, you'll encounter many programming languages. Learn to recognize them at a glance — and understand why only HTML, CSS, and JavaScript run in browsers.

HTML

Structure

✓

CSS

Style

✓

JavaScript

Behavior

✓

These are the ONLY languages browsers understand natively

The Browser's Native Languages

Browsers have built-in interpreters for exactly three languages: HTML, CSS, and JavaScript. No other language runs directly in a browser. Everything else must be compiled or converted to these three.

Fact: Every website you've ever visited uses HTML, CSS, and JavaScript

🐍 Python

def greet(name):
  return f"Hello, {name}!"

users = ["Alice", "Bob"]
for user in users:
  print(greet(user))

How to Spot Python

• Indentation matters (no braces)
• def for functions
• : after conditions/loops
• print() not console.log

⚠️ NOT FOR BROWSERS

Python runs on servers, data science, AI — but browsers can't execute it

Python — NOT a Web Language

Python is popular for backend servers, data analysis, and AI/ML. But browsers cannot run Python. If you see Python code, it's running on a server somewhere — not in your browser.

Server-side only: def + indentation + no braces = Python

⚙️ C++

#include <iostream>

int main() {
  int x = 42;
  std::cout << "Value: " << x;
  return 0;
}

How to Spot C/C++

• #include at the top
• Type declarations: int, char, void
• main() function required
• Pointers: *ptr, &addr
• :: scope operator

⚠️ NOT FOR BROWSERS

C++ builds browsers, games, OS kernels — but can't run inside browsers

C/C++ — System Languages

C and C++ are compiled languages used for operating systems, game engines, and performance-critical applications. Chrome itself is written in C++, but C++ code cannot run inside Chrome.

System-level only: #include + type declarations + pointers = C/C++

☕ Java

public class Hello {
  public static void main(String[] args) {
    System.out.println("Hello!");
  }
}

How to Spot Java

• public class ClassName
• public static void main
• System.out.println
• Types everywhere: String, int
• Very verbose syntax

⚠️ NOT FOR BROWSERS

Java runs Android apps, enterprise servers — NOT websites (Java ≠ JavaScript!)

Java — Enterprise Language

Java is NOT JavaScript! They're completely different languages. Java is used for Android apps and enterprise backends. It cannot run in web browsers. The similar name is a marketing decision from 1995.

Common confusion: public class + System.out.println = Java (NOT JavaScript!)

🍎 Swift (iOS)

func greet(name: String) {
  print("Hello, \(name)!")
}

let user = "Alice"

🤖 Kotlin (Android)

fun greet(name: String) {
  println("Hello, $name!")
}

val user = "Alice"

Swift patterns:
• func for functions
• let/var declarations
• \(variable) interpolation

Kotlin patterns:
• fun for functions
• val/var declarations
• $variable interpolation

Swift & Kotlin — Mobile Languages

Swift (Apple) and Kotlin (Android) are for native mobile apps. They look similar to JavaScript but cannot run in browsers. If you're designing a mobile app, developers use these — not web technologies.

Mobile-only: func/fun + let/val + type annotations = Mobile languages

The Browser Security Model

1

Security Sandbox

Browsers run untrusted code from the internet. HTML/CSS/JS are sandboxed — they can't access your files, install software, or harm your computer.

2

Standardization

All browsers (Chrome, Firefox, Safari, Edge) agree on HTML/CSS/JS standards. Adding new languages would require every browser to implement them identically.

3

Historical Lock-in

Billions of websites rely on these three languages. Changing would break the entire web. The web stack is essentially permanent.

Why Browsers Only Speak 3 Languages

Browsers are sandboxed environments that run untrusted code safely. HTML, CSS, and JavaScript were specifically designed for this. Other languages (Python, C++, etc.) can access files and system resources — too dangerous for browsers.

Key insight: The web's three languages are permanent. Learn them deeply.

HTML<tags>, attributes, angle brackets✓ Browser

CSS.selector { property: value; }✓ Browser

JavaScriptconst, =>, console.log✓ Browser

Pythondef, indentation, print()✗ Server

C/C++#include, int main(), pointers✗ System

Javapublic class, System.out.println✗ Enterprise

Swiftfunc, let/var, \(interpolation)✗ iOS

Kotlinfun, val/var, $interpolation✗ Android

Language Spotting Cheat Sheet

Use this reference when you encounter code in documentation, tutorials, or conversations. Recognizing the language helps you understand if it's relevant to web design or belongs to a different domain entirely.

Reference: When in doubt: angle brackets = HTML, curly braces with colons = CSS, everything else = probably JavaScript (for web)

03

Light vs Ink

The most fundamental difference: screens create light, paper reflects it. This physics shapes everything from color choices to readability.

Red + Green + Blue = White

RGB: Additive Color

Screens emit red, green, and blue light. Adding colors together creates brighter colors. All three at full intensity = white. No light = black.

Key point: RGB starts with black (no light) and adds to create white

Cyan + Magenta + Yellow = Black

CMYK: Subtractive Color

Print uses ink that absorbs (subtracts) light. Cyan absorbs red, magenta absorbs green, yellow absorbs blue. All three = absorbs all light = black.

Key point: CMYK starts with white (paper) and subtracts to create black

SCREEN

Emits light

RGB color model

Millions of colors

PRINT

Reflects light

CMYK color model

Limited gamut

Side by Side

RGB has a wider gamut (more possible colors) than CMYK. Vibrant screen colors often look dull when printed because CMYK can't reproduce them.

Key point: Always test colors in both mediums before finalizing

1Black backgrounds work on screens - emit less light, save battery on OLED

2Black backgrounds waste ink in print - expensive, can smear, paper shows through

3Neon colors exist on screen - #00ff00 impossible to print accurately

4Screen fatigue is real - staring at light source causes eye strain

Design Impact

These physics-based differences explain why print design and web design have evolved different conventions. Dark mode isn't just trendy - it reduces light emission.

Key point: Design choices should account for the physics of the medium

04

Pixels vs Dots

Resolution works differently on screens and in print. Understanding this prevents blurry images and poor text rendering.

Each square = 1 pixel (can be any color)

Screen Pixels

Screen pixels are discrete squares that each display one color. Modern screens: 72-326+ PPI (pixels per inch). Each pixel contains RGB subpixels.

Key point: 1x images look blurry on 2x (Retina) displays - always provide @2x versions

Dot size varies to create shades (halftone)

Print Dots (Halftone)

Print uses halftone dots that vary in size. Larger dots = darker areas. Professional print: 150-300 LPI (lines per inch). Your eye blends the dots.

Key point: Print needs 300 DPI minimum for sharp output at actual size

SCREEN

Standard: 72-96 PPI

Retina: 144-326 PPI

4K: ~163 PPI (27")

Phone: 400+ PPI

PRINT

Newspaper: 85 LPI

Magazine: 133-150 LPI

Art print: 175-200 LPI

Photo print: 300 DPI

Resolution Comparison

PPI = Pixels Per Inch (screen), DPI = Dots Per Inch (print), LPI = Lines Per Inch (halftone screen). Higher = sharper, but larger file sizes.

Key point: 72 DPI is a myth - screens use PPI, not DPI

RASTER (pixels)

JPG, PNG, GIF

Scales up = blurry

Fixed resolution

VECTOR (math)

SVG, PDF, AI

Scales infinitely

Resolution independent

Scaling Behavior

Raster images have fixed pixels - enlarging reveals the grid. Vector graphics are mathematical curves that recalculate at any size. Use vectors for logos, icons.

Key point: SVG is the web's vector format - use it for icons and logos

05

Dynamic vs Static

Print is frozen in time. Digital is alive. This fundamental difference enables interactivity but requires new design patterns.

THE DAILY NEWS

January 15, 2025

"Error printed on page 3 yesterday..."

Cannot be updated after printing

Print: Fixed Forever

Once printed, content cannot change. Errors require reprinting. Information becomes outdated. But it also creates permanence and archival value.

Key point: Print requires more careful review - there's no 'undo'

Breaking News

Updated 2 minutes ago

LIVE47 comments

Updates in real-time

Digital: Always Changing

Digital content updates instantly. Fix typos, update prices, show live data. But this means designs must handle changing content gracefully.

Key point: Design for content that can change length, count, and format

Hover effectsbuttons, links, cards

Click actionsnavigation, toggles, forms

Scroll animationsparallax, reveal, progress

Real-time updatesnotifications, chat, feeds

Interactivity

Digital design must communicate affordances: what can be clicked? What will happen? Print has no such requirement - it's entirely passive.

Key point: Interactive elements need clear visual cues (hover, focus, active states)

Button

Default

Button

Hover

Button

Active

Button

Disabled

State Design

Every interactive element needs multiple visual states. Print designers never think about hover states, loading states, or error states. Web designers must.

Key point: Design all states: default, hover, focus, active, disabled, loading, error

06

Cost Structure

Print and digital have fundamentally different economics. This shapes what's practical and what's wasteful in each medium.

Paper$ per sheet

Ink$ per page

Printing$ per copy

Shipping$ per unit

1000 copies = 1000x the materials

Print: Per-Copy Costs

Every printed copy costs materials. Color costs more than B&W. More pages = more cost. Economy of scale helps, but marginal cost is never zero.

Key point: Print design often balances beauty against budget

Development$$ once

Hosting$ per month

Bandwidthpennies per GB

Per Viewer~$0

1 viewer or 1 million = similar cost

Digital: Upfront Costs

Digital costs are primarily upfront (design, development) with minimal per-viewer cost. This enables reaching millions for the same price as reaching ten.

Key point: Digital rewards investment in quality - it scales infinitely

PRINT MINDSET

Minimize pages
B&W when possible
Standard paper sizes
Proof carefully

DIGITAL MINDSET

Add features freely
Full color always
Any viewport size
Iterate quickly

Design Implications

Print designers think in terms of physical constraints. Digital designers think in terms of user experience. Neither is better - they're different constraints.

Key point: Know your medium's economics before designing

Print: Fixing a Typo

Reprint all copies. Redistribute. Recall old ones. $$

Digital: Fixing a Typo

Edit file. Deploy. Everyone sees fix instantly. $0

Update Costs

Digital's near-zero update cost enables iteration. You can launch imperfect and improve. Print must be right the first time.

Key point: Digital allows 'ship and iterate' - print doesn't

09

Print vs Web

A direct comparison of how these physical differences manifest in design decisions.

undefined

Print

undefined

Web

undefined

Print

undefined

Web

undefined

Print

undefined

Web

undefined

Print

undefined

Web

undefined

Print

undefined

Web

undefined

Print

undefined

Web

undefined

10

The Science Behind It

Why do these differences matter? The physics and biology that explain the design implications.

Light travels at 299,792,458 m/s

Visible spectrum: 380-700nm wavelength

Electromagnetic Radiation

Screens emit photons. Paper reflects them. This fundamental physics difference means colors behave differently in each medium.

Key insight: What you see on screen will never perfectly match print

Cone Cells in Retina

L-cones (red)

M-cones (green)

S-cones (blue)

Cone Cells in Retina

RGB matches our biology: we have three types of color-sensing cones. Screens exploit this - three colored subpixels can create any perceived color.

Biology: RGB isn't arbitrary - it's based on human vision

Screen

Direct light source

Blue light exposure

Causes fatigue

Paper

Reflected ambient light

No blue light

Less fatigue

Light Source vs Reflection

Staring at a light source (screen) causes eye strain. Paper reflects ambient light, which is easier on eyes. This is why dark mode and e-ink exist.

Health tip: Dark mode reduces light emission, easing eye strain

RED

On screen: vibrant

RED

In print: duller

Same hex code, different perception

RGB vs CMYK Gamut

CMYK gamut is smaller than RGB. Many screen colors simply cannot be reproduced in print. Designers must choose print-safe colors or accept differences.

Workflow: Always test screen designs in print before finalizing for both mediums

11

Real-World Examples

How major brands handle the print-to-digital transition and vice versa.

iPhone

Principles Identified:

Additive Color Uses vibrant RGB colors that can't exist in print - pure #000000 blacks on OLED

Dynamic Content Product pages update instantly for launches, pricing, availability

Interactive 3D product spins, configuration tools, AR preview - impossible in print

Key insight: Apple's digital-first design uses capabilities impossible in print catalogs

The New York Times

All the News That's Fit to Print

HEADLINE

The New York Times

Breaking News

UPDATING LIVE

Principles Identified:

Color Shift Print is B&W for cost. Digital uses full color with dark mode option

Dynamic Updates Breaking news updates in seconds online vs. once-daily print edition

Interactivity Online has comments, sharing, personalized feeds - print is static

Key insight: The same content requires completely different design approaches

IKEA

Catalog 2021: Final Edition

200 million copies printed since 1951

Principles Identified:

Cost Transition Discontinued after 70 years - digital is cheaper to update and distribute

Environmental Paper/ink/shipping cost vs. nearly zero marginal cost online

Dynamic Inventory Online shows real-time stock, prices, local availability

Key insight: Digital economics eventually made print catalog unsustainable

Payments infrastructure

for the internet

Principles Identified:

RGB-Only Colors Gradient uses colors impossible in CMYK - pure digital design

Animation Homepage features moving elements impossible in print

Interactive Docs API documentation with live code examples - can't exist on paper

Key insight: Some designs are digital-native and shouldn't attempt print translation

12

Common Failures

Mistakes that happen when designers don't understand the medium differences.

Failure: RGB in Print

Designed in RGB

Fix: Convert to CMYK

Converted to CMYK

Rule: RGB neon greens become muddy in print. Convert early and adjust design for CMYK gamut.

Failure: 72 DPI Images

BLURRY

72 DPI = pixelated print

Fix: Use 300 DPI for print

SHARP

300 DPI = crisp print

Rule: Web images are too low-resolution for print. Always get/create high-res source files.

Failure: No Hover States

Only default state

Fix: Design all interactive states

All states designed

Rule: Print designers forget hover states. Every clickable element needs hover, focus, and active states.

Failure: Fixed Layouts

Design: 1920x1080px fixed

Breaks on mobile

Fix: Design responsively

Design: Flexible grid + breakpoints

Works on all devices

Rule: Print has fixed dimensions. Web must adapt to any viewport. Design mobile-first.

13

Visual Tests

Quick checks to verify you're designing appropriately for your medium.

01

Gamut Check

Tests: Color Compatibility

In Photoshop/Illustrator: View > Gamut Warning. Any colors flagged are unprintable in CMYK.

Out of gamut

With warning

02

Resolution Check

Tests: Print Readiness

Image > Image Size in Photoshop. At print size, is it 300 DPI? If under 150 DPI, it will look pixelated.

Document: 3000 x 2000 px

At 10" x 6.67":300 DPI

At 20" x 13.34":150 DPI (too low)

03

Interactive Audit

Tests: State Completeness

For every clickable element, verify: default, hover, focus, active, disabled states exist and are distinct.

Def

default

Hov

hover

Foc

focus

Act

active

Dis

disabled

04

Viewport Test

Tests: Responsiveness

View your design at: 320px (old phone), 375px (iPhone), 768px (tablet), 1024px (laptop), 1440px (desktop).

14

CSS Implementation

Code patterns for handling digital-specific design requirements.

:root {
  /* Light mode (default) */
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-primary: #0066cc;
  --color-secondary: #6b7280;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #121212;
    --color-text: #e5e5e5;
    --color-primary: #66b3ff;
    --color-secondary: #9ca3af;
  }
}

Color Tokens via CSS

--color-bg - Background adapts to light/dark mode
--color-text - Text color with sufficient contrast
prefers-color-scheme - Detects user's system preference

Tip: Dark mode isn't just colors - reduce contrast slightly to avoid eye strain.

<img
  srcset="hero-320.jpg 320w,
          hero-768.jpg 768w,
          hero-1200.jpg 1200w,
          hero-2400.jpg 2400w"
  sizes="(max-width: 768px) 100vw,
         50vw"
  src="hero-1200.jpg"
  alt="Hero image"
>

Responsive Images via CSS

srcset - List of image sources with widths
sizes - How much viewport width image uses
2x images - 2400w serves Retina at 1200px

Tip: Let browser choose optimal image - don't force high-res on slow connections.

.button {
  background: var(--color-primary);
  transition: all 0.2s ease;
}

.button:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

.button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.button:active {
  transform: translateY(0);
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

Interactive States via CSS

:hover - Mouse over state
:focus-visible - Keyboard focus (not click)
:active - Being pressed
:disabled - Cannot be interacted with

Tip: Use :focus-visible instead of :focus to avoid ugly outlines on click.

.hero {
  /* Full viewport height minus header */
  min-height: calc(100vh - 60px);
  min-height: calc(100dvh - 60px);
}

.full-bleed {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.responsive-text {
  font-size: clamp(1rem, 2vw + 0.5rem, 2rem);
}

Viewport Units via CSS

vh/vw - 1% of viewport height/width
dvh - Dynamic viewport (mobile safe)
clamp() - Responsive without media queries

Tip: Use dvh on mobile - vh doesn't account for browser chrome.

15

Self-Assessment

Test your understanding of digital vs physical media differences.

Q1

Why can't neon green (#00ff00) be accurately printed?

Click to reveal

Q2

What resolution should images be for print vs. web?

Click to reveal

Q3

What interactive states should every button have?

Click to reveal

Q4

Why did IKEA discontinue their print catalog after 70 years?

Click to reveal

Print Catalog

200 million copies/year

Static at print time

Website

Unlimited views

Real-time updates

Q5

What does 'additive color' mean and why does it matter?

Click to reveal

Digital vs Physical

Core Concepts

The Four Fundamentals

Light vs Ink

Pixels vs Dots

Dynamic vs Static

Cost Structure

Spotting Code by Sight

Light vs Ink

Pixels vs Dots

Dynamic vs Static

Cost Structure

Print vs Web

Print vs Web

Science & Psychology

The Science Behind It

Real-World Examples

Real-World Examples

Common Failures

Common Failures

Visual Tests

Visual Tests

Gamut Check

Resolution Check

Interactive Audit

Viewport Test

CSS Implementation

CSS Implementation

Self-Assessment

Self-Assessment

Key Takeaways