[
  {
    "id": "cdmx-cdmx-photos",
    "post": "notes/cdmx.html",
    "title": "Photos from Mexico City",
    "size": 1,
    "items": [
      {
        "type": "image",
        "src": "img/notes/cdmx/people-3.jpg",
        "width": 1333,
        "height": 2000,
        "label": "",
        "caption": "",
        "alt": "People, Mexico City, 3"
      },
      {
        "type": "image",
        "src": "img/notes/cdmx/people-1.jpg",
        "width": 1333,
        "height": 2000,
        "label": "",
        "caption": "",
        "alt": "People, Mexico City, 1"
      },
      {
        "type": "image",
        "src": "img/notes/cdmx/people-8.jpg",
        "width": 1333,
        "height": 2000,
        "label": "",
        "caption": "",
        "alt": "People, Mexico City, 9"
      },
      {
        "type": "image",
        "src": "img/notes/cdmx/red-1.jpg",
        "width": 1333,
        "height": 2000,
        "label": "",
        "caption": "",
        "alt": "Red, Mexico City, 1"
      },
      {
        "type": "image",
        "src": "img/notes/cdmx/cafe-7.jpg",
        "width": 2000,
        "height": 1333,
        "label": "",
        "caption": "",
        "alt": "Cafés, Mexico City, 10"
      },
      {
        "type": "image",
        "src": "img/notes/cdmx/yellow-2.jpg",
        "width": 1333,
        "height": 2000,
        "label": "",
        "caption": "",
        "alt": "Yellow, Mexico City, 3"
      },
      {
        "type": "image",
        "src": "img/notes/cdmx/cars-7.jpg",
        "width": 2000,
        "height": 1333,
        "label": "",
        "caption": "",
        "alt": "Cars, Mexico City, 5"
      },
      {
        "type": "image",
        "src": "img/notes/cdmx/sunlight-1.jpg",
        "width": 1333,
        "height": 2000,
        "label": "",
        "caption": "",
        "alt": "Sunlight, Mexico City, 3"
      },
      {
        "type": "image",
        "src": "img/notes/cdmx/phone-1.jpg",
        "width": 1333,
        "height": 2000,
        "label": "",
        "caption": "",
        "alt": "Phones, Mexico City, 1"
      }
    ]
  },
  {
    "id": "heads-bodies-and-fonts-heads-bodies-and-fonts",
    "post": "notes/heads-bodies-and-fonts.html",
    "title": "Page turn animation sprite sheet",
    "size": 2,
    "items": [
      {
        "type": "image",
        "src": "img/notes/flipbook/page-turn-frames.jpg",
        "width": 2000,
        "height": 2120,
        "label": "Fig. 4",
        "caption": "Page turn animation sprite sheet",
        "alt": "A sheet of every frame a 60Hz display draws during one page turn, each labelled with its elapsed milliseconds and the angle of the sheet at both ends. The fore-edge lifts first and runs ahead; the root overtakes it at 133ms and the sheet falls root first; it lands at 353ms."
      }
    ]
  },
  {
    "id": "observations-about-ai-native-design-tools-tools",
    "post": "notes/observations-about-ai-native-design-tools.html",
    "title": "Observations about AI design tools",
    "size": 3,
    "items": [
      {
        "type": "image",
        "src": "img/notes/ai-tools-observation/pushing-for-corners.webp",
        "width": 1600,
        "height": 1166,
        "label": "Fig. 1",
        "caption": "Pushing for corners: the new process of adding constraints intentionally",
        "alt": "Two crossed axes, behavioral fidelity horizontally and visual fidelity vertically. A small grey circle sits at the centre, and a jagged star-shaped loop expands out of it toward four labelled corners: aesthetic depth, functional depth, conceptual breadth and interaction breadth."
      },
      {
        "type": "image",
        "src": "img/notes/ai-tools-observation/specialized-tool-landscape.png",
        "width": 5490,
        "height": 4002,
        "label": "Fig. 2",
        "caption": "Specialized tool landscape",
        "alt": "The same two axes with four overlapping circles, one per quadrant: canvas tools like Figma at high visual and low behavioral fidelity, codebase agents such as Claude Code, Codex and Cursor at high on both, thinking surfaces like paper and FigJam at low on both, and generative sandboxes such as AI Studio, Lovable and v0 at high behavioral and low visual fidelity."
      }
    ]
  },
  {
    "id": "reflections-on-ux-visions-1",
    "post": "notes/reflections-on-ux-visions.html",
    "title": "A rough sketch of how we spent our time, and how we should have",
    "size": 1,
    "items": [
      {
        "type": "image",
        "src": "img/notes/ux-vision/TimePerPhaseofUXVisions.png",
        "width": 6420,
        "height": 4002,
        "label": "Fig. 1",
        "caption": "A rough sketch of how we spent our time, and how we should have",
        "alt": ""
      }
    ]
  },
  {
    "id": "fomo-fomo",
    "post": "notes/fomo.html",
    "title": "FOMO",
    "size": 3,
    "items": [
      {
        "type": "image",
        "src": "img/notes/FOMO/FOMO-1.png",
        "width": 4000,
        "height": 4000,
        "label": "",
        "caption": "",
        "alt": "FOMO in isometric 3D, each letter built from thin stacked layers. The first O is a ring, the second a disc with a peg standing up from its center."
      },
      {
        "type": "image",
        "src": "img/notes/FOMO/FOMO-2.png",
        "width": 4000,
        "height": 4000,
        "label": "",
        "caption": "",
        "alt": "FOMO in heavy, flat black shapes on a two-by-two grid: an F, a solid circle with a small white bar across its middle, an M drawn with thin white cuts, and a tapered block with three white slits, like a bin."
      },
      {
        "type": "image",
        "src": "img/notes/FOMO/FOMO-3.png",
        "width": 4000,
        "height": 4000,
        "label": "",
        "caption": "",
        "alt": "FOMO as a face: a large outlined circle for the head, a mirrored F and a small o for eyes, and an M underneath for the body and collar."
      }
    ]
  },
  {
    "id": "posters-2017-posters-2017",
    "post": "notes/posters-2017.html",
    "title": "Posters from 2017",
    "size": 2,
    "items": [
      {
        "type": "image",
        "src": "img/notes/illustrations from 2017/Hope.png",
        "width": 1191,
        "height": 1684,
        "label": "",
        "caption": "",
        "alt": "HOPE in heavy black letters running up a red poster, the H in pale grey with a black wedge cutting across it."
      },
      {
        "type": "image",
        "src": "img/notes/illustrations from 2017/MORE.png",
        "width": 1191,
        "height": 1684,
        "label": "",
        "caption": "",
        "alt": "MORE in white on black, repeated down the poster; the rows squash thinner and slice apart towards the top and bottom."
      },
      {
        "type": "image",
        "src": "img/notes/illustrations from 2017/Content.png",
        "width": 1191,
        "height": 1684,
        "label": "",
        "caption": "",
        "alt": "The letters of content tumbling around inside an open circle, in mixed weights and sizes, on pale grey, with its dictionary definition along the bottom."
      },
      {
        "type": "image",
        "src": "img/notes/illustrations from 2017/naked-boxes_1.png",
        "width": 1192,
        "height": 1684,
        "label": "",
        "caption": "",
        "alt": "Six square tiles in pink, blue and grey, each cropping a body down to a few soft, flat shapes."
      }
    ]
  },
  {
    "id": "kaizala-app-character-kaizala",
    "post": "notes/kaizala-app-character.html",
    "title": "Kaizala",
    "size": 2,
    "items": [
      {
        "type": "image",
        "src": "img/notes/kaizala-appcharacter/16.svg",
        "width": 1280,
        "height": 720,
        "label": "",
        "caption": "",
        "alt": "Finalized action icons for location, jobs, calendar, bills, receipts and attachments"
      },
      {
        "type": "image",
        "src": "img/notes/kaizala-appcharacter/17.svg",
        "width": 1280,
        "height": 720,
        "label": "",
        "caption": "",
        "alt": "Speech bubble explorations: the most important aspect of a chat"
      },
      {
        "type": "image",
        "src": "img/notes/kaizala-appcharacter/22.svg",
        "width": 1280,
        "height": 720,
        "label": "",
        "caption": "",
        "alt": "Card anatomy: icon and title, status, live content, description, actions, timestamp and receipts"
      },
      {
        "type": "image",
        "src": "img/notes/kaizala-appcharacter/23.svg",
        "width": 1280,
        "height": 720,
        "label": "",
        "caption": "",
        "alt": "Final card design for a location check-in and a job assignment"
      }
    ]
  },
  {
    "id": "minimal-movie-posters-posters",
    "post": "notes/minimal-movie-posters.html",
    "title": "Movie posters with just circles",
    "size": 2,
    "items": [
      {
        "type": "image",
        "src": "img/notes/movie-posters/12-angry-men.png",
        "width": 1191,
        "height": 1684,
        "label": "",
        "caption": "12 Angry Men",
        "alt": "12 Angry Men"
      },
      {
        "type": "image",
        "src": "img/notes/movie-posters/finding-nemo.png",
        "width": 1192,
        "height": 1684,
        "label": "",
        "caption": "Finding Nemo",
        "alt": "Finding Nemo"
      },
      {
        "type": "image",
        "src": "img/notes/movie-posters/fight-club.png",
        "width": 1191,
        "height": 1684,
        "label": "",
        "caption": "Fight Club",
        "alt": "Fight Club"
      },
      {
        "type": "image",
        "src": "img/notes/movie-posters/eternal-sunshine.png",
        "width": 1192,
        "height": 1684,
        "label": "",
        "caption": "Eternal Sunshine of the Spotless Mind",
        "alt": "Eternal Sunshine of the Spotless Mind"
      },
      {
        "type": "image",
        "src": "img/notes/movie-posters/shawshank-redemption.png",
        "width": 1192,
        "height": 1684,
        "label": "",
        "caption": "The Shawshank Redemption",
        "alt": "The Shawshank Redemption"
      },
      {
        "type": "image",
        "src": "img/notes/movie-posters/minions.png",
        "width": 1192,
        "height": 1684,
        "label": "",
        "caption": "Minions",
        "alt": "Minions"
      }
    ]
  },
  {
    "id": "quick-order-quick-order",
    "post": "notes/quick-order.html",
    "title": "Coffee app concept",
    "size": 2,
    "items": [
      {
        "type": "image",
        "src": "img/notes/quick-order/08.jpg",
        "width": 1200,
        "height": 900,
        "label": "Fig. 7",
        "caption": "Iconography: Clean icon system designed for instant recognition across daily routine tasks.",
        "alt": "Custom iconography grid for coffee types, ingredients, and checkout actions"
      },
      {
        "type": "image",
        "src": "img/notes/quick-order/12.jpg",
        "width": 1200,
        "height": 600,
        "label": "Fig. 9",
        "caption": "Customization Flow: Preference sheet to adjust milk, sugar, and cup size with live price feedback.",
        "alt": "Customization screen sequence: preferences sheet for milk, sugar, size, and order confirmation"
      },
      {
        "type": "image",
        "src": "img/notes/quick-order/09.gif",
        "width": 1000,
        "height": 563,
        "label": "Fig. 10",
        "caption": "Long-Press Payment: Tap-and-hold interaction that merges review with payment to prevent miss-clicks.",
        "alt": "Animation demonstrating long press and pay interaction"
      }
    ]
  },
  {
    "id": "donut-1",
    "post": "notes/donut.html",
    "title": "Field operations app screens",
    "size": 1,
    "items": [
      {
        "type": "image",
        "src": "img/notes/donut/08.jpg",
        "width": 750,
        "height": 1334,
        "label": "",
        "caption": "Activity Feed: Prioritized operational updates with urgency filters.",
        "alt": "Activity Feed showing prioritized events, agent alerts, and sales updates"
      },
      {
        "type": "image",
        "src": "img/notes/donut/09.jpg",
        "width": 750,
        "height": 1334,
        "label": "",
        "caption": "Reassign Visit: Action sheet to reassign store visits to nearby field agents.",
        "alt": "Contextual action sheet allowing instant reassignment of a store visit to nearby agents"
      },
      {
        "type": "image",
        "src": "img/notes/donut/13.jpg",
        "width": 750,
        "height": 1334,
        "label": "",
        "caption": "Visit Reassigned: Confirmation toast verifying the visit was reassigned.",
        "alt": "Confirmation toast indicating that the store visit was successfully reassigned"
      },
      {
        "type": "image",
        "src": "img/notes/donut/10.jpg",
        "width": 750,
        "height": 1334,
        "label": "",
        "caption": "Sales Reports: Revenue performance tracking against targets and budgets.",
        "alt": "Sales Reports and analytics showing year-to-date targets and promotional budgets"
      },
      {
        "type": "image",
        "src": "img/notes/donut/11.jpg",
        "width": 750,
        "height": 1334,
        "label": "",
        "caption": "Field Team: Team member directory with weekly targets and quick-call actions.",
        "alt": "Field team roster with individual weekly targets and swipe actions to call or email"
      },
      {
        "type": "image",
        "src": "img/notes/donut/12.jpg",
        "width": 750,
        "height": 1334,
        "label": "",
        "caption": "Store Directory: Retail outlet index with weekly sales figures and map toggle.",
        "alt": "Store directory tab with weekly sales breakdown and map/list view toggle"
      }
    ]
  },
  {
    "id": "not-so-grey-choosing",
    "post": "notes/not-so-grey.html",
    "title": "Choosing a colour, then its themes",
    "size": 2,
    "items": [
      {
        "type": "image",
        "src": "img/notes/not-so-grey/07.png",
        "width": 2400,
        "height": 1592,
        "label": "",
        "caption": "",
        "alt": "Spotting colors using the camera view"
      },
      {
        "type": "image",
        "src": "img/notes/not-so-grey/09.png",
        "width": 1200,
        "height": 835,
        "label": "",
        "caption": "",
        "alt": "2x zoom indicator showing selected color"
      },
      {
        "type": "image",
        "src": "img/notes/not-so-grey/07.gif",
        "width": 1150,
        "height": 850,
        "label": "",
        "caption": "",
        "alt": "Adjusting shades and tints animation"
      },
      {
        "type": "image",
        "src": "img/notes/not-so-grey/08.jpg",
        "width": 1200,
        "height": 796,
        "label": "",
        "caption": "",
        "alt": "Color details, CMYK, RGB, HSB, Hex and Adobe CC library"
      },
      {
        "type": "image",
        "src": "img/notes/not-so-grey/10.gif",
        "width": 1200,
        "height": 854,
        "label": "",
        "caption": "",
        "alt": "Associated themes animation"
      }
    ]
  },
  {
    "id": "office-1",
    "post": "notes/office.html",
    "title": "Core Office Hub: List view with file locations, tactile 3D file creation stack, and account navigation drawer.",
    "size": 1,
    "items": [
      {
        "type": "image",
        "src": "img/notes/office/09.jpg",
        "width": 1298,
        "height": 689,
        "label": "Fig. 9",
        "caption": "Core Office Hub: List view with file locations, tactile 3D file creation stack, and account navigation drawer.",
        "alt": "Office mobile screens showing list view, 3D file creation stack, and navigation drawer"
      }
    ]
  },
  {
    "id": "kindly-care-1",
    "post": "notes/kindly-care.html",
    "title": "Report Submission Flow: Interactive prototype walking through post-visit metric adjustments and instant review submission.",
    "size": 2,
    "items": [
      {
        "type": "image",
        "src": "img/notes/kindly-care/03.gif",
        "width": 1400,
        "height": 700,
        "label": "Fig. 6",
        "caption": "Report Submission Flow: Interactive prototype walking through post-visit metric adjustments and instant review submission.",
        "alt": "Animated prototype showing summary report completion and metric slider adjustments"
      }
    ]
  }
]