Design Systems + Sketch - So bereiten Sie die UI-Komponentenbibliothek vor

Schließlich wurde Design Systems zum Industriestandard. Deshalb ist es wichtig zu wissen, wie man sie auf unsere Projekte vorbereitet. Wenn Sie wie ich sind und Ihre digitalen Entwürfe hauptsächlich in Sketch erstellen, enthält diese Story eine Reihe von Tipps, um die UI-Komponenten für Ihr Design-System vorzubereiten.

Hinweis:
Ich halte die Dinge gerne klar. Als Erfinder von UXMisfit.com ist es meine Priorität, Designern zu helfen, indem ich sie mit einer etwas anderen Sichtweise auf UX inspiriere und zeitsparende Tools vorbereite.

UXMisfit-Toolkits sind hauptsächlich für Sketch vorbereitet. Sie finden solche, mit denen Sie Benutzerabläufe effizient vorbereiten oder eine bessere Qualität der App-Symbole sicherstellen können.

Möglicherweise finden Sie auch das Design System Kit - es heißt Prime. Es enthält mehr als das moderne UI Design System für Sketch haben sollte. Mit Ausnahme von Hunderten anpassbarer Elemente umfasst es Illustrationssystem, Web-UI-Kit, Diagramme und Vektorvorlagen für Hauptgeräte.

Unabhängig vom Prime Design System Kit funktionieren alle in der Story genannten Tipps, auch wenn Sie entscheiden, die UI-Komponenten selbst vorzubereiten.

Am Anfang war das Chaos ...

Es spielt keine Rolle, ob Sie zu Beginn eines neuen Produkts mit der Vorbereitung von Komponenten für Design System beginnen oder ob Sie sich dafür entscheiden, diese Komponenten in das bestehende, einige Jahre alte Projekt aufzunehmen. Es ist immer eine herausfordernde Entscheidung, wenn Sie sie zum ersten Mal treffen, weil Sie andere Leute (nicht nur Designer) von der Idee eines Systems überzeugen müssen. Lassen Sie uns überlegen, wie Sie verschiedene Menschen für Design Systems begeistern können:

Business People & Management - sie haben möglicherweise Angst vor Zeit und Kosten für die Erstellung von Produkten, die von Grund auf groß sind (natürlich gibt es Möglichkeiten, den Prozess zu beschleunigen). Die anfänglichen Kosten mögen natürlich hoch sein, aber Sie müssen sie davon überzeugen, dass der zukünftige Preis für die Erstellung neuer Komponenten viel niedriger, die Implementierung schneller und die Qualität des Produkts viel besser sein wird.

Entwickler - dank des Entwurfssystems können sie Komponenten früher vorbereiten und ihre Instanzen auf mehreren Seiten verwenden. Das Aufrechterhalten der Designkonsistenz wird viel einfacher. Entwickler müssen sich nicht überlegen, ob diese blaue Schaltfläche eine fette Schrift oder einen Schatten haben soll - sie verwenden nur die richtige Komponente (Primärschaltfläche).

QA - Zeigen Sie den Testern, dass sie die einzige Quelle der Wahrheit erhalten. Dank dessen wird es keinen Zweifel geben, ob etwas richtig gemacht wird.

OK, wenn Ihr Team bereit ist, nehmen wir eine Tasse Kaffee und starten Sketch!

Hast du ein bestehendes Projekt? Machen Sie ihr Inventar.

Wenn Sie für Ihr aktuelles Projekt kein Design-System oder kein eigenes UI-Kit vorbereitet haben, müssen Sie zunächst alle vorhandenen Elemente überprüfen. Sie werden wahrscheinlich mehrere Instanzen von Elementen finden, die sich nur geringfügig unterscheiden, dies muss jedoch behoben werden.

Wenn Sie das vorhandene Design System Kit verwenden, erhalten Sie sofort eine Liste mit fast allen Elementen, die Ihre Komponentenbibliothek enthalten sollte. Darüber hinaus sind sie bereits als Symbole eingestuft. Sie können vorhandene Elemente so anpassen, dass sie mit denen aus Ihrer Lösung übereinstimmen, und Sie sollten in der Lage sein, diese schnell zu verwenden.

