So erstellen Sie eine Musterbibliothek in Sketch

Haben Sie jemals mit Konsistenz im Webdesign zu kämpfen? Dies passiert allzu oft, besonders wenn man im Maßstab arbeitet. Zum Glück helfen uns Musterbibliotheken!

Eine Musterbibliothek ist eine Sammlung von Designelementen für die Benutzeroberfläche, die zum Erstellen von Seiten wiederverwendet werden können. Beispiele sind Navigationen, Schaltflächen, Absätze, Überschriften und Formulare. Durch das Entwerfen einzelner Elemente anstelle vollständiger Seiten fördern wir aktiv die Wiederverwendbarkeit, was zu Designs führt, die konsistent und einfach zu warten sind.



Vor der Implementierung einer Musterbibliothek müssen wir sicherstellen, dass unsere Entwurfswerkzeuge wiederverwendbare Elemente verarbeiten können. In den letzten zwei Jahren war mein Entwurfswerkzeug Sketch: ein leichtes, vektorbasiertes Werkzeug, das sich perfekt für Schnittstellen und Musterbibliotheken eignet. Warum ist es perfekt? Ich gebe Ihnen ein Beispiel.

Angenommen, Sie haben ein Schaltflächenelement, das auf einer Website mehrmals verwendet wird, und entscheiden sich dann, es zu ändern. Normalerweise müssten Sie jede Instanz dieser Schaltfläche manuell ändern. Nicht mit Sketch. Die Software enthält eine Funktion namens Symbole: eine spezielle Art von Ebenengruppe, bei der alle Änderungen, die Sie an einem Symbol vornehmen, automatisch auf alle anderen Instanzen angewendet werden. Es ist perfekt für die Arbeit mit wiederverwendbaren Elementen.

OK, genug von mir, wie ich Sketch's Lob singe. Tauchen wir ein in das Tutorial! Sie haben keine Kopie von Sketch? Einfach rüber gehen Hier um die kostenlose Testversion herunterzuladen.

Schritt 01

Richten Sie Ihre Zeichenfläche ein

Richten Sie Ihre Zeichenfläche ein

Bevor wir beginnen, stellen Sie sicher, dass Sie über die kostenlose Google-Schriftart verfügen Quelle Sans Pro Eingerichtet. Erstellen Sie ein neues Dokument und fügen Sie eine neue Zeichenfläche ein, indem Sie auf Einfügen> Zeichenfläche klicken (Tastenkombination: A). Eine Zeichenfläche ist eine feste Leinwand, die wir als Bildschirmgröße verwenden. Sie werden feststellen, dass der Ebenenliste auf der linken Seite 'Zeichenfläche 1' hinzugefügt wurde. Stellen Sie im Inspektorfenster rechts die Breite auf 1280 Pixel und die Höhe auf 2000 Pixel ein.

Schritt 02

Machen Sie Ihr Gitter

Machen Sie Ihr Gitter

Nun erstellen Sie unser Raster. Gehen Sie bei ausgewählter Zeichenfläche 1 zu Ansicht> Leinwand> Layout anzeigen (Tastenkombination: Strg + L). Sie sehen ein Standardraster. Jetzt müssen wir es nur noch bearbeiten. Wenn Artboard 1 noch ausgewählt ist, gehen Sie zu Ansicht> Leinwand> Layouteinstellungen. Stellen Sie die Gesamtbreite auf 1080 Pixel, die Anzahl der Spalten auf 12, die Dachrinnenbreite auf 30 Pixel und die Spaltenbreite auf 60 Pixel ein. Stellen Sie sicher, dass die Dachrinne außen aktiviert ist. Klicken Sie auf die Schaltfläche Mitte.

Schritt 03

Einen Knopf machen

Welches der folgenden Beispiele ist ein Beispiel für Markenunterhaltung?
Einen Knopf machen

Jetzt haben wir unsere Zeichenfläche und unser Raster eingerichtet. Es ist Zeit, Inhalte hinzuzufügen. In diesem Tutorial erstellen wir vier verschiedene Arten von Musterbibliothekselementen. Beginnen wir mit Schaltflächen. Um den Schaltflächenhintergrund zu erstellen, gehen Sie zu Einfügen> Form> Rechteck (Tastenkombination: R). Stellen Sie im Inspektor die Breite auf 280 Pixel und die Höhe auf 44 Pixel ein. Stellen Sie den Radius auf 3px und die Füllfarbe auf # 1A9DD3 ein.

Schritt 04

Text einfügen und formatieren

Text einfügen und formatieren

Fügen Sie nun den Text hinzu. Gehen Sie zu Einfügen> Text (Verknüpfung: T). Ändern Sie die Schriftart in Source Sans Pro, Weight in Bold, Color in #FFFFFF, Size in 16pt und klicken Sie auf das Center Align-Symbol. Positionieren Sie den Text so, dass er im Hintergrund zentriert ist. Wählen Sie beide Ebenen aus und gehen Sie zu Anordnen> Gruppenebenen (Tastenkombination: Befehlstaste + G). Gehen Sie bei ausgewählter Gruppe zu Ebene> Symbol erstellen. Sie werden feststellen, dass Sketch Sie auffordert, das Symbol zu benennen. Geben Sie daher die Schaltfläche ein. Symbole sind an einem violetten Ebenensymbol zu erkennen.

