Craft: Kompakte Leitfäden für Design Engineering von Gustavo Fior

X-PostAdham DannawaySammlung

Adham Dannaway teilt die Ressourcensammlung »Craft« von Gustavo Fior. Die Website bietet kurze, prägnante Essays zu praktischen Konzepten des Design Engineerings – von optischer Ausrichtung und Typografie bis hin zu Animationen, Layout-Regeln und Sound-Design.

Das Wichtigste

  1. Kompakte Wissenssammlung: Gustavo Fiors Projekt »Craft« bündelt kurze Essays und praktische Kniffe für Design Engineers, ohne Anspruch auf Vollständigkeit.
  2. Bereiche Typografie und Farbe: Behandelt Themen wie tabellarische Ziffern, optische Ausrichtung, Schriftglättung, OKLCH-Farbräume und den gezielten Einsatz von Rauschen (Noise).
  3. Layout und Interaktion: Erklärt geometrische Details wie geschachtelte Eckenradien (Radius minus Innenabstand), Scroll-Verläufe, Klickbereiche (Hit Areas) und Squircles.
  4. Bewegung und Zustände: Thematisiert Bewegungsmuster wie unterbrechbare Animationen (Interruptibility), subtiles Skalieren bei Klicks und Zurückhaltung bei Hover-Effekten.
  5. Tooling und Open Source: Neben dem GitHub-Repository bietet Fior eine Installation über den Befehl »npx skills add gustavo-fior/craft« an.

Warum das relevant ist

Viele Details, die Interfaces hochwertig und reaktionsschnell wirken lassen, liegen an der Schnittstelle zwischen visuellem Design und Code-Umsetzung. Die Sammlung fasst etablierte Mikro-Muster präzise zusammen, sodass Frontend-Entwickler und UI-Designer typische Gestaltungs- und Implementierungsfallen vermeiden können.

Einordnung

Das Projekt »Craft« zeichnet sich durch seinen Fokus auf das Wesentliche aus: Statt ausschweifender Theorie liefert Fior pointierte Faustregeln (beispielsweise für Eckenradien oder unterbrechbare Animationen). Der Hinweis im Repository, dass noch nicht veröffentlichte Artikel vorerst KI-Platzhalter enthalten, zeigt ein transparentes Vorgehen beim schrittweisen Aufbau der Bibliothek.

Original-Post

Adham Dannaway

@AdhamDannaway · 26. Oktober 2026

📓 A collection of design engineering concepts These essays are short and simple, meant as a collection of useful ideas and tricks rather than an exhaustive resource. → t.co/v2wotCVRa2 By Gustavo Fior t.co/2WGZBKN8yR

412 Likes3 Antworten568 Lesezeichen14.319 Aufrufe

Auf X ansehen
Ausgewählte Antworten (3)
  • @easedui @AdhamDannaway Saving this, short ones like these are the only design reading I actually finish
  • @eclarkhalid @AdhamDannaway the interruptibility example makes a useful test case: open, close and reopen a sheet before it settles. also run the same sequence with reduced motion enabled so the final state and controls stay consistent.
  • @sarveshsea @AdhamDannaway Thanks for sharing Gustavo’s collection. Short, focused explanations are a useful way to explore the details behind interface craft.

Erwähnte Links

Links und Tools aus diesem Beitrag

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 27. Oktober 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Ähnliche Einträge

Inhaltlich ähnlich, ermittelt über die KI-Suche.

  • Link:Gustavo Fior

    Craft: Eine Sammlung praxisnaher Design-Engineering-Konzepte

    Craft von Gustavo Fior ist eine kuratierte Referenzsammlung kurzer Essays und praktischer Tipps zu Design Engineering. Die Themen reichen von Typografie und Farbgestaltung über Layout und Animationen bis hin zu Sound und Datenvisualisierung.

    Webentwicklung· Sammlung

  • Link:Jakub Krehel

    Make Interfaces Feel Better: Design-Engineering-Prinzipien für UI-Feinschliff

    Jakub Krehel stellt mit 'make-interfaces-feel-better' ein Regelwerk und Skill-Paket für Frontend-Entwickler und UI-Reviews vor. Es umfasst konkrete Design-Engineering-Regeln für Typografie, Oberflächen, Animationen, Icons und Performance sowie ein klares Format für Code-Reviews.

    Webentwicklung· Sammlung

  • X-Post:Noah

    Ressourcen-Empfehlungen für Design Engineers

    Noah (@noahelhadedy) teilt eine Auswahl von fünf Webseiten und Referenzen für Design Engineers, die sich auf UI-Handwerk, Animationen und Interaktionsdetails konzentrieren.

    4113Lesezeichen115.900Aufrufe

    Webentwicklung· Sammlung

  • X-Post:Adham Dannaway

    Design Skills for AI Agents: UX- und UI-Wissen für KI-Coding-Tools

    Adham Dannaway empfiehlt eine von Carlos Cuéllar erstellte Sammlung strukturierter Design-Skills für Coding-Agents wie Claude Code, Cursor und Codex. Das Repository liefert fundierte Heuristiken, Accessibility-Regeln nach WCAG 2.2 und Designsystem-Standards direkt in den Arbeitskontext der KI.

    100Lesezeichen5174Aufrufe

    KI & AI· Sammlung

Zurück zur Wissensbasis

Sprechen wir über Ihr Projekt.

Kontakt

Standorte

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Wien
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Ein Teil von diesem Inhalt wurde mit KI gemacht.