Inhalt
- Schritt 01
- Schritt 02
- Schritt 03
- Schritt 04
- Schritt 05
- Schritt 06
- Schritt 07
- Schritt 08
- Schritt 09
- Schritt 10
- Schritt 11
- Schritt 12
- Schritt 13
- Schritt 14
- Schritt 15
- Schritt 16
- Schritt 17
- Schritt 18
Haben Sie jemals mit Konsistenz im Webdesign zu kämpfen? Dies kommt nur allzu oft vor, insbesondere wenn Sie im Maßstab arbeiten. 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üssen 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? Gehen Sie einfach hierher, um die kostenlose Testversion herunterzuladen.
Schritt 01
Bevor wir beginnen, stellen Sie sicher, dass Sie die kostenlose Google-Schriftart Source Sans Pro installiert haben. 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
Nun erstellen wir unser Raster. Wenn Artboard 1 ausgewählt ist, gehen Sie 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
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 den 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
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
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
Ä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 Schaltflächen "Anmelden", "Jetzt kaufen" und "Kontakt" erstellen können, die alle denselben Stil haben.
Schritt 07
Bevor Sie fortfahren, ist es wichtig zu 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 Pixelmaße berechnen müssen.
Schritt 08
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
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 das Typenskalen-Tool von Jeremy Church verwendet, um die Größe meiner Überschriften zu bestimmen. Type Scale verwendet die modulare Skalierung, um je nach ausgewähltem Verhältnis proportionale Schriftgrößen auszuwählen.
Schritt 10
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. Befolgen Sie den gleichen Vorgang zum Organisieren von Symbolen. OK, wir haben Knöpfe und Überschriften in Angriff genommen! Aber was ist mit Bildern?
Schritt 11
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ßartige Zeitersparnis!
Schritt 13
Eine Alternative zum Einfügen eigener Bilder ist die Verwendung des Plugins Content Generator for Sketch von Timur Carpeev. Erstellen Sie einfach eine Form und gehen Sie zu Plugins> Content Generator Sketch Plugin> Persona> Fotos. Es zieht die Benutzerfotos aus Benutzeroberflächen und fügt sie als Formfüllung ein. Die Sketch Plugin Community ist großartig.
Schritt 14
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
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. Durch Hinzufügen von Farben zum Abschnitt "Dokumentfarben" erstellen Sie Ihre eigene Farbbibliothek.
Schritt 16
Neben den Dokumentfarben wählt Sketch auch automatisch die in Ihrem Dokument gebräuchlichen Farben 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. Es wird ein Popup mit dem Titel "Häufige Farben verwendet in ..." angezeigt. Sketch zeigt Ihnen nicht nur an, wie oft die Farbe verwendet wurde, sondern auch wo.
Schritt 17
Laden Sie für die letzten Schritte die Ressource herunter, die diesem Lernprogramm beiliegt, und stellen Sie 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, zum Versetzen von Spalten usw. nützlich sind.
Schritt 18
In der Ressource werden Sie auch feststellen, dass der Header einen Selektor zum Springen zu ... enthält. 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 in der Musterbibliothek A List Apart und in der Musterbibliothek von Anna Debenham.
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 empfehle dringend, die Website Style Guide Resources von Anna Debenham und Brad Frost zu besuchen, wo Sie viele großartige Artikel, Tools und Beispiele finden.
Wörter: Richard Kind
Richard Child ist Designberater. Dieser Artikel erschien ursprünglich in Ausgabe 272 des Netzmagazins.
Mochte dies? Lese das!
- Warum Sie Ihr CSS mit Musterbibliotheken verwalten sollten
- So erstellen Sie eine App: Probieren Sie diese großartigen Tutorials aus
- Kostenlose Grafikdesign-Software steht Ihnen jetzt zur Verfügung!
