Komplexe Designsysteme in Adobe Xd erstellen

1. Kurs-Einführung: Designsysteme werden verwendet, um Erlebnisse zu schaffen , die einfach zu bedienen, einfach zu skalieren und in Zukunft einfach zu erstellen sind einfach zu bedienen, einfach zu skalieren und . Der Hauptpunkt eines Designsystems ist es, die Brücke und die Lücke zwischen Designern und Entwicklern zu übertreffen die Brücke und die Lücke zwischen Designern und und einfach zu integrieren und für die weitere Verwendung in Zukunft als Designsystemkenntnisse und als Die Firma Skills Kids, ich wusste nicht, dass ich Alex heiße. Und in dieser Skillshare-Klasse werden wir darüber sprechen, was Systeme entwerfen und wie Designsysteme in Adobe XD erstellt werden Systeme entwerfen und wie Designsysteme in Adobe XD erstellt , ich bin ein Entwickler von Designprodukten und habe bisher erstellt mehr als 500 Designprodukte. Ich bin auch ein Kursersteller und bisher hatte ich mehr als 30 verschiedene Pferde über Ihr UX-Design in Adobe XD geschaffen mehr als 30 verschiedene Pferde über , wir werden über Designsysteme und ihren Zweck sprechen Designsysteme und ihren Zweck und was ist ein gute Struktur für ein Designsystem. Dann zeige ich Ihnen einige branchenführende Beispiele und Standards, denen Sie folgen sollten, wenn Sie Ihre eigenen Designsysteme in Adobe XD erstellen . Und danach zeige ich Ihnen, wie Sie mit der WASD Ihr eigenes Designsystem erstellen können. Und ich zeige Ihnen mein Inception-Design-System, wie ich es erstellt habe und was Sie daraus lernen können. Dann werden wir über Design-Token sprechen, was sie sind und warum sie nützlich sind, um Ihre Designsysteme zu erstellen. Und schließlich, wie Sie Ihr Designsystem skalieren und skalieren. Und worauf Sie achten sollten, wenn Sie Ihr Designsystem tatsächlich skalieren. Ihr Klassenprojekt für diese Klasse besteht darin , ein eigenes System zu erstellen, aber nichts zu großes, nur ein paar Komponenten hier und da. Und ich freue mich sehr zu sehen, was ihr schaffen könnt. Es gibt ein Video in der Klasse mehr von deiner Klasse erklärt. Projektdesignsysteme sind in der heutigen Zeit nützlicher denn je wenn wir diese verschiedenen Bildschirmgrößen und Geräte haben , für die wir entwerfen müssen. Wir müssen also die Konsistenz verfolgen , was wir für welche Bildschirmgrößen kreieren und wie alles am Ende des Tages funktioniert, für unsere Endbenutzer, indem wir ein Designsystem verwenden. track ist wirklich wichtig, besonders wenn Sie das Tool verwenden , das als Adobe XD großartig ist. Freuen Sie sich darauf, Sie drinnen zu sehen und lassen Sie uns einige fantastische Designsysteme erstellen. 2. Was ist ein Design-System: Designsystem ist, wie der Name schon sagt, ein systematischer Ansatz zur Erstellung von UI- und UX-Designs. Der Hauptzweck des Gebietsdesignsystems ist es, den Überblick darüber zu behalten, was jeder im Team geschaffen hat. Der Hauptzweck des Designsystems ist die Skalierbarkeit. Ob das die unmittelbare Skalierbarkeit oder die Skalierbarkeit ist, die in Zukunft kommen wird. Die Hauptaufgabe des Designsystems besteht jedoch darin Schuldenskala konsistent zu halten. Das bedeutet, dass jede Änderung , die Sie vornehmen, durch den Rest Ihres Designs widerspiegeln wird, kohärent sein wird und im Erscheinungsbild dessen bleiben wird, was bestimmt der Anfang eines Entwurfssystems. Jedes gute Designsystem besteht aus zwei Tanks, Regeln und Standards und Musterbibliotheken. Regeln und Standards stehen jedem Teamkollegen zur Verfügung, um ihnen bis zum T zu folgen , denn nur so wird das Designsystem gleichmäßig skaliert, dass es wachsen wird und es wird während seiner gesamten Lebensdauer konsistent. Weil die Lebensdauer des Designsystems die Lebensdauer des Unternehmens ist. Es ist nie fertig, es ist nie fertig. Solange das Unternehmen oder das Produkt existiert, kann das Designsystem mit diesem Produkt oder Unternehmen koexistieren, während die Musterbibliothek dagegen vorhanden ist und skaliert wird die ganze Zeit je nach oft Bedarf, Kubrick-Bedürfnissen und zukünftigen Bedürfnissen jedes einzelnen Projekts und jedes einzelnen Unternehmens. Das größte Missverständnis ist, dass Designsysteme nur für die großen Unternehmen sind , die sie nicht sind. Sie können ein Designsystem für kleinere Unternehmen verwenden, Sie können das Designsystem mit weniger Anzahl von Komponenten verwenden. Wir haben weniger Anzahl von Richtlinien und Standards. Und diese Richtlinien können am Anfang etwas grob sein. Aber während des Projekts, während das Unternehmen wächst, werden sich die Regeln und Standards verschärfen und das Designsystem wird endlich seine Form und seine Form annehmen, beabsichtigte Form von der beginnt und es wird einfach mit dem Unternehmen wachsen. Designsysteme können auch für Designer und Entwickler sein. Und das kann erreicht werden, wenn etwas verwendet wird, das Token genannt wird. Wir werden etwas später in diesem Kurs darüber sprechen. Aber im Grunde ist die Zusammenarbeit zwischen Designern und Entwicklern der Schlüssel für jedes gute Designsystem da draußen. Sobald die Änderung vorgenommen oder propagiert wurde, müssen sich Designer und Entwickler auf derselben Seite befinden, damit dieses Designsystem funktioniert und die Änderung sofort umgesetzt werden kann. Und es ist am einfachsten wie möglich. Das ist extrem wichtig für Startups, aber auch für etablierte Unternehmen da draußen, weil Sie das Design und die Funktionalität des Produkts nicht beeinträchtigen möchten , indem Sie einfach das Design ändern System zu sehr mit etwas, das nicht mit jedem im Team abgestimmt ist. Es gibt ein paar Dinge , die jedes gute Designsystem da draußen haben sollte. Und im nächsten Video werden wir genau darüber sprechen. Was ist die gute Struktur für jedes gute Designsystem da draußen? 3. Struktur eines Designsystems: Wie ich in der vorherigen Lektion erwähnt habe, Struktur eines guten Designsystems besteht die Struktur eines guten Designsystems wirklich aus zwei Dingen, Regeln und Standards und Musterbibliotheken. Rollen in Standards können in vielen verschiedenen Formen vorhanden sein. Zum Beispiel muss jede Regel sein, sie mit etwas übereinstimmen, das Sie innerhalb dieses Designsystems tun. Und sagen wir, dass die Regel überhaupt um Raster gehen kann, kann es um Typografie gehen. Regel kann sich um Farbe, Abstände, um horizontalen oder vertikalen Rhythmus handeln. Es kann um alles gehen. Und Regeln können natürlich gebrochen werden, aber sie können gleich zu Beginn eines Designsystems gebrochen werden , denn später, wenn das Projekt entwickelt wird, wenn das Projekt gewachsen ist, ist es viel Es ist schwierig, eine Regel zu brechen, als wenn Sie gerade erst mit dem Design beginnen. System. Standards können so etwas wie Unternehmenswerte sein. Sie können so etwas wie ein Ton sein, wie eine Stimmung des Projekts und außerhalb der Website des Kunden oder der Marke Ihres Kunden. Und das sollte bis ins Innere eines Designsystems verfolgt werden , da Sie nicht zu sehr abweichen wollen, insbesondere im Designsystem das wirklich Corporate ist. Sie möchten nicht, dass sie sich zu sehr ändern, weil die Crowd des Unternehmens wirklich an diese Art von Sühnen gewöhnt ist, diese Art von Designtüren, diesen Topographien, Hierarchien und vielem mehr. Der zweite Teil eines guten Designsystems sind Musterbibliotheken. Und Sie können diese Musterbibliotheken ändern während Sie am Haupttipp genau hier wachsen , sobald Sie mit dem Erstellen von Designsystem-Musterbibliotheken beginnen , müssen Sie keine Elemente erstellen, die sind im Moment nicht notwendig. Wenn Ihr Projekt beispielsweise kein Dashboard hat, erstellen Sie keine Elemente wie Diagramme und Diagramme, da diese derzeit einfach nicht relevant sind. Sie werden Ihr Designsystem nicht mit all diesen nutzlosen Komponenten füllen Ihr Designsystem nicht mit all diesen nutzlosen Komponenten denn denken Sie daran, dass der Designer da ist, Ihr Designteam, um diese Designs zu erstellen. Diese Entwürfe sollten jedoch für Entwickler zugänglich und leicht verständlich sein, die all diese Elemente für dieses spezielle Projekt entwickeln müssen . Erstellen Sie also einfach Elemente, die in diesem Moment benötigt werden , und lassen Sie das Designsystem im Laufe der Zeit skalieren, wie es das Projekt erfordert. Wie können Sie alle diese Komponenten in der Komponentenbibliothek aufteilen ? Grundsätzlich gibt es drei Hauptkategorien. Es gibt Atome, Moleküle und Organismen. Und Sie können natürlich Vorlagen hinzufügen. Sie können natürlich erweitert wie viele andere Variationen Sie möchten. Zum Beispiel Flussdiagramme oder Wireframes, High-Fidelity-Wireframes. Aber im Grunde gibt es Atome, Moleküle und Organismen jedes gute Designsystem und sie skalieren sich mit dem Projekt. Und Sie können immer weitere dieser Elemente hinzufügen, wie ich später im Projektausgleich sagte. Wie der Name schon sagt, sind Atome die kleinsten der Haufen und sie können etwas sein, das ziemlich einfach ist. Zum Beispiel Farbe oder Textgröße oder untere Breite oder ähnliches. Dann werden Moleküle aus Atomen geschaffen, zu Atomen gegangen, kombinieren sich. Grundsätzlich erstellen Sie ein Molekül, zum Beispiel ein Dropdown-Menü oder ähnliches. Und dann sind Organismen, sagen wir, eine Form, die aus verschiedenen Elementen, zum Beispiel Eingabefeldern und Schaltflächen, erstellt wird . Und dann bekommst du eine Form, die ein Organismus ist, der für verschiedene und verschiedene Atome und Moleküle geschaffen wurde verschiedene Atome und , zu einem einzigen Organismus kombiniert. Dies nennt man Atomstruktur und es sind seit Jahrzehnten wirklich unsere Industriestandards. Sie können Ihr Designsystem jedoch nach Ihren Wünschen erstellen. Aber wenn Sie diesen atomaren Ansatz verwenden, wird es für Sie viel einfacher sein, Ihre Elemente zu erstellen und sie in Zukunft zu verkleinern. Der Hauptpunkt jedes Designsystems ist die Konsistenz. Man muss also ständig über Konsistenz nachdenken. Wo auch immer Sie nur eine einfache Schaltfläche erstellen, Sie müssen darüber nachdenken, wie diese Schaltfläche durch verschiedene Bildschirmgrößen skaliert werden soll . Wird es die Breite ändern, wird die Höhe ändern. Wird es die Farbe ändern wird mit abgerundeten Ecken, ohne abgerundete Ecken sein. Sie müssen also über all diese Elemente nachdenken während Sie Ihr Designsystem aufbauen, Sie müssen über Regeln und Standards nachdenken, die wir zu Beginn dieser Lektion erwähnt haben. Und Sie müssen auch über andere Elemente in Ihrer Pattern-Bibliothek nachdenken . Wie werden sie miteinander übereinstimmen? Werden sie auf der Seite gut aussehen? Wenn Sie also ein neues Element in der Pattern-Bibliothek erstellen , müssen Sie es auf eine Seite legen, Sie müssen es sofort testen und prüfen, ob es mit dem Rest Ihrer Pattern-Bibliothek funktioniert. Und wenn ja, kannst du es behalten und wenn nicht, kannst du es immer verschrotten. Das ist der springende Punkt unseres Designsystems. Es wird sich immer weiterentwickeln, es wird sich immer ändern und es wird nie so aussehen wie gestern. In der nächsten Lektion werde ich ein großartiges Beispiel für Designsysteme von den Branchenführern und Branchenstandards zeigen ein großartiges Beispiel für Designsysteme . Ich zeige dir, worauf du achten musst. Und später in dieser Klasse zeige ich Ihnen, wie Sie Ihr eigenes Designsystem in Adobe XD erstellen Ihr eigenes Designsystem in Adobe XD und was Sie mit der Erstellung von Designsystemen in Adobe XD erreichen können . Wir sehen uns dort. 4. Beispiele für Designsysteme: Der beste Weg, um ein eigenes Designsystem zu entwickeln, besteht darin, von Industriestandards und Industriegiganten zu lernen. Und dazu zeige ich Ihnen nur ein paar Beispiele und Sie finden diese Beispiele im beigefügten PDF. Sie können einfach auf diese Links klicken, um all diese Beispiele zuzugreifen, die ich Ihnen zeigen werde, und einfach von ihnen lernen , was sie erstellen. Aber das Wichtigste, bevor wir anfangen, fühlen Sie sich nicht verpflichtet, jede einzelne Komponente zu nehmen, die diese Unternehmen erstellen denn wie ich bereits in den vorherigen Lektionen erwähnt habe , diese Komponenten gibt es aus einem bestimmten Grund. Wenn Sie also keine dieser Komponenten verwenden , erstellen Sie sie nicht. Wenn Sie anfangen, ein Designsystem zu erstellen, ist es wirklich wichtig, klein anzufangen. Wenn sich Ihr Projekt weiterentwickelt, fügen Sie all diese verschiedenen Komponenten hinzu. Denn was ist der Sinn, Komponenten zu erstellen wenn sie im Moment nicht notwendig sind, , wenn sie im Moment nicht notwendig sind, werden sie Sie nur verlangsamen und Sie werden Ihre Zeit für dieses bestimmte Projekt nicht optimieren , wenn erstellen Sie Komponenten , die für Ihr Projekt nicht notwendig sind. Lassen Sie mich Ihnen all diese Beispiele zeigen. erste Beispiel, das wir haben, ist Googles Materialdesign. Natürlich wird dieses Materialdesign in ihrem Android-Betriebssystem verwendet. Apple hat seine eigenen, es heißt Human Interface-Richtlinien, und Sie können es auch finden. Ich werde all diese Designsysteme , die erwähnt werden, mit wenigen weiteren Designsystemen verknüpfen diese Designsysteme , die erwähnt werden, mit , die in diesem Video innerhalb des PDF-Dokuments nicht erwähnt werden . Öffnen Sie erneut die PDF-Datei, klicken Sie auf diese Links, um auf sich selbst zuzugreifen und sie zu durchsuchen. Was wir hier haben, ist die Einführung Material, das Sie zum Zeitpunkt der Erstellung dieses Videos haben. Dies ist der brandneue und der Industriestandard in der Android-Welt. Verwenden Sie also im Grunde auch weiterhin Materialdesign. Sie können Richtlinien, Komponenten, Symbole, Komponenten für das Web, Komponenten für das Web, Richtlinien zur Barrierefreiheit und Entwickler-Tutorials anzeigen. Sie können mehr in ihrem Blog erfahren. Und lasst uns diese Elemente schnell durchgehen und ich werde nicht zu viele Details eingehen , da die meisten dieser Designsysteme im Grunde gleich sind. Sie verwenden die gleichen Standards, sie verwenden dieselben Richtlinien, sehen aber einfach anders aus. Weil es zum Beispiel mit diesem Materialdesignsystem für Android ist, also für mobile Geräte. Während andere Designsysteme es gibt, gibt es beispielsweise Websites oder für Webprojekte oder für Dashboards oder Elemente wie diese. Natürlich werden sich all diese Elemente zwischen mobilen und Desktop-Designsystemen unterscheiden. Aber der Schlüssel ist derselbe, Standards sind die gleichen. Nehmen wir an, Sie haben diese Richtlinien, Prinzipien, Stile und Best Practices. Was bedeutet das für jedes einzelne Element, wann ist der beste Zeitpunkt, dieses Element zu verwenden? In diesem Fall werden Sie beispielsweise bestimmte Datumsauswahl nicht verwenden . In bestimmten Beispielen verwenden Sie in diesen Beispielen verschiedene Arten von Datumsauswahl. Deshalb gibt es diese Prinzipien und Best Practices. Wenn Sie sich jemals ein Branding-Projekt oder eine Branding-Präsentation einer Marke angesehen haben, können Sie diese auf Behance ansehen Zum Beispiel können Sie YouTube-Videos nach diesen suchen. Grundsätzlich gibt es bewährte Methoden. Und das ist der Hauptgrund, warum Sie beispielsweise das Logo in dieser Orientierung anstelle dieser Ausrichtung verwenden . Warum benutzt man hier weiße Bilder und nicht hier. Deshalb gibt es diese Best Practices. Um diese Best Practices und diese Prinzipien und Stile zu erreichen, müssen Sie klein anfangen. Du musst von Anfang an anfangen. Sie müssen diese verschiedenen Schaltflächen erstellen und experimentieren. Sehen Sie, was funktioniert, was nicht, was funktioniert? Stellen Sie sicher, dass Sie von dort aus upgraden , stellen Sie sicher, dass Sie neue Stile und neue Komponenten aus diesen Elementen hinzufügen neue Komponenten aus diesen Elementen und sehen Sie, was funktioniert und welche Sticks, was nicht, werfen Sie es weg und mach einfach weiter. Das bringt mich gut zu Komponenten, Designanleitungen und Entwicklerdokumentation für interaktive UI-Bausteine. Und du kannst sie genau hier sehen. Dies sind Schaltflächen, Bilder, Formulare, Eingabefelder, Symbole und vieles mehr. Diese Komponenten sind da , um es Ihnen leicht zu machen. Und das zeige ich dir in einer späteren Lektion in diesem Kurs. Sobald wir tatsächlich zu Adobe XD gelangen, sind Komponenten da, um die Dinge erheblich zu beschleunigen, da Komponenten in Ihrem gesamten Designsystem während Ihres gesamten Projekts verwendet werden können Komponenten in Ihrem gesamten Designsystem während Ihres gesamten Projekts verwendet werden können. Und sie können von verschiedenen Designern in Ihrem Team verwendet werden verschiedenen Designern in Ihrem Team , da die Kernbearbeitungsfunktion von Adobe XD verschiedene Teammitglieder auf verschiedenen Seiten des Planeten sein können . Und sie können alle das gleiche Designsystem verwenden und dieselben Komponenten aus diesem bestimmten Designsystem verwenden. Natürlich können Sie immer Komponenten wechseln. Sie können sie immer aktualisieren. Sie können verschiedene Komponenten, Stile und vieles mehr hinzufügen . Aber das ist der Schlüssel, Komponenten zu erstellen, die in Ihrem gesamten Designsystem wiederverwendbar sind . Das werden wir etwas später erklären, aber jetzt machen wir weiter. Icons sind wichtige Ressource für jedes gute Designsystem da draußen. Da dies Google ist, haben sie natürlich ihre eigenen Materialsymbole. Wenn Sie mit Ihrem Designsystem beginnen, werden Sie wahrscheinlich einige andere Symbole in Ihrem Designsystem verwenden . Aber während sich dieses Designsystem weiterentwickelt, finden Sie eine Stimme für eine Marke. Wenn Sie die Richtung und Richtlinien für die Marke finden, werden Sie diese Icons ebenfalls weiterentwickeln. Wenn Sie kein Experte in der Icon-Erstellung sind, kann es Ihr Kunde vielleicht tun. Stellen Sie jemanden ein, der es ist, und dann können Sie diese Icons in diesem Designsystem verwenden. Dann haben wir Komponenten für das Web. Implementiert und passt daher Materialweb-Apps mit unserem Code und unserer Dokumentation an. Natürlich ist dies die Skalierung von mobilen Geräten bis ins Internet. Schließlich haben wir Richtlinien zur Barrierefreiheit , die äußerst wichtig sind. haben gelernt, wie Sie Benutzern mit unterschiedlichen Fähigkeiten helfen können, Ihre Benutzeroberfläche zu navigieren , zu verstehen und zu nutzen da nicht jeder die gleiche Vision hat. Manche Menschen haben Sehbehinderung, zum Beispiel haben manche Menschen Schwierigkeiten beim Lesen. Sie müssen an all diese Leute denken , denn es gibt viele Ihrer Benutzer, die leider einige dieser Probleme haben werden , die ständig darüber nachdenken müssen, wenn Sie erstellen Ihr Designsystem. Schließlich haben wir Entwickler-Tutorials, implementieren Material mit Java, Kotlin, Objective-C, Swift und wo immer Vater gebissen hat, je nach Designsystem, je nach Entwickler, Sie werde diese oder jene Technologie benutzen. Im Grunde gibt es hier also keine richtige oder falsche Antwort, Sie müssen mit Ihren Entwicklern sprechen. Sie müssen erneut mit Ihrem Kunden sprechen, je nachdem, was Ihr Kunde verwenden wird. In diesem Fall ist es für Material die Mehrheit für mobile Geräte, für Android. Also werden sie natürlich verschiedene Technologien verwenden , wenn Sie zum Beispiel verwenden PHP oder ähnliches für WordPress oder was auch immer verwenden. Diese Technologien werden also unterschiedlich sein und je nachdem, welche Technologen Entwickler verwenden werden, werden Sie Ihr Designsystem für diese Entwicklungszwecke bilden . Im Grunde können Sie also direkt hier springen, Sie können auf das Design klicken, das Sie sehen können. Also Fundament, Überblick, Umgebungslayout, Navigation, Farbe, Typografie, Ton, Ikonographie, Form, Bewegung. Wie gesagt, und ich werde das während dieser Klasse immer wieder sagen. Lassen Sie sich von all diesen verschiedenen Elementen nicht einschüchtern , denn dies ist erneut Google. Sie hatten buchstäblich Milliarden von Benutzern ihren Geräten und im gesamten Unternehmen. Natürlich werden sie all diese verschiedenen Elemente verwenden, von denen sie wahrscheinlich nie gehört, geschweige denn benutzen werden. Lass dich also nicht einschüchtern. Zu viel Breite Schulden. Dann haben wir Komponenten. Dies sind Schaltflächen, Karten-Checkboxen, Chips, Datentabellen und so weiter. Dann haben wir uns für Android entwickelt, für Webflutter iOS. Wir haben Ressourcen und Sie können alles über diese Ressourcen lesen. So Tools zur Anpassung von Hypertyp, Skalierung, Ersteller oder Formen und so weiter. Sie haben den Blog. Schauen Sie es sich also noch einmal an, ich glaube die Links zu allem, was ich in diesem Video erwähnt habe , und mehr in der PDF-Datei. Klicken Sie auf diese Links, um darauf zuzugreifen. Dann haben wir ein Atlassian-Designsystem, End-to-End-Designsprache, um einfache, intuitive und schöne Erlebnisse zu schaffen . Sie werden also wieder feststellen, dass wir Komponenten haben, wir haben Muster. Also Marke, sie haben Mission, sie haben Persönlichkeit, und sie haben versprochen, was ich im vorherigen Video erwähnt habe. Sie werden nicht dieselben zwei Personen sprechen , die dies in ihren Unterhosen auf ihrem Mobilgerät verwenden. Und zwei CEOs großer Unternehmen, die sich zum Beispiel in einem teuren Büro befinden. Der Ton ist also einfach nicht derselbe. Sie müssen also mit Ihrem Benutzer in der Sprache sprechen , die er verstehen wird. Dann haben wir Stiftungen. Also Farbe, Ikonographie, Typografie, je nachdem wer Ihr Benutzer ist, werden Sie verschiedene Farben, verschiedene Symbole und verschiedene Typen, Inhalte, Sprache und Grammatik, Vokabular verwenden Symbole und verschiedene Typen, Inhalte, , Schreibstil. Also sprechen wir noch einmal mit dem Benutzer. Wer ist dein Nutzer? Sie müssen mit Ihrem Benutzer in Schuldensprache sprechen , die er verstehen wird. Sie können dies erkunden und hier haben wir Markenfundamente. Klicken wir auf den Inhalt, damit Sie inklusive Sprache, Grammatik und Vokabular sehen können, Sie können direkt hier klicken. Komponenten. Wir haben unseren Begriff, äußere Gruppe, unser Abzeichen, und Sie werden sofort feststellen, dass dies ganz anders aussieht als das, weil es zwei völlig verschiedene Dinge gibt . Wenn ich also zum Beispiel hier auf das Banner klicke , kannst du sehen, wie dieses Banner aussieht. Und sofort können wir den Code sehen, wir können den Fehler sehen, wir können die Ankündigung sehen. Wie sieht es aus? Wie skaliert es, wie schrumpft oder wächst es? Und Sie können die Verwendung sehen. Wie funktioniert es? Also Anatomie, wir haben das Symbol, wir haben die Botschaft und wir haben die Aktionen, die in diesem Fall optional sind. Stöbern Sie also all diesen Kategorien, um mehr darüber zu erfahren , wie sie verwendet werden und wie sie hier integriert sind. Als nächstes haben wir Shopify polarisiertes Designsystem Salz. Lasst uns zuerst mit Stiftungen gehen. Erfahrene Werte, was ich erwähnte. Ihre Herangehensweise, was zu beachten ist. Sie sind ermächtigend, hergestellt, effizient, vertrauenswürdig und vertraut. sind also alle Werte, die sie mit ihrer Marke anstreben, also ihrem Designsystem. Dann haben wir den Inhalt. Also Stimme und Ton, Shopify ist Stimmspiegelung dessen, wer sie sind. Wer sind sie also einfach das Unternehmen, das von echten Menschen aufgebaut wurde, die dieses Geschäft verstehen und sich darum kümmern , anderen zum Erfolg zu verhelfen. Das sind also ihre Werte. Wir haben das Design. Gestalten Sie wieder Farben, Prinzipien. Kommunikation ist der Schlüssel. Farben haben eine Bedeutung. Farben folgen den Richtlinien für Barrierefreiheit damit Sie Farbrollen sehen können. So Oberflächen im Grunde Elemente, die hinter anderen Elementen auf der Oberfläche liegen. Dies sind die Elemente wie Texte zum Beispiel primär, zum Beispiel für die Elemente, sagen wir Button sekundär für die Elemente, die, sagen wir Häkchen oder Symbole oder ähnliches sind sagen wir Häkchen oder Symbole , interaktiv. Vielleicht findet eine Animation statt. All diese Farben sind also aus einem bestimmten Grund vorhanden. Wieder einmal komme ich jedes Mal auf den Punkt zurück , den ich zuvor angesprochen habe. Und erstelle keine Elemente, die in deinem Designsystem nicht notwendig sind . So können Sie Farbvarianz sehen und Sie können diese Farben genau hier implementiert sehen. Ich ermutige Sie noch einmal, sich all diese Elemente anzusehen und mehr über sie zu erfahren. Sie können Illustrationen sehen. Sie verwenden diese Illustrationen, aber warum, warum verwenden sie diese spezielle Illustration in diesem speziellen Stil, indem sie diese speziellen Farben verwenden. So können Sie hier auf dieser Seite mehr über all das erfahren . Als nächstes haben wir ein Carbon-Design-System, das von unserem IBM , einem riesigen Unternehmen, geschaffen wird. Ich liebe dieses Designsystem, weil du direkt hier klicken kannst und auf die Design-Kits klicken kannst und du kannst die Skizzenversion erhalten, aber du kannst auch die Adobe XD-Version erhalten, die irgendwo in der Nähe ist hier. Und du kannst dich in XD öffnen, hier ist es. Aber es wurde von der Kohlenstoffgemeinschaft gebaut. Es ist also nicht genau genau richtig, da es zunächst nicht für Adobe XD und nicht für Skizze erstellt wurde . Dann wechselten sie zu Figma, unterstützen aber auch Adobe XD und Azure. So können Sie genau dort zu den Kindern kommen, es öffnen und Sie können das Gleiche auch für Shopify, Designsystem, Polaris tun. Und ich bin mir ziemlich sicher, dass du auch Atlassian kriegen kannst. Sie können es öffnen und mehr darüber erfahren, wie es aussieht. Aber zurück zu Carbon im Grunde genommen Open-Source- oder Designsystem für Produkte und digitale Erlebnisse. Designsprache ist ihr Grundsystem, das aus Arbeitscode, Designtools und -ressourcen, Richtlinien für die Personalschnittstelle und eine lebendige Gemeinschaft von Mitwirkenden besteht. Also los geht's. Viele verschiedene Designer tragen zu diesem Designsystem bei. Deshalb können Sie diese Dateien herunterladen und kostenlos erkunden. Also fang an zu entwerfen. Sie können all diese verschiedenen Elemente sehen, was sie verwenden, aber ich mache mir mehr Sorgen um Richtlinien. Das fangen sie mit der Startaufstellung an. Grid ist das Herzstück jedes guten Designsystems da draußen. Wenn ich dieses Video einfach so abspiele , siehst du zwei x Raster und wie sieht es aus? Grundsätzlich besteht es aus einer Box und diese Box kann sich auf andere Boxen erweitern, die größer oder kleiner sein können. Aber im Grunde liegt es in den Schritten von zwei. Alles schnappt sich gut an diese Kisten. Grundsätzlich sehen Sie den Abstand genau hier. Zwei Felder trennen den Text, die Bilder, das Layout und ähnliches. Stellen Sie also sicher, dass Sie alles erforschen. Und Sie können sehen, wie der vertikale Rhythmus Brooks genau hier und wie die Waage genau hier funktioniert, ich ermutige Sie wirklich, es näher zu erforschen. Sie können Symbole, Piktogramme, Bewegung sehen , was wirklich wichtig ist. Wie haben sie die Animation benutzt? Wenn ich also direkt hier klicke, um dieses Video abzuspielen, kannst du sehen, wie sie Bewegung innerhalb ihres Designsystems verwenden , wie die Animation funktioniert, wie der Übergang funktioniert wie die Dinge funktionieren. Zum Beispiel ist die Leichtigkeit in die Animation außerhalb der Animation und vieles mehr. Also erforsche es, lade es herunter und überprüfe es selbst. Endlich haben wir Salesforce. Du kannst anfangen. Sie können sehen, welche Plattformen Ströme oder Blitz-visuelle Wälder sind , Heroku-, Android- und iOS-Designrichtlinien. Also Überblick, Builder, Diagrammdateneingabe, Anzeige von Daten und so viel mehr Zugänglichkeit, was wir über Komponenten-Blueprints gesprochen haben. Also Überblick, sagen wir Akkordeon, ich möchte das entsprechend anschauen, wie sieht es aus? Das ist also eine großartige Sache. Ich kann hier klicken und verstehen was die Absicht dahinter war. In diesem speziellen Fall können Sie also sehen, dass dieses Akkordeon geschlossen ist, aber wenn ich klicke, wird dieser gesamte Abschnitt nach unten erweitert. Wie viel wird sich nach unten ausdehnen? Wenn Sie das beispielsweise zum Pixelraster verwenden, das Sie im Carbon-Designsystem von IBM erwähnt haben, wird es um die Schritten von zwei erweitert. Und Sie können diese Regeln, Standards und Richtlinien in Ihrem gesamten Designsystem verwenden , unabhängig davon, was Sie erstellen. Sie können also noch einmal auf die Warnung klicken, zum Beispiel können Sie auf den Avatar oder die Badges klicken. Klicken wir auf den Einkaufswagen und sehen, wie ihre Karten aussehen. Das ist also das Auto, das sind die neuen, kleineren Karten, kürzere Karten, breitere Karten. So können Sie sehen, wie all diese Elemente implementiert sind wie sie auf der Seite festgelegt sind. Und wenn ich hier klicke, haben wir Aktion 123, wir haben den Tooltip dieser verschiedenen Elemente. Schließlich haben wir dies, nämlich Dienstprogramme, Rand, Textgrößenfunktion, vertikale Liste. Und schließlich haben wir Token entworfen. Design-Token sind erstaunlich. Denken Sie über Designsysteme nach und wir werden in einer der späteren Lektionen darüber sprechen , weil sie wirklich im Mittelpunkt jedes guten Designsystems stehen . Und sie sind wirklich die Brücke zwischen Designern und Entwicklern , um das Designsystem kennenzulernen und es größtenteils zu nutzen und es in Zukunft weiter zu nutzen. Und deshalb verwenden wir Design-Token in unseren Designsystemen. Und das werde ich auch in Adobe XD in der späteren Lektion zeigen . Aber im Moment schauen Sie sich diese Links an, wie ich bereits erwähnt habe, sie werden in der PDF-Mischung enthalten sein, um so viel wie möglich zu erforschen und so viel wie möglich zu lernen. Weil Sie sehen können, dass das Designsystem nicht etwas ist , das Sie in ein oder zwei Tagen lernen werden . Es dauert wirklich Monate und Jahre bis sich ein gutes Designsystem entwickelt. Aber lassen Sie sich nicht zu, dass das Material, das Sie von der Erstellung Ihres eigenen Designsystems schaffen, da Ihres eigenen Designsystems schaffen, da die Vorteile beim Entwerfen enorm sind , während Sie bauen und entwickeln, Ihr eigenes erweitern Entwurfssystem. In der nächsten Lektion werden wir über Adobe XD sprechen. Was können Sie in Adobe XD in Bezug auf Designsysteme erstellen und wie können Sie Ihr Designsystem in Adobe XD skalieren ? Wir sehen uns dort. 5. Erstellen eines Designsystems in Adobe Xd: Adobe XD ist ein großartiges Tool, denn in einem einzigen Tool können Sie Prototypen entwerfen und mit Ihren Kunden, Entwicklern und Stakeholdern teilen . Dies eignet sich hervorragend zum Erstellen von Designsystemen, und darüber werden wir in dieser Lektion des Kurses sprechen , wie Sie Ihre eigenen Designsysteme in Adobe XD erstellen können. Und später werden wir über die Skalierung dieser Designsysteme in Adobe XD sprechen . Lasst uns anfangen. Hier bin ich in Adobe XD und eröffne die 1280 by 800 Art Board. Dies ist nur eine grundlegende Art Board, die Sie auf dem Startbildschirm direkt hier auf einem D Adobe XD finden . Wie erstelle ich dein Designsystem? Nun, du musst klein anfangen. Fangen wir mit den Rastern an. Wenn ich mich also verstecke, damit Sie es sehen können , anstatt dieses Layout zu feuern, werde ich es auf Quadrat n umstellen . Darüber haben wir zuvor für IBMs Designersystem gesprochen , das sie verwenden diese Iteration von zwei. Es wird also wirklich kleine Quadrate sein, aber ich werde es benutzen. Zahl von acht, zum Beispiel so etwas wie Schulden. Und dann zünde ich meinen Taschenrechner an und bringe ihn genau hierher. Also haben wir 1284, die Breite. Also 1280 geteilt durch acht, es sind 160. Was das bedeutet ist, wenn ich hier ganz zoome, kann man sehen, dass diese Quadrate acht Pixel mal acht Pixel Pixel , da dies die quadratische Größe ist. Wenn Sie sie auf zwei senken, können Sie sehen, dass sie in der Größe heruntergegangen sind. Ich werde sie auf acht erhöhen, da acht Pixel eine Art Industriestandard oder ein 8-Gitter sind, wenn Sie möchten. Und genau das werden wir für unser imaginäres Designsystem hier in Adobe XD verwenden unser imaginäres Designsystem hier , um loszulegen. Was wir erstellen können, ist etwas Kleines, wie zum Beispiel eine Schaltfläche. Beginnen wir also zuerst mit der Topographie. Also kann ich vielleicht etwas sagen wie hier klicken. Verwenden wir vielleicht etwas wie Open Sans, weil es sich um kostenlose Google-Schriftart handelt und Sie sie online finden können. Und ich werde es ungefähr hier positionieren. Gehen wir mit 24, denn 24 ist natürlich durch acht teilbar. Und dann erstelle ich meinen Button. Also werde ich etwas Abstand schaffen. Ich klicke mit der rechten Maustaste schicke es zurück , damit wir unsere Texte sehen können. Und jetzt kann ich anfangen herumzuspielen und mich an meinem Raster zu positionieren. Wenn ich also meine Alt-Taste halte, kannst du sehen, dass ich 16 von dieser Seite bin, 16 von dieser Seite um 78 auf dieser Seite, es ist gut, aber sieben ist nicht so viel. Was Sie hier tun können, ist nicht viel, weil Adobe XD-Texttools nicht wirklich älter sind wie zum Beispiel Adobe Illustrator , wie zum Beispiel Adobe Illustrator oder Adobe Photoshop. Aber in diesem Fall wird es ganz gut funktionieren weil wir gerade hier unser Startup-Projekt erstellen . Das erste, was Sie beachten sollten, ist es Ihr Typ zu groß? Wenn ja, können Sie den Abstand zum Beispiel auf jeder Seite auf 16 erhöhen den Abstand zum Beispiel auf jeder Seite auf 16 , aber Sie können immer noch 1515 sehen. Wenn wir also so anfangen, wird es immer noch 15 sein, weil Adobe XD die Texte behandelt. Was können Sie also noch einmal tun, wenn Sie mit der Marke arbeiten, die diese Sprache erfordert, worüber wir zuvor gesprochen haben, dann werden Sie diesen Eckenradius auf etwas wie acht zum Beispiel. Und jetzt haben wir die abgerundeten Ecken. So ist 64 die Größe unseres Buttons durch acht teilbar, natürlich 144 durch acht teilbar. Also können wir jetzt fortfahren. Als nächstes kommt die Benennungskonvention unter dieser Schaltfläche ist ziemlich groß. Salz zum Beispiel, du wirst es btn nennen. Lass mich dir noch eine Chance geben. Btn Strich, BG, Button, Hintergrund, Strich groß. Und Sie müssen dies in Ihrem gesamten Designsystem für alle Ihre Elemente tun Ihrem gesamten Designsystem für alle , denn auf diese Weise werden Sie es wissen und Designer aus Ihrem Team wissen, werden Entwickler wissen, ist dies für unsere Website, Tablet, mobile Uhr oder welche Größe sie hat. Als nächstes geht es darum, sie zu gruppieren. also zu beachten ist also zu beachten, woher dieser Text kommt. In diesem Fall geht es nach links. Wenn ich also genau hier schwebe, können wir sehen, dass es links ausgerichtet ist und es raus ist. Es wird also automatisch die Schaltfläche skalieren und nach rechts erweitert. Oder Sie können es reparieren, wenn Sie möchten, Sie können auf feste Websites klicken und die Schaltfläche wird nicht erweitert. Abhängig vom Zweck der Schaltflächen, sagen wir BTN, große Variablen. So können wir zum Beispiel VAR verwenden, so etwas, oder nennen es einfach btn large. Und wenn wir wollen, dass es repariert wird, können wir es btn large fix nennen. Behalten Sie also noch einmal den Überblick über den großen, großen BTN Hintergrund. Wenn Sie zum Beispiel fix verwenden, wird es für den Button-Hintergrund sein, btn BG large fix oder BTN BG. Größer behoben, wie Sie es nennen möchten. Namenskonvention ist also wirklich entscheidend, denn sobald Sie anfangen, immer mehr dieser Elemente hinzuzufügen , wird es für Sie viel komplizierter sein , den Überblick darüber zu behalten, was Sie als Nächstes erstellt haben weil wir möchten, dass dieser Button erweitert wird, aktiviere ich das Padding. Wenn also das nächste Mal jemand sowas sagt, sieht man, dass sich der Button erweitern wird. Aber wegen des schrittweisen Elements, das wir erstellt haben, können Sie, wenn ich direkt hier klicke, 16161516 sehen, es wird sich erweitern, aber Sie können es immer außer Kraft setzen. Wenn ich also direkt hier klicke und wenn ich das hier noch weiter erweitere, wenn ich hier klicke und auf 20 ausgedehnt habe, wird es vielleicht schnappen, um viel besser zu migrieren. Sie können diese Änderungen also immer vornehmen , um sicherzustellen, dass wir 3664 sind , so dass es in unserem Fall durch acht teilbar ist Wenn Sie über Raster nachdenken und wie Sie Raster erstellen, können Sie natürlich Verwenden Sie diese acht Pixelraster für Ihre Raster solide, z. B. 12 Spalten für diese große Größe, acht Spalten für die Tablet-Größe, vier Spalten für die mobile Größe. Und abhängig von den von Ihnen gewählten Größen wählen Sie die Anzahl der Spalten und wie groß diese Spalten sind. Natürlich fangen wir gerade erst an. Du kannst sehen, wie das aussieht. Und bevor wir weitermachen, klicke ich direkt hier, springe direkt zu meinen Bibliotheken und füge Farbe hinzu , da dies die Farbe meines Textes ist. In diesem Fall füge ich einen Charakterstil hinzu. Also wie kannst du das nennen? Und das ist wirklich wichtig , denn jetzt kommen wir in das Gebiet der Design-Tokens. Und ich werde Design-Token in der nächsten Lektion dieses Kurses ein bisschen mehr erklären . Aber im Grunde nenne ich das zum Beispiel h vier, denn das ist die Größe dieses Textes. Hier für die Farbe werde ich sie in etwas umbenennen wie, ich weiß nicht, normales Grau oder was auch immer, normales Strich und Grau, so etwas. Jeder aus meinem Team weiß also, dass, okay, das ist H für seine offenen Cent 24. Und wenn sie schweben, sehen Sie Gegensätze, 24 Zeichen Abstand, die Größe 24 Punkte. Sie werden es also sofort sagen können . Als nächstes kommt der Knopf mit der Grenze oder ohne Grenze. Wie du das behandeln wirst, wie sich all diese Elemente stapeln werden, hat es nicht den Bindestrich oder nicht. Sie müssen also über all diese Dinge nachdenken, aber stellen Sie sicher, dass Sie mehrere Kopien dieses Musters erstellen. Sehen Sie, was funktioniert, sehen Sie, was nicht endet, wenn Sie dieser Schaltfläche Elemente hinzufügen Beginnen Sie mit den Komponenten. Steuern oder Befehl K auf Ihrer Tastatur, um eine Komponente zu erstellen. Dies ist der Standardstatus. Die erste Komponente, die geschaffen werden muss , ist vielleicht der Horrorzustand. Also nenne ich es Hover. Und wenn jemand das nächste Mal auf diesem Knopf schwebt, ändert es vielleicht die Farbe. Anstelle von Weiß. Vielleicht können wir es in so etwas Leichtes umwandeln. Klicken Sie direkt hier und drücken Sie Control Enter, um eine Vorschau zu sehen, was wir erstellen. Und wenn ich jetzt auf diesen Button fahr, kannst du sehen, dass er den Hover-Status hat. So einfach ist es also, den Anfang eines Designsystems zu erstellen. Und jetzt zeige ich Ihnen, was ich den letzten zwei Jahren geschaffen habe. Und ich brauchte sechs Monate, um in Adobe XD zu erstellen. Es heißt Inception Designsystem. Und hier ist es. Dies ist die Masterdatei für das Inception Design System. Dies brauchte sechs Monate ununterbrochener Arbeit. Und Sie können dieses Designsystem erhalten, wenn Sie möchten. Ich lasse den Link im PDF. Dies ist die Seite für inception design system.co. Und noch einmal werde ich den Link im PDF belassen. Sie können direkt hier klicken und zu meinem YouTube-Kanal gehen , um sich den kostenlosen Kurs anzusehen. Darin. Ich gehe jedes einzelne Element durch. Ich denke, es ist etwa eine Stunde lang oder so ähnlich. Es ist auf meinem YouTube-Kanal und du kannst es dir dort ansehen, um mehr zu erfahren, wie es funktioniert und was enthalten ist. Sie können sehen, dass Sie schneller entwerfen können. Du kannst ein paar Bewertungen lesen. Es ist für die Skalierung mit acht Pixelrastern erstellt. Es hat eine molekulare Struktur, wie wir bereits erwähnt haben. Es sind lokale und Clouds , die sowohl lokal als auch in der Cloud mit Ihren Teamkollegen arbeiten können . Es hat Flussdiagramme, Vorlage und Lottie-Symbole, bei denen es sich um animierte Icons handelt. Es wird mit den neuesten Funktionen wie Stacks Komponentenstatus in Document Assets erstellt . Lassen Sie mich also zurück zu Adobe XD und zeigen Ihnen zuerst die ersten Dinge, was in diesem Designsystem enthalten ist. Hier haben wir einige grundlegende Informationen und Richtlinien über das Designsystem selbst, wie es verwendet wird und wo es verwendet werden soll. Dann haben wir hier die Raster, wir haben drei verschiedene Bildschirmgrößen. Wir haben große, mittlere und kleine oder Desktop, Tablet und Handy. Und je nach Größe haben wir verschiedene Farben. Spalten-Nummer. Für die Großen haben wir 12 Spalten. Für das Medium haben wir acht Spalten, und für die kleinen haben wir vier Spalten. Hier haben wir die Anleitungen und Sie können diese Anleitungen einfach kopieren und in Ihre Kunsttafel einfügen. Dann haben wir Topographie und Sie können sehen, dass ich die Topographie zwei Überschriften geteilt habe und die Körperüberschriften in diesen verschiedenen Größen und Körper in diesen verschiedenen Größen kommen in diesen verschiedenen Größen und . Dann haben wir die Farben, Hauptfarben und unterstützende Farben. Du wirst feststellen, dass ich hier keine Schatten habe. Und das ist der Zweck denn wenn Sie dieses Designsystem erhalten, können Sie Ihre eigenen Schatten hinzufügen. Sie werden mit dem Designsystem selbst skaliert. Dann haben wir das Logo, das Sie Ihr Kundenlogo ersetzen können. Wir haben diese verschiedenen Logos, die Sie in Ihren Projekten verwenden können. Wir haben Icons und sofort werden Sie diese acht Pixelraster bemerken. Also quadratische Größe. Und wenn ich es hier verstecke, nur damit Sie das Designsystem selbst ein bisschen besser sehen können . Dann haben wir hier Icons, und das sind statische Icons. Und natürlich verfügt das Designsystem auch mit animierten Icons, die nativ innerhalb von Adobe XD funktionieren, was für das Prototyping fantastisch ist. Wenn ich dann ein bisschen zoome, haben wir hier Atome und Moleküle, und Sie können sie genau hier finden. Wenn Sie dies öffnen, können Sie sehen, dass wir Raster, Symbole, Avatare, Dropdowns, Bilder, Modelle, Paginierung, Bildungslinie nach Suche und vieles mehr haben. All diese Elemente hier sind also Atome und Moleküle. Und wenn ich ein bisschen näher zoome, kannst du sehen. Wir haben also Schaltflächen, wir haben Texteingaben, Selektoren, Textarea, Kontrollkästchen, Radio-Datumsauswahl, Selektoren, Inhaltsschalter, Tabs, Fortschrittsindikatoren, Zahleneingaben, Akkordeons, Bilder, die sind äußerst wichtig. Wir haben Blobs, Drop-downs, wir haben verschiedene Geräte, Benachrichtigungen, Paginierung solide oder ist Modell und so viel dichter. Auf der linken Seite haben wir Flussdiagramme, die sich genau hier befinden. Wenn ich also hinzoome, haben wir Desktop-Flussdiagramme, wir haben mobile Flussdiagramme, dann haben wir Aufgabenflusselemente. Offensichtlich haben wir für Aufgabenflüsse Flussdiagrammelemente, die verwendet werden , um diese verschiedenen Flussdiagramme zu verbinden. Und was wir dann genau hier sind, haben wir diese Papierformate. Hier haben wir also A4-Größe Hoch-, Querformat, US-Brief Hoch- und Querformat. Und jeder einzelne davon, wenn ich hier zum Ebenenbedienfeld wechsle und hineinklicke, hat es verschiedene Elemente, mit denen Sie mit diesem Designsystem schneller erstellen können. Wenn ich es also auswähle, kannst du sehen, was wir hier haben, ist Punktraster. Wenn ich also dieses Punktraster einschalte, kannst du sehen, wie es aussieht. Also habe ich hier sogar ein Papier aufgestellt , das ich dir jetzt zeigen werde, die kürzlich für einen meiner Livestreams verwendet werden, und du findest es auf meiner YouTube-Seite. Wenn ich das also näher bringe, wurde dieses Papier tatsächlich innerhalb dieses Designsystems erstellt. Und es wurde tatsächlich ausgedruckt und dann mit dem normalen Stift gezeichnet. So können Sie sehen, wie vielseitig und nützlich dies ist wenn Sie solche Elemente in Ihrem Designsystem erstellen. Gehen Sie also zurück, was wir auch die Telefone haben. Wenn Sie also eine Show haben, dass Sie diese Schriftarten verwenden können, drucken Sie sie offensichtlich aus, wie ich es Ihnen mit diesem speziellen Papier gezeigt habe . Und Sie werden feststellen, dass sie genau hier positioniert werden. Und wenn das Papier eine Landschaft wie diese ist, werden sie natürlich anders positioniert und sie werden für die Papierverdrahtung verwendet, wenn Sie möchten. Dann haben wir einen Browser für Responsive, wir haben einen Desktop-Browser und einen mobilen Browser, und es läuft für all diese Größen gleich. Dann haben wir Flussdiagramminformationen. Wir haben den Namen des Kundenprojekts, die Frist, Anzahl der Websiteseiten, die Anzahl der App-Bildschirme, und Sie können natürlich Punktraster und das Flussdiagramm kombinieren , damit Sie die Plätze wechseln können. positionieren Sie sie, drucken Sie sie aus und erstellen Sie grundsätzlich Komponenten und Flussdiagramme darauf. Und schließlich, was wir haben, wenn ich hier wechsle, haben wir die Vorlagen. Hier haben wir Vorlagen in drei verschiedenen Größen, wie ich bereits erwähnt habe. Wir haben also groß, mittel und klein, und die sind genau hier. Dies sind also Vorlagen, die in 15 verschiedenen Kategorien groß sind. Dies sind Vorlagen, die in denselben Kategorien klein sind, aber nur an die Tabletgröße angepasst sind. Und das sind kleine Vorlagen, also ist es ein Medium und diese sind klein für Telefongrößen. Wie funktioniert das alles? Wenn ich das öffne, haben wir im Grunde Farben, also haben wir Hauptfarben und unterstützende Farben. Wie gesagt, dies sind Hauptkomponenten. Wenn ich die Farbe ändere, zum Beispiel dieses Ozeanblau hier kann ich zum Beispiel dieses Ozeanblau hier einfach bearbeiten und die Farbe ändern. Es wird diese Farbe überall in Echtzeit aktualisieren , wo sich diese Farbe in diesem Designsystem befindet . Von hier aus und dieses Farbfeld hier durch, hier und durch hier, wird es in Echtzeit aktualisiert und diese Farbe ändern und aktualisieren. Wenn Sie sich für dieses Designsystem entscheiden und beginnen Sie mit der Arbeit an einem Projekt für Ihren Kunden. Sie können diese Farben einfach in die Farben Ihrer Kunden ändern sich in diesem Designsystem ändern werden. gleiche Geschichte gilt für die Charakterstile. zum Beispiel für Überschriften entscheide, Wenn ich zum Beispiel für Überschriften entscheide, dies zu ändern, ist es derzeit Proxima Nova . Aber wenn Sie sich zum Beispiel dafür entschieden haben , es wie gesagt in Open Science zu ändern , können Sie es in Echtzeit aktualisieren. Es wird sich während Ihres gesamten Designs ändern. Als nächstes haben wir, was ich gesagt habe, Atome und Moleküle, Flussdiagramme und Vorlagen, und wie kann man sie verwenden? Es ist wirklich ganz einfach. Lassen Sie mich also tatsächlich in diesem großen Fall es hier verwenden. Und ich möchte dir zeigen, ob ich hier klicke. Und sagen wir, ich möchte diese Spalten ausblenden , damit Sie sehen können, was ich mache. Und sagen wir, ich wollte einige Elemente hineinziehen und ablegen, also ist es gut für Atome und Moleküle. Und lassen Sie uns dieses Layout tatsächlich einschalten. Aber lass uns mit dem Platz gleich hier gehen, nur damit du sehen kannst, was ich eigentlich mache. Gehen wir also mit etwas wie Dropdown, Drop Down Groß. Lasst es uns ziehen und fallen lassen. Und du kannst sehen, wie es aussieht, damit ich es dort positionieren kann, wo ich will. Und dann bringen wir unsere Kolumnen zurück. Klicken Sie auf unser Dropdown-Menü und positionieren Sie es genau hier. Und Sie können sehen, dass es sofort funktioniert da dies eine Komponente mit mehreren Zuständen ist. Schauen wir uns den Fokusstatus an. Lassen Sie uns zum Beispiel das Auschecken geöffnet. Und ich kann natürlich in die Wissenschaft springen und jeden dieser Staaten anpassen und verändern. Anstatt also Dropdown-Groß zu sagen, kann es vielleicht Ihre Schuhgröße oder Ihre Schuhfarbe oder was auch immer Ihr Projekt erfordert dass die Schönheit dieses Designsystems, das sind Atome und Moleküle in kurz. Grundsätzlich kannst du sie adoptieren und verwenden, wie du willst. Und lass mich dir schnell Vorlagen zeigen. Also hier haben wir die Vorlagen und lassen uns groß verwenden. Was wir also brauchen, ist die Navigation. Ziehen Sie zum Beispiel mein Navigationsgerät per Drag & Drop. Ich schnappe es in die Position. Schließ das. Verwenden wir die Helden-Sektion. Lasst uns zum Beispiel hier auf Nummer vier gehen. Positionieren wir es genau hier und genau hier. Vielleicht mach so etwas. Dann können wir Call to Action verwenden , also verwenden wir Call-to-Action fünf. Schnappen Sie es, stellen Sie sicher, dass es sich in der Mitte befindet , bis es sich mit unserer Helden-Sektion trifft und Sie die Idee bekommen. Sie werden diese Elemente einfach per Drag & Drop hineinziehen. Du wirst sie bauen. Das Tolle an allen Vorlagen und allen Flussdiagrammen ist, dass sie in zwei verschiedenen Modi verfügbar sind. Standardstatus, nämlich der Lichtmodus und der Dunkelmodus. Wenn ich also auf meinen Navigationsschalter zurück in den Dunkelmodus klicke, klicke hier, wechsle zu dunkel, klicke hier, wechsle mit nur wenigen Klicks in die Dunkelheit. Und wenn ich mein Raster verstecke, damit du sehen kannst, dass wir das haben. Wenn ich es also sehr schnell in der Vorschau anschaue, kannst du sehen, wie es in Echtzeit-ETO aussieht, es hat diese Horroreffekte. Und natürlich, wenn Sie all diese Komponenten ändern und anpassen, zum Beispiel dieses Logo und ändern es in ihr Kundenlogo. Sie können verschiedene Symbole hinzufügen, Sie können verschiedene Bilder hinzufügen. Es wird sich in Echtzeit anpassen. Und das ist der springende Punkt eines Designsystems, um Ihnen Tausende und Tausende von Stunden zu sparen Ihnen Tausende und Tausende von Stunden , um diese langweiligen Aufgaben zu erstellen. Weil es nichts auf der Welt gibt, hasse ich am meisten. Und um Fußzeilen zu erstellen, habe ich meine Fußzeilen genau hier. Klicken Sie hier, ziehen Sie die Fußzeilenpositionierung dort per Drag & Drop, z. B. in den dunklen Modus einrasten. Positioniere es hier. Drücken Sie noch einmal die Vorschau. Und hier habe ich meine Fußzeile an Ort und Stelle. Das ist das Schöne an diesen Designsystemen, ist es, mit Geschwindigkeit zu schaffen, um Breitenskala zu erzeugen. Und das ist es, was Sie mit diesem speziellen Designsystem sehen können , das ich in den letzten sechs Monaten geschaffen habe, ist, dass ich all diese Elemente geschaffen habe. Lassen Sie mich das also löschen. Ich habe all diese Elemente erstellt, aber ich kann sie leicht skalieren. Ich kann hier weitere Elemente mit vorhandenen Elementen hinzufügen, ich kann sie neu positionieren, neu organisieren, ihre Farben ändern, ihren Eckenradius ändern. Denn wenn ein sehr näher auf eine dieser Schaltflächen hineinzoomen , können Sie sehen, dass der Eckenradius vier ist, wenn Sie genau hier zeigen, aber vielleicht möchte ich den Eckenradius ändern dieser Hauptknopf zu etwas Größerem. Lassen Sie mich annehmen, damit Sie alle Staaten etwas größer als 20 sehen können . Drücken Sie Enter. Und Sie können in Echtzeit sehen, dass es sich überall ändern wird, diese Schaltfläche befindet. Wo auch immer dieser Button verwendet wird, nicht nur hier, sondern auch in meinen Vorlagen. Es wird also in Echtzeit aktualisiert. Das ist das Wichtigste an Designsystemen in Adobe XD. Sie müssen sie in den Standardkomponenten und all diesen Komponenten ändern , die Sie per Drag & Drop ziehen und die Ihnen unsere untergeordneten Komponenten anzeigen. Wir können uns dort ändern und anpassen und diese lokalen Änderungen nutzen. Zum Beispiel werden Sie in diesem Heldenbereich , den ich Ihnen zuvor gezeigt habe, den Text aktualisieren. Sie möchten Ihren eigenen Text hinzufügen, Texte Ihrer Kunden, was auch immer, dann wird sich die Schuldenkomponente ändern. Wenn Sie jedoch globalere Änderungen wie die Hintergrundfarbe vornehmen möchten , wie Schriftart und was auch immer, werden Sie diese Änderungen direkt hier innerhalb der Hauptkomponenten vornehmen hier innerhalb der Hauptkomponenten inception design system wird mit zwei Dateien geliefert, Master File und Light File. Im Grunde liegt der einzige Unterschied in der Master-Datei, die ich Ihnen gerade zeige, Sie können alle Elemente genau hier an einer Stelle innerhalb der Lichtdatei sehen . Sie können das nicht tun, weil ich absichtlich alle von der Leinwand gelöscht um so viel von der Leinwand wie möglich frei zu halten , damit Sie ohne Anweisungen entwerfen können, wie wenn Sie sie hier ansehen. Vielleicht ist es also am klügsten, mit der Master-Datei zu beginnen , um all diese Komponenten zu lernen. Und ich habe natürlich Bilder all dieser Komponenten zur Verfügung gestellt , die auf einen Blick suchen können , wie die Komponente aussieht wie die Vorlage aussieht bevor Sie damit arbeiten. Das Letzte, was ich Ihnen dazu zeigen wollte sind diese Flussdiagramme. Also lass mich sie gleich hier aufmachen. Schließen wir also Vorlagen öffnen Sie die Flussdiagramme. Gehen wir mit Desktop-Flussdiagrammen. Verwenden wir den Header zum Beispiel, ziehen Sie ihn hier per Drag & Drop. Lassen Sie uns Inhalte verwenden. Vielleicht wollte ich es genau hier positionieren. Verwenden wir etwas anderes wie einen Schieberegler. Positionieren Sie es genau hier. Das Tolle an diesen Komponenten ist, dass Sie sie einfach hier duplizieren können. Und da dies die Komponenten sind, können Sie, wie gesagt, einfach auf Ziehen klicken und es wird diese Komponente in Echtzeit ersetzen. Also Portfolio, Drag & Drop es hier. Vielleicht möchte ich das Formular Nummer fünf benutzen. Mein Kunde sagt, ich mag nicht , wie die Formel einer Datei aussieht. Vielleicht kannst du etwas anderes versuchen, okay, für Nummer drei, los geht's. Sie können sehen, wie einfach es ist, sie zu erstellen. Wenn Sie all diese Elemente verbinden möchten , schließen wir das. Verwenden wir also die Flussdiagramm-Elemente. Verwenden wir zum Beispiel Zahlen. Also lass uns mit Nummer eins gehen. Vielleicht ist dies zum Beispiel die erste Seite, lassen Sie uns das schließen. Lass uns Pfeile benutzen. Also benutze ich diesen Pfeil, ziehe ihn per Drag & Drop an Ort und Stelle. Wenn Benutzer auf diese Schaltfläche klicken, gehen sie möglicherweise zu dieser Seite. Also werde ich das einfach erweitern und meine Linie auswählen und es wagen dich zu gehen. So einfach ist es zu verwenden und zu erstellen. Wenn Sie dies zum Beispiel fallen lassen, sagen wir versehentlich Pfeil. Ich wollte es ersetzen. Ich wollte es damit machen. Da gehst du. Dies ist der Pfeil, den ich zum Beispiel von diesem Paar wollte, von diesem Schieberegler genau hier, ich möchte, dass sie zu diesem Portfoliostück gehen. Sie können sehen, wie einfach das zu erstellen ist. Das ist also das Schöne an diesen Designsystemen. Offensichtlich ist dies ein Extrem, wie gesagt, es hat über sechs Monate gedauert, um alles zu schaffen. Ich brauchte mehr als zwei Jahre Forschung. Und wenn ich dir einige dieser Vorlagen zeige, kannst du sehen, wie sie aussehen. Also haben wir Helden, wir haben Futures Call to Action. Also habe ich nachgeforscht , was in der Branche am häufigsten verwendet wird. Was sind einige Industriestandards und was wird am häufigsten verwendet? Inhaltsraster, Preisgestaltung. Wir haben den Blog, wir haben Login und wir haben Foren, kontaktieren Sie uns und vieles mehr. Und das alles reagiert genau hier als Kurzfilm. Und all das benutzt x leicht für Reden. Wenn ich also direkt hier klicke und in diese Bilder springe, kannst du sehen, dass wir den Stapel haben, wir haben die Polsterung. Wenn ich also zum Beispiel den Stapel ändern möchte, kann ich direkt hier klicken, und es wird diese Richtung dieses Stapels in diese Richtung ändern . Und Sie werden feststellen, dass dieser Inhalt nach unten schiebt und er wird gleichmäßig auf alles skaliert, was ich auf meinem Designsystem erstelle. Wieder einmal, wenn Sie interessiert sind, entworfen das System ist inception design system.console. Dafür gibt es einen YouTube-Kurs. Alles wird viel detaillierter erklärt und Sie können sich diese Seite ansehen, damit Sie die Futures sehen können, wie ich erwähnt habe, Atome oder Moleküle, Organismen, Flussdiagramme, Vorlage, Dunkelmodus, animiert Icons, Kurs enthalten. Alles ist also innerhalb des Inception-Design-Systems. Wenn Sie Ihr eigenes Designsystem erstellen möchten, achten Sie einfach auf zwei Dinge. Stellen Sie sicher, wenn Sie mit der Skalierung beginnen , um mit einem Zweck zu skalieren. Skalieren Sie nicht nur aus Gründen der Skalierung und stellen Sie sicher, dass Sie nur Elemente verwenden, die in Ihrem Designsystem erforderlich sind . Für mein Designsystem habe ich hier Elemente aus meiner Forschung verwendet , die die meisten Designer verwenden. Aber für Ihr Designsystem werden Sie diese Elemente vielleicht nicht verwenden, wenn wir etwas anderes verwenden, etwas anderes. Aber im Grunde begann es mit kleinen Elementen wie Schaltflächen, wie ich es dir gezeigt habe und dann von dort aus erweitert, Komponenten hinzufügen, aber achte darauf, nur die Komponenten hinzufügst, die wirklich sind notwendig in Ihrem Designsystem. Im nächsten Video werden wir über Design-Token sprechen, was sie ein bisschen mehr über sie sind und wie Sie sie in Ihrem Designsystem verwenden können . Also sehe ich dich dort. 6. Design: Design-Token sind das Herzstück jedes guten Designsystems da draußen, da sie ein großartiges Werkzeug für die Zusammenarbeit zwischen Designern, Entwicklern und Anteilnehmern sind für die Zusammenarbeit zwischen Designern, . In diesem Video zeige ich Ihnen, wie ich das mache und wie einige große Unternehmen es machen , und was sind einige Best Practices in Bezug auf Design-Token? Also lasst uns anfangen. Hier sind wir wieder in Adobe XD und noch einmal in meiner Inception Design-System-Masterdatei, die ich Ihnen im vorherigen Video gezeigt habe. Und Design-Token befinden sich genau hier auf der linken Seite. Im Grunde genommen, was ich zuvor in der vorherigen Lektion erwähnt habe, haben sie den Namen. Dieser Name ist wirklich nützlich, denn wenn Sie mit anderen Designern zusammenarbeiten, wollte ich diese Ozeanfarbe beispielsweise für die Hintergrundfarbe unseres Modells oder ähnliches verwenden beispielsweise für die Hintergrundfarbe unseres . Und dann muss ich das meinem Designmitarbeiter bei meinen Design-Teamkollegen sagen: Nehmen wir an, verwende diese blaue Farbe innerhalb dieses Modellhintergrunds. Aber wir haben mehrere blaue Farben. Welche blaue Farbe? Benutzen? Ein BVT F9. Wieder einmal wird es für Menschen sehr schwierig sein, besonders wenn Sie weit voneinander entfernt mit ihnen arbeiten. Wenn Sie von zu Hause aus mit Ihren Teamkollegen arbeiten, wird es für sie schwierig sein , diese Änderung umzusetzen. Und es wird für jeden im Team schwierig sein , sich beispielsweise an diesen Hex-Code zu erinnern. Deswegen benutzen wir Namen. In diesem Fall kann ich ihnen einfach sagen, benutze das Ozeanblau für den Hintergrund des Modells. Und alle sind auf derselben Seite. Ozean ist viel einfacher zu merken als zum Beispiel Hashtag eins, BH EF, EF neun oder was auch immer. So können Entwickler dieselbe Funktion nutzen und das werde ich in nur einer Sekunde in einem großen Designsystem zeigen . Aber im Grunde ist dies der springende Punkt des Designs. Token verwenden sie mit Bedacht und verwenden sie als Skalierung Ihres Designsystems. Natürlich können Sie sie für Text verwenden. In diesem Fall habe ich nur Überschrift und Text, aber zum Beispiel können Sie die spezifische Zeichengröße für bestimmte Elemente verwenden . Wenn sich der Charakter beispielsweise direkt unten befindet, sagen wir, Animationen oder Illustrationen noch besser, können Sie sie in Verbindung mit diesen Illustrationen verwenden . Zum Beispiel sind Überschriftenillustration, große, Überschriftenillustration klein oder was auch immer. Und wenn Sie dann zu Ihren Entwicklern sagten, stellen Sie sicher, dass Sie das große Illustrationswerkzeug für die Überschrift ändern, sagen wir 64 Punkte. Jeder im Team wird das viel besser verstehen können als wenn nicht, was ich zuvor über die Komponenten und verschiedene Komponentennamen erwähnt habe . Wenn wir also hier auf meine Schaltflächen zoomen, wechseln Sie zum Beispiel das Ebenenbedienfeld, klicken Sie hier. Sie können sehen, dass wir die Schaltfläche standardmäßig groß haben, da es sich um große Schaltflächen handelt, dann haben wir Button default, medium, button default small. Das sind also Standardschaltflächen, aber wenn ich zum Beispiel zu etwas anderem wechsle , haben wir hier einen Selektor. Selektoren, Inline-Wert, große Selektoren im Zeilenwert, mittlere Selektoren Inline-Wert, sagen wir klein oder was auch immer. Sie müssen also auf all diese Details achten. Und wir haben Bilder. Wir haben große Bilder gemacht und wie viele Spalten setzt Ihr Bild an diesem Käfig? Bild? Groß, zwei Spalten, Bild groß, neunspaltiges Bild groß, 10124 mit Vollbildmedium, dieselbe Geschichte, klein die gleiche Geschichte. Dann haben wir Geräte, zum Beispiel Device Dash, Browser oder was auch immer. Sie müssen also diese Design-Token verwenden , um zu erklären, was Sie in Ihrem Designsystem erstellen und wofür jedes Design-Token überhaupt entwickelt wurde . Also werde ich Ihnen jetzt das zeigen, was ein Salesforce Lightning Design System Design-Token ist , die Ihnen bereits gezeigt haben, dass in der vorherigen Lektion, in der wir über all diese großartigen Designsysteme gesprochen haben , wie sie es benutzen, ist im Grunde genau das Gleiche. So haben wir markenzugängliche dunkle Variante der Marke, die mit Weiß zugänglich ist. Sie verwenden also Kombinationen und verwenden diese Unterstützung. So können Sie sehen, dass der globale Zugriff auf der Plattform verfügbar ist. Oder wenn nicht, kann ich direkt hier intern schweben, so dass interne Salesforce-Entwickler nur Änderungen vorbehalten sind . Sie haben also all diese Regeln eingeführt, wenn sie veröffentlicht werden, Versionsnummer 1234 usw., T-Mobile, so schwer, es mit einem Team zu verwenden. Benutzen Sie es mit einer App? Benutzen Sie es für Front-End oder Back-End? Verwenden Sie es für das, was Besucher sehen oder für internes Dashboard oder für das Besucher-Dashboard, müssen Sie alle diese Elemente kennzeichnen. Und hier siehst du noch was anderes. Sie verwenden also zuerst den RGB-Wert und den Hexadezimalwert, die Mehrheit der Marken verwenden andersherum, also verwenden sie zuerst den Hexadezimalwert, den RGB-Wert Sekunde. Sie müssen also all diese Elemente in Bezug auf Ihr eigenes Designsystem berücksichtigen . Deshalb habe ich diese einfache Struktur im Inception Designsystem erstellt , weil Mehrheit der Menschen sie verstehen kann. Wir haben uns konzentriert, also ist es nur für die Defokussierung, aber wenn ich eine Variation des Fokus erstelle, zum Beispiel verschiedene Schattierungen des Fokus, sage ich vielleicht etwas wie Fokus 80 Prozent oder Fokusknopf oder fokussieren. Ich weiß nicht, Hero-Sektion oder was auch immer. Das werden Sie innerhalb des Design-Tokens selbst sagen . Jeder im Team wird es also verstehen können. Und wenn ich euch hier noch einmal zeige, wenn wir etwas weiter nach unten scrollen, können Sie sehen, wie viele verschiedene Farben sie haben, wählen Sie zufällig eine aus. Zum Beispiel diese, Palettenwolke blau, 15. Sie haben also 15 verschiedene Variationen dieser Palette. Wolke blaue Farbe. Nein, es ist nicht T-Mobile und hier benutzen sie es intern. Dies ist Version 2.14 und Sie können Gaumenwolkenblau sehen, also wie sie es verwenden und wie sie funktionieren. Im Grunde genommen hängt es, wie ich immer wieder erwähne , alles an Ihrem Projekt, Ihrem Bedarf, Sie werden nicht all diese verschiedenen Farben haben , wenn Ihre Kunden, ein Projekt sie nicht benötigen. Warum sollten Sie sich also die Mühe machen, all diese Farben, Schattierungen, Variationen und vieles mehr zu kreieren und so viel mehr zu schaffen Schattierungen, Variationen und vieles mehr zu kreieren und so viel mehr wenn Sie mit so etwas davonkommen können. Zum Beispiel, nur ein paar Farben hier und da und dann, und das ist das Entscheidende und Keating, wenn die Projektkosten, können Sie immer mehr Farben hinzufügen. Lassen Sie mich Ihnen das zum Beispiel auch zeigen. Klicken wir auf „Auswählen“. Lass es uns ändern, ich weiß nichts, was auch immer hier. Und wenn wir diese Farbe hinzufügen möchten, klicke ich einfach hier. Und ich kann so etwas wie Umbenennen sagen, vielleicht nennen Sie es Blob Purple, so etwas. Ist das meine Hauptfarbe bei meinem Sekundärauto? Ich nenne es Hauptfarben. Also stell es hier hin, Blob Purple. Und wenn ich dann meinen Blob auswähle, kann ich das nächste Mal auf Blob klicken. Purple wird zur gleichen Zeit angewendet. Wenn wir diese Blobs beispielsweise im Hero-Bereich Ihrer Website oder Ihrer App haben im Hero-Bereich Ihrer Website , können Sie Ihr Design mitteilen. Teamkollegen, ändern Sie den Blob Nummer fünf in eine violette Farbe. Klicken Sie auf „Fertig“. Deshalb sind Design-Token großartig. Deshalb sind sie nützlich, da Sie sie verwenden können, um all diese Elemente in Ihren Designsystemen viel schneller zu erstellen . Und jeder in Ihrem Team kann auf derselben Seite sein und viel schneller verstehen, was Sie erstellen, als wenn Sie diese Design-Token überhaupt nicht verwenden. In der nächsten Lektion werden wir über die Skalierung Ihres Designsystems sprechen . Wann sollte man es machen und wie soll man es machen? Wir sehen uns dort. 7. Skalierung deines Designsystems: Wenn Sie Ihr Designsystem skalieren, sollten Sie es immer besser machen und Sie sollten es immer Schritt für Schritt tun. Warum skalierst du es? Wohin skalierst du es? Vier? Welche Seiten für welche Größen, für welche Geräte Sie beim Skalieren über all diese Dinge nachdenken müssen. Lassen Sie uns in Adobe XD springen und ich zeige Ihnen ein paar Tipps, wann und wie Ihre Designsysteme skalieren können. Hier befinden wir uns in Adobe XD noch einmal innerhalb meiner Masterdatei für das Inception Design System. Wenn Sie dieses Designsystem überprüfen möchten, klicken Sie auf den Link in der PDF-Datei und da ist es, Sie können es sich ansehen, wenn Sie interessiert sind. Nehmen wir an, dass Sie diese Schaltflächen gerade erstellt haben und diese drei Größen gewählt haben, groß, mittel und klein. Und von hier aus möchten Sie vielleicht extra große Größe hinzufügen . Was solltest du tun? Sie müssen sich zuerst mit Ihren Entwicklern beraten, sollte ich verschiedene Schaltflächen für diese extra große Größe erstellen für diese extra große Größe oder können Sie sie skalieren und neu positionieren? Kodieren Sie zum Beispiel, vielleicht ist die extra große Größe für den Button selbst nicht wirklich notwendig. Vielleicht sollte der Abstand angepasst werden und er passt zu einer größeren Größe. Deshalb ist die Kommunikation zwischen Designern und Entwicklern der Schlüssel. Sie investieren also nicht Ihre Zeit in diese Änderungen, die nicht wirklich notwendig und obligatorisch sind . Wenn sie also nicht obligatorisch und notwendig sind, werden Sie am Ende so ein sauberes Aussehen haben. Aber wenn ja, dann haben Sie vielleicht 20 verschiedene Tastengrößen. Und später werden Sie entscheiden, dass zum Beispiel Größe Nummer sieben nicht wirklich notwendig ist. Welche Größen sind zu verwenden. Das ist ganz einfach. Sie müssten mit Ihrem Kunden sprechen und Sie müssen mit dem Unternehmen sprechen, für das Sie arbeiten. Welche Größen verwenden Ihre Benutzer? Wenn sie zum Beispiel nur eine Größenmehrheit von ihnen verwenden , wird Ihre gesamte Aufmerksamkeit auf diese einzelne Größe gerichtet. Und wenn Sie zum Beispiel mehr Benutzer auf die Linie bringen , kommen diese Benutzer, meisten von ihnen kommen zu, ich weiß nicht, Desktop-Größen. Lassen Sie uns die meisten von ihnen Laptops verwenden , und plötzlich verwendet ein großer Zustrom neuer Benutzer das iPhone. Wie man diese Desktop-Größe an iPhone-Größen anwendet. Sie müssen also mit Ihren Kunden, Ihren Entwicklern sprechen , Sie müssen ständig recherchieren. Und wenn Sie dann skalieren, ist es nicht wirklich sinnvoll, auf ein Tablet zu skalieren , wenn Ihre Benutzer keine Tablet-Größen verwenden. Denken Sie also über all diese Dinge nach, aber denken Sie über diese Dinge nach, während Sie weitermachen und Ihr Designsystem erstellen, denn es gibt keinen Maßstabspunkt. Aus Gründen des Maßstabs gibt es einen ganzen Punkt dahinter, gibt es einen ganzen Punkt dahinter mit einem Zweck zu skalieren. Und das bedeutet, entweder neue Benutzer anzuziehen oder neue Benutzer aufzunehmen, den Bedürfnissen und Wünschen neuer Benutzer gerecht zu werden. Und deshalb muss man mit diesem Hintergrund skalieren. , wie ich während dieser Klasse immer wieder erwähne, Erstellen Sie, wie ich während dieser Klasse immer wieder erwähne, keine Elemente, die nicht notwendig sind. Zum Beispiel, wenn Sie keine Avatare unterstützen, weil Sie möglicherweise keine Profile in Ihrem Projekt, in Ihrem Produkt, in Ihrem Dashboard oder was auch immer haben. Vielleicht haben Sie nicht die Möglichkeit, sich bei der Erstellung ihres Kontos anzumelden, warum sollten Sie dann Avatare erstellen? Es ergibt nicht wirklich zu viel Sinn. Erstellen Sie sie nicht nur, um hier zu sein, erstellen Sie, weil sie für Ihr Projekt notwendig sind. Und hab keine große Angst. Wenn Sie zum Beispiel gerade einen Tooltip erstellt haben und keine 50 verschiedene Tooltips erstellt haben. Vielleicht sind sie das nicht unbedingt. Und Tooltip, wie der Name schon sagt, ist es wirklich so einfach, weil es nur ein paar Informationen sind. Achte also nicht allzu sehr auf all diese kleinen Dinge. Stellen Sie sicher, dass Sie die großen Dinge wie Layout wie Gitter wie Abstandsraster und horizontaler und vertikaler Rhythmus all diese Dinge erhalten, bevor Sie sich um Tooltips kümmern. Und eine letzte Sache, die ich Ihnen über die Skalierung Ihres Designsystems sagen möchte , sind diese Vorlagen. Wenn wir also genau hier hineinzoomen und Ihnen genau hier zeigen , ist Futures-Call an Aktionsteams. Vielleicht haben wir Content-Grids, vielleicht haben wir Portfolio, wir haben Preise. Und zum Beispiel erstellen Sie ein Dashboard. Innerhalb dieses Dashboards haben Sie eine einzelne Seite , die zum Beispiel nur eine Übersicht darstellt. In dieser Übersicht geben Sie ihnen die Möglichkeit, Madonna zu sehen, sagen wir monatliche Ausgaben oder ähnliches. Gehen Sie bei der Einführung neuer Komponenten nicht auf zu viele Details ein, um damit zu arbeiten, vielleicht können Sie vorhandene Komponenten verwenden und dann einfach Entwickler die Lösung integrieren, die nicht nativ ist. Wenn es nativ ist, im Gegensatz zu Diagrammen, müssen Sie ein Design für ein einzelnes Diagramm erstellen und sich nicht darum kümmern, mehrere Diagramme zu erstellen, indem Sie mehrere Dinge nur für die Wenn Sie alle diese Diagramme haben, konzentrieren Sie sich auf das , was für dieses Projekt notwendig ist. Wenn später neue Funktionen hinzugefügt werden, stellen Sie sicher, dass Sie zusammen mit diesen neuen Funktionen und Ihrem Designsystem skalieren . Machen Sie sich nicht die Mühe, solche Elemente zu erstellen , die nicht oder nicht unbedingt benötigt werden, denn es wird nur Ihr Designsystem überladen und es wird Ihren Fortschritt tatsächlich verlangsamen Ihren Fortschritt tatsächlich verlangsamen dieses spezielle Projekt und Ihre Entwickler kommen voran. Denn denken Sie daran, was auch immer Sie ein Designer in Ihrem Designsystem haben, Entwickler müssen entwickeln haben, Entwickler müssen Verwenden Sie also nicht ihre wertvolle Zeit, wenn diese Elemente nicht unbedingt im Moment. Und Sie können einen Rückstand erstellen. Zum Beispiel werden diese Elemente momentan benötigt. Diese Elemente werden in drei Monaten benötigt, diese Elemente werden in sechs Monaten benötigt. So können Sie Rückstände von Elementen erstellen. Und wenn das Projekt fortschreitet, können Sie diese Elemente etwas später angehen da sie im Moment nicht notwendig sind. Also noch einmal und schließlich, Skalierung, wie sie skaliert werden muss, nicht nur um der Skalierung willen zu skalieren. 8. Dein Kursprojekt: Ihr Klassenprojekt für diese Klasse besteht darin , ein eigenes Designsystem zu erstellen und ein Bild davon in Ihre Klassenprojekte hochzuladen. Investieren Sie nicht zu viel Zeit in dieses Designsystem. Erstellen Sie einfach ein paar Elemente hier und da und haben versucht, sie zu organisieren und es wie ein Designsystem zu betrachten. Sie können einen Screenshot von ihnen erstellen oder die gesamte Zeichenfläche wie eine vorherige exportieren, Sie in einem der vorherigen Videos zeigen und es einfach an Ihre Klassenprojekte anhängen. Ich würde wirklich gerne sehen, was ihr geschaffen habt. Wenn ich also zurück zu meinem Inception Design System wechsle , muss eine Datei haben. Vielleicht kannst du so etwas erschaffen. So können Sie beispielsweise drei verschiedene Schaltflächen in drei verschiedenen Variationen erstellen . Oder Sie können beispielsweise eine Texteingabe erstellen, vielleicht können Sie verschiedene Variationen dieser Texteingabe oder einen Selektor anzeigen, der dieser Texteingabe oder in drei verschiedenen Größen geöffnet und geschlossen wird. Investieren Sie also nicht zu viel Zeit in dieses Projekt, aber ich werde es trotzdem lieben zu sehen, was ihr euch einfallen lässt. Deshalb freue ich mich darauf, Ihre Entwürfe in Ihren Klassenprojekten zu sehen . 9. Schlussbemerkung: Also los geht's. Wir haben das Ende dieses Kurses erreicht. Vielen Dank , dass du es dir angeschaut hast. Ich hoffe wirklich, dass Sie einen gewissen Wert daraus haben und ich hoffe wirklich, dass Sie verstehen, wie Designsysteme funktionieren. Lassen Sie sich nicht von diesen großen Unternehmen einschüchtern wenn Sie nach Inspiration für Designsysteme suchen , sicherstellen, klein anfangen und sicherstellen , dass Sie sich im Laufe der Zeit weiterentwickeln. Auch wenn Sie ein Designsystem erstellen Sie als Freelancer beispielsweise an Website-Projekten oder mobilen Projekten arbeiten beispielsweise an können. Stellen Sie sicher, dass Sie nur die Elemente erstellen , die notwendig sind. Recherchieren Sie selbst, die Elemente sind, die Sie ständig verwenden, die Elemente sind, die Sie nie verwenden. Vielleicht können Sie einen Rückstand erstellen, wie ich es in der vorherigen Lektion erklärt habe, und dann den Rückstand an Elementen angehen, während Sie Fortschritte machen und Ihr Designsystem aufbauen, haben Sie alle ressourcen, die ich erwähnt habe. Also all diese Designsysteme zur Inspiration und viel mehr Informationen innerhalb des PDFs. Und Sie haben auch den Link zum Inception Designsystem. Wenn Sie interessiert sind, können Sie es sich ansehen und an Ihre Bedürfnisse und Ihr Projekt anpassen. Vielen Dank, dass Sie sich diesen Kurs angeschaut haben. Vielen Dank, dass Sie sich dafür eingeschrieben und bis zum nächsten Mal vorsichtig sein.