Styleguides, auch bekannt als Musterbibliotheken, sind eine großartige Möglichkeit, um sicherzustellen, dass Ihr Design wie beabsichtigt weitergeführt wird, wenn Ihre Website wächst oder wenn neue Teammitglieder an einem Webprojekt arbeiten. Jeder Stil oder jedes Muster ist eine Gruppierung von Markups und Stilen für die Designelemente Ihrer Website.

Moderne Styleguides werden normalerweise als tatsächliche Webseite angezeigt, die die verschiedenen Elemente in einem Website- oder Anwendungsdesign zeigt. Wenn mehrere Personen oder sogar mehrere Teams an einem Webprojekt arbeiten, erleichtert ein Styleguide das Rätselraten, wie visuelle Elemente aussehen sollten. Es ist eine großartige Möglichkeit, alle auf dem gleichen Stand zu halten, um die Projektkonsistenz zu gewährleisten.

Halten Sie Ihr Team auf Kurs und Ihren Code TROCKEN

Neben der visuellen Gestaltung hilft ein Styleguide, damit die CSS-Datei nicht außer Kontrolle gerät. Wir alle haben Erfahrungen mit sich wiederholendem Code gemacht, also sollten wir uns bemühen, den Code wartbar und ohne etwas absolut Notwendiges zu halten. Wenn jeder in Ihrem Team alle Stile an einem Ort sehen kann, ist sofort ersichtlich, welche derzeit vorhanden sind, sodass sie nicht im Stylesheet dupliziert werden.

Da Ihr Styleguide als Sammlung dient, die das Design von Modulen und anderen Designelementen enthält, ist es leicht zu erkennen, ob neue Designelemente in die etablierten Standards passen.

Was gehört in einen Web-Styleguide?

Wie wir wissen, neigt Webdesign dazu, ein wenig wild zu werden. Die gute Nachricht ist, dass effektives Webdesign, insbesondere wenn Sie einen Styleguide verwenden, in Ihrer Kontrolle liegt. Styleguides reichen von sehr einfach bis sehr komplex. Ich habe hier einige Ideen eingefügt, um Ihnen den Einstieg zu erleichtern.

Farbpaletten

Es ist eine großartige Idee, Farbfelder mit der angegebenen Hexadezimalfarbe einzuschließen. Ihr zukünftiges zeitknirschendes Ich wird es Ihnen danken! Ich kann mich nicht erinnern, wie oft ich gefragt habe oder gefragt wurde: „Was ist das nochmal für eine Hex-Farbe?“ Eine schnelle Referenz wird sicherlich für alle nützlich sein.

Typografie und Hierarchie

Beschreibende Platzhalter für Überschriften können Ihrem Team dabei helfen zu verstehen, in welchem ​​Kontext die Elemente in Ihrem Layout verwendet werden müssen.

Styleguides sollten auch eine vorgeschlagene Header-Hierarchie enthalten. Was ist h1, h2, h3 und so weiter? Beschreibende Wörter wie Hauptüberschrift, Unterüberschrift und Seitenleisten-Widget-Überschrift ersparen auch viel zukünftiges Rätselraten.

Vergessen Sie nicht, weniger gebräuchliche typografische Elemente einzufügen, wie zum Beispiel Blockzitate. Sie müssen alle Textbeispiele angeben, auch selten verwendete. Wenn Sie einen bestimmten Kopf- und Textstil für Blockzitate oder Testimonials haben, geben Sie diese mit denselben Details an wie für häufiger verwendete Elemente.

Bilder

Fügen Sie eine allgemeine Behandlung von Bildern für Ihr Projekt hinzu. Benötigen Bilder Ränder oder einen einzigartigen Opazitätseffekt? Gibt es eine Hover-Interaktion? Wenn ja, nehmen Sie das in Ihren Styleguide auf. Wenn es mehrere Behandlungen gibt, schließen Sie jede einzelne ein und definieren Sie, wann bestimmte Behandlungen verwendet werden.

Link-, Navigations- und Formularstile

Aus UX-Perspektive sind die Links, die Navigation und die Formularelemente drei sehr wichtige Enten, die man hintereinander haben muss. Sie wissen zweifellos, dass Textlinks, Schaltflächen und Navigationsstile in Ihren Styleguide aufgenommen werden müssen. Es kann jedoch leicht vergessen werden, Instanzen von normalen, schwebenden, besuchten und aktiven Stilen für jeden dieser Stile einzuschließen. Lassen Sie diese dokumentieren, um die Konsistenz in jedem Detail Ihrer Website sicherzustellen.

