Wie eine Musterbibliothek in Skizze, Kreative Bloq bauen
Haben Sie schon einmal mit Konsistenz in Web-Design zu kämpfen? Dies geschieht nur allzu oft, vor allem, wenn in großem Umfang zu arbeiten. Zum Glück für uns, Musterbibliotheken sind hier um zu helfen!
Ein Muster-Bibliothek ist eine Sammlung von User Interface Design-Elemente, die Seiten erstellen wiederverwendet werden kann. Beispiele hierfür sind Navigations, Knöpfe, Absätze, Überschriften und Formen. Durch die Gestaltung einzelner Elemente statt kompletter Seiten, wir Wiederverwertbarkeit aktiv zu fördern, was zu Designs, die konsistente und leicht zu pflegen sind.
Bevor Sie eine Musterbibliothek implementieren, müssen wir sicherstellen, dass unsere Design-Tools wiederverwendbare Elemente verarbeiten kann. Für die letzten zwei Jahre meine go-to-Design-Tool wurde Skizze: ein leichtes, vektorbasierte Tool perfekt für Schnittstellen und Musterbibliotheken. Warum ist es perfekt? Ich werde Ihnen ein Beispiel geben.
OK, genug von mir singen Sketch Lobe. Lassen Sie uns in die Tutorial tauchen! Verwenden Sie keine Kopie der Skizze haben? Einfach fahren hier über die kostenlose Testversion zum Download bereit.
Holen Sie sich Ihre artboard einrichten
Jetzt ist unser Raster zu erstellen. Mit Artboard 1 ausgewählt Ansicht> Canvas> Layout anzeigen (Tastenkürzel: Strg + L). Sie werden ein Standard-Raster erscheinen sehen. Jetzt brauchen wir nur um es zu bearbeiten. Mit 1 Artboard noch gewählt haben, gehen Sie Ansicht> Leinwand> Layouteinstellungen. Set Gesamtbreite auf 1080px, Anzahl der Spalten bis 12, Gutter Breite 30px und Spaltenbreite als 60px. Stellen Sie sicher, Gutter außen geprüft. Klicken Sie auf die Mitteltaste.
Einen Knopf
Jetzt haben wir unsere artboard und Gitter einrichten, ist es Zeit, einige Inhalte hinzuzufügen. In diesem Tutorial werden wir vier verschiedene Arten von Musterbibliothek Elementen zu erzeugen. Lassen Sie sich mit den Tasten starten. Um die Schaltfläche Hintergrund zu erstellen, wählen Sie Einfügen> Form> Rectangle (Tastenkürzel: R). Im Inspektoren die Breite auf 280px und die Höhe auf 44px. Stellen Sie den Radius auf 3px und die Füllfarbe zu # 1A9DD3.
Einfügen und Formatieren von Text
Jetzt den Text hinzuzufügen. Zum Einfügen> Text (Abkürzung: T). Ändern Sie die Schrift zu Source Sans Pro, Gewicht zu Fett, Farbe # FFFFFF, Größe 16pt und klicken Sie auf das Zentrum align-Symbol. Positionieren Sie den Text, so dass es in dem Hintergrund zentriert ist. Wählen Sie beide Schichten und gehen Sie auf Anordnen> Ebenen gruppieren (Tastenkürzel: Cmd + G). Mit der Gruppe ausgewählt, geht auf Layer> Symbol erstellen. Sie werden bemerken, dass Sketch der Sie auffordert, das Symbol zu nennen, so Enter-Taste. Symbole können durch eine violette Schicht Symbol zu erkennen.
Alle Änderungen an einem Symbol, wie die, die wir gerade erstellt haben, wird auf alle anderen Instanzen dieses Symbol angewendet werden. Das einzige Problem ist, dass, wenn wir auf den Button Text innerhalb des Symbols ändern, wird es den Text aller anderen Tasten ändern. Um zu verhindern, dass dies geschieht, wählen Sie die Textebene und das Kontrollkästchen Ausschließen Liste Wert von Symbol im Inspektoren. Lassen Sie uns jetzt einen doppelten Button erstellen. Go> Symbole zum Einfügen> Button.
Symbole in Aktion
Bevor ich auf, dann ist es wichtig, sich bewusst zu sein, wie Messung arbeitet in Skizze. Wählen Sie eine Taste, halten Sie die Alt- und schwebt über den zweiten Knopf den Abstand zwischen ihnen zu zeigen. Dies ist nicht nur eine Funktion, die Designer die ganze Zeit, sondern eine, die für Entwickler perfekt ist, die regelmäßig genaue Pixelmessungen berechnen müssen.
Lassen Sie sich mit Überschriften gestartet
Weiter oben, Überschriften. Als Schriften wiederverwendbare Textelemente sind, ist es wichtig, dass die Textstile statt Symbole Funktion zu nutzen. Legen Sie eine Textebene und die Art Schriftsebene 1. Ändern Sie Schriftart auf Source Sans Pro, Gewicht zu Fett, Farbe # 3A4654 und Größe 37pt. Zum layer> Erstellen von freigegebenen Stil. Im Inspektoren, werden Sie feststellen, dass es Text markiert ist. Skizze der Sie auffordert, den Textstil zu nennen, so H1 eingeben.
Wiederholen Sie den letzten Schritt Ihre H1 bis H6-Elemente zu erstellen. Meine Überschrift Schriftgrößen sind H1: 37pt, H2: 31PT, H3: 25pt, H4: 21 PT, H5: 18pt und H6: 15pt. Da jede Überschrift ein Textstil ist, werden alle Änderungen an alle anderen Instanzen davon angewandt werden. Ich habe Jeremy Kirche Typen Skalierungswerkzeug verwendet, um die Größe meiner Positionen zu bestimmen. Typ-Skala verwendet die modulare Skala verhältnismäßig Schriftgrößen zur Auswahl, je nach dem Verhältnis Sie auswählen.
Organisieren von Textstile
Um die Textstile organisieren wir gerade erstellt haben, gehen Sie Einfügen> Styled Text> Organisieren Textstile. Hier können Sie löschen und Textstile umbenennen aber nicht neu anordnen. Als Textstile alphabetisch geordnet sind, nenne ich ähnliche Elemente mit dem gleichen ersten Wort: zum Beispiel Liste Ungeordnete und Liste bestellt. Folgen Sie den gleichen Prozess für Symbole zu organisieren. OK, wir haben Tasten und Überschriften in Angriff genommen! Aber was Bilder?
Herstellung eines Avatars
Für Avatare, fügen Sie ein Bild und Rechteck, das sowohl eine Breite und Höhe von 130px haben. Geben Sie das Rechteck einen Radius von 65px. Gruppe beiden Schichten und die Position des Rechteck hinter dem Bild. Rechtsklick auf das Rechteck-Schicht und wählen Sie die Option als Maske. Wir haben jetzt einen Kreis Avatar. Wir haben ein Rechteck mit einem Radius Einstellung anstelle eines tatsächlichen Kreis verwendet, denn wenn man den Avatar Platz machen möchten, können Sie einfach den Radius bearbeiten, anstatt eine neue Form einfügen.
Pulling in Benutzer Fotos mit Content Generator für Sketch
Eine Alternative Ihre eigenen Bilder eingefügt ist, den Content Generator für Sketch Plugin von Timur Carpeev zu verwenden. Erstellen Sie einfach eine Form und gehen Sie zu Plugins> Content Generator Sketch Plugin> Persona> Fotos. Es zieht die Benutzer Fotos von User-Inter Faces. und fügt sich als Formfüllung. Die Sketch-Plugin Community ist groß.
Weiter oben, Farbmuster! Es ist wichtig, häufig verwendete Farben in unserer Musterbibliothek zu dokumentieren. Fügen Sie ein Rechteck mit Breite und Höhe von 120px und gibt ihm eine Füllfarbe # 1A9DD3. Wiederholen Sie diesen Schritt mit den Farben # 3A4654, # 475361, # 8793A1 und # EFF0F1. Es gibt auch ein Plugin für die Erstellung von Farbmustern von Jody Heavener. Zum Plugins> Swatches und geben Sie die fünf hex oben genannten Werte.
Bauen Sie Ihre Farbbibliothek
Häufig verwendete Farben
Abgesehen von Dokumentfarben, Skizze auch wählt automatisch aus gängigen Farben in Ihrem Dokument und zeigt an, wie oft haben sie benutzt worden! Diese Funktion ist nicht sichtbar, kann aber in der Farbauswahl zugegriffen werden. Klicken Sie auf den Bereich rechts von der Farbe und Opazität Schieber. Sie werden ein Pop-up Titel Frequent verwendeten Farben in sehen. Nicht nur Sketch man nicht sagen, wie oft die Farbe verwendet wurde, aber wo.
Für die letzten Schritte, laden Sie bitte die Ressource, die dieses Tutorial begleitet und stellen Sie sicher, dass Sie die Schrift Source Code Pro installiert haben. In der Ressource wird HTML neben jedem Element enthalten. Dadurch wird sichergestellt, dass die richtigen HTML-Tags und Klassennamen für die Entwicklung verwendet werden. Hinweise zur Verwendung können gegebenenfalls zur Verfügung gestellt werden. Ein gutes Beispiel hierfür ist in dem Grid-System, wo es sinnvoll ist, Informationen über die Spalt Klassen zu haben, zu verschmieren Spalten, und so weiter.
Achten Sie darauf, die Menschen auf Elemente springen können, so dass sie müssen nicht blättern
In der Ressource werden Sie auch feststellen, dass der Header einen Sprung zu ... Selektor hat. Muster-Bibliotheken können lang sein, also ist es wichtig, dass Ihre Teammitglieder der Lage sind, schnell zu einem Element zu springen, ohne durch die gesamte Seite scrollen zu müssen. Ein Beispiel hierfür kann auf der A List Apart Musterbibliothek und Anna Debenham der Musterbibliothek.
Richard Child ist ein Design-Berater. Dieser Artikel erschien ursprünglich in der Ausgabe 272 des Netto-Magazins.
Mochte dies? Lese das!
- Warum sollten Sie Ihre CSS mit Muster-Bibliotheken verwalten
- Wie eine App zu entwickeln. versuchen, diese groß Tutorials
- Freie Grafik-Design-Software, damit Sie sich sofort verfügbar!