Design
UX references, visual design inspirations, and aesthetic directions I find compelling.
A curated reference library for visual design, interaction patterns, and aesthetics that inform my side projects and creative work.
Interactive Tools
For generative and canvas-based experiments — flow fields, matrix rain, particle systems, neural simulations — see 🧪 Lab →
Inspirational References
Awwwards Directory
Daily-updated collection of award-winning websites. Best filtered by "Developer Award" to find technically sophisticated work. Site of the Day archives are a good trends index.
Bruno Simon — Portfolio WebGL
Canonical reference for WebGL as a storytelling medium — entire portfolio is a driveable 3D world. Demonstrates interactivity as navigation paradigm.
Are.na Curation
Visual research board for designers and artists. Best for discovering niche aesthetics, design archives, and cross-disciplinary references outside the mainstream algorithm.
Curated landing page and website galleries. Useful for studying copy-layout-CTA composition in real-world products, beyond portfolio pieces.
Typographic Directions
Swiss / International Style 1950s–
Helvetica, tight grids, flush-left text, no ornament. The aesthetic backbone of serious editorial and corporate design. Key text: Josef Müller-Brockmann's Grid Systems. See also: ITS reference archive.
Kinetic Typography Motion
Text as choreography. Pentagram's digital work and Sagmeister & Walsh campaigns. On the web: scroll-driven reveals via GSAP SplitText. Gallery: Motionographer.
Visual Aesthetics
Neo-Brutalism 2020s
Bold borders, flat color fills, visible box-shadows with no blur, stark contrast. Canonical web examples: Gumroad, Linear (early). Reference: Hype4 article on Neo-Brutalism.
Y2K / Poolsuite Aesthetic 2020s revival
Chrome gradients, bubbly type, translucent UI. Poolsuite FM is the best current implementation — full OS-chrome metaphor with vacation radio premise. Archive: Y2K Aesthetic Institute.
Glassmorphism 2020s
backdrop-filter: blur() + semi-transparent backgrounds. Apple macOS Big Sur popularized it; Glassmorphism generator for quick prototyping. Pairs with Neo-Brutalism as the dominant aesthetic polarity of the decade.
Interaction Patterns
Scrollytelling Narrative
Scroll-position drives narrative and animation. Best commercial examples: Apple product pages. Editorial: NYT Upshot and The Pudding. Framework: Scrollama.js.
Generative / p5.js Creative Coding
Code as visual art. Key practitioners: Tyler Hobbs (flow fields), Vera Molnár (grid permutations). Discovery: OpenProcessing. Reference: p5.js · Art Blocks.
AI Agent Design
Designing for LLM-powered agents demands a new interaction vocabulary — probabilistic outputs, non-deterministic state, and latent uncertainty must be treated explicitly in the interface. Three shifts define the challenge: managing non-determinism (the system can be wrong in unpredictable ways); designing for latency (token streaming is an interaction paradigm, not a loading state); calibrating agency (how much autonomy to delegate, and when to require human confirmation). This connects directly to questions of mental models and context-dependent cognition studied in NeuroAI — how users form a theory of mind for an AI agent is the critical factor for successful collaboration.
Google PAIR Guidebook Framework
Research-backed human-AI interaction patterns from Google's People + AI Research team. Covers mental models, error states, feedback loops, and expectation calibration across the full product lifecycle.
Microsoft HAX Toolkit Framework
18 design guidelines distilled from Amershi et al. (CHI 2019) into actionable evaluation cards covering initial interaction, error recovery, and context change. The most practice-ready of the major AI design frameworks.
Apple ML Human Interface Guidelines Platform
Platform-specific guidance for ML integration: implicit vs. explicit intelligence, calibrated confidence display, and graceful degradation when model outputs are uncertain.
IBM Design for AI Enterprise
Enterprise framework organized around four properties — purposeful, responsible, transparent, human-centered — with specific guidance on conversational interfaces, automation disclosure, and explainability.
Nielsen Norman Group: AI & UX Research Empirical
Empirical UX research on LLM chat interfaces, AI writing tools, and agent workflows grounded in usability testing — particularly valuable for streaming text interaction patterns and trust calibration.
Human-Centered AI — Ben Shneiderman Academic
The academic counterweight to AI-first narratives: tools that amplify human agency rather than replace human judgment. Essential framing for researchers coming from cognitive science or neuroscience.
Anthropic Model Spec Foundation
Primarily an alignment document, but essential for interface designers: defines how Claude reasons about helpfulness, uncertainty, and refusal — directly informing confidence display, disclosure, and error-recovery UI patterns.
Product exemplars: Perplexity · v0.dev · Cursor Live reference
Three products demonstrating distinct principles: Perplexity solves the uncertainty problem via numbered citations (sourced synthesis); v0.dev externalizes reasoning via preview+code (process visibility); Cursor embeds AI as ambient context-aware pair programmer rather than a separate chat window (attentional framing).
Four principles for agent interface design:
- Expose process, not just product — Render reasoning visibly: streaming traces, tool-use indicators, collapsible logs. Opacity in a probabilistic system erodes trust faster than any individual error.
- Uncertainty is a first-class UI element — Treat hedging, source citation, and explicit “I’m not sure” states as intentional information architecture, not failure modes to soften.
- Error recovery must restore agency — Offer concrete re-entry: editable context, alternative phrasings, scope controls. An apology with no affordance collapses the collaboration.
- Calibrate autonomy to reversibility — Autonomy granted should scale with reversibility: summarizing = minimal friction; writing to a database or sending a message = explicit gates and audit trail.
Also Bookmarked
- Codrops — CSS/JS technique tutorials with live demos. Best source for WebGL particle effects.
- Refactoring UI — Practical visual design rules without theory-first overhead.
- Laws of UX — Concise summaries of Fitts’ Law, Hick’s Law, Jakob’s Law, etc.
- Fonts In Use — Reverse-lookup real-world typographic applications.
- CSS-Tricks / Almanac — Layout pattern reference for grid + flexbox edge cases.
- Dribble / Behance — Portfolio discovery; useful for UI pattern trends and color study.
- Google Fonts — Web-safe font pairing tool with live preview.
- Coolors — Fast palette generation and accessibility contrast checker.
See also: Design Theory → for grid systems, Gestalt, and generative art theory.
