Mockup Library · Content Engine · Ontwerptoelichting

Ontwerptoelichting — V1.2

Gegenereerd 2026-05-15 door Ilsa (designer)

Wat elke mockup toont

01 — Week tijdslijn · Wielrenschool, wk 23 (1–7 jun). Tijdslijn-modus: kanalen als rijen, dagen als kolommen. Toont de volle IDE-shell (rail + group-nav + content-area). Maandag 1 juni is gemarkeerd als huidige dag. Bevat items in vier statussen zodat het kleurensysteem direct leesbaar is.
02 — Week thema-modus · Zelfde week, zelfde WRS-data, maar gegroepeerd per thema. Thema A staat open met rijen per kanaal binnen het thema-blok. Thema D (doorlopend, geen kanaal-ritme) staat ingeklapt met uitleg. Toekomstige thema's B en C zijn zichtbaar als grijze placeholder-kaarten. Toggle rechtsboven wijst "Thema" als actief aan.
03 — Modal-detail · Droomhuis Spanje, wk 24. Tijdslijn-view met een open modal over het flagship-item "De Omgekeerde Weg" (Thema 2). Modal toont alle velden: titel, thema-tag, kanaal, publish-datum, status, beschrijving, gekoppelde task-id (DHS-T-2026-047) en de prominente "Open in Actie-engine"-knop. DHS-workspace is herkenbaar via oranje ws-avatar en accentkleur.

Ontwerpkeuzes

  • Modal rechts, niet gecentreerd.Een gecentreerde overlay blokkeert de context erachter volledig. Door de modal rechts te plaatsen blijft de weekgrid links zichtbaar — de gebruiker ziet welk item geselecteerd is (blauwe outline) terwijl hij de details leest.
  • Status via linkerborder + pill, niet via achtergrondkleur.Achtergrondkleuren maken de grid druk bij veel items. De gekleurde linkerborder geeft snelle scannability; de pill voegt leesbaarheid toe voor gebruikers die niet vertrouwen op kleur alleen (WCAG-fallback).
  • Thema-header in Source Serif 4, kaart-titels in Segoe UI.Hierdoor lees je in één oogopslag het niveau: Serif = structuur/thema, sans = operationele content. Identiek patroon aan hoe de Actie-engine bord-naam vs. taaktitel behandelt.
  • Toekomstige thema's als dashed placeholder.Leeg laten zou suggereren dat ze niet bestaan. Een dashed border met "Nog niet actief" communiceert het ritme van de kalender zonder afleidende lege ruimte.
  • Workspace-avatar krijgt eigen accentkleur per klant.WRS = primair blauw (#1566c0), DHS = peach (#d97757). Zodra je wisselt van workspace is de context onmiskenbaar — geen tekst nodig.

Wat NIET in de mockups zit maar wel in V1.2 moet

  • Drag-drop-animatieDe grid ondersteunt drag-drop per spec, maar de statische HTML toont alleen de eindtoestand. In React: onDragStart/onDrop met visuele drop-indicator (lichtblauwe highlight op doelcel), identiek aan hoe BoardColumn.tsx het al doet.
  • Inline "item toevoegen"De knop rechtsboven is placeholder. In de echte implementatie wil je ook een klik op een lege cel die direct een inline-invoerveld opent (zoals Notion/Linear).
  • Weeknavigatie-geheugenDe pijltjes zijn statisch. De engine moet de geselecteerde week onthouden bij terugkeer naar de view.
  • Collaps-state thema-sectiesIn mockup 02 zijn thema's open/dicht getekend maar de toggle is niet klikbaar. State moet per kalender worden bijgehouden.

Open ontwerpvragen

  1. Modal-positieBeantwoord
    Ronald: rechts. Op 13" mag de overlap met de laatste dag-kolom geaccepteerd worden — geen slide-in panel nodig.
  2. Kanaalvolgorde in tijdslijnBeantwoord
    Ronald: per-klant instelbaar via een settings-pagina. Kanalen kiezen, toevoegen, verwijderen, slepen. Niet elke klant krijgt dezelfde kanalen.
  3. Thema D (doorlopend, geen kanaal-ritme)Beantwoord
    Ronald: binnen de week-view houden, zoals in mockup 02 ingeklapt getoond met uitleg. Geen aparte "flows"-sectie buiten de grid.