# Visual Thinking MOC A map connecting ideas about visual thinking, spatial reasoning, and sketch-based knowledge work. ## Core Question How can visual-spatial thinking enhance understanding, memory, and creative insight beyond what text alone provides? --- ## Key Sources ### Books - [[4. Archives/Book reviews/Sketch Your Mind]] — Zsolt Viczián's methodology for 4D PKM - [[3. Resources/Readwise/Books/Sketch Your Mind]] — Readwise highlights ### Visual Summaries - [[Excalidraw/Sketch Your Mind Visual.excalidraw]] — Book-on-a-page summary - [[Excalidraw/GTD Flow.excalidraw]] — Visual workflow - [[Excalidraw/feel-good-productivity.excalidraw]] — Productivity framework visual ### Related Articles - [[3. Resources/Readwise/Articles/How to make your notes visual in Obsidian]] - [[3. Resources/Readwise/Articles/Chris Wilson organizes his sketchnotes with Obsidian - SE11EP12]] - [[3. Resources/Readwise/Articles/My Visual Daily Note-Taking Workflow in Obsidian 🎨 Excalidraw & GTD]] — added 2026-05-31; Zsolt's daily-journal-anchored visual PKM walkthrough; 11M/10M visual-receptor framing (James Clear); "in-context task management" (tasks live where the person/project/location lives); LATCH framework cited explicitly; canvas-first / never-leave-the-whiteboard pattern --- ## Core Concepts (to extract as permanent notes) From *Sketch Your Mind*: - **4D PKM**: Visual-spatial thinking first, text as scaffolding - **Hybrid Notes**: Visual front, text back — two modes of thinking - **LEGO Approach**: Modular, standardized visual blocks enable remixing - **Recognition vs. Comprehension**: Fluent reading creates false understanding - **Idea Integration Board**: Spatial workspace that holds context - **Link and Think Icons**: Reusing icons creates serendipitous connections - **The Genie Metaphor**: Books release ideas; text-only notes trap them --- ## Visual Frameworks | Framework | Purpose | Source | |-----------|---------|--------| | Mind Maps | Radial idea branching | Viczián | | Brick Road Method | Linear visual capture (sketchnoting) | Doug Neill | | Concept Maps | Explicit labeled relationships | Joseph Novak | | Idea Atlas | Multi-level topic organization | Paul & Elder | | Double-Bubble Map | Compare and contrast | David Hyerle | | Idea Compass | Navigate connections (Parents/Children/Friends/Competitors) | Vicky Zhao | --- ## Connections to Other Domains ### DevRel & Communication - Explaining complex technical concepts visually - Presentation design and slide decks - Documentation that people actually read ### Faith & Theology - Sermon preparation with visual outlines - Bible study chapter maps - Theological concept visualization ### Productivity & GTD - Visual project dashboards - Workflow diagrams - Weekly review visuals --- ## Idea Compass **Parents (broader concepts)** - Personal Knowledge Management - Cognitive Science - Learning theory **Children (specific applications)** - Excalidraw workflows - Sketchnoting techniques - Book-on-a-page summaries **Friends (adjacent ideas)** - [[3. Resources/MOCs/Open Source Governance MOC]] — Documentation and visual communication in OSS - [[3. Resources/MOCs/Faith & Theology MOC]] — Visual sermon preparation **Competitors (tensions/alternatives)** - Text-first Zettelkasten (Luhmann's original approach) - Outliner-based PKM (Roam, Logseq) - Pure database approaches (Notion) --- ## Permanent Notes ### Created - [[3. Resources/Permanent Notes/Writing Is Thinking Made Visible]] — Externalizing thought through writing (and drawing) enables thinking you can't do in your head - [[3. Resources/Permanent Notes/The Slip-Box Thinks With You Not For You]] — The system generates connections, but you still do the thinking - [[3. Resources/Permanent Notes/Structure Enables Flow Plans Prevent It]] — Flexible structure supports creative work; rigid plans block it ### To Create - [ ] Visual thinking engages different brain regions than linear text - [ ] Constraints enable creativity (LEGO principle) - [ ] Recognition masquerades as comprehension - [ ] Hybrid notes balance spatial and sequential thinking - [ ] Icons as linking devices create unexpected connections - [ ] The printing press accidentally narrowed knowledge work - [ ] In-context task management (tasks live spatially with their referent, not in a global inbox) — from Zsolt's May 2026 video - [ ] Daily journal as anchoring backbone leverages time-anchored memory (LATCH "T") - [ ] Sensory-input ratio (10M visual / 11M total) as the empirical case for visual PKM ## Synthesis additions (2026-06-11) From the 3-day Readwise review — new atoms wired in: - [[3. Resources/Permanent Notes/Open-Source Design Tools Reach Parity Through Community-Contribution Velocity]] — open design tools now viable for token-driven professional work (Penpot 2.16) - [[3. Resources/Permanent Notes/Zet · Multi-model routing beats single-model for creative work]] — AI design tools relieve ideation paralysis more than execution ## Synthesis additions (2026-06-14) - [[3. Resources/Permanent Notes/The Design File as a Programmable Bidirectional Surface for Agents]] — Penpot AI workflows turn the design file into a queryable, agent-writable surface (read & write elements/assets/tokens); the design token is the human↔developer↔agent interface, the design-side twin of [[3. Resources/Permanent Notes/Clean Code Is the Human-AI Interface]]. ## Connected Literature Notes (synthesis 2026-06-17) - [[A Quick Guide to Color Blind Design - How to Present Data to Everyone]] — accessible color/data presentation for visual communication ## Connected Literature Notes (synthesis 2026-06-18) - [[Adapting Typography to User Preferences With CSS]] — accessible typography as visual communication - [[Admin Design - Introduction]] — wp-admin design-system / information hierarchy (backfill 2026-06-18) ## AI and design aesthetics (added 2026-06-30) - [[3. Resources/Permanent Notes/AI Design Tools Converge on the Tool-Maker's Own House Style]] — the New Yorker "Claudian sameness" piece: generative design tools don't converge on a neutral average but on the tool-maker's own defaults (Claude Design ≈ Anthropic's beige/off-red/serif brand), leaving recognizable "tells" — the visual-design instance of [[3. Resources/Permanent Notes/Shared AI Tools Homogenize Output While Feeling Original to Each User]]. Directly relevant when using claude.ai/design: you have to fight the formula to look like yourself. ## Connected Literature Notes (synthesis 2026-07-18 — batch 3) - [[3. Resources/Literature Notes/DesignOps — The Complete Guide to Scaling Design Operations for Enterprise Teams]] — sequence easy visible wins before structural change to build rollout trust; scaling design operations ## Connected Literature Notes (synthesis 2026-07-21 — run 3) - [[3. Resources/Literature Notes/Lit · Penpot 2.16 — community-driven parity]] — Penpot's design-token panel and render-engine work show open tooling reaching professional visual workflows ## Synthesis additions (2026-08-11, backlog clearance) - [[3. Resources/Readwise/Articles/Penpot MCP vs Figma McP The Real Estate Card Test]] — demonstrates the existing design-file-as-programmable-surface claim through a same-prompt comparison of reusable structure and flattened output. - [[3. Resources/Readwise/Articles/Motion in Suede]] — restraint-first WordPress motion design retained as a visual hierarchy and calm-interface example rather than promoted into a separate claim. - [[3. Resources/Readwise/Articles/10. All the Tips — Season 1]] — montage of practitioner advice on constraints, personal projects, beginner's mind, style, and intentional AI use in sketchnoting. - [[3. Resources/Readwise/Articles/One-Click Icon Library & Comic Strip Scripts for Obsidian!]] — visual-PKM tutorial showing how one-click scripts reduce setup friction for icon libraries and comic storyboarding. - [[3. Resources/Readwise/Articles/HeyGen AI Tutorial Create Avatar Videos From Just a Script]] — avatar-video tooling tutorial retained with its 80-percent-draft framing; production mechanics, not an independent content-quality claim. - [[3. Resources/Readwise/Articles/Building Terminal Graph, a Spatial Development Environment, With Caidan Williams]] — spatial development environment reference for shareable release and security-audit graphs. ## Synthesis additions (2026-08-16) ### Literature Notes - [[3. Resources/Literature Notes/how did design fix the ai design slop problem]] — AI design-quality policy-gap analysis; source doc for the OKLCH representation-choice claim below - [[3. Resources/Literature Notes/Design Tokens Manual Setup and AI Workflow (Penpot)]] — short tutorial pairing manual design-token setup with an AI workflow in Penpot - [[3. Resources/Literature Notes/Penpot MCP vs Figma MCP The Real Estate Card Test]] — same-prompt comparison of Penpot MCP vs Figma MCP showing which preserves reusable structure - [[3. Resources/Literature Notes/Obsidian Excalidraw Update (2.24 & 2.25)]] — Zsolt Viczián's PKM tooling update, direct relevance to mobile-first vault workflow - [[3. Resources/Literature Notes/Motion in Suede (Brian Gardner)]] — restraint-first WordPress motion design example - [[3. Resources/Literature Notes/10. All the Tips — Season 1 (sketchnoting)]] — practitioner montage on constraints, personal projects, and intentional AI use in sketchnoting - [[3. Resources/Literature Notes/One-Click Icon Library & Comic Strip Scripts for Obsidian (Zsolt)]] — one-click scripts that cut setup friction for icon libraries and comic-strip storyboarding in Obsidian - [[3. Resources/Literature Notes/Building Terminal Graph, a Spatial Development Environment]] — spatial development environment built around a terminal-graph interface - [[3. Resources/Literature Notes/Penpot 2.17 Background Blur, Smarter Design Tokens, and More]] — Penpot release notes covering background blur and smarter design tokens - [[3. Resources/Literature Notes/How Hard Can It Be To Draw Circles]] — CSSBattle-style dev video on geometric problem-solving in CSS - [[3. Resources/Literature Notes/A Developer's Guide to Penpot (Design Tokens, Grid, Flex & Code)]] — developer-focused walkthrough of Penpot's design tokens, grid, flex, and code features - [[3. Resources/Literature Notes/Obsidian Excalidraw 2.26 - Markdown Images, Smart Flowcharts, Stencil Libraries]] — Excalidraw update adding markdown images, smart flowcharts, and stencil libraries ### Permanent Notes - [[3. Resources/Permanent Notes/Choose Representations Where Parameter Distance Tracks Output Distance]] — pick representations (e.g. OKLCH over RGB) where nearby parameter values produce nearby outputs - [[3. Resources/Permanent Notes/An Agent's Design-Editing Power Is Bounded by the Tool's Exposed API]] — an agent can only edit what the design tool's API exposes, capping AI-assisted design work - [[3. Resources/Permanent Notes/Agent-Readable Design Files Beat Opaque Canvases for AI Output]] — structured, agent-readable design files produce better AI output than opaque canvas formats - [[3. Resources/Permanent Notes/Progressive Disclosure Keeps A Plugin's Core Trustworthy]] — surfacing advanced options progressively keeps a plugin's default behavior trustworthy - [[3. Resources/Permanent Notes/Restraint Is a Feature in Interface Motion]] — deliberate restraint in interface motion is itself a design choice, not an absence of one - [[3. Resources/Permanent Notes/Creative Momentum Comes From Self-Authorized Projects]] — creative momentum comes from projects you greenlight yourself rather than externally assigned ones - [[3. Resources/Permanent Notes/Ship an Opinionated Default Expose One Knob]] — ship one strong opinionated default and expose a single adjustable knob rather than many options - [[3. Resources/Permanent Notes/Primitive-First Design Absorbs Conflicting Feedback Without Scope Creep]] — designing around neutral primitives absorbs conflicting product feedback without scope creep; API-primitive-design layer, related to but distinct from [[3. Resources/Permanent Notes/Core Abilities Must Be Consumer-Neutral Primitives Not One Interface's Mirror|Core Abilities Must Be Consumer-Neutral Primitives]] - [[3. Resources/Permanent Notes/Review Feedback Moves Faster Inside the Work Context Than Outside It]] — in-context review reduces workspace-switching friction and speeds feedback - [[3. Resources/Permanent Notes/Geometric Decomposition Precedes Syntax Reduction]] — breaking a shape into its geometric parts has to happen before the code that draws it can be reduced - [[3. Resources/Permanent Notes/Abstraction Layers Convert Into Coordination Cost]] — each abstraction layer added to a design/dev workflow becomes coordination overhead - [[3. Resources/Permanent Notes/Constraints Validated At Definition Time Propagate Not Recur]] — validating constraints where they're defined lets them propagate instead of needing rechecking downstream - [[3. Resources/Permanent Notes/Editable Source Outlasts Flattened Screenshots]] — keeping editable source files outlasts flattened screenshot exports for long-term reuse ## Synthesis additions (2026-10-07 — design tool layouts) - [[3. Resources/Readwise/Articles/Flex and Grid Layouts in Penpot in Under 5 Minutes]] — Penpot's own 4:31 tour says its flex and grid layouts carry the same properties as CSS, so layout decisions made on the canvas are readable in the Inspect panel; every capability claim is the vendor's and untested. ## Synthesis additions (2026-10-14 — Penpot grid layouts versus guides) - [[3. Resources/Readwise/Articles/Penpot Grid Layout vs Guides]] — Penpot's 1:26 video separates background grid guides (placement by eye) from grid layouts (rules that export as CSS grid); a vendor video, so every capability claim is untested. ## Synthesis additions (2026-10-18 — registering previously unlisted notes) ### Literature Notes - [[3. Resources/Literature Notes/Drawing 2024-04-22 13.14.09]] — An Excalidraw drawing file with one deleted empty text element and no visible content or notes. Closest-fit placement. - [[3. Resources/Literature Notes/Drawing 2024-04-22 13.15.18]] — An Excalidraw drawing from April 2024 whose only text element reads Text; the file holds no other readable content. Closest-fit placement. - [[3. Resources/Literature Notes/Drawing 2024-08-29 21.55.00]] — An Excalidraw drawing file dated 2024-08-29 holding compressed drawing data with no text. Closest-fit placement. - [[3. Resources/Literature Notes/Drawing 2025-02-05 11.17.22]] — An untitled Excalidraw drawing from February 2025; the file holds only compressed drawing data, with no text elements to summarize. Closest-fit placement. - [[3. Resources/Literature Notes/Drawing 2025-03-30 20.18.53]] — An Excalidraw drawing that embeds a ChatGPT-generated image dated 2025-03-30, with no text elements or notes attached. Closest-fit placement. - [[3. Resources/Literature Notes/Drawing 2025-07-10 10.20.02]] — An Excalidraw drawing from July 2025 stored as compressed data, with no readable text or title. Closest-fit placement. - [[3. Resources/Literature Notes/Drawing 2025-08-03 09.03.38]] — An Excalidraw drawing file dated 2025-08-03 holding compressed drawing data with no text. Closest-fit placement.