Schritt 05

Symbole verwenden

Symbole verwenden

Alle an einem Symbol vorgenommenen Änderungen, wie die gerade erstellte, werden auf alle anderen Instanzen dieses Symbols angewendet. Das einzige Problem ist, dass wenn wir den Schaltflächentext innerhalb des Symbols ändern, der Text aller anderen Schaltflächen geändert wird. Um dies zu verhindern, wählen Sie die Textebene aus und aktivieren Sie im Inspektor das Kontrollkästchen Textwert vom Symbol ausschließen. Jetzt erstellen wir eine doppelte Schaltfläche. Gehen Sie zu Einfügen> Symbole> Schaltfläche.

Schritt 06

Symbole in Aktion

Black Friday Grafikkarte Angebote 2019
Symbole in Aktion

Ändern Sie die Hintergrundfarbe einer Schaltfläche, um Symbole in Aktion zu sehen. Beachten Sie, wie sich die Farbe für beide ändert. Wenn Sie jedoch den Text einer Schaltfläche ändern, ändert sich der Text der anderen Schaltfläche nicht. Nur die Stile sind synchron, nicht die Textzeichenfolgen. Dies bedeutet zum Beispiel, dass wir die Schaltflächen Anmelden, Jetzt kaufen und Kontakt erstellen erstellen können, die alle denselben Stil haben.

Schritt 07

Bevor Sie fortfahren, müssen Sie wissen, wie die Messung in Sketch funktioniert. Wählen Sie eine Taste aus, halten Sie die Alt-Taste gedrückt und bewegen Sie den Mauszeiger über die zweite Taste, um den Abstand zwischen ihnen anzuzeigen. Dies ist nicht nur eine Funktion, die Designer ständig nutzen, sondern auch eine Funktion, die sich perfekt für Entwickler eignet, die regelmäßig genaue Pixelmessungen berechnen müssen.

Schritt 08

Beginnen Sie mit Überschriften

Beginnen Sie mit Überschriften

Als nächstes Überschriften. Da Überschriften wiederverwendbare Textelemente sind, ist es wichtig, die Funktion Textstile anstelle von Symbolen zu verwenden. Fügen Sie eine Textebene ein und geben Sie Überschriftsebene 1 ein. Ändern Sie die Schriftart in Source Sans Pro, Weight in Bold, Color in # 3A4654 und Size in 37pt. Gehen Sie zu Ebene> Gemeinsamen Stil erstellen. Im Inspektor werden Sie feststellen, dass Text hervorgehoben ist. Sketch fordert Sie auf, den Textstil zu benennen. Geben Sie also H1 ein.

Schritt 09

Überschriftengrößen

Überschriftengrößen

Wiederholen Sie den letzten Schritt, um Ihre H1- bis H6-Elemente zu erstellen. Meine Überschriften-Schriftgrößen sind H1: 37pt, H2: 31pt, H3: 25pt, H4: 21pt, H5: 18pt und H6: 15pt. Da jede Überschrift ein Textstil ist, werden alle Änderungen auf alle anderen Instanzen angewendet. Ich habe Jeremy Churchs benutzt Geben Sie das Skalierungswerkzeug ein um die Größe meiner Überschriften zu bestimmen. Type Scale verwendet die modulare Skala, um je nach ausgewähltem Verhältnis proportionale Schriftgrößen auszuwählen.

Schritt 10

Textstile organisieren

Textstile organisieren

Um die soeben erstellten Textstile zu organisieren, gehen Sie zu Einfügen> Gestylter Text> Textstile organisieren. Hier können Sie Textstile löschen und umbenennen, aber nicht neu anordnen. Da die Textstile alphabetisch geordnet sind, benenne ich ähnliche Elemente mit demselben ersten Wort: z. B. Liste ungeordnet und Liste geordnet. Gehen Sie genauso vor, um Symbole zu organisieren. OK, wir haben Knöpfe und Überschriften in Angriff genommen! Aber was ist mit Bildern?

Schritt 11

Einen Avatar machen

Einen Avatar machen

Fügen Sie für Avatare ein Bild und ein Rechteck ein, die beide eine Breite und Höhe von 130 Pixel haben. Geben Sie dem Rechteck einen Radius von 65px. Gruppieren Sie beide Ebenen und positionieren Sie das Rechteck hinter dem Bild. Klicken Sie mit der rechten Maustaste auf die Rechteckebene und wählen Sie Als Maske verwenden. Wir haben jetzt einen kreisförmigen Avatar. Wir haben ein Rechteck mit einer Radiuseinstellung anstelle eines tatsächlichen Kreises verwendet. Wenn Sie den Avatar quadratisch machen möchten, können Sie den Radius einfach bearbeiten, anstatt eine neue Form einzufügen.

Schritt 12

