Digitales Produktdesign: Entwickle ein flexibles und langlebiges Designsystem

1. Einführung: Mein Name ist Brad Frost und ich bin Webdesigner, Redner, Autor und Berater mit Sitz in Pittsburgh, Pennsylvania. Und in der heutigen Klasse geht es darum, erfolgreiche Designsysteme zu schaffen und die atomare Entwurfsmethodik einzuführen. Ein Designsystem ist die kanonische Geschichte wie Ihr Unternehmen digitale Produkte entwirft und baut. Designsysteme ermöglichen es Teams, schneller als je zuvor zu arbeiten. Viele und viele Organisationen investieren in das, was großartig ist. Aber zur gleichen Zeit, da es sich um ein eigenes Buzzword handelt, sehen Sie viele und viele Teams beim Erstellen von Schaltflächen, Karten und Kopfzeilen und alle möglichen anderen Komponenten isoliert. Dann nach der Tatsache, sie stecken sie irgendwie in ihre tatsächlichen Produkte, nur um zu finden, dass sie auf ihr Gesicht fallen. Atomic Design ist eine Methodik, die ich erstellt habe, um mir und den Teams, mit denen ich arbeite, zu helfen , über UI als durchdachte Reihe von miteinander verbundenen Teilen nachzudenken. In den letzten fünf Jahren hat sich atomare Design als ziemlich solide Welle für sicherlich meine eigenen Projekte entwickelt, aber auch Organisationen auf der ganzen Welt, um zu helfen, ihre entworfenen Systeme zu etablieren und über Designsysteme in einem nachdenklicheren verbunden Weise. Diese Klasse ist für Designer und Entwickler und wirklich für alle die am Erfolg digitaler Produkte in einer Organisation beteiligt sind. Nachdem Sie diesen Kurs absolviert haben, werden Sie verstehen, wie Sie eine Designsysteminitiative erfolgreich starten können. Sie werden mit der Methodik bewaffnet sein, um sorgfältig ein Design-Systemkomponenten zu erstellen , die Ihnen helfen können, Ihr anfängliches Designsystem aufrecht zu erhalten, sowie Governance im Laufe der Zeit. Also danke, dass du dieser Klasse beigetreten bist, und lasst uns eintauchen. 2. Was sind Designsysteme?: Also, das erste, was wir tun werden, ist eine schnelle Auffrischung dessen, was genau ein Designsystem ist. Dies ist an vielen Orten anderswo abgedeckt aber es ist eigentlich eine schwierige Sache, genau zu fixieren. Was ist ein Designsystem? Die Definition, die ich dazu neige, ist, dass ein Designsystem die kanonische Geschichte ist , wie Ihre Organisation digitale Produkte entwirft und baut. Ich setze das gerne durch die Linse eines neuen Mieters. Sie stellen eine kluge, talentierte Person ein und sie werden unweigerlich fragen, wie wir die Dinge hier machen? Wie gestalten wir wie? Entwickeln wir uns? Wenn Sie ein entworfenes System haben, können Sie diese Frage beantworten, indem Sie sie in Richtung des Entwurfssystems lenken. Sie können sagen: „Hier, hier ist die Geschichte, wie wir Dinge hier machen, hier ist, welche Designsprache wir verwenden, hier sind meine Code-Konventionen, die wir verwenden, hier sind all die anderen Dinge, die helfen, das Bild für jedermann, der digitale Produkte im Unternehmen entwirft und baut. Es gibt viele verschiedene Zutaten zu einem Design-System und in der Regel nehmen sie die Form von ein paar verschiedenen Dingen. Da sind die greifbaren Artefakte eines Designsystems. Die eigentlichen UI-Komponenten, die das Brot und Butter eines Designsystems sind , sowie Design-Ressourcen, Icons und solche Dinge. Aber dann gibt es auch die übergeordneten Richtlinien, wie man diese Artefakte benutzt. Denken Sie darüber nach wie Ikea Möbel. Sie haben die tatsächlichen Teile der Ikea Möbel, die Sie auf den Tisch geworfen haben und schließlich in das fertige Produkt zusammenbauen. Aber ohne Gebrauchsanweisung wird es schwer gehen. Also, Sie können es technisch nur mit einem Kit von Teilen tun, aber zur gleichen Zeit, diese Bedienungsanleitung hilft, einige Kontext und Anleitung, wie nachdenklich diese Dinge zusammen zu setzen, um Ihr Haar und Ihre Vernunft zu retten. In welchen Zutaten Ihr Designsystem enthält, hängt davon ab, was Ihr Unternehmen und was Ihre Teams benötigen, um Produkte erfolgreich zu entwerfen und zu bauen. Daher kann Ihr Designsystem Dinge wie Designprinzipien, Design-Token, UX-Richtlinien, Schreiben von Richtlinien, Sprach- und Tonrichtlinien, Entwicklungsrichtlinien, die tatsächlich codierten UI-Komponenten, Design-Ressourcen enthalten Design-Token, UX-Richtlinien, Schreiben von Richtlinien, Sprach- und Tonrichtlinien, Entwicklungsrichtlinien, die tatsächlich codierten UI-Komponenten, wie eine Skizze UI Kit, Icon-System, interne und externe Ressourcen zu anderen Dingen Verknüpfung mit Best Practices auf beliebten Ressourcen-Websites wie Smashing Magazin oder CSS-Tricks Dinge wie das. Seitenvorlagen, allgemeine Flows und UX-Muster, Markenrichtlinien. Es gibt so viele verschiedene Zutaten für ein Designsystem und wieder, welche Zutaten Ihr Designsystem enthält, hängt sehr stark von den Anforderungen Ihres Unternehmens und Teams ab. Es ist keine Überraschung, warum so viele Unternehmen in Designsysteme investieren, weil sie eine Menge unterschiedlicher Vorteile bieten. Sie bieten Vorteile für den Endbenutzer, indem sie konsistentere, kohärente Erlebnisse bereitstellen. Wenn Benutzer von einem Teil der Website zu einem anderen oder von einem Produkt zum anderen reisen, werden sie mit einem sehr ähnlichen Gefühlserlebnis begrüßt und dies ist aus vielen verschiedenen Gründen wichtig , denn jedes Mal, wenn ein Benutzer ein neues Schnittstellenmuster neu erstellen muss, Nehmen wir an, sie treffen auf eine Datumsauswahl in vier verschiedenen Abschnitten einer Website und jedes Mal, wenn diese Datumsauswahl anders ist, müssen sie neu lernen. die UI-Konventionen für die Auswahl eines Datums jedoch leicht neu starten. Aber wenn ein Datumswähler vom Designsystem bereitgestellt wird, die Erkenntnis, die bei der Entscheidung durch die Wahl dieses Datums involviert verringert sich die Erkenntnis, die bei der Entscheidung durch die Wahl dieses Datums involviertist, was ihnen ermöglicht, das zu tun, was sie brauchen, um schneller zu erledigen, was natürlich gut für sie ist aber auch gut für das Geschäft weil sie vielleicht schneller auschecken, einen Flug buchen oder ein Hotel buchen können. Was auch immer die Aufgabe zur Hand ist, ist gut für das Endergebnis des Unternehmens sowie die Achtung der Zeit und Aufmerksamkeit des Benutzers. Während die Vorteile für die Benutzer groß sind, sind die wirklichen Vorteile eines Designsystems meist intern. Sie sind zum Wohle der Teams, die tatsächlich die Arbeit produzieren. Die Designer, die Entwickler, die QA-Mitarbeiter, die Produktleute, all diese Menschen profitieren stark von einem Designsystem. Der erste große Vorteil, ein Designsystem für ein Team zu haben , ist, dass es ihnen ermöglicht, Arbeit schneller zu starten, und warum dies der Fall ist, liegt daran, dass wir in der Vergangenheit eine Menge unnötiger redundanter Arbeit wiederholen mussten. Wir haben eine Heldeneinheit für unsere Homepage und wir haben diese drei Tauts oder diese drei Karten und jedes Mal, wenn wir eine neue Seite haben, die diese Komponenten benötigt, diese Helden oder jene Tauts, mussten wir sie immer wieder neu erfinden und immer wieder und wieder und wieder und mit subtilen oder manchmal völlig unterschiedlichen Implementierungsdetails. Anstatt die Kartenkomponente zum 15. Mal neu erfinden zu müssen, könnte das Team stattdessen die vorhandene Kartenkomponente aus dem Designsystem holen, anschließen und sich dann auf größere und bessere Aufgaben konzentrieren. Design-Systeme bieten den Vorteil einer qualitativ hochwertigen Arbeit, denn wieder, sie erfinden die Dinge nicht neu, erfinden das Rad immer und immer wieder neu, was bedeutet, dass sie stattdessen denn wieder, sie erfinden die Dinge nicht neu,erfinden das Rad immer und immer wiederneu, was bedeutet, dass sie stattdessen dieselben UI-Komponenten in den gleichen Mustern Backen in besserer Zugänglichkeit , Flexibilität, reaktionsschnelle Sachen, Lokalisierung, Animation, all das bedeutet, dass die Qualität der Arbeit, die Qualität dieser UI-Komponenten mit jedem neuen erhöht Iteration. Designsysteme bieten ein gemeinsames Vokabular, das dazu beiträgt, verschiedene Disziplinen und verschiedene Produktteams zusammenzubringen , so dass sie alle auf derselben Seite sind und alle dieselbe Sprache sprechen. Anstatt der Entwickler eine Komponente als Dienstprogrammleiste aufruft, nennt der Designer es die Admin-Leiste, und das Produktteam nennt es den grauen Balken über den oberen Rand, können Sie ein gemeinsames Vokabular für das, was Ding tatsächlich genannt wird. Teams können überspringen, ein Meeting zu haben , um die Nomenklatur zu besprechen, um sicherzustellen, dass wir alle auf derselben Seite sind. Designsysteme erleichtern außerdem das Testen, so dass Teams eine einzelne Komponente isolieren und sie mit Best Practices für reaktionsschnelle Designs, Best Practices für Barrierefreiheit, Best Practices für optimale Performance usw. testen können. Indem Sie also Dinge auf Komponentenebene testen und in diesen Best Practices auf Komponentenebene backen, erhalten diese Vorteile automatisch, überall dort, wo diese Komponenten einbezogen werden, diese Vorteile kostenlos. Designsysteme und die dazugehörigen Styleguides bieten auch eine nützliche Referenz für Teams, Designer und Entwickler, auf die sie sich bei ihrer täglichen Arbeit beziehen können. Wann wählen Sie ein Akkordeon gegen Tabs? Sie können im Styleguide nachsehen, wann die eine oder andere Komponente verwendet werden soll, wie eine Komponente benannt werden soll oder welche Konventionen Sie verwenden möchten. Da diese freigegebene Ressource zur Verfügung steht, können alle Team-Workflows reibungsloser verlaufen. Schließlich bietet ein Designsystem ein zukunftsfreundliches Fundament, auf dem man für die kommenden Jahre aufbauen kann. Das ist eine tolle Sache an Design-Systemen, ist, dass es sehr grundlegend ist. Sie werden nicht alle Probleme Ihres Unternehmens und v1 Ihres Entwurfssystems lösen. Aber was ein Designsystem ermöglicht, ist Verbesserung der Iteration im Laufe der Zeit durch die Schaffung von Konventionen, die Einrichtung von Komponenten und Aufbauend auf ihnen im Laufe der Zeit, das Team und die Qualität der Arbeit in der Lage, nach oben und oben zu gehen und nach oben, wie die Zeit weitergeht. Selbst wenn Sie eine massive Neugestaltung Ihrer gesamten Organisation, visuelle Identität, Farbpalette und all das Zeug machen würden, werden Sie immer noch Schaltflächen haben, Sie werden immer noch Karten haben, Sie werden immer noch Topographie und Ikonographie und solche Dinge haben. Also, du musst das Baby nicht mit dem Badewasser rauswerfen. So kann das Designsystem so bleiben, wie sich Ihre fortwährende Designsprache weiterentwickelt. Es gibt offensichtlich so viele Vorteile, um System zu entwerfen, so dass es keine Überraschung ist, dass so viele Organisationen stark in ihre eigenen Designsysteme investieren. Einige berühmte Beispiele sind Googles Material Design, Carbon Design System von IBM und heck sogar die US-Regierung hat ein Design-System, um die über 30.000 Websites von der Bundesregierung produziert Strom. Das ist also nur eine schnelle Auffrischung dessen, was ein Designsystem ist und welche Vorteile sie bieten. In der nächsten Lektion werden wir darüber sprechen, wie man eine erfolgreiche Designsystem-Initiative anstoßen kann. 3. Designsystem-Initiative starten: Wie zum Teufel starten Sie überhaupt eine Designsystem-Initiative? Es gibt so viele verschiedene Facetten, um System zu entwerfen, dass es fast lähmend werden kann, um sogar loszulegen. Ich fand einen großen ersten Schritt darin, nur ein Lay des Landes zu bekommen , woraus Ihre digitalen Produkte bestehen. Was ist die DNA Ihrer digitalen Produkte? Es gibt ein paar verschiedene Tools und Taktiken, um alle verschiedenen UI-Komponenten und Stile in Ihren digitalen Produkten aufzurunden . Die erste ist eine Website namens cssstats.com. Was CSS STATS tut, ist, alle verschiedenen Stilregeln auszudrucken , die im Stylesheet Ihrer Website enthalten sind. Also, Sie könnten zu cssstats.com gehen und einfach Ihre URL oder zu was auch immer Ihre digitale Produkt-Domain ist und drücken Sie den Go Button und was es tun wird, ist alle Ihre Style-Regeln auszuspucken. Also, wenn Sie sich diese Seite ansehen, können Sie tatsächlich verschiedene beliebte Websites anschließen, wir bleiben bei Facebook für jetzt und was es tun wird, ist es wird ausspucken alle Stilregeln, die auf facebook.com ist, die wie Sie vielleicht Stellen Sie sich vor, viele. Also, dies gibt Ihnen nicht nur all die verschiedenen Stilregeln und Selektoren, es weist auch auf alle 85 einzigartigen Farben hin, einschließlich was aussieht wie 50 Schattierungen von Grau und verschiedene Geschmacksrichtungen von Facebook Blau. Dies gibt Teams die Möglichkeit, diese verschiedenen Farben aufzurunden und zu normalisieren. Führen Sie Gespräche darüber, was da drin sein sollte und was vielleicht geändert werden sollte, um diese Zahl zu reduzieren. Das Gleiche gilt für Hintergrundfarben, was ist die richtige Farbe von Rot für Fehlerzustände oder Grün für Erfolgszustände? Wieder, was Facebook blau ist das richtige Facebook blau? Was sind neutrale Farben in unserer Farbpalette? Was sind die verschiedenen Schriftgrößen? Was sind die verschiedenen Schriftfamilien und wie könnten wir diese reduzieren? Da alle diese Schriftfamilien, Deklarationen sind ein Performance-Hit. Also, wie reduzieren wir nachdenklich diese Zahlen und den ganzen Weg durch. Also, das ist ein großartiges Werkzeug. Wir erhalten nur einen Überblick darüber, woraus Ihre Benutzeroberflächen bestehen, und helfen dem Team, sich darüber zu unterhalten , welche Konstruktionseigenschaften bleiben sollten und was los sein sollte. Die nächste Taktik, um eine Lage des Landes zu bekommen ist, was ich als Interface-Inventar bezeichne. Was ein Interface-Inventar ist, ist eine Screenshot-Übung, die im Grunde das gesamte Team auf eine Ostereier-Jagd über alle Ihre digitalen Eigenschaften geht, und es rundet und sammelt und zeigt alle einzigartigen UI Muster und legt sie alle unter einem Dach. Ich werde durch die verschiedenen Schritte der Durchführung eines Interface-Inventars gehen. Der erste Schritt besteht darin, alle Truppen zu runden und alle verschiedenen Mitglieder des Teams zu runden, die für den Erfolg Ihres Designsystems verantwortlich sind. Dies ist ein wichtiger erster Schritt, weil manchmal ein individueller Designer es auf sich selbst nehmen wird , um alle einzigartigen Tastenstile und Kartenkomponenten und Dinge wie diese zu runden , aber es ist nicht sehr hilfreich in Isolation ein wesentlicher Vorteil von Designsystemen darin besteht, dieses gemeinsame Vokabular zu etablieren. So, mit unterschiedlichen Perspektiven im Raum hilft, diese Designsystem-Initiative zu verzinken und beginnt , dass gemeinsame Wortschatz zwischen den verschiedenen Teammitgliedern. Dazu gehören Designer und Entwickler sowie QS-Mitarbeiter und Produktmanager und Projektmanager und alle Menschen, die für den Erfolg Ihrer digitalen Produkte verantwortlich sind. Also, im Wesentlichen ist eine Interface-Inventarübung wirklich nur Screenshotting eine Reihe von Sachen. Schritt zwei bereitet sich auf den Screenshot vor. Ich stelle gerne sicher, dass jeder das gleiche Tool verwendet, um Screenshots zu erfassen. Nehmen wir an, dies könnte eine PowerPoint-Vorlage oder eine Keynote-Vorlage oder Google Slides oder ein anderer Mechanismus sein, der es dem Team ermöglicht alle Screenshots an einem Ort zu verteilen, so dass Sie sie alle am Ende der Übung kombinieren können . Ich habe eine Google Slides-Vorlage erstellt, die Sie verwenden können, um Ihre eigene Inventarübung in der Benutzeroberfläche zu starten. Nun, für das Hauptereignis. Schritt drei ist tatsächlich Screenshotting all diese verschiedenen verschiedenen UI-Komponenten. Die Art und Weise, wie dies tendenziell funktioniert, ist, dass wir einem anderen Teammitglied eine andere Kategorie von UI-Komponente zuweisen . Je mehr Menschen Sie im Raum haben, desto besser, desto mehr Augäpfel haben Sie auf Ihre digitalen Eigenschaften. Es gibt eine Reihe von verschiedenen Kategorien, um Screenshot. Es gibt globale UI-Komponenten, wie verschiedene Kopf- und Fußzeilen. So kann eine Person oder ein Team von Personen dafür verantwortlich sein, alleverschiedenen Arten von Kopf- und Fußzeilen und Zustände dieser Komponenten in ihren digitalen Eigenschaften durchzugehen und zu erfassen verschiedenen Arten von Kopf- und Fußzeilen und . Ein anderes Team könnte für die Erfassung verschiedener Bildtypen verantwortlich sein. Andere Menschen können Symbole finden, wie verschiedene Lupen-Schaltflächen-Symbole oder Hamburger-Symbole oder Pfeil-Symbole in Ihren verschiedenen digitalen Eigenschaften. Andere Menschen können sich auf Typografie konzentrieren. Andere Menschen können sich auf Blöcke konzentrieren, wie Helden und Karten und solche Dinge. Jemand anderes könnte sich auf Formularsteuerelementen wie Textbereiche und Texteingaben und Optionsfelder und Kontrollkästchen und solche Dinge befinden. Eine andere Person kann im Knopfdienst sein. Sie bekommen die Idee, aber die Idee ist wieder, weit und breit über all Ihre verschiedenen Eigenschaften zu gehen , manchmal sogar Ihre nativen Eigenschaften, in Ihren Web-Eigenschaften, in internen Eigenschaften, in Außenverkleidungseigenschaften. Die Idee ist, dass es wirklich in die dunklen Ecken Ihrer Benutzeroberflächen kriecht, um alle verschiedenen Komponenten zu erfassen, die dazu neigen, angezeigt zu werden. Ich fand diese Übung als zeitlich befristete Übung hilfreich. Sie könnten leicht Tage oder sogar Wochen damit verbringen, durch den Dschungel Ihrer UIs zu kriechen. Aber um der Zeit willen ist es hilfreich, nur eine Momentaufnahme der DNA Ihrer UIs zu erhalten. Ich habe herausgefunden, dass ein oder zwei Stunden ausreichen, um einen ausreichend großen Fußabdruck dessen zu erhalten, woraus Ihre Benutzeroberflächen bestehen. Sobald Sie die Screenshot-Übung durchgeführt haben, beinhaltet Schritt vier die Präsentation Ihrer Ergebnisse. Also, jedes einzelne Teammitglied, das für die Suche nach den Knöpfen verantwortlich war , wird an die Vorderseite des Raumes gehen und präsentieren, was sie gefunden haben. Dies ist ein wirklich hilfreicher Teil der Übung, denn hier ist jeder in der Lage den Schmerz all dieser verschiedenen Tastenkomponenten in Ihren verschiedenen digitalen Eigenschaften zu erleben . Es ist auch hier, wo das gemeinsame Vokabular beginnt zu entstehen, richtig? Verschiedene Teammitglieder oder verschiedene Disziplinen werden unterschiedliche Namen für die gleichen Komponenten haben. Also, es ist in dieser Präsentation und Diskussion, dass die Teams beginnen, zu reflektieren, wie der Name dieser Komponenten sind, warum diese Komponenten eine bestimmte Art aussehen oder sollte dieses Ding bleiben oder anfangen zu gehen. In Ordnung. Dies bietet also ein wirklich hilfreiches Gespräch für das gesamte Team, um hinter die Designsystem-Initiative zu kommen und beginnt das gesamte Designsystem-Projekt zu antizipieren, das später kommen wird. Dann ist der letzte Schritt eines Interface-Inventars die Neugruppierung und Einrichtung der nächsten Schritte. Es gibt offensichtlich nur so viel, was du in ein paar Stunden zusammen tun kannst. Das Arbeitsteam, das das Designsystem erstellt, könnte dann beginnen, die Ergebnisse dieser Übung zu übernehmen und herauszufinden, wie man das in die Entwurfssystem-Roadmap überführt. Eines der besten Dinge, die Sie am Ende der Interface-Inventarübung tun können, ist alle Ergebnisse dieser Übung unter einem Dach in einem riesigen PDF zu korralisieren. Das ist wirklich großartig, weil dies zu einem Werkzeug wird das hilft, die Designsystem-Initiative an den Rest Ihrer Teams sowie an die Leute zu verkaufen , die die Finanzen kontrollieren, oder? Sie müssen kein Designer sein, um zu verstehen, dass 70 einzigartige Tastenstile eine schlechte Idee ist. So könnten Sie buchstäblich eine PDF-Datei oder einen Ausdruck der Interface-Inventarübung auf Ihrem CEOs-Schreibtisch ablegen der Interface-Inventarübung auf und sie werden verstehen, warum ein Designsystem benötigt wird. Zusammenfassend hilft eine Interface-Inventarübung, auf die Inkonsistenz hinzuweisen und das Land dessen zu erhalten, aus dem Ihre Benutzeroberflächen tatsächlich bestehen. Es weist auf diese Inkonsistenz hin, so dass das Design-System-Team anfangen kann , sich wegzuschneiden und irgendwie herauszufinden, was bleiben muss und was gehen muss. Es ist der Anfang dieses gemeinsamen Wortschatzes zwischen Teammitgliedern, das im Designsystem selbst kodifiziert wird. Es hilft auch, festzustellen, wie die Form des Entwurfssystemprojekts überhaupt sein wird, welche UI-Komponenten im Designsystem enthalten sein müssen und was ist ihre allgemeine Priorität? Gibt es viele Foren, gibt es viele Datentabellen, gibt es viele Karten und solche Dinge. Vielleicht kann das helfen, ein Gefühl davon zu bekommen, was die Priorität der Komponenten sein sollte. Wenn Sie also einmal das Land bekommen, aus dem Ihre UIs bestehen, ist es super verlockend für Designer und Entwickler, einfach in das Unkraut einzutauchen und sich entwerfen und bauen zu lassen. Aber es ist wichtig, nicht auf diesen Instinkt zu handeln und stattdessen einen Schritt zurück zu gehen und tatsächlich mit den Menschen zu sprechen, um herauszufinden, was das Designsystem tun muss. Jedes gute Designprojekt beginnt mit Forschung und das Gleiche gilt für eine Designsystem-Initiative. Wenn wir dazu neigen, über Nutzerforschung nachzudenken, neigen wir dazu, über die Menschen nachzudenken, die unsere Software verwenden. Während dies der Fall ist und sie in eine Designsystemforschung involviert sein sollten, sind die wirklichen Benutzer eines Designsystems die Designer und die Entwickler und die eigentlichen Teams, die diese Benutzeroberflächen bauen. Indem Sie mit diesen Leuten sprechen, können Sie ein Gefühl davon bekommen, welche Aufgaben das Designsystem erledigen muss, um in der Organisation erfolgreich zu sein. Auch dies ist der Grund, warum es so wichtig ist, nicht nur in Baukomponenten zu tauchen und Komponenten zu entwerfen denn ehrlich gesagt wissen Sie nicht ob die Komponenten, die Sie am Ende entwerfen und bauen tatsächlich gehen , um den realen organisatorischen Herausforderungen zu begegnen, die echte Teammitglieder erleben. Es gibt ein Missverständnis, dass Forschung diese riesige formale Sache sein muss , aber tatsächlich geht es darum, mit Menschen zu reden. So können Sie sich eins zu eins mit verschiedenen Teammitgliedern zusammensetzen, unabhängig davon, ob sie ein Designer, Entwickler, QS-Person, Projektmanager, Produkteigentümer sind, und ein Gefühl davon bekommen, wie ihr Workflow ist, welche Teile ihres Workflows sie nicht sind genau glücklich mit, was Dinge frustrieren sie, was sie möchten, um aus dem Design-System zu sehen? Was sind die Dinge, die sie als wichtige Aspekte des Erfolgs der Designsystem-Initiative betrachten ? Was sind potenzielle Bedrohungen für die Initiative des Entwurfssystems? Mit anderen Worten, was das Schiff versenken wird, wenn wir es nicht richtig machen. All diese Gespräche tragen dazu bei, das Bild der Aufgaben zu machen, die das Designsystem erledigen muss um die Frustrationen der Menschen erfolgreich anzugehen und sie zu einem besseren Produktdesign und -entwicklung zu führen. Sobald Sie mit Ihrer Recherche fertig sind, können Sie diese sofort in einen formalen Anstoß Workshop für die Designsystem-Initiative umstellen. Früher haben wir den Fehler gemacht, eine Sitzung zu starten, ohne vorher eine Recherche zu machen. Diese Anfänger-Sessions gingen schließlich in die lautesten Stimmen im Raum, überwältigten den Rest von allen und holten die Dinge mit einer Reihe von Haustierprojekten von Leuten aus. Indem Sie zuerst recherchieren und dann einen Kickoff-Workshop durchführen, können Sie die Kick-off-Sitzung nutzen, um einen breiten Konsens für die Designsystem-Initiative zu erzielen. Kick-off-Workshop beinhaltet also DerKick-off-Workshop beinhaltet also, alle Beteiligungshalter für die Designsysteminitiative in einem Raum zusammenzubringen. Von hier aus können Sie die Erkenntnisse aus Ihrer Forschung präsentieren. Was Sie dazu neigen, ist, dass, wenn Sie mit einem Haufen Leute sprechen, verschiedene Teams auftauchen werden, oder? Vielleicht ist der Workflow für Designer und Entwickler grob und sie befinden sich in ihren eigenen Silos. Vielleicht sind Entwickler von zu vielen verschiedenen konkurrierenden Technologie-Stacks frustriert. Vielleicht verwenden die Designer viele verschiedene Werkzeuge und es wird schwierig, zusammen zu arbeiten. All diese unterschiedlichen Erkenntnisse tragen dazu bei, das Bild zu machen, was das Designsystem tun muss. Daher neigen wir dazu, diese Erkenntnisse aus unserer Forschung zu nehmen und sie in diese breiten Themen zu integrieren. Wir neigen dazu, am Ende mit etwa 12 bis 20 Themen für das Designsystem, mögliche Ergebnisse für die Designsystem-Initiative. Was wir tun, ist, dass wir diese Themen an die Wand hängen und dann haben wir alle Pfahlhalter abstimmen, welche Themen am wichtigsten sind. Von all den Ergebnissen der Designsystem-Initiative diese 10 bis 20 Dinge, was sind die Dinge, die es wirklich braucht, um zu nageln? Was sind die Dinge, die wirklich brauchen, um richtig zu werden? Wir geben allen drei Post-it-Notizen und lassen alle über die drei Ziele des Ergebnisses abstimmen, die sie für die wichtigsten halten. Das Tolle an diesem Prozess ist, dass er sehr demokratisch ist. Sie müssen sich keine Sorgen darüber machen, dass die meisten extrovertierten oder die am höchsten bezahlten Menschen im Raum das Gespräch dämpfen und alle ablenken. Jeder erhält eine Abstimmung über das, was er für das wichtigste Ergebnis der Designsystem-Initiative hält. Am Ende dieser Übung sind Sie in der Lage, einen Schritt zurück zu gehen und tatsächlich eine Heatmap der Prioritäten des Designsystems zu haben , oder? Wenn dieses Ding drei Dinge wirklich tun müsste, wirklich gut, was sind das für drei Dinge? Richtig? Was ist der Schmerz und die Frustration, die dieses Designsystem ansprechen muss? Es ist nicht zu sagen, dass die anderen Ziele oder Ergebnisse der Designsysteminitiative nicht wichtig oder dass das Team sie nicht ansprechen wird, es ist nur, dass, wenn Push kommt, um mit begrenzten Zeit Ressourcen und Geld schieben, Sie müssen ein paar Dinge richtig machen. Du wirst nicht in der Lage sein, alles mit gleicher Priorität abzudecken. Durch die Durchführung dieser Forschung und dieser Kick-off-Übungen ist das Team besser in der Lage zu verstehen, was das Designsystem ist und welche Aufgaben es tun muss. In der nächsten Lektion werden wir darüber sprechen, wie Sie die Erkenntnisse aus dieser Kickoff-Übung in die Auswahlvon Pilotprojekten übersetzen dieser Kickoff-Übung in die Auswahl können, um Ihr Designsystem erfolgreich zu gestalten. 4. Das Pilotprojekt: Sie haben nun ein Interface-Inventar durchgeführt, das Ihnen eine Vorstellung davon verschafft, woraus Ihre Benutzeroberflächen bestehen, und Sie haben Recherchen durchgeführt und eine Kickoff-Übung durchgeführt, die dazu beiträgt, ein breites Verständnis für die Prioritäten des Designsystems zu erhalten. Also, der nächste Schritt ist tatsächlich eintauchen und beginnen, das Designsystem zu bauen. Es könnte verlockend sein, einzelne Komponenten wie Schaltflächen und Karten und Kopfzeilen und solche Dinge zu bauen . Aber ein wirklich erfolgreiches Designsystem wird nicht im Vakuum erstellt. Es ist mit den Produkten verbunden, die es bedient, und das ist die Bedeutung von Pilotprojekten. Pilotprojekte bieten die Möglichkeit, das Designsystem durch die Linse echter Arbeitssoftware zu bauen . Nur mit Pilotprojekten sind wir in der Lage, wirklich zu sagen, dass das Designsystem tatsächlich echte Arbeitsprodukte mit Strom versorgen kann. Zum Beispiel könnte ein Pilotprojekt ein Homepage-Redesign für Ihre Website sein oder es könnte den Dashboard-Bildschirm hier neu gestalten oder es könnte die häufig gestellte Fragen Seite oder so etwas richtig neu gestalten. Diese Scheiben von Produkten geben Ihnen die Möglichkeit, alle Komponenten zu etablieren , die für den Bau dieser Bildschirme notwendig sind. Wie wählen Sie also aus, mit welchen Pilotprojekten Sie Ihre Designsysteminitiative starten möchten? Es gibt viele verschiedene Kriterien, die bei der Auswahl eines Pilotprojekts beteiligt sind und eines der wichtigsten Kriterien ist, wo sich dieses Projekt in seiner Roadmap befindet. Wenn bereits Entwurfs- und Entwicklungsarbeiten stattgefunden haben und sie begonnen werden , ist dieses Schiff wahrscheinlich bereits gesegelt. Also, Sie möchten an diesem Sweet Spot sein, wo Sie wissen, dass das Projekt stattfindet und das Team plant, dieses Projekt wie ein Homepage-Redesign oder so etwas zu erstellen , aber sie haben nicht wirklich mit dem Design begonnen und -Entwicklungsprozess, eine Gelegenheit für das Design-System-Team wird, sich an diesem Projekt zu befestigen und dabei zu helfen, dieses Projekt sowie die entstehenden Konstruktionssystemkomponenten zu erstellen. Es gibt viele andere Kriterien, die bei der Auswahl von Pilotprojekten beteiligt sind, und mein Freund und Kollege Dan Moll hat einen großartigen Beitrag geschrieben, der diese verschiedenen Kriterien erklärt. Einige dieser Kriterien umfassen das Potenzial für gemeinsame Komponenten. Wir haben also über die Durchführung eines Interface-Inventars gesprochen , das Ihnen eine bessere Vorstellung davon gibt, aus was Ihre Produkte Uls hergestellt werden und so möchten Sie, dass das Pilotprojekt in der Lage sein wird, einige dieser Boxen zu nehmen. Wenn Ihr Interface-Inventar gezeigt hat, dass Ihre Organisation über Lasten und viele Formulare und Datentabellen verfügt, möchten Sie wahrscheinlich ein Pilotprojekt erstellen, das Ihnen die Möglichkeit gibt, Formularkomponenten und Datentabellenkomponenten zu erstellen . der Umfang des Pilotprojekts ist sehr wichtig. Sie wollen die gesamte Website nicht als Pilotprojekt neu gestalten, das ist zu groß. Du willst etwas, das du in ein paar Wochen oder ein paar Monaten in die Hände kriegen kannst. Sie möchten auch sicherstellen, dass es aus technischer Sicht erreichbar ist. Sie wollen nicht ein ganzes CMS-Re-Platforming oder Aktualisierung auf ein völlig neues Framework als Pilotprojekt abbeißen CMS-Re-Platforming oder Aktualisierung auf ein völlig neues Framework müssen, das in diesen frühen Tagen des Designsystems ein wenig zu umständlich sein könnte . Sie möchten auch über das Marketingpotenzial Ihres Pilotprojekts nachdenken. Ist das etwas ein Projekt, das Sie am Ende dieses Prozesses für den Rest der Organisation halten könnten ? Haben alle anderen es sich ansehen und sagen: „Hooh, das will ich auch tun“? Gekoppelt damit ist die Idee, einen verfügbaren Champion zu haben, oder? Das Produktteam, mit dem Sie arbeiten, möchten Sie, dass sie mit dem Konzept eines Designsystems an Bord sein, weil sie ein Cheerleader und ein Evangelist für den Rest der Organisation werden können . In diesem frühen Tag des Designsystems müssen Sie Menschen an Bord mit uns haben und Menschen, die in der Lage sind, mit den Schlägen zu rollen, denn in den frühen Tagen des Designsystems bauen Sie langsam das Flugzeug als Du fliegst rein. Du brauchst also Leute, die bereit sind, mit dir auf diese Reise mitzukommen. Sie wollen nicht mit den skeptischsten hart zusammenarbeiten um mit Menschen für Ihre ersten Pilotprojekte zu arbeiten. Auch hier hilft die Auswahl von Pilotprojekten, das Designsystem mit echter Arbeitssoftware zu verbinden , und das ist absolut entscheidend für den Erfolg Ihres Designsystems. Also, sobald Sie Ihre Pilotprojekte ausgewählt haben, können Sie jetzt an die Arbeit gehen und tatsächlich Ihr Designsystem aufbauen, was uns zur atomaren Entwurfsmethodik bringt. 5. Atomic-Design-Methodik: Das Herz und die Seele eines großen Designsystems ist eine Reihe von wiederverwendbaren, flexiblen und elastischen Komponenten. Die meisten Menschen verstehen die Bedeutung eines komponentengesteuerten Designs im Entwicklungsprozess. Aber wie genau kommen Sie zu diesen spezifischen Komponenten, die in Ihrem Konstruktionssystem enthalten sein werden? Geben Sie den atomaren Entwurf ein. Atomic Design ist eine Methodik, um über UIs als durchdachte, hierarchische, miteinander verbundene Gruppe von Komponenten nachzudenken , die reale Bildschirme erstellen. Um das atomare Design zu verstehen, machen wir einen kurzen Umweg zurück zu Ihrem High-School-Chemie-Kurs. Alle Materie im Universum besteht aus einem endlichen Satz atomarer Elemente: Wasserstoff, Kohlenstoff, Eisen und solche Dinge. Diese Atome verbinden sich zu Molekülen und letztlich komplexeren Strukturen, um die ganze Komplexität in unserer Welt und in unserem Universum zu schaffen . Das ist ein unglaublich leistungsfähiges Konzept. Wie es passiert, können wir das gleiche Konzept auf unsere Schnittstellen anwenden. In der Welt des UI-Designs kann jede Benutzeroberfläche in einen endlichen Satz von atomaren Elementen unterteilt werden. Dinge wie Beschriftungen, Eingaben und Schaltflächen. All diese anderen Elemente, die nicht weiter zerlegt werden können, dienen als Grundlage, die grundlegenden Bausteine unserer UI. Aber atomares Design ist mehr als nur Atome. Es gibt tatsächlich fünf diskrete Phasen des atomaren Designs. Es gibt Atome, Moleküle, Organismen, Vorlagen und Seiten. Wir werden jede Etappe durchlaufen. Wie wir gerade erwähnt haben, sind Atome die grundlegenden Bausteine unserer Benutzeroberfläche. So, Dinge wie Etiketten, Eingaben, Schaltflächen , Topographie, Überschriften, Bilder und so, sie dienen als unsere Rohstoffe. Aber es ist allein abstrakt, nur eine Reihe von Schaltflächen oder Labels zu sehen , die in der Zusammenfassung herumschweben. Also, in der nächsten Phase, in der Molekülphase, nehmen wir diese atomaren Elemente und kombinieren sie zusammen. So können zum Beispiel ein Label, eine Eingabe und eine Schaltfläche zu einem einzelnen Feld Suchformular oder ein Newsletter-Anmeldeformular zusammenfügen . Plötzlich haben diese Atome einen Zweck, richtig. Diese Beschriftung definiert diese Eingabe. Wenn Sie auf diese Schaltfläche klicken, wird das Formular gesendet. Also, jetzt haben Sie diese schöne gekapselte Komponente, die Sie überall hineinlassen können, wo Sie das einzelne Feld Formular benötigen. Ein Organismus ist eine komplexere Komponente, die kleinere Moleküle umfasst. So könnte ein Headerorganismen beispielsweise aus einem Logo-Atom, einem primären Navigationsmolekül und einer Suche nach einem Molekül bestehen einem primären Navigationsmolekül . All diese Dinge kommen unter einem Dach zusammen, um diesen diskreten Teil der UI zu bilden. gehen in die Template-Phase, was wir dort tun, ist, dass wir unsere Organismen nehmen und sie miteinander kombinieren und alles in ein Seitenlayout legen. Also, hier fangen Sie an, eine ganze Seite Form annehmen zu sehen. Aber es ist wichtig zu betonen, dass wir auf Template-Ebene wirklich nur das Inhaltsgerüst oder das Skelettsystem einer Seite definieren , anstatt das Endprodukt oder die endgültige Ausgabe. Auf der Seitenstufe sind wir in der Lage, dieses Inhaltsgerüst oder jenes Skelettsystem zu nehmen und dann repräsentative Inhalte und Daten hinein zu gießen. Nun, die Seitenstufe ist super wichtig, weil offensichtlich das ist, was Ihre Endbenutzer sehen und mit ihr interagieren werden. Sie werden Ihre Homepage mit echten Bildern und echten Aufrufen zum Handeln und echten Schlagzeilen sehen , die in ihnen involviert sind. Aber es ist auch in der Seitenphase, dass wir tatsächlich in der Lage sind, die Ausfallsicherheit des zugrunde liegenden Designsystems zu testen. Wir können sehen, ob eine bestimmte Art von Bild in eine Heldeneinheit gegossen wird, steht diese Heldeneinheit auf? Richtig. Was ist, wenn es ein Bild von Bergen ist und es schön und friedlich ist, es gibt eine Menge weißen Raum und es gibt einen Text, der diese Berge überzieht? Das könnte schön und einfach sein, diesen Text zu lesen. Was, wenn wir das Bild der Berge durch eine laute Gruppe von Menschen ersetzen? Nun könnte es viel schwieriger sein, den Text zu lesen, der oben auf dem Bild sitzt. Es spielt also reale Produktszenarien ab, mit denen wir stabile Lösungen für die zugrunde liegenden Komponenten finden können. Es ist auch in der Seitenphase, dass wir in der Lage sind, verschiedene Szenarien einer Vorlage zu spielen . So können Sie sich beispielsweise bei einem Dashboard Ihrer Webanwendung anmelden und für einen neuen Benutzer möglicherweise etwas anderes sehen. Möglicherweise möchten Sie einem neuen Benutzer ein Lernprogramm oder eine Warnmeldung anzeigen, die erfahrene Benutzer möglicherweise nicht sehen. Ihr Designsystem muss in der Lage sein, dieses reale Szenario zu bewältigen. Auf dieser Seite können wir also reale Produktszenarien abspielen , die das zugrundeliegende System informieren und beeinflussen. Also, atomare Design könnte buchstäblich auf jede Benutzeroberfläche angewendet werden. Ob es sich um eine Website oder eine native App oder ein Stück native Software wie Sketch oder Photoshop oder sogar um den Geldautomaten Ihrer Bank oder so etwas handelt. Also, lassen Sie uns atomare Design auf eine App anwenden , die viele Leute kennen, Instagram. Also, Instagram, wie wir alle wissen, ist eine Foto-Sharing-App, und wenn wir atomares Design auf diese Schnittstelle anwenden und wir die Instagram-App-Erfahrung in seine atomaren Elemente explodieren, sind wir im Wesentlichen mit einer Handvoll -Symbol-Tasten, eine Handvoll Text-Atome und eine für das eigentliche Foto selbst. Auf Molekülebene können Sie sehen, dass diese atomaren Elemente zusammenkommen, um einige nutzbare Teile der Schnittstelle zu bilden. Aber wirklich auf der Organismusebene kommen Dinge, Fleisch und Kartoffeln der Instagram-Erfahrung zusammen. Denn es ist hier, wo der Fotoorganismus, der alle Benutzermetadaten enthält, das Foto selbst sowie die Aktionen und Kommentare für das Foto, wo alles zusammenkommt. Natürlich ist dieser Fotoorganismus das Ding, das übereinander gestapelt ist und wir scrollen für die Unendlichkeit, richtig. So konnten wir sehen, dass auf Template-Ebene zusammenkommen, was eine ziemlich einfache Vorlage ist, nur weil es eine mobile App ist. Also, es sind nur diese Dinge übereinander gestapelt. Dann auf Seitenebene können wir unser Designsystem übernehmen und tatsächlich repräsentative Inhalte in diese Vorlage einfüllen . In diesem Stadium sind wir in der Lage, alle verschiedenen Variationen zu testen, alle realen Produktszenarien, auf die wir als Design-Team stoßen werden. Also, zum Beispiel, was passiert, wenn Ihr Benutzerhandle 10 Zeichen lang ist? Wie funktioniert das? Aber was passiert, wenn jemand versucht, ein Benutzerhandle einzugeben , das 50 Zeichen lang ist? Was passiert dann? Wird es auf zwei Zeilen umbrochen, haben Sie eine Unterhaltung mit dem Backend-Team, um die Anzahl, die Länge der Benutzerkonten zu begrenzen ? Was passiert, wenn ein Foto Null mag es? Was passiert, wenn auf Foto hat eine 100 Millionen mag es? Was passiert, wenn es keine Kommentare gibt? Was passiert, wenn 14 Ebenen verschachtelter Kommentare dazu vorhanden sind? Was passiert, wenn das Foto ein Quadrat oder ein Querformat oder ein Portrait oder eine Diashow oder ein Bumerang ist? All dies sind reale Produktszenarien, die das Instagram-Design- und Entwicklungsteam erfüllen muss. Für ein anderes Beispiel, werfen wir einen Blick auf Facebook. So haben wir früher darüber gesprochen, wie Sie atomares Design auf buchstäblich jede Benutzeroberfläche anwenden können. Eine Schnittstelle, mit der wir alle vertraut sind, ist Facebook. Also, was wir tun werden, ist, dass wir Facebook's Interface nehmen und es buchstäblich in Stücke schneiden. Dies wird die Komponente Cutoff-Übung genannt, dokumentiert von Webdesignerin Charlotte Jackson. Also, was wir hier betrachten, ist atomare Designs Seite Bühne, richtig. Wir betrachten eine bestimmte Instanz einer Benutzeroberfläche mit echten Daten, die darin gegossen werden. Also, das erste, was wir tun werden, ist, diese Seite in ihre kleineren Organismen zu zerlegen. Wir überspringen die Template-Phase, nur weil bei der Vorlage ist im Wesentlichen dieser Bildschirm nur mit einigen der Daten abstrahiert, richtig. Anstatt diese spezifischen Personen in diesen Profilblöcken und diesen spezifischen Geschichten in meinem Feed, wäre es im Wesentlichen nur eine Art Platzhalter Daten ausgegraut. Also, da wir das nicht auf dem Papier artikulieren können, werden wir einfach direkt dazu springen, unsere Organismen von dieser Seite zu extrahieren. Also, was ich tun werde, ist an die Arbeit zu gehen. In Ordnung. Also, was wir getan haben, ist, dass wir das in kleinere Teile in diese breiteren Organismen gehackt haben. Es ist also erwähnenswert, dass Organismen auch andere Organismen enthalten können. Nehmen wir an, die Sidebar-Organismen, zum Beispiel, enthalten tatsächlich noch einige ziemlich komplexe Stücke von UI, wie den Brocken der Geschichte und die Einladung dieses Ereignisses auf unseren Seiten in unserer Werbung hier. Was wir also tun könnten, ist, diesen Organismus tatsächlich zu nehmen und ihn sogar noch weiter zu brechen. Also, gehen wir weiter und machen das. In Ordnung. Also, jetzt haben wir noch kleinere Organismen, aber sie sind immer noch Organismen. Also, jetzt, von hier aus, können wir einen bestimmten Organismus nehmen und tatsächlich anfangen, unsere Moleküle daraus zu extrahieren. Also werde ich die Geschichten Organismus wählen und das sogar noch weiter dekonstruieren. Also, gehen wir weiter und machen das. Also, jetzt haben wir den Geschichtenorganismus dekonstruiert und in ein paar kleinere Komponenten ausgeblasen. Sie werden sehen, dass wir ein paar Knöpfe oben rechts hängen, wir haben einen Titel für diesen Block hier oben. Wir werden das vorerst in Ruhe lassen. Am unteren Rand haben wir diese Schaltfläche, um mehr von Ihren Freunden zu sehen. Aber was ich tun werde, ist, dass ich mich hier auf diese spezifische Komponente konzentrieren werde. Also, wir können dies ein Profilmolekül nennen, oder wir könnten es einen Medienblock nennen , der ein allgemeinerer Name für diese spezifische Komponente ist. Aber im Wesentlichen betrachten wir ein Bild auf der linken Seite und einen Namen oder einen Titel und einige Metadaten darunter. Dies ist ein wirklich wichtiges Stück von Facebook's UI-Puzzle. Sie können sehen, wir haben unsere Kontaktliste hier mit etwas Geschmack dieser gleichen Komponente. Wir haben es hier verwendet, wir haben es in unserem Header hier oben hängen, wir haben es hier drüben in unserer Sidebar, und es wird eine Reihe von verschiedenen Orten auf ihrer Website verwendet. So können Sie sehen, wie wichtig es ist, diese Komponente anzusprechen , weil sie täuschend einfach ist. Wenn wir einen Blick darauf werfen und man bedenkt, dass es 2,2 Milliarden Benutzer gibt, muss diese Komponente hier eine Menge schweres Heben machen. Wir sprechen also über Namen aller Formen und Größen, verschiedene Sprachen, verschiedene Leserichtungen, Dinge wie Arabisch oder Mandarin oder Deutsch oder andere Dinge, die dazu neigen, dem westlichen Schreibstil nicht zu folgen. Es ist wirklich wichtig, dass dieser Teil der Benutzeroberfläche all diese verschiedenen Szenarien verarbeiten kann. Ich beneide ihr Team nicht im Geringsten dafür, weil dies ein trügerisch komplexes Stück UI ist. Nun, da wir unsere Medienblockkomponente oder ein Medienblockmolekül oder ein Profilmolekül haben , wie auch immer wir das nennen wollen, können wir das jetzt sogar noch weiter dekonstruieren. Also, was ich tun werde, ist, das in seine atomaren Stücke zu hacken. Also haben wir unser Medienblockmolekül oder unser Profilmolekül in seine atomaren Elemente dekonstruiert . Also, wir haben dieses wiederverwendbare kreisförmige Bild Symbol , das wir über die Facebook-Website verwenden. Wir verwenden dieses Titelatom, das verwendet wird , um die Namen der Leute anzuzeigen, aber auch Aufrufe zum Handeln, sowie viele, viele andere Dinge auf der Website, sowie diese allgemeine Behandlung für etwas, das wir Metadaten nennen, oder es ist etwas, das ein wenig subtiler ist. Es soll entweder einen Zeitstempel anzeigen, oder hier drüben, es ist ein bisschen ein Beschreibungstext. Aber man konnte sehen, dass gerade auf dieser Atomebene eine Menge Arbeit hier los ist. Also, was passiert, wenn das Profilbild eines Benutzers seltsam zugeschnitten wird und es einen Teil seines Kopfes abhebt, oder was passiert, wenn er überhaupt kein Profilbild hat? Was ist die Standardsache? Was ist, wenn wir dafür eine Art Symbol oder ein anderes Bild verwenden wollen? All dies, selbst auf der Atom-Ebene, ist hier so viel Komplexität los. Aber der Geist ist, indem man all dies auf dieser Atomenebene kontrolliert, indem man sehr komplexe, harte Probleme auf atomarer Ebene lösen kann , wenn diese Dinge zusammenkommen, um sich zu bilden diese Moleküle und dann kommen weiter zusammen, um diese Organismen zu bilden, dann kommen zusammen, um schließlich diese letzten Bildschirme zu bilden, all jene Best Practices, die den ganzen Weg auf der atomaren Ebene passieren , blase hoch und perkolieren in die gesamte Benutzeroberfläche als Ganzes. Atomic Design kann also Teams dabei helfen, diese großen, dornigen UI-Probleme zu lösen, sie tatsächlich in kleinere, verdaulichere Stücke zu zerlegen, so dass sie Dinge systematischer entwerfen und bauen und diese Komponenten dann bis zu bilden sehr flexible, widerstandsfähige Produkte. Nachdenken über UI-Design-Systeme durch das Objektiv von Atomic Design bietet viele Vorteile. Die erste und größte, die ich in dieser Lektion wiederholt habe , ist, dass es so unglaublich wichtig ist , Produktdesign und -entwicklung mit Systemdesign und -entwicklung zu verbinden. Atomic Design bietet eine Brücke zwischen diesen Welten, denn es sind nicht nur die Komponenten, die in einem Vakuum zur Seite in einer Abstraktion leben und dann Ihre Produkte, die anderswo leben, es ist alles, was sich gegenseitig füttert. Das Design und die Entwicklung des Systems werden Produkte informieren und beeinflussen, die das andere Ende herauskommen, und die Produkte selbst werden das System informieren und beeinflussen. So haben Sie zum Beispiel eine Marketing-Homepage, die ein paar Karten, eine Heldeneinheit und solche Sachen hat , und dann haben Sie vielleicht ein anderes Produkt, das Karten auf andere Weise verwendet, immer noch dasselbe Kartenmolekül oder Organismus, aber es wird auf verschiedene Produkte für verschiedene Zwecke angewendet. Anwendung von Atomic Design auf Ihren Designsystem-Workflow können Sie das Ganze und die Teile des Ganzen gleichzeitig erstellen. Sie entwerfen kein Auto, indem Sie mit der Radkappe oder einer Nackenmutter beginnen und dann von dort aus aufbauen, es beginnt von einem ganzen, zusammenhängenden Bild von dem, was dieses Auto sein wird, und Sie werden zu den Teilen kommen, die das Auto zur gleichen Zeit. Ein weiterer Vorteil von Atomic Design ist, es eine klare Trennung zwischen der Struktur Ihrer UI-Komponenten und dem Inhalt, der in ihnen lebt. So können Sie zum Beispiel eine wiederverwendbare Kartenkomponente haben. In einem Fall könnte diese Kartenkomponente eine Reihe von Produktdaten enthalten. In einem anderen Fall kann es eine Reihe von Ereignisdaten enthalten. Indem Sie diese klare Trennung zwischen einer Komponentenstruktur und dem darin enthaltenen Inhalt erstellen, können Sie wiederverwendbarere, agnostische und flexiblere UI-Komponenten erstellen. Eine andere Sache, die Atomic Design bietet, ist eine gemeinsame Sprache, um über Komponenten als Hierarchie nachzudenken. Begriffe wie Komponente und Modul und Element sind ein wenig zu abstrakt, und es gibt hier keinen Sinn für implizite Hierarchie. Aber Begriffe wie Atome, Moleküle und Organismen enthalten diesen Sinn für Hierarchie, dem Atome in Moleküle enthalten sind und Moleküle in Organismen enthalten sind. Wenn Sie feststellen, dass Ihr Team über die Begriffe Atome, Moleküle und Organismen gestolpert wird, ist das keine große Sache. Aktualisieren Sie Ihre Sprache und Ihre Nomenklatur auf etwas, das Sinn macht und hilft, alle mit diesen Konzepten an Bord zu bringen. Sie können Atomic Design üben, ohne die Begriffe Atome, Moleküle und Organismen zu verwenden. Das Team von GE, das am Predix Design System arbeitet, entschied sich dafür, die Atomic Design Methodik zu übernehmen und das Vokabular zu optimieren und ein paar zusätzliche Schritte hinzuzufügen. Das half, sie für die gesamte Designsystem-Initiative durchzubringen. Also, jetzt haben wir behandelt, was Atomic Design ist. Es ist ein mentales Modell, um über unsere UIs als hierarchische, miteinander verbundene Komponenten nachzudenken , die beim Erstellen echter Produktbildschirme helfen. Aber wie wenden wir Atomic Design tatsächlich in der realen Welt an? In der nächsten Lektion werden wir darüber sprechen, wie Designer und Entwickler in ihren Workflows mit Atomic Design arbeiten können. 6. Tools des Handels: Atomic Design ist also nur ein mentales Modell. Also, wie wenden Designer und Entwickler dieses mentale Modell tatsächlich auf ihren Workflow an? Wie Sie das atomare Design auf Ihren Workflow anwenden, hängt davon ab, welche Rolle Sie in einer Designsysteminitiative spielen. Designer arbeiten neigen dazu, in Werkzeugen wie Sketch oder Envision Studio oder Figma oder Adobe XD oder anderen statischen Designumgebungen zu arbeiten. Glücklicherweise haben sich diese Werkzeuge in den letzten Jahren weiterentwickelt, um Dinge wie Symbole und Komponenten einzuschließen , die ineinander verschachtelt werden können. Daher sind wir in der Lage, Atomic Design in diesen statischen Konstruktionswerkzeugen zu realisieren. In einer werkzeugähnlichen Skizze sind wir in der Lage, unsere Atome zu definieren, unsere Moleküle definieren und auch unsere Organismen als komplexere Komponenten zu definieren, und was wir damit tun können, ist nun eine Verbindung zwischen diesen Atome, Moleküle und Organismen. Wenn wir zum Beispiel den Grenzradius unserer Schaltflächen ändern wollten, könnte ich hier reinkommen, unseren Grenzradius zu aktualisieren und „Speichern“ zu drücken, und was ich tun kann, ist zu sehen, wie diese Änderung unsere Teaser-Komponente beeinflusst hat das unser Knopfatom verwendet, und Sie können sehen, dass diese Grenzen jetzt gerundet sind, und wenn wir dann in unsere Organismen gehen, die eine Teaser-Liste erstellen, die eine Sammlung von Teaser-Elementen ist, sind wir in der Lage, diese Schaltflächen aktualisiert als Nun ja. Also, alles, was zu sagen ist, Sie sind in der Lage, dieses vernetzte System von Komponenten dieser Symbole zu erstellen und Änderungen an einem Ort vorzunehmen und diese Änderungen an jedem Ort zu bringen, wo diese Komponente enthalten ist. Während Designer also Tools wie Sketch und Figma sowie Adobe XD und Envision Studio verwenden, neigen Entwickler dazu, Komponenten in einer anderen Umgebung auszubauen. Ich nenne dies die Front-End-Workshop-Umgebung, und was eine Front-End-Workshop-Umgebung ist, ist ein Ort, an dem Sie Komponenten definieren und die realen dynamischen Daten in diese Komponenten einfügen können , ohne notwendigerweise muss es an die tatsächlich funktionierende Anwendung verdrahtet werden. Es gibt eine Reihe von verschiedenen Tools , die diese Front-End-Workshop-Umgebungen bereitstellen. Wir haben eine Sammlung dieser Front-End-Werkstatt-Tools auf einer Website namens StyleGuides.io zusammengefasst , bei der es sich um eine Sammlung von Ressourcen rund um Designsysteme handelt. Es gibt eine ganze Reihe von Front-End-Workshop-Umgebungen , die sehr beliebt sind, einschließlich Storybook, Pattern-Labor, Fractal, View DS und mehr. Was wir tun werden, ist eine Demo der Verwendung von Pattern Lab zeigen, um ein Design Systeme Komponenten und Pilotprojekte Bildschirme zu erstellen . Also, was wir taten, war, dass wir eine fiktive E-Commerce-Website im Pattern-Labor erstellt haben. So können Sie sehen, die Homepage hier hat einige Fotos von Schuhen mit einigen Promo-Bildern und einer Fußzeile und all das gute Zeug, und dann sind wir in der Lage, in unsere Produktkategorien zu klicken , um Frauen Schuhe und Männer zu sehen Schuhe und Kinderschuhe und dann können wir auf eine Produktdetailseite klicken, auf der das spezifische Produkt angezeigt wird, das ein Benutzer kaufen möchte, durch die Einkaufskarte und den Checkout-Workflow. Also, dies ist ein großartiges Beispiel für eine Website, die viel damit los ist. Wir haben mehr spritzige Marketing-Sachen. Wir haben mehr utilitaristische Produktdetailseiten und natürlich einige Foren für Benutzer zum Auschecken. Also, all dies wird mit 100 liegendes Design-System erstellt, und was Pattern Lab uns erlaubt, ist, die Konstruktionssysteme zu visualisieren, die Komponenten zugrunde liegen. also auf die Indexseite springen, können Sie alle noch subatomaren Stücke sehen , wie unsere Markenfarbpalette und sind neutrale Farbpalette und Utility-Farben sowie unsere Topographie und Schriftgrößen und Überschriften. und andere Dinge wie diese, und wenn wir hier durchblättern, sehen Sie Dinge wie Symbole in verschiedenen Bildtypen und verschiedene Blöcke wie unsere Heldeneinheit und Promo-Block, die wir in ein wenig bekommen. Aber Sie können alle zugrundeliegenden Atome, Moleküle und Organismen entblößt sehen , so dass das Team in der Lage ist, Gespräche über sie zu führen. Also, die coole Sache ist, dass wir in der Lage sind, Pattern-Labor zu verwenden , um zwischen diesen verschiedenen Mustern zu durchqueren. Diese Atome, Moleküle, Organismen, Vorlagen und Seiten. So sind wir zum Beispiel in der Lage, ein einzelnes Atom zu vergrößern, das uns hilft, über diese spezifische UI-Komponente zu sprechen. Dies ist also ein hilfreicher Ort, an dem Designer und Entwickler zusammenkommen können , um darüber zu sprechen, welche Dimensionen diese Produktbilder sein werden. So können Sie sehen, dass dies ein 600 mal 400 Bild ist. Aber wieder, wie wir über diese Atome gesprochen haben, sind nicht furchtbar nützlich für sich allein. Also, was wir tun können, ist die Muster-Labs-Lineage-Funktion zu verwenden , um zu zeigen, wo dieses Muster tatsächlich verwendet wird. Es heißt also, dass das Stack-Block-Bild in unserem Stacked Block Molekül verwendet wird. Also, wir können hier klicken, und tatsächlich sehen Sie jetzt diese gestapelte Blockkomponente, die eine Produktkarte oder etwas, wo wir Produktinformationen, aber vielleicht auch einige andere Informationen auf der Straße. Von hier aus können wir sagen, dass wir die gestapelte Blockkarte haben, woher kommt das zum Einsatz? Und es sagt, dass dies in unserer Stapelblockliste enthalten ist, die eine Liste dieser Komponenten , die alle zusammenkommen, um dieses Gitter zu bilden, das für so etwas wie eine Produktklasse oder so etwas verwendet werden könnte . Jetzt von hier aus können wir sagen, dass die Stapelblocklisten in diesen folgenden Mustern bis zur Kategorievorlage enthalten sind. Also, jetzt können wir sehen, wie diese Produktklasse zum Leben erweckt wird. Wir sind in der Lage zu sehen, dass diese gestapelten Blocklisten beginnen, auf etwas sehr Spezifisches angewendet werden. Nun, von hier aus, wenn wir uns ansehen, wo diese Vorlage verwendet wird, sagt, dass wir es für unsere Kinderkategorie oder Männerkategorie verwenden und so weiter und so weiter. Also, wenn ich auf eine bestimmte Seite klicke, können wir visualisieren, wie diese Vorlage aussieht , wenn Herren-Schuhdaten in sie eingegossen werden. Also, wieder ist dies ein echtes Produktszenario. Diese Firma muss Herrenschuhe verkaufen und diese UI erreicht das. Aber dann sind wir auch in der Lage, zu verschiedenen Bereichen zu navigieren , die genau die gleiche Vorlage verwenden, aber verschiedene Inhalte innerhalb dieser UI-Vorlagen gießen. Egal, ob Sie ein Designer sind, der verschachtelte Symbole verwendet Komponenten in einer werkzeugähnlichen Skizze oder Sigma sind, oder Sie sind ein Entwickler, der ein Tool wie Musterlabor oder Storybook verwendet, um Komponenten ineinander in Code zu verschachteln, Sie bauen diesen Satz von miteinander verbundenen, voneinander abhängigen Komponenten auf, um reale Bildschirme aufzubauen, und diese Bildschirme werden von Ihren Pilotprojekten diktiert. Wenn der Gig eine neue Homepage aufbaut, dann großartig, das wird Ihnen die Möglichkeit bieten eine Heldenkomponente und einige Kartenkomponenten in Ihrer Kopfzeile, in Ihrer Fußzeile und solchen Dingen zu erstellen . Wenn Sie der Gig sind, wird der Checkout-Fluss neu gestaltet , der Ihnen einige Formularfelder und einige andere Dinge geben wird. Also, die Idee ist, dass wir diese Pilotprojekte verwenden um alle Komponenten zu entwerfen und zu bauen, die letztendlich für diese Produkte sorgen. Durch die Verwendung einer Front-End-Werkstattumgebung und die Verwendung der statischen Konstruktionswerkzeuge und verschachtelten Komponenten sind Sie in der Lage, atomare Konstruktionssysteme zu realisieren, da alle unter einem Dach liegen. So kann dieser Prozess verwendet werden, um Ihr anfängliches Designsystem zu erstellen, aber eines der entscheidenden Dinge an einem Designsystem ist, sicherzustellen, dass es den Test der Zeit hält. Wie stellen Sie Ihr Designsystem nicht für langfristigen Erfolg und behandeln nicht nur die aktuellen Szenarien Ihrer Produkte, sondern auch zukünftige Ergebnisse Ihrer Produkte. In der nächsten Lektion werden wir behandeln, wie das geht. 7. Dein System für zukünftige Arbeit verwenden: Daher ist der Aufbau eines Designsystems durch die Linse einer Handvoll Pilotprojekte eine gute Möglichkeit, eine Reihe von wiederverwendbaren, flexiblen Komponenten zu etablieren, die helfen könnten, echte Produkte zu bauen. Aber Pilotprojekte sind genau das. Sie sind Piloten. Sie werden nicht jedes einzelne Szenario adressieren , in das Ihre Organisation laufen wird. Manchmal werden Sie feststellen, dass Sie nach einer Komponente suchen, sie einstecken und feststellen, dass es Ihnen vielleicht 90 Prozent des Weges dorthin bringt. Aber um etwas zu erreichen, brauchen Sie diese zusätzlichen 10 Prozent, damit es tatsächlich richtig funktioniert. Also, was wir tun werden, ist über laufende Produktarbeit zu sprechen und wie Sie das mit der kontinuierlichen Entwicklung Ihres Designsystems einbinden können. Also, kommen wir zurück zu unserer hypothetischen Schuhfirma. Sagen wir einfach, dass der Chef immer ein wenig zurückhaltend war , Dinge anzubieten, die im Verkauf waren. Also, alles, was wir auf unserer Demo sehen, ist ein voller Preis, richtig? Also unsere Männerkategorie, unsere Frauenkategorie, unsere Kinderkategorie hat nichts als vollen Preis Artikel. Aber die Zeiten haben sich verändert. Und sagen wir, dass diese Strategie nicht funktioniert hat, also, widerwillig, kommt der Chef vorbei und er sagt: „Okay. Wir müssen jetzt einen Verkaufsabschnitt auf unserer Website aufnehmen.“ Also, wie funktioniert das? Denn dies beinhaltet tatsächlich die Aktualisierung unserer Benutzeroberfläche, um dieses neue Geschäftsszenario zu adressieren. Also, was wir tun müssen, ist, dass wir unsere Navigation aktualisieren müssen, um einen Verkaufsabschnitt aufzunehmen. Und wir könnten unsere Homepage aktualisieren und einen neuen Abschnitt unter unseren wichtigsten Promo-Artikeln hinzufügen, mit dieser „On Sale“ Art von tout Abschnitt. Dann könnten wir auch in unsere Verkaufskategorie-Seite klicken, die genau die gleiche Kategorieseite wie die Frauen-, Herren- und Kinderkategorien ist, aber wir haben einige UI-Unterschiede, die deutlich werden. Also haben wir eine Änderung an unserem gestapelten Blockmuster, wo wir diese kleine Verkaufsflagge in der oberen rechten Ecke unsererKomponente hinzufügen und diese kleine Verkaufsflagge in der oberen rechten Ecke unserer wir haben auch dieses Update zu unserem Preis. Was Sie sehen können, den ursprünglichen Preis ausgeschlagen, und der neue Verkaufspreis erscheint an seiner Stelle. Also, die coole Sache ist, dass wir immer noch in der Lage sind die wichtigsten Bits dieser Komponente wiederzuverwenden, aber wir werden eine Variation dieser Komponente erstellen, die es uns ermöglicht, dieses Verkaufsszenario anzugehen . Sie werden also sehen, dass wir in unserer Musterbibliothek jetzt einen gestapelten Block haben. Und dann machen wir eine Variation dieses Musters, schreiben ein bisschen HTML und ein bisschen CSS und nehmen diese Änderungen vor, um dieses Szenario anzugehen. Nun, dieser gestapelte Block konnte nicht nur normale Produkte, sondern auch Verkaufsprodukte verarbeiten. Das Ergebnis ist eine stabilere Komponente, eine flexiblere Komponente, die in der Lage ist, mehr Orte auf der gesamten Website zu reisen. Also - das ist großartig - mit nur ein paar Verbesserungen an einer Komponente sind wir in der Lage, ein brandneues Produktszenario anzugehen. Das nennt Yesenia Perez-Cruz Szenario-Driven Design Systems. Das Unternehmen hat ein Problem, hat ein Ziel, das sie zu erreichen versuchen, und das Designsystem muss helfen, diese Ziele zu erreichen. Durch die Linse der laufenden Produktarbeit wird das System im Laufe der Zeit stärker und flexibler. Lassen Sie uns ein anderes Beispiel für einen Weihnachtsgeschenkführer verwenden. Der Chef kommt rein und sagt: „Es ist fast Urlaubszeit. Dies ist eine wichtige Zeit des Jahres für uns. Wir machen einen großen Teil unserer Einnahmen. Aber, seien wir ehrlich, unsere aktuellen Kategorieseiten sind nicht so spritzig, wie wir sie gerne hätten.“ Also, was wir tun wollen, ist, dass wir das ansprechen wollen. Wenn Sie sich also unsere bestehenden Produktkategorie-Seiten ansehen, ist es möglich, einen Weihnachtsgeschenkführer als Titel zu erstellen und dann die verschiedenen Produkte zu präsentieren, die für die Feiertage zum Verkauf stehen werden. Aber wir könnten etwas Besseres machen. Da wir diese wiederverwendbaren Komponenten - von denen einige auf unserer Homepage sind - haben , die größer und spritzer sind, könnten wir vielleicht einige dieser Komponenten wiederverwenden, um einen spritzwasseren, eleganteren Urlaubsgeschenkführer zu erstellen . Also, was wir tun werden, ist, dass wir diese Heldenkomponente nehmen, und wir werden sie über unserem Produkt-Raster anschließen. Und wir werden zu einem brandneuen Design kommen, vorhandene Komponenten in unserem Konstruktionssystem verwendet. Also, das ist wirklich, wirklich mächtig, weil es uns erlaubt, bestehende Komponenten zu mischen und aufeinander abzustimmen, um ein völlig neues Erlebnis zu erreichen, alles in wenigen Minuten. Historisch gesehen würde das Erstellen so etwas wie ein Weihnachtsgeschenkführer Wochen oder vielleicht sogar Monate dauern, um zu erreichen. Aber sobald Sie eine Reihe von wiederverwendbaren, flexiblen und belastbaren Komponenten haben , die Sie auf alle Arten von verschiedenen Arten neu anordnen könnten, könnten Sie buchstäblich dieses Zeug in wenigen Minuten einstecken. Das ist ein großer Gewinn für das gesamte Team. Nun, natürlich, das heißt nicht: „Es ist einfach, dass wir nur ein paar Komponenten ziehen und ablegen müssen und früh zum Mittagessen gehen.“ Offensichtlich gibt es immer noch eine Menge harter Produkt-Design-Arbeit, die passieren muss. Aber hier ist die Sache. Jetzt, da die Designer und Entwickler die Heldenkomponenten nicht jedes Mal von Grund auf neu aufbauen müssen , können sie sich auf größere, bessere Probleme konzentrieren. Vielleicht geht es darum, diese Heldenkomponente in zwei verschiedene Sprachen zu übersetzen, vielleicht geht es darum, verschiedene Kunstwerke zu beschaffen oder vielleicht mehr Zeit mit Animationen oder anderen Dingen zu spielen, oder? Dies ist alles eine Gelegenheit, Designer und Entwickler für eine lohnenswertere Arbeit zu befreien. Durch die Verbindung Ihrer laufenden Produktdesign-Arbeit mit der Entwicklung Ihres Designsystems führt jede Iteration über die Komponenten Ihres Designsystems zu einem stabileren, flexibleren, widerstandsfähigeren und leistungsfähigeren System. Das ist ein unglaublich leistungsfähiges Konzept. 8. Letzte Gedanken: Das ist also das. Du hast es bis zum Ende des Kurses geschafft. Hoffentlich verstehen Sie jetzt, wie Designsysteme helfen, echte Produkte zu versorgen und wie Sie die atomare Entwurfsmethodik in Ihren Design- und Entwicklungsworkflowsverwenden die atomare Entwurfsmethodik in Ihren Design- und Entwicklungsworkflows können, um Ihr anfängliches Designsystem zu erstellen, aber auch, um Ihre laufenden geplanten Systembemühungen zu leiten. Ich hätte gerne gehört, wie Sie atomares Design in Ihrem eigenen Workflow verwenden, und ich würde auch gerne hören, wenn Sie aufgehängt oder frustriert oder in irgendeinem Teil Ihrer Designsysteminitiative stecken. Also zögern Sie nicht, in den unten stehenden Diskussionsabschnitt zu springen und das Gespräch am Laufen zu halten. Vielen Dank, dass Sie mir in dieser Klasse beigetreten sind, und ich hoffe wirklich, dass dies Ihnen bei Ihrer eigenen Schildersystem-Reise hilft. 9. Entdecke mehr Kurse auf Skillshare: ( MUSIK)