BROADCASTS.com

F\xfcr diese Folge haben wir uns Jonas Ulrich vom Startup kickstartDS (Blog /\nDiscord / Twitter) eingeladen, um \xfcber die praktischen Herausforderungen bei der\nEntwicklung eines UI Design Systems zu sprechen.\n\n\nUNSER SPONSOR\n\n\n\nDiese Revision wird von LanguageTool unterst\xfctzt. LanguageTool ist ein\nintelligenter Schreibassistent f\xfcr alle g\xe4ngigen Browser und\nTextverarbeitungsprogramme.\nLanguageTool findet mehr Fehler als vergleichbare Rechtschreibkorrekturen und\nbereichert jeden Text zus\xe4tzlich durch hilfreiche Grammatik- und Stilvorschl\xe4ge\nf\xfcr mehr als zwanzig Sprachen. Dank des akribischen Modus kannst du deinen Text\nperfektionieren und mithilfe des Styleguides k\xf6nnen benutzerdefinierte Regeln\nerstellt werden. Die Premiumversion bietet eine umfassendere Pr\xfcfung von z. B.\nGro\xdf- und Kleinschreibung, vertiefter Kommasetzung oder mehr als 100 Vorschl\xe4ge\nzum Textstil.\nWenn du auch Support beim Schreiben gebrauchen kannst, schau gerne auf\nlanguagetool.com/workingdraft vorbei \u2013 \xfcber den Button auf der Seite bekommt ihr\njetzt 20 % Rabatt auf Premium.\n\nVor der Gr\xfcndung ihres Startups arbeiteten Jonas und seinen Mitstreitern 15\nJahre lang als Web-Agentur mit vorwiegend Mittelst\xe4ndlern als Kunden. Vor zwei\nJahren entschied man sich dazu, die Erfahrungen des Agenturteams beim Entwickeln\nvon Design Systemen in ein zus\xe4tzliches Standbein zu verwandeln und UI-Bauk\xe4sten\nals Produkt anzubieten.\n\nWir wollen dar\xfcber reden, wie man an die Entwicklung eines solchen UI Design\nSystems herangeht und welche Herausforderungen darin stecken.\n\n\nSCHAUNOTIZEN\n\n[00:01:39] WIE ENTWICKELT MAN EIN UI DESIGN SYSTEM?\n\nBevor es an die Entwicklung eines Design Systems geht, gilt es zun\xe4chst die\nFrage zu kl\xe4ren, wer sp\xe4ter die Konsumenten sein werden. Im Falle von\nkickstartDS sind das ebenjene Sorte Mittelst\xe4ndler, die Jonas\u2018 Agentur bislang\nbetreut hat, die bei rund 100 Mitarbeitern liegt und die schon \xfcber eine gewisse\nAnzahl Webseiten im Netz verf\xfcgt. Ziel ist damit nicht nur einfaches Theming,\nsondern Multi-Mandanten-F\xe4higkeit, also der M\xf6glichkeit, das Design System f\xfcr\ndie Firmenwebseite, das Firmenblog oder eine Marketing-Seite im Charakter\nunterschiedlich ausfallen zu lassen.\n\n\n\nKonzeptuell beginn die Arbeit mit der Entwicklung von Basis-Tokens, wie\nFibonacci-Skalen, Farbvarianten, etc. Die m\xfcssen einzeln nicht nur gut\nfunktionieren, sondern auch in einem Beziehungsgeflecht mit anderen\nBasis-Tokens. Das ist schwerer als man denkt. Die Basis-Tokens werden\nanschlie\xdfend in semantische Tokens \xe0 la \u201ePrimary Color\u201c verpackt. Und die werden\ninnerhalb von Komponenten dann nochmal in Komponenten-Tokens verpackt. Das\nerleichtert die Konfiguration und er\xf6ffnet den Benutzern gleichzeitig an all\ndiesen Schnittstellen, auf Wunsch von der Vorgabe abzuweichen. Sinnvolle\nToken-Vorbelegungen erm\xf6glichen dar\xfcber hinaus einen schnellen Einstieg, ohne\nKonfigurationsorgien. Insgesamt stellt dieser ganze Entwicklungsprozess eine\nmultidisziplin\xe4re Aufgabe dar.\n\nVom Workflow hat das Team sich f\xfcr HTML, CSS und JavaScript als prim\xe4res\nDelivery-Format entschieden, weil das mit jeder Zieltechnologie gleich gut\nharmoniert. Konsumierende Entwickelnde m\xfcssen dann aber das HTML in die von\nihnen verwendete Template-Sprache \xfcberf\xfchren (und bei \xc4nderungen nachziehen).\nVon Jonas\u2018 Team werden die Komponenten aber nat\xfcrlich nicht in diesen\nTechnologien entwickelt, sondern werden am Ende dahin transpiliert. Die\neigentliche Entwicklungsumgebung besteht aus JSX, SCSS und ES6. Das erm\xf6glicht\nes aber, als weiteres Delivery-Format React zzgl. einer\nKonfigurationsbeschreibung nach JSON Schema anzubieten. Zudem werden die\nDesign-Tokens in Amazons Style Dictionary Format angeboten, so dass sie von dort\naus in alle m\xf6glichen Zielformate umgewandelt werden k\xf6nnen (Claim: \u201eStyle once,\nuse everywhere\u201c). Web Components geh\xf6ren aktuell u.a. aus SEO-Gr\xfcnden nicht zu\nden auslieferbaren Formaten.\n\nWir sprechen au\xdferdem dar\xfcber, wie man Design Systeme in Firmen etablieren kann.\nJonas sieht am meisten Erfolg in einem Grassroots-Ansatz, also einem Ansatz, bei\ndem das entwickelnde Team sich ein Design System w\xfcnscht. Dann sind die\nBetroffenen n\xe4mlich motiviert an Bord. Weniger gut ist der Ansatz, ein Design\nSystem von oben zu verordnen. Zur Einf\xfchrung empfiehlt er au\xdferdem, sich nicht\ndirekt der Haupt-Webseite zu widmen, sondern erste Erfahrungen in einem\nNebenprojekt zu sammeln.\n\nDa ein Design System nicht nur eingef\xfchrt, sondern danach am Leben gehalten und\nweiterentwickelt werden muss, ist es zudem erforderlich, dass man einzelne\nsogenannte \u201eChampions\u201c oder gar ein ganzes \u201eDesign Ops\u201c-Team benennt, das das\nUI-System wie ein interner Dienstleister pflegt und andere Teams mit Rat und Tat\nbeim Einbau unterst\xfctzt. Hans und Jonas halten es f\xfcr ideal, das Ganze im Stile\neines Open Source Projektes zu f\xfchren.\n\n\nKEINE SCHAUNOTIZEN\n\nREVISION 524: DESIGN SYSTEME\n\nMit unserem damaligen Gast David Jost besprachen wir im April das Thema Design\nSysteme eher high-levelig und aus der Brille eines gro\xdfen Unternehmens\n\nNATHAN CURTIS: NAMING TOKENS IN DESIGN SYSTEMS\n\nTerms, Types, and Taxonomy to Describe Visual Style\n\nTAILWIND UI\n\nBeautifully designed, expertly crafted components and templates, built by the\nmakers of Tailwind CSS. The perfect starting point for your next project.\n\nMATERIAL UI\n\nMUI offers a comprehensive suite of UI tools to help you ship new features\nfaster. Start with Material UI, our fully-loaded component library, or bring\nyour own design system to our production-ready components.\n\nCHAKRA UI\n\nChakra UI is a simple, modular and accessible component library that gives you\nthe building blocks you need to build your React applications.