Aber was ist, wenn ich ein Bild ersetzen möchte, höre ich Sie fragen? OK, vielleicht haben Sie das nicht gefragt, aber es führt mich zu einer netten Funktion mit dem passenden Namen Image Replace. Wählen Sie Ihren Avatar aus und gehen Sie zu Ebene> Bild> Ersetzen. Wählen Sie ein anderes Foto. Sketch ändert automatisch die Größe des neuen Bildes und wechselt es mit dem vorhandenen. Sie werden dies öfter verwenden als Sie denken: Es ist eine weitere große Zeitersparnis!

Schritt 13

Abrufen von Benutzerfotos mit Content Generator for Sketch

Abrufen von Benutzerfotos mit Content Generator for Sketch

Eine Alternative zum Einfügen eigener Bilder ist die Verwendung von Inhaltsgenerator für Skizze Plugin von Timur Carpeev. Erstellen Sie einfach eine Form und gehen Sie zu Plugins> Content Generator Sketch Plugin> Persona> Fotos. Es zieht die Benutzerfotos ab Benutzeroberflächen und fügt sie als Formfüllung ein. Die Sketch Plugin Community ist großartig.

Schritt 14

Farbfelder

Farbfelder

Als nächstes Farbfelder! Es ist wichtig, häufig verwendete Farben in unserer Musterbibliothek zu dokumentieren. Fügen Sie ein Rechteck mit einer Breite und Höhe von 120 Pixel ein und geben Sie ihm die Füllfarbe # 1A9DD3. Wiederholen Sie diesen Schritt mit den Farben # 3A4654, # 475361, # 8793A1 und # EFF0F1. Es gibt auch ein Plugin zum Erstellen von Farbfeldern von Jody Heavener. Gehen Sie zu Plugins> Swatches und geben Sie die fünf obigen Hex-Werte ein.

Schritt 15

Erstellen Sie Ihre Farbbibliothek

Erstellen Sie Ihre Farbbibliothek

Wählen Sie ein Farbfeld aus und klicken Sie im Inspektor auf die Füllfarbe. Am unteren Rand der Farbauswahl sehen Sie zwei Abschnitte: Globale Farben und Dokumentfarben. Globale Farben werden für alle von Ihnen erstellten Skizzendokumente gespeichert, während Dokumentfarben für jedes Dokument eindeutig sind. Indem Sie dem Abschnitt Dokumentfarben Farben hinzufügen, bauen Sie Ihre eigene Farbbibliothek auf.

Schritt 16

Häufig verwendete Farben

Häufig verwendete Farben

Abgesehen von Dokumentfarben wählt Sketch auch automatisch gängige Farben in Ihrem Dokument aus und gibt an, wie oft sie verwendet wurden! Diese Funktion ist nicht sichtbar, kann jedoch über den Farbwähler aufgerufen werden. Klicken Sie auf den Bereich rechts neben den Schiebereglern für Farbton und Deckkraft. Sie sehen ein Popup mit dem Titel Häufige Farben, die in ... verwendet werden. Sketch zeigt Ihnen nicht nur an, wie oft die Farbe verwendet wurde, sondern auch wo.

Schritt 17

Housekeeping

Housekeeping

Für die letzten Schritte laden Sie bitte herunter die Ressource Dies begleitet dieses Tutorial und stellt sicher, dass Sie die Schriftart Source Code Pro installiert haben. In der Ressource ist HTML neben jedem Element enthalten. Dadurch wird sichergestellt, dass die richtigen HTML-Tags und Klassennamen für die Entwicklung verwendet werden. Gegebenenfalls können Verwendungshinweise bereitgestellt werden. Ein gutes Beispiel hierfür ist das Rastersystem, in dem Informationen zu Spaltenklassen, Versatzspalten usw. nützlich sind.

Schritt 18

Stellen Sie sicher, dass Personen zu Elementen springen können, damit sie sich nicht anziehen

So sehen Sie Fotos, die Ihnen auf Instagram gefallen haben, auf dem Computer
Stellen Sie sicher, dass Benutzer zu Elementen springen können, damit sie nicht scrollen müssen

In der Ressource werden Sie auch feststellen, dass der Header einen Selektor zum Springen zu ... hat. Musterbibliotheken können lang sein. Daher ist es wichtig, dass Ihre Teammitglieder schnell zu einem Element springen können, ohne durch die gesamte Seite scrollen zu müssen. Ein Beispiel hierfür finden Sie auf der Eine List Apart-Musterbibliothek und Anna Debenhams Musterbibliothek .

Das ist es! Sie wissen jetzt, wie Sie mit Musterbibliotheken arbeiten: Jetzt müssen Sie nur noch Inspiration für eine eigene Bibliothek finden. Ich kann einen Besuch sehr empfehlen Ressourcen im Website Style Guide von Anna Debenham und Brad Frost, wo Sie viele großartige Artikel, Werkzeuge und Beispiele finden.

Wörter :: Richard Child

Richard Child ist Designberater. Dieser Artikel erschien ursprünglich in Ausgabe 272 von Netzmagazin .

Mochte dies? Lese das!