halftone-ch/drawn-ui

Drawn UI (Gezeichnete Benutzeroberfläche)

Ein gezeichneter Bildschirm zeigt ein Produkt so, wie ein Designer es für eine Fallstudie skizzieren würde: die echte Benutzeroberfläche, vereinfacht bis nur noch ihre Struktur übrig bleibt, eingefärbt in der eigenen Produktfarbe. Es wirkt wie Designarbeit, während ein Screenshot wie eingefügt wirkt, und es zeigt niemals private Daten, da aller Text aus Balken besteht.

Der Look bleibt ruhig, weil die Regeln wenige und streng sind. Jedes Projekt sieht trotzdem wie es selbst aus, weil der Farbton, die Bildschirme und der eine angehobene Teil aus dem Projekt stammen. Wo die Zeichnungen platziert werden (ein Hero, ein Raster, eine Feature-Liste, eine Folie), bleibt dem Verwender überlassen.

Arbeite in dieser Reihenfolge

1. Lies das echte Produkt. Seine aktuellen Bildschirme, aus dem Code, der App oder der Designdatei. Jede Zeichnung geht auf einen echten Bildschirm oder eine echte Komponente zurück. Erfinde niemals eine Metapher (schwebende Waagen, Türen, Pfeile zwischen Karten): wenn das Produkt sie nicht hat, zeigt die Zeichnung sie auch nicht.
2. Wähle die Momente. Wofür jede Zeichnung gedacht ist: ein Bildschirm, eine Komponente, ein Zustand. Ein Set zeigt verschiedene Komponenten, nicht eine Komponente jedes Mal detaillierter.
3. Nimm den Akzent. Die eigene Nuance oder Markenfarbe des Produkts. scripts/tint.py "#hex" zeigt die Farbtöne, die daraus entstehen. Weitere Akzente nur, wenn sie im Produkt eine Bedeutung haben (Statusfarben, ein Markenpaar).
4. Schreibe die Spezifikation. drawings.json, Format in references/spec.md (lies die Abschnitte über Größen, Anheben und Farbtöne vor dem Zeichnen) mit dem Beispiel in examples/ledger/drawings.json daneben. Gib die Größe jeder Zeichnung für den Raum vor, den sie füllen wird.
5. Zeichne und prüfe. python3 scripts/draw.py drawings.json --shots (der Screenshot benötigt Playwright mit Chromium). Behebe jedes Problem, das es ausgibt, öffne dann out/shots/sheet.png und schau es dir an. Zahlen melden, Augen entscheiden: leere Ecken in einer Karte, eine Zeichnung, die zur Seite kippt, ein Stapel, der wie Pillen aussieht. Wiederhole, bis es bestanden ist und ruhig aussieht.

Die Regeln

1. Eine Zeichnung enthält keine Wörter. Der gesamte Text wird zu Balken: Höhen 12, 8, 6 oder 4, Breiten in Schritten von 4, vollständig abgerundet.
2. Weiße Karten, ein Radius pro Rolle (Karten 12, innere Boxen 8, Zeilen 4, Telefone 32), ein Kartenschatten, ein Anhebungsschatten.
3. Ein Teil pro Zeichnung darf aus seiner Karte herausragen: er verlässt sie nur auf einer Seite, um 16 bis 72 (24 bis 40 wirkt am besten), niemals über den oberen oder unteren Rand der Karte hinaus, mit mindestens 8 drumherum. Eine Zeichnung mit 600 oder breiter darf zwei anheben. Der angehobene Teil ersetzt das, was er anhebt, er bedeckt es nicht zur Hälfte.
4. Ein Akzent pro Zeichnung, verwendet auf dem, was in diesem Bildschirm wichtig ist.
5. Höchstens ein Linienglyph pro Zeichnung, gezeichnet mit 1,5 und runden Enden.
6. Standardmäßig kein Hintergrund: Die Zeichnung kommt mit nur Platz für ihre Schatten und sitzt auf der jeweiligen Seite, auf die sie gesetzt wird. Mit "ground": true erhält sie einen getönten Hintergrund, den sie zu 65 bis 75 Prozent in Breite und Höhe ausfüllt, zentriert.
7. Alles im Maßstab 1:1 auf einem 4er-Raster. Zeichnungen in einem Set, die nebeneinander sitzen, teilen sich einen Maßstab: zeichne sie in der Größe, in der sie gezeigt werden, und gleiche die Höhen an, wenn sie in einer Reihe sitzen.
8. Telefone haben ein Seitenverhältnis von 1 zu 2,05.

Verwendung der Ausgabe

out/<id>.svg-Dateien sind in sich geschlossen, tragen ihre eigene Breite und Höhe und passen sich der Seite an: hell auf weiß, dunkel auf schwarz. Sie folgen der Systemeinstellung des Betrachters, und eine dark- oder light-Klasse (oder data-theme) auf einem beliebigen Elternelement erzwingt eine. Sie sind aria-hidden, mit IDs, die pro Zeichnung benannt sind, sodass mehrere inline auf einer Seite sitzen können. Formen tragen Rollenklassen (p-ground, p-card, p-bar, p-dot, p-glyph, p-hi für den angehobenen Teil) für Hover-Bewegungen; out/index.html zeigt eine ruhige mit einer Reduce-Motion-Antwort. Eine zu breite Zeichnung für ein Telefon erhält eine schmalere zweite Zeichnung; quetsche sie niemals.

Design in Figma stattdessen: die gleichen Regeln gelten, und die Spezifikationswerte bilden eins zu eins auf Frames ab (Auto-Layout für Karten, absolute Position nur für den angehobenen Teil). Exportiere jeden Hintergrund als SVG.

Wenn die Regeln mit dem Produkt kollidieren

Ein Produkt ohne einzelnen Akzent kann sein dunkelstes Neutral verwenden. Ein Bildschirm, der nur mit zwei Hervorhebungen Sinn ergibt, kann zwei Zeichnungen sein. Beuge jeweils eine Regel und nenne sie.