UX Encyclopedia

Digital UI Eras & Trends (1970s–today)

The evolution of screen aesthetics — usable both as history and as a nostalgia/style menu. Verify current-trend claims live; this file is strongest on established history.

Try it — one button, five eras. The same card re-skinned era by era. Note neumorphism's contrast problem — it's visible, which is the point.

Terminal & early GUI (1970s–80s)

Green/amber phosphor monospace terminals; then Xerox PARC's desktop metaphor (Alto/Star) → Apple Macintosh 1984 (Susan Kare's pixel icons, Chicago typeface) and early Windows. Traits to evoke: 1-bit pixel art, monospace type, dithering, chunky bevel-less windows, scanlines/CRT glow.

90s desktop & early web (c. 1990–2000)

Windows 95 gray 3D-bevel widgets; GeoCities-era web: tiled backgrounds, Times New Roman, visited-link purple, animated GIFs, hit counters,

layouts, "under construction." Traits: beveled buttons, system grays, web-safe 216 colors, pixel fonts, deliberate clutter.

Y2K / gloss era (c. 1998–2007)

Techno-optimism: translucent candy plastic (iMac G3 influence), chrome, lens flares, orbs and blobs; Apple's Aqua (Mac OS X, 2001) — glossy "lickable" buttons, pinstripes, brushed metal; Windows XP Luna's bright plastic. Traits: gradients everywhere, gel buttons, reflections, aqua blues/silver, rounded chrome type.

Skeuomorphism peak (c. 2007–2013)

iPhone-era realism: interfaces imitating physical materials — leather stitching (iOS Calendar), felt (Game Center), paper, wood shelves (iBooks), realistic knobs/switches. Rationale: teaching touch UIs via familiar objects (signifier-rich; see mental-models file). Traits: rich textures, deep shadows, glossy highlights, realistic icons.

The flat turn (2010–2014)

Microsoft's Metro language (Zune → Windows Phone 7, 2010) led: typography-first, content over chrome, solid color tiles. iOS 7 (2013) made it universal: no textures, thin type, translucency; Google's "flat-ish" arrived next. Documented downside: stripped affordance signifiers hurt clickability (NN/g flat-design studies) — hence…

Material era / "flat 2.0" (2014–)

Material Design (2014): flat surfaces + meaningful shadow/elevation + motion physics — restoring depth cues without faux textures. Broadly the industry's stable equilibrium: flat aesthetics, subtle depth, strong signifiers.

Neumorphism (named ~2019–20)

Soft-extruded "same-color" surfaces: elements appear pressed from the background via paired light/dark shadows. Visually calm; repeatedly criticized for weak contrast and affordance (fails WCAG easily) — use decoratively, never for critical controls.

Glassmorphism (c. 2020–)

Frosted-glass translucency: background blur, transparency, thin light borders, layered depth. Lineage: iOS 7 blurs → Windows Acrylic → macOS Big Sur → visionOS's spatial glass materials. Caution: contrast management over busy backgrounds is the whole craft; provide scrims.

Liquid Glass (2025–, Apple)

Glassmorphism made systemic. Announced at WWDC June 2025; shipped September 2025 across iOS 26, iPadOS 26, macOS Tahoe, watchOS 26, tvOS 26 (visionOS lineage). A translucent material that refracts and "lenses" the content behind it, with specular highlights, motion response, and fluid morphing between controls. The legibility criticism was real and public: Apple raised opacity during the betas, then shipped a user-facing Clear/Tinted transparency control (iOS 26.1), and reduced default transparency again in the WWDC 2026 follow-on releases. Lesson for anyone borrowing the look: even the flagship implementation needed contrast escape hatches — budget scrims and an opaque fallback from day one.

Brutalism & neo-brutalism (web, c. 2014–)