Wenn Sie eine Bibliothek von Grund auf neu erstellen möchten, empfiehlt es sich, zuerst die Liste oder eine Tabelle vorzubereiten. Dies hilft beim Aufbau der richtigen Struktur. Die Entwicklung der richtigen Dokumentarchitektur mag schwierig sein, es lohnt sich jedoch, sie zu verwenden, um die spätere Arbeit zu beschleunigen.

Aber… Skizzenbibliotheken sind keine Entwurfssysteme?

Das mag nicht so offensichtlich klingen, ist aber richtig. Ich stimme Brad Frost zu. Ihre Skizzenbibliotheken sind kein Entwurfssystem, aber sie erinnern sich auch daran: Sie sind ihr grundlegender Bestandteil.

Viele Bibliotheken sind die ersten Funken von Design Systems. Es gibt auch Methoden, aus denen lebende Systeme vorbereitet werden können, aber dies wird in den nächsten Kapiteln behandelt.

Design-Systeme sind viel mehr als nur UI-Komponenten. Sie sollten auch Bewegungsrichtlinien, Prinzipien der Inhaltsstrategie und des Copywriting-Stils und schließlich implementierte Komponenten enthalten, die für die Verwendung auf der jeweiligen Plattform bereit sind.

Am Ende beginnt dies alles mit Komponenten, die mit einem Konstruktionswerkzeug wie Sketch erstellt wurden. Denken Sie daran, dass es sich bei den Kits nicht um Design Systems handelt, sondern um Bibliotheken, mit denen Sie Systeme erstellen können.

Erstellen einer UI-Komponentenbibliothek für Design System

Lassen Sie uns einen Blick darauf werfen, wie Sie Komponenten für Ihr System vorbereiten, von kleinsten Partikeln bis hin zu großen Organismen und Vorlagen. Die Philosophie von Atomic Design ist sehr nützlich, wenn Sie die Bibliothek vorbereiten, die häufig verwendet und in Zukunft erweitert werden soll.

Teilchen

Apropos Atomic Design. Bevor Sie mit dem Erstellen der grundlegenden UI-Komponenten beginnen, müssen Sie Partikel einrichten.

Farben

Es ist gut, mit Farben zu beginnen, da jede Marke ihre eigene Palette hat. Denken Sie daran, eine gute Namenskonvention festzulegen. Es ist gut zu erkennen, welcher Ton primär oder sekundär ist und welcher für Erfolgs-, Warn- oder Fehlerelemente steht. Lassen Sie nicht zu, dass Ihr System nur "blau" oder "lila" enthält. Dies ist von entscheidender Bedeutung, da jede Farbe ihre Bedeutung hat. Durch die richtige Benennung erkennt Ihr Team den Zweck der Farbe.

Tipp: Optimieren der Anpassung von Füll- und Rahmenstilen. Erstellen Sie eine Formebene mit gemeinsamem Stil, die nur eine Füllung enthält, und erstellen Sie dann eine Ebene an genau derselben Position und Größe, die nur den gemeinsamen Stil mit Rahmen enthält. Füllung und Rand sollten dieselbe Farbe haben. Wenn Sie auch Formebenen mit Stilen hinzufügen, die sich nur durch die Opazität in der Nähe oder an derselben Position unterscheiden, können Sie den Stil besonders schnell aktualisieren. Sie müssen lediglich die Formebenen auswählen, zwei Parameter aktualisieren (Füllung und Rahmen im rechten Bereich von Skizze) und freigegebene Stile aktualisieren.

Farbeinstellung im Prime Design System Kit

Farbverläufe und Überlagerungen

Einige sagen, dass Farbverläufe die neuen Farben sind. Wenn Sie in Dribbble oder Behance stöbern, werden Sie feststellen, dass sie in vielen Aufnahmen enthalten sind. Aus diesem Grund sollte Ihre Konstruktionssystembibliothek das Set für das Projekt vorbereitet haben.

Gleiches gilt für Überlagerungen. Ton und Deckkraft sollten im System definiert werden, um die Konsistenz zu gewährleisten.

Glücklicherweise ist es ab Sketch 52+ nicht mehr erforderlich, spezielle Zeichenflächen für Farben, Verläufe usw. vorzubereiten. Dies alles ist in den gemeinsamen Ebenenstilen und Symbolüberschreibungen enthalten.

Typografie

