Craft bündelt die Feinheiten des Design Engineering in offenen, interaktiven Lektionen

Der brasilianische Entwickler Gustavo Fior sammelt unter dem Namen Craft kurze Lektionen zu den Details, die über sauberes oder billiges Webdesign entscheiden: verschachtelte Eckradien, optische Ausrichtung, Farben in OKLCH. Jede Lektion läuft als interaktive Demo im Browser, kostenlos und ohne Anmeldung. Für Agenturen und Freelancer im DACH-Raum ist das ein Nachschlagewerk für die Handgriffe, die in keiner Frontend-Doku stehen.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Design Engineering beschreibt die Zone zwischen Entwurf und Code, in der eine Oberfläche entweder poliert oder billig wirkt. Diese Zone ist selten dokumentiert, weil sie aus Dutzenden kleiner Entscheidungen besteht, die erfahrene Gestalter im Gefühl haben. Das Projekt Craft übersetzt dieses Gefühl in kurze, anfassbare Lektionen.

Das Wichtigste in Kürze

• Die Sammlung bündelt kurze Lektionen zu Typografie, Farbe, Layout, Bewegung und Sound als interaktive Browser-Demos.
• Der Zugang ist kostenlos und kommt ohne Konto aus; der Quellcode liegt offen auf GitHub, wo eigene Konzepte per Merge-Request landen.
• Anders als das kostenpflichtige E-Book Refactoring UI setzt Craft auf Ausprobieren statt Nachlesen.
• Für DACH-Teams taugt die Sammlung als geteilte Referenz und als Brücke zu Barrierefreiheitsregeln wie Mindestgrößen für Klickflächen.

Was macht Craft anders als eine Doku?

Craft zerlegt Oberflächengestaltung in einzelne Konzepte und erklärt zu jedem, warum es funktioniert, nicht nur wie es aussieht. Gut sichtbar wird das an den verschachtelten Eckradien: Damit ein Button bündig in einer Karte sitzt, muss der innere Radius dem äußeren minus dem Innenabstand entsprechen. Neben der Formel steht ein kleiner Rechner, der den passenden Wert direkt ausgibt.^[1]

Der Reiz liegt im Anfassen. Die optische Ausrichtung oder saubere Tabellenziffern bleiben als Fließtext abstrakt, als Live-Demo aber sofort einleuchtend. Über 110 Sterne auf GitHub deuten an, dass die Machart einen Nerv trifft.^[2]

Wie schlägt sich Craft gegen Refactoring UI?

Das bekannteste Vorbild für solche Detailtipps ist Refactoring UI von Adam Wathan und Steve Schoger, ein kostenpflichtiges E-Book mit Gestaltungsregeln als statischen Merksätzen. Craft nimmt denselben Stoff, macht ihn kostenlos und ersetzt das Nachlesen durch Ausprobieren.

Technisch steht die Sammlung auf Next.js und Tailwind, jede Lektion ist eine MDX-Datei. Für ein eigenes Konzept genügt ein Merge-Request. Die Hürde bleibt bewusst niedrig. Damit reiht sich Craft in eine Reihe offener Frontend-Ressourcen ein, von fertigen React-Komponenten bis zu kopierbaren UI-Bausteinen.

Was bringt das deutschen Agenturen und Freelancern?

Im DACH-Raum wächst die Rolle des Design Engineers, der die Lücke zwischen Figma-Entwurf und ausgeliefertem Frontend schließt. Craft liefert dafür eine gemeinsame Sprache, und einige Konzepte zahlen direkt auf Barrierefreiheit ein. Ausreichend große Klickflächen oder klare Fokuszustände sind seit dem Barrierefreiheitsstärkungsgesetz für viele Shops keine Kür mehr, sondern Pflicht.

Am schnellsten zahlt sich die Sammlung als geteilte Referenz im Team aus. Nehmen Sie sich pro Sprint ein Konzept vor, etwa OKLCH für konsistente Farbpaletten oder saubere Ziffern für Preistabellen, und verankern Sie es fest im eigenen Design-System.

Quellen

[1] Craft: „A collection of design engineering concepts“

[2] GitHub: Repository „gustavo-fior/craft“

Mehr Newshunger?

• Warum Ihre Zahlen falsch aussehen: die vier CSS-Schalter für saubere Ziffern
• Optische statt mathematische Ausrichtung: Warum das Auge recht behält
• Barrierefreiheit als Designregeln: Der A11y Experience Guide übersetzt die WCAG-Norm
• Bencho: interaktive UI-Bausteine zum Kopieren, die wirklich laufen
• Opensource UI: 207 kostenlose React-Komponenten zum Kopieren
• CUBE Type erzeugt isometrische Würfelschrift direkt im Browser