Ceefax, 1974broadcast data in the vertical blanking interval, 40×24 charactersdrawn with: cells() 80×72 sixels · one colour per 2×3 character cell · a black control-code cell before every colour change · double-height headlinekind: platform constraint
Tap a plate to watch the jump
22
ZX Spectrum
Attribute clash, 1982256×192 bitmap, colour per 8×8 cell, 15 coloursdrawn with: cells() 256×192 · 1-bit figure by Bayer threshold · PAPER per 8×8 attribute from the dilated subject · FLASH 1.6 Hz · loading-stripe borderkind: platform constraint
Tap a plate to watch the jump
23
Commodore 64
Home computer, 1982160×200 multicolour, 16 colours, 4×8 cells of 4drawn with: cells() 160×200 at 2:1 · Lospec 16 · ≤4 colours per 4×8 cell (extras remapped to the cell's nearest) · PETSCII frame · blinking READY. cursorkind: platform constraint
Tap a plate to watch the jump
24
IBM PC CGA
Palette 1, 1981320×200, 2 bits per pixel, 16 KB video RAMdrawn with: cells() 320×200 · 4×4 Bayer ordered dither into cyan / magenta / white / black · 1.2× tall pixels · 40-column bitmap textkind: platform constraint
Tap a plate to watch the jump
25
8-bit console
Famicom era, 1985256×240, 3 colours + transparent per sprite, 8 sprites per linedrawn with: cells() 256×240 · three-colour sprite with dark outline · 16×16 background blocks · alternate-frame flicker past 8 sprites · tile fontkind: platform constraint
Tap a plate to watch the jump
26
Vector arcade
XY monitor, 1980electron beam steered along each line, colour overlay filmdrawn with: M.edges wireframe, hidden lines included · 1.5-px strokes with shadowBlur halation · vertex hot-spots · red film over the top fifth · stroked 3×5 fontkind: platform constraint
Tap a plate to watch the jump
27
Macintosh 1-bit
MacPaint, 1984512×342 one-bit bitmap, 8×8 pattern fills, Atkinson ditherdrawn with: cells() 183×174 · tone grid → atkinson() → pure black and white · 8×8 bit-mask pattern ground · striped title bar · 3×5 font at 2×kind: platform constraint
Tap a plate to watch the jump
28
16-bit console
Super Famicom and Mega Drive, 1991256×224, 15-colour sprites, layered backgroundsdrawn with: cells() 256×224 · 15-colour sprite with a four-step ramp per material · three parallax layers · 50% fog band · 2×2 ordered-dither waterfallkind: platform constraint
Tap a plate to watch the jump
29
Windows 95
Desktop chrome, 1995640×480 at 256 colours, bitmap UI, 32×32 icons in 16 VGA coloursdrawn with: cells() 32×32 → 16 VGA colours, skin as a yellow/white checker · 1-px two-tone bevels · navy title bar · teal desktop · taskbar and Start · dotted focus rectkind: platform constraint
Tap a plate to watch the jump
30
GeoCities
Personal home page, 1996HTML tables and GIFs over a 28.8k modem, 216 web-safe coloursdrawn with: tiled 100×100 starfield · bevelled <table> · web-safe quantise, 2-px pixels, 1-bit white fringe · rainbow <font> heading · hit counter, marquee, construction stripkind: platform constraint
Tap a plate to watch the jump
31
Frutiger Aero
Glossy desktop, 2007GPU-composited UI and stock imagery: glass, water, grass, lens flaredrawn with: blue→green gradient sky · gel shading with a highlight ellipse on the head · 20% flipped reflection · bokeh circles and a lens flare · light white text with glowkind: UI trend
Tap a plate to watch the jump
32
Skeuomorphism
Touch-screen apps, 2010rendered linen, leather, stitching and aqua glossdrawn with: fbm linen ground · leather panel with [6,4] stitch dashes · inner shadow + highlight pairs · aqua gloss sheet over the top half · 1-px white text shadow · drawFlat() inside the iconkind: UI trend
Tap a plate to watch the jump
33
Flat / Material
Mobile UI, 2013vector shapes, solid colour, no strokes; Material adds an elevation shadowdrawn with: one colour per slot, no strokes · long shadow as the convex hull of each part and its 45° offset, clipped to the disc · Material FAB with an elevation shadowkind: UI trend
Tap a plate to watch the jump
34
Glassmorphism
Frosted panels, 2020CSS backdrop-filter: blur, a 12% white fill, a 1-px rimdrawn with: radial-gradient orbs · the panel's blur as a 20-px downscale drawn back up with smoothing · rgba(255,255,255,.12) fill, 1-px .25 rim, soft shadow · neu and clay buttons at the footkind: UI trend
Tap a plate to watch the jump
35
Corporate Memphis
Tech illustration, 2017flat SVG people: noodle limbs, small heads, four colours, no outlinesdrawn with: noodle limbs as thick round-capped quadratic curves from the rig's joints · head at 1/9 · hands 1.4× · purple skin, four flat colours, no strokes · a plant and a laptopkind: UI trend
Tap a plate to watch the jump
36
Isometric
Pixel-iso, 1982 and 20152:1 dimetric projection, three face shades, floating slabdrawn with: build() at yaw 45°, pitch 30°, persp 0 · faces shaded 1.0 / 0.8 / 0.6 by normal · slab and crates from Pw() ground points · 8-px extrusion · no outlineskind: revival
Tap a plate to watch the jump
37
Vaporwave
Internet aesthetic, 2012Photoshop, Windows screenshots, VHS damage, Times New Romandrawn with: perspective checker floor · marble-bust shading with a warm highlight · splitRGB() 2-px channel offset · every third scanline jittered · noise band · Win95 dialog overlaykind: revival
Tap a plate to watch the jump
38
Synthwave
Outrun, 2014neon on midnight: grid, striped sun, chrome type, scanlinesdrawn with: perspective grid #FF2975 on #0D0221 with shadowBlur, scrolling · striped sun by horizontal gaps growing downward · chrome gradient clipped to the hulls · neon features · scanlines() 2 px / 30%kind: revival
Tap a plate to watch the jump
39
Glitch
Datamosh, 2009compression artefacts kept on purpose: JPEG blocks, MPEG motion smeardrawn with: cells() 100×100 · pixel-sort of bright runs per column · 6–20 slices shifted ±4–30 px · 16-px block copies · splitRGB() with screen compositing · hex dump in Space Monokind: revival