Das gute Typografiesystem ist ein wesentlicher Bestandteil jedes UI-Frameworks, das Teil des größeren Designsystems ist. Bei der Erstellung des Kits hat die Vorbereitung dieses Elements sehr viel Zeit in Anspruch genommen. Wenn Sie Ihre Typografie erstellen möchten, denken Sie daran, mindestens die folgenden Stile zu verwenden:

  • Schwarz
  • Weiß
  • Grau
  • Primär (mit der Primärfarbe Ihres Systems)

Es wäre schön, auch zu haben:

  • Erfolg
  • Warnung
  • Error

Diese Farbvarianten helfen Ihnen, bei Ihrer späteren Arbeit genügend Flexibilität und Konsistenz zu gewährleisten.

Lassen Sie uns nun in die Größenordnung und Größe eintauchen. Es gibt mehrere Methoden, mit denen Sie diese Eigenschaft im Typografiesystem definieren können. Ich habe mich entschlossen, die Prime von Apple zu inspirieren und mit dem modernen Webtrend (große Titel usw.) zu expandieren. Dank dieser soliden Grundlage können Sie sicher sein, dass das System funktioniert und die Typografie auf Mobilgeräten und Desktops gut lesbar ist.

Wenn Sie eine richtig dimensionierte Typografieskala wünschen, ist https://type-scale.com möglicherweise hilfreich. Wählen Sie einfach Basisgröße, Skalentyp, richten Sie eine Beispielschrift ein und spielen Sie die Einstellungen ab.

Wenn Sie alle Ihre Größen definieren, fügen Sie mindestens reguläre und fettgedruckte Optionen hinzu. Dann duplizieren Sie alle Elemente zweimal. Richten Sie sie rechts, mittig und links aus. Erstellen Sie nun für jede Option einen Textstil.

Um die bestmögliche Benutzerfreundlichkeit der Typografie zu gewährleisten, verwenden Sie die folgenden Namenskonventionen:

[Größenbezeichnung] / [Ausrichtung] / [Farbe] / [Stil]

Wenn Sie mehr als eine Schriftfamilie in Ihrem System haben:

[Größenbezeichnung] / [Schriftfamilie] / [Ausrichtung] / [Farbe] / [Stil]

Zum Beispiel:

Titel / Mitte / Schwarz / Fett

Titel / SF Pro / Center / Primary / Links

Sie können Typografiesysteme auch in separate Dateien unterteilen und sie zu gemeinsam genutzten Bibliotheken machen.

Tipp: Zur Optimierung der Typografie-Anpassung. Platzieren Sie alle Elemente (aus dem Einfarben-Setup) in einer Spalte. Richten Sie die Ebenen mit den verschiedenen Ausrichtungsstilen (links, zentriert, rechts) übereinander aus. Dank diesem erhalten Sie die einzelne Spalte mit Typografie. Auf diese Weise können Sie das Schriftbild oder den Stil ändern, indem Sie die Gruppe auswählen und gemeinsam aktualisieren. Es ist viel schneller und bequemer, als die Parameter für jedes Alignment separat vorzubereiten.

Typografie-Setup im Prime Design System Kit

Gitter und Layouts

Durch die Vorbereitung des Rastersystems wird nicht nur die Konsistenz sichergestellt, sondern auch Ihre spätere Arbeit beschleunigt. Ihr Raster sollte universell sein - die beliebte Wahl ist das Einrichten eines 8-Punkte-Rasters. Dadurch wird sichergestellt, dass Ihre Benutzeroberfläche auf Desktop, Tablet und Mobile einwandfrei funktioniert.

Tipp: Um das Einrichten Ihrer Arbeit zu beschleunigen, bewegen Sie den Cursor (Umschalt + Pfeil) in Sketch auf die Größe Ihres Rasters (z. B. 8 Pixel). Dies beschleunigt Ihre Arbeit erheblich.

Atomare UI-Komponenten

Bevor Sie direkt in die jeweilige Symbolerstellung springen. Nehmen Sie sich etwas Zeit, um alle erforderlichen UI-Komponenten aufzulisten. Diese Liste ist möglicherweise recht lang, hilft Ihnen jedoch bei der Planung der Struktur Ihres UI-Frameworks.

Es ist offensichtlich, dass das atomare Design-System Komponenten wie Schaltflächen, Eingaben / Textfelder, Symbole, Kontrollkästchen, Schalter und Optionsfelder enthält, aber es gibt auch Elemente, die nicht so offensichtlich sind, wenn Sie zum ersten Mal an das System wie den Chat denken Blasen, Chips oder Bewertungskomponenten.

