UX Encyclopedia

Art & Design Movements (c. 1840–1990)

Reference for translating historic visual languages into briefs. Facts verifiable against standard design-history references (Meggs; Heller & Chwast — see Sources). Each entry: era, ideas, visual traits, type, palette, exemplars.

Try it — same skeleton, different skin. One component, restyled by movement: palette, type character, shape language, and motif change; layout, hierarchy, and contrast floors don't. (See Applying Historical Styles.)

Victorian (c. 1837–1901, UK/US)

Victorian style plate: an ornate double-rule frame with corner fleurons and dense symmetrical filigree on parchment, beside a palette of burgundy, deep green, gold, brown, and parchment. palette (interpretation) #6b2130 burgundy #23503a deep green #a8842f gold #5c4033 brown #e9dcc3 parchment
Horror vacui in one frame — double rules, corner fleurons, a filled center: to the Victorian eye, empty space read as unfinished. More examples: Wikimedia Commons · Cooper Hewitt.

Industrialized eclecticism and sentiment; ornament as abundance (horror vacui — fear of empty space). Traits: elaborate borders and frames, chromolithography, mixed revival styles on one page, dense symmetrical layouts (wood-type playbills; chromolithographed trade cards, labels, packaging). Type: ornamented display — fat faces, Tuscans, slab serifs, many faces per composition. Palette: rich saturated — burgundy, deep green, gold, brown.

Arts & Crafts (c. 1860–1910, UK)

Arts and Crafts style plate: a repeating hand-drawn vine-and-leaf border tile with russet berries between double rules, beside a palette of deep green, russet, gold, cream, and walnut. palette (interpretation) #33502f deep green #7a3b22 russet #b08d3e gold #ece2c6 cream #4a3a2a walnut
A vine border drawn by hand in earthy inks — ornament taken from nature and meant to look made by a person, not a machine. More examples: Wikimedia Commons · V&A.

Reaction against industrial mass production; craftsmanship, honest materials (William Morris; the Kelmscott Press). Traits: dense organic ornament, decorated borders, medieval/gothic influence, hand-drawn quality. Type: blackletter revivals, Jenson-inspired serifs (Golden Type). Palette: earthy — deep greens, russet, gold, cream.

Art Nouveau (c. 1890–1910, France/Belgium + variants: Jugendstil,

Art Nouveau style plate: a single asymmetric whiplash curve in sage with an ochre echo line, a dusty-rose bud, and peacock accents, beside a palette of sage, ochre, dusty rose, peacock, and cream. palette (interpretation) #7d9165 sage #c1913e ochre #c48b83 dusty rose #2a6e74 peacock #f1e9d6 cream
One whiplash line does all the work — organic, asymmetric, drawn rather than constructed, with the bud as its only destination. More examples: Wikimedia Commons · V&A.

Secession, Modernisme) "Total art" of organic line. Traits: whiplash curves, botanical and female figures, asymmetry, integrated hand-lettered type (Mucha posters; Guimard Métro entrances; Tiffany glass; Horta; Gaudí). Palette: muted naturals — sage, ochre, dusty rose, peacock. Type: flowing, organic, custom-lettered.

Futurism (1909–c. 1930s, Italy)

Futurism style plate: speed lines radiating from the lower left with tilted clashing type reading Zang Tumb Tumb, beside a palette of black, red, cream, steel blue, and orange. ZANG TUMB TUMB palette (interpretation) #1a1a1a black #c1272d red #eee3c8 cream #2e5a87 steel blue #d97b29 orange
Words in freedom — type leaves the horizontal line and becomes the picture, with speed drawn literally (after Zang Tumb Tumb, 1914). More examples: Wikimedia Commons · Tate.

Marinetti's 1909 manifesto: speed, machines, war on tradition. Traits: explosive diagonal composition; "words in freedom" (parole in libertà) — type as image, onomatopoeia, clashing weights and sizes on one page (Marinetti's Zang Tumb Tumb, 1914; Depero's advertising work). Freed type from the horizontal line — an ancestor of all expressive layout.