Wenn großartige Stile mit Formularen verschmelzen, gibt es keinen besseren Weg, alle Webformularelemente zu präsentieren, als in Ihrem Styleguide. Es ist eine großartige Möglichkeit, alle Formularelemente abzubilden und zu inventarisieren, was funktioniert, was nicht funktioniert und was fehlt.

Hier sind insbesondere einige Schlüsselkomponenten, die für Formularstile enthalten sein sollten:

• Normaler Zustand des Eingabefelds
• Status des fokussierten Eingabefelds
• Etikettenstile
• Formularplatzhaltertext
• Aktiver Text des Benutzers
• Vom Benutzer eingegebener Text
• Senden-Schaltfläche
• Fehlermeldung
• Kontrollkästchen-Stile

Weitere Ideen, die Sie in Ihren Styleguide aufnehmen können

Es ist schwierig, alle Elemente aufzulisten, denen Sie möglicherweise begegnen, aber hier sind einige weitere, die Sie möglicherweise als nützlich empfinden:

• Call-Out-Box
• Horizontale Verbindungen
• Kommentarelemente
• Kategorie-Tags
• Pop-up-Modell

So erstellen Sie Ihren eigenen Web-Styleguide

Wenn Sie der Glückliche sind, der die Heldentat in Angriff nimmt, einen Styleguide von Grund auf neu zu erstellen, habe ich einige hilfreiche Überlegungen für Sie.

Ich persönlich beginne gerne mit einer leeren HTML-Datei und gehe von dort aus weiter. Verknüpfen Sie diesen Styleguide mit dem CSS der eigentlichen Website oder Anwendung. Auf diese Weise werden Änderungen an beiden Stellen widergespiegelt, und Sie müssen sich keine Gedanken über die Verwaltung von zwei CSS-Dateien machen.

Beginnen Sie mit einer Bestandsaufnahme aller Elemente Ihrer Website und fügen Sie dann das genaue Markup, das Sie für jedes Element benötigen, zu Ihrem Styleguide hinzu. Klingt einschüchternd?

Beurteilen Sie zuerst das Seitenraster und füllen Sie dann den Styleguide mit wichtigen Elementen wie Typografie und Farbpalette aus und fügen Sie im Laufe der Arbeit weitere Muster hinzu. Weitere Designmuster können Dinge wie Bilder, Blockzitate, Seitenleistenstile, Schaltflächen und Formularstile enthalten.

Vertrau mir. Diese Zeit ist gut investiert. Es ist auch gut, daran erinnert zu werden, dass nichts von Dauer ist und dass alles leicht angepasst und erweitert werden kann.

Wenn Sie auf Geschwindigkeit aus sind und die manuelle Eingabe aller Stile nichts für Sie ist, gibt es einige großartige Tools, die es einfach machen, wiederverwendbare Muster zu erstellen und zu verwenden.

Zum Beispiel generiert Jeremy Keith's Pattern Primer eine Liste aller Muster in einem Ordner. Dies ist ein einfaches PHP-Tool, um Codeschnipsel in eine Musterbibliothek umzuwandeln. Sie sehen das als HTML gerenderte Muster.

Eine weitere großartige Option ist Kyle Neaths KSS, das auch ein großartiges Tool für die Styleguide-Dokumentation ist. Diese generierten automatischen Stile sind eine Reihe von Richtlinien, die Ihnen helfen, einen HTML-Stilleitfaden zu erstellen, der mit der CSS-Dokumentation verknüpft ist. KSS ist so konzipiert, dass es gut mit CSS-Präprozessoren zusammenarbeitet und viele CSS-Frameworks unterstützt.

Wie wir alle wissen, ist eine Website nie fertig. Wenn neue Elemente benötigt werden, können Sie Ihren Wohnstil-Leitfaden einfach erweitern, indem Sie ihn einfach hinzufügen.

Ihr anfänglicher Styleguide ist vielleicht nicht identisch mit den Seiten, die Sie schließlich erstellen, aber es ist eine großartige Gelegenheit, neue Styles zu testen, und es ist besonders hilfreich, wenn Sie für mehrere Browser entwerfen.

Beispiele für Styleguides

Möchten Sie einige Beispiele aus dem wirklichen Leben für großartige Styleguides? Du hast es:

Code für Amerika
Mailchimp
Zwangsversteigerung

Durch die Gewährleistung von Konsistenz in Ihrem Design erleichtert Ihr Styleguide die Website-Erweiterung und zukünftige Web-Verbesserungen. Wenn Stile hinzugefügt und geändert werden, ist dieses Dokument eine großartige Möglichkeit, das Team auf dem Laufenden zu halten und Ihr Stilprojekt zu präsentieren.