Raw, anti-polish: system fonts or harsh monospace, default-looking links, exposed structure, clashing colors, no rounded corners (brutalistwebsites.com catalogs the genre). Neo-brutalism commercial variant: thick black borders, hard offset shadows, loud flat fills. Signals authenticity/edge; tiring at scale — best for portfolios, culture brands, editorial.

Dark neon / synthwave / cyberpunk (recurring)

Deep navy-black grounds, neon magenta/cyan glows, retro-future grids and chrome (Blade Runner / 80s retrofuturism lineage). Gaming/tech-brand staple; watch contrast and glow-blur legibility.

Vaporwave (c. 2011–, internet-native)

Born in online music culture (Macintosh Plus's Floral Shoppe, 2011, put a Greco-Roman bust on the canon cover). Traits: pink/teal, classical statuary, Windows-95 chrome, Japanese text fragments, palm trees, glitch — half-ironic nostalgia for consumer tech and mall culture. Ancestry: appropriation art's recontextualized imagery + Memphis pastels

  • early-GUI kitsch. Cousin of synthwave (which is sincere retrofuturism; vaporwave is arch).

Soft 3D / claymorphism (c. 2021–)

Rounded inflated 3D illustration ("clay" render look), pastel gradients, big blobby characters — friendly fintech/startup vibe of the early 2020s.

  • Bento grids: modular, asymmetric card compartments (popularized by Apple's keynote-slide layouts); near-default for feature and marketing pages — good density with clear hierarchy.
  • AI "aurora" gradients: soft multicolor glows plus the sparkle (✨) icon as the de facto AI signifier. So ubiquitous 2023–25 that design press documents an active backlash — newer AI branding is moving toward warmer, textured, less generic identities.
  • Pixel / Y2K retro revival: pixel fonts, early-web chrome and gradients, recut with modern layout discipline (see the eras above for authentic source material).
  • Lo-fi anti-design ("brat", 2024): a deliberately "wrong" hue plus low-res system type as authenticity signal — Charli XCX's lime-green brat cover (low-res Arial-style lowercase) was 2024's most copied artifact. Works as a statement; ages fast.

Using this file

Any era can be a skin; none excuses breaking modern usability floors — read Applying Historical Styles to Modern UI before committing.

Sources

  • Meggs & Purvis, Meggs' History of Graphic Design — computer-era chapters (PARC, Macintosh, web).
  • Moggridge, B. (2007). Designing Interactions. MIT Press — first-hand GUI history (PARC, Apple).
  • Kare, S. — susankare.com and interviews on original Mac iconography.
  • Apple HIG editions & WWDC archives (Aqua → iOS 7 → visionOS materials); Microsoft design history (Metro/Fluent) — primary-source guideline docs.
  • Apple Newsroom, "Apple introduces a delightful and elegant new software design" (June 9, 2025) and Apple HIG "Liquid Glass" / "Adopting Liquid Glass" developer docs — primary sources for that era.
  • 2024–26 trend claims: design-press coverage (Design Week on AI branding's gradient backlash; Creative Boom and comparable trend roundups on bento/retro fatigue; widespread coverage of the brat cover's design influence) — trends, so re-verify currency before use.
  • Nielsen Norman Group — "Flat Design: Its Origins, Its Problems" and related clickability studies (nngroup.com).
  • Material Design launch documentation (2014, material.io).

Designed & built by DET3D — a design consulting & drone services company out of Detroit, Michigan.

We help companies ship things people actually enjoy using. Our team pairs rigorous UX design with interactive media, professional drone services, and more — from product interfaces and brand experiences to aerial cinematography and mapping. Whatever you're building, we can help you make it sharper, faster, and more memorable.

Want us to create something for your company? Let's talk. detroit3d.com (313) 497-8585

Every claim traced to a real, verifiable source. Conventions labeled as conventions. Last full verification: July 2026.

Works offline: once you've visited, the whole encyclopedia is stored on your device. Install it from your browser's menu ("Install app" / "Add to Home Screen") to keep it on your device.

↑↓ to navigate · Enter to open · Esc to close