Sogar Ihre atomaren Komponenten können einige Partikelsymbole enthalten. Beispielsweise kann Ihre Schaltfläche die folgenden Symbole enthalten: Symbol, Schatten, Form, Komponentenstatus oder sogar Text (wenn Sie separate Symbole für diese Symbole vorbereiten möchten).

Diese Atome sind nicht nur die Instanzen von UI-Steuerelementen in Ihren zukünftigen Projekten, sondern helfen auch dabei, komplexere in Ihrer Sketch Library zu erstellen.

Tipp: Was es zu erwähnen gilt: Seit Sketch 52 müssen Sie keine speziellen Masken für die Farben Ihrer Schaltflächen oder Symbole vorbereiten. Geteilte Stile sorgen mit der Funktion zum Überschreiben von Symbolen dafür. Dies bedeutet weniger Symbole und einen transparenteren und eleganteren Arbeitsablauf.

Moleküle und Organismen

Sie haben also alle atomaren Elemente erstellt. Jetzt können Sie sie zu Molekülen kombinieren.

Dies bedeutet, dass Ihre grundlegenden Eingaben, Schaltflächen und Symbole zu einer komplexeren kombiniert werden können. Die Suchtextfeldkartenkomponente für Ihr System kann aus Form oder Bild, Überlagerung, Symbolen, Schaltflächen oder Textstilen erstellt werden.

Durch die Verwendung einer Reihe wesentlicher Elemente in Symbolen und Ebenen mit gemeinsam genutzten Stilen können Sie ein System erstellen, das sich sehr schnell aktualisiert.

Atomic Design ist perfekt für Designsysteme

UI Kit

Das atomare Design nennt die komplexen Mengen vordefinierter Atome, Moleküle und Organismen Vorlagen. Dies sind große Teile (wie Website-Abschnitte) Ihrer Lösung, die mehrfach verwendet werden können.

Es ist gut, Vorlagen mit Blick auf ihren Zweck zu entwerfen. Wenn Sie sie zu allgemein halten, kann dies in bestimmten Fällen zu Elementen führen, die nicht passen.

Prime umfasst die folgenden Kategorien für Vorlagen:

  • Held
  • Produktmerkmale
  • Galerien
  • Handel
  • Bestellung
  • Preisgestaltung
  • Nachrichten / Blog
  • Kontakt
  • Referenzen
  • Konto
  • Instrumententafel
  • Über
  • Fußzeile
  • Sonstiges (für 404 und kommende Seite).

Wenn Sie Ihr eigenes UI-Framework erstellen, empfehle ich Ihnen, diese großen Vorlagen mit mindestens diesen Kategorien vorzubereiten.

Fehlende Elemente vieler Entwurfssysteme

Viele Designer denken an das Design System Kit für Sketch als an die UI Controls Library. Design-Systeme sind jedoch viel mehr. Die Skizze kann auch für viele andere Zwecke des digitalen Designs verwendet werden.

Als ich das Kit erstellte, wurde mir klar, dass die Bibliotheken auch Diagramme und Vektorgeräte (in Umrissen, flach und realistisch) enthalten sollten. Sie werden in modernen Websites und Lösungen so oft verwendet, dass sie im System konsistent dargestellt werden müssen.

Heutzutage sind Websites und Apps außerdem voller wunderschöner Illustrationen. Aus diesem Grund habe ich auch ein anpassbares Illustrationssystem integriert, das Komponenten zum schnellen Erstellen und Gestalten enthält.

Beispielillustration innerhalb von 5 Minuten in Prime erstellt

Wenn Sie sich dazu entschlossen haben, eigene Bibliotheken für Design Systems zu entwerfen, sollten Sie diese Elemente hinzufügen.

Gruppenarbeit

Konstruktionssysteme sind die Quelle der Wahrheit für die Teammitglieder. Dies bedeutet, dass Ihre Skizzenbibliotheken für die Verwendung durch alle an dem Projekt beteiligten Designer vorbereitet sein sollten. Am einfachsten können Sie Dateien für Ihr Team freigeben, indem Sie sie in die Sketch Cloud hochladen