Dada (c. 1916–1924, Zurich/Berlin/Paris)

Dada style plate: four tilted ransom-note letter tiles spelling dada in clashing typefaces on newsprint, with a torn paper strip, beside a palette of newsprint, kraft, off-white, ink black, and red. D a D A m z palette (interpretation) #d8d0bd newsprint #b0a68f kraft #ece5d2 off-white #1c1b19 ink black #b32020 red
Letters cut from four different pages, glued at whatever angle they landed — chance and collage set against order, the ancestor of ransom-note punk type. More examples: Wikimedia Commons · Tate.

Anti-art absurdism born of WWI disgust. Traits: chance-driven collage and photomontage, chaotic mixed typography, found imagery, satire (Hannah Höch; Berlin Dadaist John Heartfield, whose photomontage matured into 1930s political work; Schwitters's Merz; Tzara). Palette: newsprint neutrals + red/black. Direct ancestor of punk collage and ransom-note type.

Surrealism (1924–c. 1940s, Paris; from Breton's first manifesto)

Surrealism style plate: a doorway standing alone in open ground under a gradient sky, its long shadow falling toward the sun, with one cloud resting on the ground, beside a palette of sky blue, twilight, sand, cloud white, and umber. palette (interpretation) #8fb3d4 dream sky #2b3a4e twilight #d3bd90 sand #ece7da cloud white #55432f umber
Ordinary things in impossible relation — a door with no wall, a shadow that falls toward its sun, a cloud that has landed. Rendering stays calm; the logic is what's wrong. More examples: Wikimedia Commons · Tate.

Dream logic and the unconscious. Traits: uncanny juxtaposition, realistic rendering of impossible scenes, symbolic recurring objects (Magritte; Dalí; Ernst's collage novels). Absorbed by advertising and editorial imagery ever since. UI use: concept/hero imagery and illustration — composition and interaction stay conventional.

Art Deco (c. 1920s–1930s, from 1925 Paris Exposition)

Art Deco style plate: a symmetric gold sunburst and stepped ziggurat on black with jade chevrons and cream arcs, beside a palette of black, gold, cream, jade, and deep red. palette (interpretation) #14141a black #c9a227 gold #ece1c4 cream #2e6f5e jade #7d2231 deep red
Sunburst, chevron, ziggurat — strict symmetry and machine geometry dressed in gold on black: luxury you could set in chrome. More examples: Wikimedia Commons · V&A.

Machine-age luxury and optimism. Traits: symmetry, geometry — sunbursts, chevrons, zigzags, stepped/ziggurat forms, streamlining; lavish materials (gold, chrome, lacquer) (Chrysler Building; Cassandre's posters). Type: geometric sans and display faces — Broadway, Bifur; Futura-adjacent geometry with decorative inlines. Palette: black + gold, cream, jade, deep reds/blues.

Streamline Moderne (c. 1930–early 1940s, US)

Streamline Moderne style plate: a chrome teardrop form with three trailing speed lines above a rounded navy band with three portholes and a seafoam stripe, beside a palette of cream, seafoam, chrome, navy, and steel gray. palette (interpretation) #efe6d0 cream #a8cfc0 seafoam #c6cbd0 chrome #1f3352 navy #7d858c steel gray
One teardrop, three speed lines, a rounded band with portholes — Deco's ornament stripped back until aerodynamics is the decoration. More examples: Wikimedia Commons · Cooper Hewitt.

Depression-era successor to Deco, led by industrial designers (Loewy; Bel Geddes; Dreyfuss; Teague). Traits: aerodynamic teardrop forms, horizontal speed lines, rounded corners, smooth surfaces, chrome trim, porthole windows; ornament stripped back relative to Deco. Palette: cream, seafoam, silver/chrome, navy. Type: rounded geometric sans, speed-slanted scripts.

Constructivism (c. 1915–1930s, Russia) & Suprematism

Constructivism style plate: a red wedge piercing a white circle across a black diagonal bar on cream, after Lissitzky, beside a palette of red, black, cream, white, and gray. palette (interpretation) #c22d20 red #1a1815 black #e9e0cb cream #f5f2ea white #6f6a60 gray
A red wedge drives into a white circle across a hard diagonal — abstraction as argument, after Lissitzky's Beat the Whites with the Red Wedge. More examples: Wikimedia Commons · Tate.

Art as social construction; abstraction serving revolution. Traits: diagonal dynamism, photomontage, bold geometric blocks, stark asymmetry (El Lissitzky "Beat the Whites with the Red Wedge"; Rodchenko; Stenberg brothers). Palette: red, black, white/cream dominant. Type: heavy geometric sans, often angled, mixed sizes as composition.

De Stijl (1917–1931, Netherlands)

De Stijl style plate: a Mondrian-like composition of black grid lines with rectangles of red, blue, yellow, and gray on white, beside a palette of red, blue, yellow, black, and white. palette (interpretation) #cf1e22 red #24499e blue #ecc21c yellow #16161a black #f6f4ec white
Only horizontals, verticals, primaries and non-colors — universal harmony sought by restriction, never by addition. More examples: Wikimedia Commons · Tate.

Universal harmony via pure abstraction. Traits: strict horizontals/ verticals, black grid lines, rectangles of primary color on white (Mondrian; Rietveld's Red and Blue Chair; van Doesburg). Palette: red/blue/yellow + black/white/gray only. Type: geometric, architectural.

Bauhaus (1919–1933, Germany)

Bauhaus style plate: a yellow triangle, red square, and blue circle overlapping in an asymmetric layout crossed by one thin black rule, beside a palette of red, blue, yellow, black, and off-white. palette (interpretation) #be1e2d red #21409a blue #f2b705 yellow #121212 black #f2efe8 off-white
Circle, square, triangle in primaries, set asymmetrically — form reduced to teachable elements, color used structurally rather than decoratively. More examples: Wikimedia Commons · Bauhaus-Archiv.

Art + craft + industry unified; form follows function pedagogy (Gropius; Moholy-Nagy; Bayer; Kandinsky/Klee taught there). Traits: geometric primitives (circle/square/triangle), asymmetric functional layouts, photography over illustration, minimal ornament. Type: geometric sans-serif; Bayer's Universal lowercase-only experiment. Palette: primaries + black/white, used structurally. Legacy: the root of modern design education and the International Style.

Swiss / International Typographic Style (c. 1950s–70s, Switzerland)

Swiss style plate: a strict column grid with flush-left black type bars and a single red accent block, beside a palette of paper white, ink black, signal red and two grays. palette (interpretation) #F2F2F0 #1A1A1A #E63329 #7A7A7A #D8D8D6
The grid does the talking: flush-left text on mathematical columns, acres of whitespace, and exactly one signal color. More examples: Wikimedia Commons · SFMOMA.

Objective clarity as ethics. Traits: mathematical grid systems, asymmetric layouts, flush-left ragged-right, generous whitespace, objective photography, sans-serif type as neutral voice (Müller-Brockmann; Ruder; Hofmann; typefaces: Helvetica 1957, Univers 1957, Akzidenz-Grotesk). Palette: restrained; often B/W + one signal color (red). The direct ancestor of modern UI design and flat design.

Corporate Modernism (c. 1960s–1980s, US/international)

Corporate modernism style plate: a striped geometric logomark in a circle on a clean letterhead grid, beside a palette of corporate blue, mark red, black, cool gray and white. palette (interpretation) #1F70C1 #C8102E #1A1A1A #9AA2AA #FAFAF8
The Swiss method sold to the boardroom: one reductive mark, one grid, one color — repeatable on anything from a letterhead to a jet. More examples: Wikimedia Commons · Cooper Hewitt.

The Swiss method industrialized into corporate identity: logo + grid + Helvetica + standards manual (Paul Rand's IBM program; Chermayeff & Geismar's Chase octagon; Vignelli/Unimark's American Airlines and NYC subway signage; Danne & Blackburn's NASA "worm" and its 1970s Graphics Standards Manual). Traits: reductive geometric marks, one-color reproduction discipline, rigorous grids, everything systematized. The direct ancestor of today's design systems.

Mid-Century Modern (c. 1945–1965, US/Scandinavia)

Mid-century modern style plate: teal and mustard boomerang shapes with an atomic starburst on warm cream, beside a palette of mustard, teal, burnt orange, olive and walnut. palette (interpretation) #E1AD01 #00797B #CE5B22 #6B6B33 #5B4232
Postwar optimism in shapes: the boomerang and the atomic starburst — geometry gone friendly, in mustard, teal and walnut. More examples: Wikimedia Commons · Vitra Design Museum.

Postwar optimism, democratic good design. Traits: organic + geometric mix, atomic/space motifs (starbursts, boomerangs), playful illustration, clean lines with warmth (Eames; Saarinen; Girard; Paul Rand's corporate work bridges to Swiss). Palette: mustard, teal, orange, olive, walnut. Type: humanist sans + playful scripts.

Space Age / Googie (c. 1945–early 1970s, US)

Googie style plate: an upswept cantilevered roofline with a coral starburst at its tip and a yellow signage arrow, beside a palette of turquoise, coral, yellow, chrome and charcoal. palette (interpretation) #35B5B0 #F2695C #F5C518 #C9CED2 #33383D
Roadside rocket-age salesmanship: the roof sweeps up, the starburst pops, and an arrow makes sure you didn't miss it at 40 mph. More examples: Wikimedia Commons · Los Angeles Conservancy.

Rocket-age roadside exuberance — the loud commercial cousin of Mid-Century Modern (named for Googies coffee shop, West Hollywood, 1949, by John Lautner; LAX Theme Building). Traits: upswept cantilevered angles, starbursts, boomerangs, atomic-orbit motifs, oversized signage. Palette: turquoise, coral, yellow, chrome. Use when MCM warmth should tip into kitschy retro-futurist fun.

Pop Art (c. 1955–70, UK/US)

Pop art style plate: a field of red Ben-Day dots on loud yellow with a thick black-outlined blue circle and a white comic starburst, beside a palette of yellow, red, blue, black and white. palette (interpretation) #FFD400 #ED1C24 #0072CE #111111 #FFFFFF
Comic-book printing promoted to fine art: Ben-Day dots, thick black outlines, and flat color turned all the way up. More examples: Wikimedia Commons · Tate.

Mass culture as fine art. Traits: comic-book idioms (Ben-Day dots, thick outlines — Lichtenstein), repetition and screenprint flatness (Warhol), consumer iconography, bold saturated color. Type: loud display, comic lettering, advertising vernacular.

Psychedelia (c. 1965–72, San Francisco/London)

Psychedelia style plate: concentric liquid rings of close-valued red and green that vibrate against a purple ground, beside a palette of vibrating red, green, orange, purple and indigo. palette (interpretation) #E8442A #1E9E4C #F5851F #7B2D8B #2F2A85
Complements at nearly the same value make the edges shimmer — legibility deliberately strained until the poster becomes the trip. More examples: Wikimedia Commons · SFMOMA.

Counterculture concert posters (Wes Wilson; Victor Moscoso; Milton Glaser's Dylan adjacency). Traits: liquid/melting hand lettering (legibility deliberately strained), vibrating complementary colors, Art Nouveau revival curves, dense swirling compositions.

Memphis (1981–88, Milan) & 80s New Wave

Memphis style plate: a black squiggle over terrazzo confetti and a stack of clashing geometric shapes, beside a palette of pink, aqua, yellow, black and cream. palette (interpretation) #F25C9B #3EC5C0 #FFD23F #131313 #F5F0E6
Sottsass's rulebook bonfire: squiggles, terrazzo confetti, and shapes stacked like they lost a bet — "bad taste" deployed with total precision. More examples: Wikimedia Commons · Design Museum.

Sottsass's anti-functional playground. Traits: clashing pastels + brights, black-and-white patterns (squiggles, terrazzo, grids), stacked geometric shapes, laminate aesthetics, deliberate "bad taste" wit. Type: quirky geometric, scattered baselines. Digital cousin: 2010s "Memphis revival" flat illustration.

Punk & Grunge (c. 1975–79; 1990s)

Punk style plate: ransom-note letter tiles spelling PUNK, rotated on mismatched blocks over newsprint, above a torn black paper strip, beside a palette of black, newsprint, red, shocking pink and acid yellow. P U N K palette (interpretation) #141414 #EDE6D6 #D0021B #E754A6 #F0E522
Anti-design as the message: letters cut from four different papers, nothing aligned, edges torn — hostility to polish is the whole point. More examples: Wikimedia Commons · V&A.

Anti-design as message. Punk: ransom-note cut-out type, photocopy texture, DIY collage (Jamie Reid's Sex Pistols work). Grunge (1990s): layered distressed type, broken grids, experimental legibility (David Carson, Ray Gun). Both: use when rebellion IS the brand; hostile to usability by nature — see Applying Historical Styles to Modern UI.

Functional Minimalism (1960s–, Ulm school → Braun → today)

Functional minimalism style plate: a Braun-like dial — a perfect circle with hairline ticks, a plain knob and a single orange dot marker on a matte gray case, beside a palette of case white, light gray, graphite, near-black and one orange accent. palette (interpretation) #ECEBE7 #C9C9C5 #4A4A48 #1D1D1B #EE7203
"As little design as possible": one circle, hairline ticks, one dot of color — everything else earns its absence. More examples: Wikimedia Commons · Vitsœ.

Rams's Braun work and his Ten Principles of Good Design ("good design is as little design as possible") — the acknowledged aesthetic ancestor of Apple's industrial design (Ive has said so publicly). Traits: reduction to essentials, precise spacing, restrained monochrome + one accent, perfect alignment, no ornament.

Japanese minimal / wabi-sabi (traditional → MUJI, contemporary)

Wabi-sabi style plate: a single asymmetric ink brush arc and a small stone form on warm paper that is mostly left empty, beside a palette of washi cream, sumi ink, stone gray, clay and moss. palette (interpretation) #EFE9DD #3A3733 #8C857A #A98467 #7D8471
Ma — the emptiness is the content: one imperfect brush arc, one stone, and room enough for both to breathe. More examples: Wikimedia Commons · Design Museum Japan.

Ma (negative space as content), asymmetry, imperfection and impermanence as beauty (wabi-sabi), natural materials and muted tones; commercial expression: MUJI's "no-brand" calm (Kenya Hara's writings). Traits for UI: extreme whitespace, quiet type, soft naturals, few elements each given room.

Sources

  • Meggs, P. & Purvis, A. Meggs' History of Graphic Design (Wiley, latest ed.) — the standard survey covering all movements above.
  • Heller, S. & Chwast, S. Graphic Style: From Victorian to Digital (Abrams) — visual-trait taxonomy by movement.
  • Müller-Brockmann, J. (1981). Grid Systems in Graphic Design — Swiss method from the source.
  • Rams, D. — Ten Principles of Good Design (Vitsœ publishes them: vitsoe.com/about/good-design); Less and More (Gestalten).
  • Hara, K. (2007). Designing Design. Lars Müller — Japanese aesthetics.
  • Movement-specific museum resources: MoMA, V&A, Bauhaus-Archiv online collections for primary imagery.
↑↓ to navigate · Enter to open · Esc to close