Denken Sie bei der Vorbereitung des UI-Frameworks als Bibliothek daran, eine einheitliche und ordnungsgemäße Benennung sicherzustellen. Der Aufbau einer logischen und klaren Struktur hilft Ihren Kollegen, alle Möglichkeiten des Kits zu entdecken.

Dateien trennen

Darüber hinaus sollten Sie erwägen, einige Teile des Sketch UI Design System als separate Dateien zu erstellen. Mit Ausnahme der Kernbibliothek können Sie eine Datei für einen Symbolsatz, ein Illustrationskit, Gerätevorlagen oder Diagramme vorbereiten.

Wann sollten diese Dinge getrennt werden? Sie sollten darüber nachdenken, es zu tun, wenn klar ist, dass es eine große Anzahl bestimmter Elemente (wie Symbole) gibt oder nur einige Designer aus Ihrem Team sie erstellen (dies kann auf Illustrationen angewendet werden) und der Rest nur ihre Kreationen verwendet.

Kontrollieren Sie den Verlauf Ihrer Bibliotheken

Die bessere Möglichkeit, Sketch Library-Dateien mit dem Team zu verwalten, ist die Verwendung einer Version Control-Lösung wie Abstract. Dank dieser Funktion können Sie die Änderungshistorie der Bibliothek durchsuchen, die Änderungen Ihrer Teammitglieder überprüfen, kommentieren und dem Master (Hauptversion der Bibliothek) hinzufügen.

Building living Design System von Sketch

Mit einigen Tools wie InVision Design System Manager können Sie Design System-Dokumentation und die Quelle der Wahrheit erstellen, nicht nur für Designer, sondern auch für Entwickler, QS-Spezialisten und andere Teammitglieder.

Die Verwendung des Invision DSM ist unkompliziert. Eine kurze Einführung finden Sie hier. Sie können schnell eine Dokumentation zum Entwurfssystem erstellen, Versionen und Benutzerberechtigungen verwalten, um das System anzuzeigen oder zu bearbeiten.

Mit diesem Werkzeug wird Ihre Skizzenbibliothek zum echten Design-System.

Schließlich: Brechen Sie die Konsistenz - falls erforderlich

Die konsequente Strategie ist zwar von grundlegender Bedeutung, Sie müssen jedoch bedenken, dass Sie als UX Designer die Lösung vorbereiten müssen, die die Anforderungen der Benutzer auf hervorragende Weise erfüllt und die Geschäftsanforderungen erfüllt. Deshalb müssen Sie bereit sein, Ihr konsistentes Design-System zu brechen, wenn es einen höheren Zweck dafür gibt.

"Du musst verlernen, was du gelernt hast."
- Meister Yoda

Wenn es einen Fall gibt, in dem dieses bestimmte Element einfach nicht funktioniert, müssen Sie es validieren. Wenn sich bei den Tests herausstellt, dass Benutzer zufriedener sind, wenn die Konsistenz der Benutzeroberfläche verletzt wird, sollten Sie Änderungen in Betracht ziehen. Denken Sie daran, diese „Ausnahmen“ im System zu vermerken, damit die anderen wissen, dass es sich nicht um einen Fehler handelt, sondern um eine strategische Entscheidung.

Zusammenfassen

Sketch ist das richtige Tool zum Erstellen von Design System-UI-Komponenten. Es ist das Tool, das mehrere Funktionen wie Symbole, Ebenen und Textstile mit Überschreibungsfunktionen enthält, die den Workflow extrem vereinfachen. Dank der Bibliotheksphilosophie können Sie Ihre Dateien schnell freigeben und mit zusätzlichen Plugins schnell in echte Designsysteme verwandeln.

Wenn Sie beabsichtigen, Design System zu erstellen oder Ihre UI-Bibliothek zu organisieren, verschwenden Sie keine Zeit damit, alles von Grund auf neu zu erstellen. Fühlen Sie sich frei, das Prime - Design System Kit zu verwenden.

Zur Erleichterung gibt es ein Geschenk Verwenden Sie den Angebotscode MEDIUM10, um 10% Rabatt zu erhalten.

Wenn Ihnen die Geschichte gefallen hat, vergessen Sie nicht, to.

Sie könnten auch an Sketch Plugins interessiert sein, die Ihnen bei der Pflege des UI-Design-Systems helfen:

Vielen Dank fürs Lesen, viel Glück mit Ihrem Design System!