So erstellen Sie einen Website-Styleguide für Ihre Marke

Erfahren Sie, wie ein Styleguide Ihre Marke visuell und tonal konsistent halten kann, wenn Ihre Website wächst.


Erstellen eines Website-Styleguides

Lassen Sie uns hier ein Szenario zeichnen. Angenommen, Ihre Website wächst schnell, sowohl in Bezug auf den Inhalt als auch in Bezug auf die Anzahl der Personen, die Sie für die Wartung an Bord holen müssen. Sie haben Designer, Entwickler, Texter und Social-Media-Manager eingestellt – das ganze Zeug. Jede Person kommt und geht und trägt ihr Stück zum Gesamtschema bei – doch die Konsistenz Ihrer Marke hat Amok gelaufen. Einige Schaltflächen sind blau. andere sind grün. Eine Unterüberschrift ist 26px groß; Eine weitere Überschrift lautet 24px. Ihr Logo ist auf einer Seite zu stark gepolstert, auf einer anderen zu wenig.

Als Eigentümer Ihrer Website haben Sie bereits zu viel auf Ihrem Teller. Wie können Sie also damit rechnen, die Hunderte von Designregeln für Ihre Marke in Ihrem Kopf zu behalten? Wie können Sie einem neu eingestellten Designer jede einzelne Stilregel mitteilen, die Ihr vorheriger Designer bereits festgelegt hat? Es ist wahrscheinlich, dass Sie es einfach nicht können.

Hier kommt ein Styleguide ins Spiel.

Was ist ein Style Guide und warum braucht mein Unternehmen einen??

Ein Style Guide ist eine einheitliche Ressource, die eine Marke durch konsequente Verwendung von Design, Ton, Stimme und Identität definiert.

Ein guter Styleguide ist die ultimative Referenz für Ihre Marke. Es ist eine Blaupause. Es definiert die Regeln für Typografie, Farben, Layout, Logo-Verwendung, Tonfall, Inhaltsrichtlinien, Benutzererfahrung und so ziemlich alle Aspekte der öffentlichen Interaktion mit Ihrer Marke.

Das Konzept der Styleguides (oder Markenbibeln) ist nichts Neues, obwohl ihre Anwendung für Websites ein neueres Thema ist. In der Druckwelt üblich, behält jede große Zeitung einen Styleguide bei, um die Formatierungskonsistenz zu gewährleisten. Für große Unternehmen, bei denen die unverwechselbaren Farben einer Marke in allen Bereichen, von Fernsehwerbung bis hin zu Seitenwagen, den genauen Spezifikationen entsprechen müssen, ist ein umfassender Styleguide eine absolute Notwendigkeit – und kann es auch werden geradezu massiv in Größe!

Wenn Sie dies lesen, hat Ihr Unternehmen wahrscheinlich noch keine Größenordnung erreicht, in der Sie eine gesamte Marketingabteilung benötigen, um die Identität Ihrer Marke zu steuern. jedoch, Es ist nie zu früh, einen Styleguide zu erstellen. Wenn Sie jetzt die Prinzipien Ihrer Marke festigen, werden Sie vor potenziellem Chaos geschützt, wenn Ihr Unternehmen zu mehr wächst, als Sie allein im Auge behalten können.

Wann ist es Zeit, einen Style Guide zu erstellen?

Ich wette, Sie können sich bereits vorstellen, welche Konsequenzen es hat, keinen Styleguide zu haben. Ohne vordefinierte Richtlinien, wie Ihre Marke zum Ausdruck gebracht werden soll und nicht, könnte jeder Designer oder Entwickler, den Sie einstellen, Ihrer Website eine persönliche Note oder Interpretation hinzufügen, was letztendlich eher zu Stilschlamm als zu einem zusammenhängenden Ganzen führt.

Ihr Online-Geschäft profitiert von einem Styleguide, wenn und wann:

  • Sie beginnen damit, Aufgaben an Teammitglieder oder Dritte zu delegieren. Ein Styleguide hält alle auf der gleichen Seite und stellt sicher, dass die Beiträge standardisiert sind.
  • Ihre Website ist ziemlich groß geworden (und dabei unorganisiert), und Ihre CSS-Datei ist außer Kontrolle geraten, da neue Stile hinzugefügt wurden, um bereits vorhandene zu ersetzen, die Sie vergessen haben.
  • Sie müssen den Prozess der Aktualisierung Ihrer Website optimieren. Durch die Festlegung von Richtlinien, auf die zurückgegriffen werden kann, wird sichergestellt, dass neue Ergänzungen schnell und im Einklang mit der Marke implementiert werden.

Ihr Style Guide existiert auf Ihrer Website

Bevor Sie mit der Erstellung Ihres Styleguides beginnen, müssen Sie festlegen, wo er vorhanden ist. Am besten weisen Sie Ihrer Website einen eigenen Bereich zu, entweder als Verzeichnis (www.yourdomain.com/styleguide) oder als Subdomain (styleguide.yourdomain.com).

SCHNELLE NOTIZ: Denken Sie daran, dass Ihr Styleguide dieselbe CSS-Datei wie der Rest Ihrer Website verwenden muss. Dies stellt sicher, dass Designaktualisierungen innerhalb eines sofort im anderen reflektiert werden und alles einheitlich und konsistent bleibt.

Ihr Style Guide hat ein eigenes Layout

Lassen Sie uns dies aus dem Weg räumen: Das Erstellen Ihres Styleguides wird einige Zeit dauern. Aber betrachten Sie die Energie, die Sie in sie stecken, als eine Investition, die Ihnen auf lange Sicht mehr Zeit (und Geld) spart.

Genau wie Ihre Website berücksichtigt auch Ihr Styleguide die Benutzererfahrung mit einem übersichtlichen Layout. Es wird im Wesentlichen als eigenständige Website funktionieren, häufig mit einem Navigationsmenü Dadurch werden alle Elemente Ihrer Website in einem logischen Verlauf von Bedeutung aufgelistet. Diese Elemente werden so präsentiert und gestaltet, wie sie auf der Hauptwebsite zu finden sind, natürlich nur mit kontextbezogenen Richtlinien und Gründen, warum die Dinge so gestaltet sind, wie sie sind.

SEHEN SIE ES IN AKTION: Einer der beliebtesten und umfassendsten Styleguides als Referenz gehört dazu Starbucks. Schauen Sie sich ihre an, wenn Sie Inspiration brauchen, um etwas Grundlegendes aufzubauen.

Style Guides Vs. Musterbibliotheken

Die Begriffe “Style Guide” und “Pattern Library” werden häufig synonym verwendet, und der Einfachheit halber werde ich beide als “Style Guide” bezeichnen und Beispiele dafür liefern. Es gibt jedoch wichtige Unterschiede zwischen den beiden, die Sie beachten sollten.

Musterbibliotheken präsentiert einfach die Designelemente ohne Erklärung, wie sie innerhalb der Site oder App verwendet werden sollen. Style Guides wird Sie treffend zu den Best Practices für die Verwendung der ausgewählten Designparameter führen und erklären, warum bei der Präsentation der Marke bestimmte Regeln zu beachten sind.

Im Wesentlichen werden Ihnen mit einer Musterbibliothek möglicherweise Stiloptionen für H2-Tags angezeigt. Was jedoch fehlt, ist das, was ein Styleguide bietet: Anweisungen, unter welchem ​​Kontext jedes bestimmte H2-Tag verwendet werden soll.

So erstellen Sie einen Style Guide

Führen Sie die folgenden Schritte aus, um einen Styleguide zu erstellen, der alle Kriterien erfüllt:

Schritt 1. Definieren Sie die Essenz Ihrer Marke

Nehmen Sie sich Zeit, um die bestimmenden Merkmale Ihrer Marke zu recherchieren und zu überlegen, und lassen Sie alles in ein oder zwei Absätze zusammenfassen. Geben Sie ein Leitbild, Informationen zu Ihren Werten und einige wenige an Schlüsselwörter Damit wird die Grundlage für alle folgenden Design- und Inhaltsbeiträge gelegt. Ein großer Bild kann auch dazu beitragen, den Ton und den Charakter Ihrer Marke leicht zu bestimmen.

Schritt 2. Legen Sie die Regeln Ihres Logos fest

Die Größe, Platzierung und Farbe Ihres Logos sind für die Reflexion Ihrer Marke von größter Bedeutung. Hier werden Sie auch oft sehen Verhaltensregeln das macht sehr deutlich, wie Ihr Unternehmen der Welt visuell präsentiert werden soll.

Beispiel für einen Twitter-Logo-LeitfadenTwitter lässt keinen Raum für Fehler mit ihren umfangreichen Regeln bezüglich der ordnungsgemäßen Verwendung seines Logos.

Schritt 3. Legen Sie die Typografie fest

Typografie zeigt einen sehr greifbaren Sinn für Charakter Ihrer Marke. Die unterschiedlichen Größen Ihrer Überschriften, der Abstand zwischen ihnen und der Stil der Schrift verleihen Ihrer Website eine besondere Klangqualität. Erfahren Sie mehr über die Erstellung der Typografie Ihrer Marke.

Beispiel für einen BBC-Typografie-LeitfadenBBC teilt das Markup und Layout ihrer typografischen Elemente – eine Notwendigkeit für eine große Nachrichtenorganisation, die viele verschiedene Überschriften von unterschiedlicher Bedeutung verwendet.

Schritt 4. Entscheiden Sie sich für Ihre Farbpalette

Farbe kann mehr als nur eine visuelle Darstellung Ihrer Marke sein – sie kann die Psychologie Ihrer Benutzer beeinflussen. Ein bestimmter Rotton könnte sogar weniger eine Farbe als vielmehr eine unbewusste Verbindung zu werden ein bestimmtes alkoholfreies Getränk.

Beispiel für einen Mozilla-FarbführerMozilla hält seine Marke konsistent, indem die Farbpalette ihrer Software definiert wird. Es ist wichtig, dass Sie Farbcodes in HEX, Pantone, HSB, CMYK und RGB einfügen. Sollte sich die Gelegenheit ergeben, dass Ihre Marke über einen Computerbildschirm hinaus existieren muss, sind Sie bereit dafür!

Schritt 5. Bestimmen Sie die richtige Ikonographie

Symbole bringen eine Idee in sofort zugängliche Grafiken. Es gibt nicht viel zu verbergen. Wenn ein Symbol auch nur geringfügig aus dem Gleichgewicht gerät, wird der beabsichtigte Effekt beendet. Einige Symbole sind designintensiver als andere. Dies macht einen Stil nicht besser als den anderen, aber sie müssen nur konsistent sein. Vermeiden Sie inkongruente Ikonografie.

Beispiel für einen IBM Icon Style GuideIBMs Die Symbolbibliothek bietet kontextbasierte Aktionen für ihre Ikonografie. Beachten Sie, wie sie alle einem ähnlichen Stil folgen, der monochrom, flach und simpel ist.

Schritt 6. Bestimmen Sie die richtigen Bilder

Welche Bilder unterstützen Ihre Marke, das lebendige Landschaftsfoto oder den handgezeichneten Cartoon am besten? Werden Sie Ihr Unternehmen durch Fotos vertreten oder einen Fotografen beauftragen, etwas Einzigartiges zu liefern? Was auch immer für Ihre Situation am besten ist, berücksichtigen Sie die Emotion dass Ihre Marke kommunizieren möchte.

Schritt 7: Erstellen Sie das Layout- und Rastersystem

Dies ist einer, bei dem sich Ihre Planung definitiv auszahlt, da der Versuch, zukünftige Seitenlayouts ohne Referenz zu erstellen, normalerweise lächerlich viel Zeit in Anspruch nimmt. Denken Sie daran, das Layout beizubehalten Fluid für mehrere Bildschirmgrößen.

Beispiel für den Rasterleitfaden von MailChimpMailChimp legt fest, wie ihr Hauptinhalt in einem Raster strukturiert ist. Bestimmte Pixelmengen für die Rinne und die Polsterung stellen sicher, dass das Raster unabhängig von der Bildschirmgröße des Benutzers wahr bleibt.

Schritt 8: Gestalten Sie die Elemente

Abhängig vom Umfang Ihrer Website müssen Sie möglicherweise Hunderte verschiedener Elemente berücksichtigen, von Videos über Blog-Kommentare bis hin zu E-Commerce-Artikeln. Hier sind einige der häufigsten, die zweifellos auf jeder Website enthalten sein werden:

Formen

Es geht nicht nur um die Farbe und Größe Ihrer Eingabefelder und Beschriftungen. Sie sollten auch den Text angeben, der bei erfolgreicher Formularübermittlung, Fehlermeldung oder Warnmeldung angezeigt werden soll.

Tasten

Ihre Farbpalette und Typografie kümmern sich um vieles. Die Farbe und Größe Ihrer Schaltflächen kann verschiedene Bedeutungen haben: Es gibt Schaltflächenverknüpfungen, Senden-Schaltflächen, CTA-Schaltflächen, Abbrechen-Schaltflächen, Menüschaltflächen usw..

Menüs

Vieles von dem, was Sie bereits etabliert haben, wird Sie den größten Teil des Weges hierher bringen. Abstand und Textausrichtung sind wichtige Stile, die angegeben werden müssen. Funktioniert Ihr Logo als Home-Schaltfläche? Lassen Sie das bekannte „Hamburger-Symbol“ für etwas Kreativeres hinter sich?

Modale

Ein guter Styleguide zeigt nicht nur das Design Ihrer Modals (oder Popups), sondern legt auch die Bedingungen für deren Erscheinungsbild fest. Welche Aktionen muss ein Benutzer ausführen, um das Modal zu sehen? Wie wird das Modal die Aktion des Benutzers überzeugen??

Interaktions- und Animationseffekte

Ob Sie es glauben oder nicht, Ihre Marke kann in Details ausgedrückt werden, sogar so klein wie die Millisekunden eines Hover-Effekts. Ein Textlink mit dem Wert {Animation: 500 ms Easy-In; } vermittelt eine andere Persönlichkeit und Dringlichkeit als {Animation: 100 ms linear; }}.

Eine Nichtübereinstimmung des Animations-Timings zwischen verschiedenen Links auf Ihrer Website kann die Benutzererfahrung beeinträchtigen. Nehmen Sie sich also Zeit, um zu planen, welche Nachricht Ihre Animationen und Interaktionen weiterleiten, und halten Sie sich an diese Regeln.

Vergessen Sie nicht den Inhalt

Ich mache besonders darauf aufmerksam, da die Aufnahme von Inhalten und Texten in Styleguides genauso wichtig ist, aber oft übersehen wird. Wie Sie es schon gehört haben, Inhalt ist die größte treibende Kraft für den Erfolg Ihrer Website. Nützliche, originelle und gut geschriebene Inhalte werden den Benutzern eine viel tiefere Zufriedenheit bringen als hübsche Schaltflächen oder ausgefallene Menüs. Aus diesem Grund ist es wichtig, Ihren Textern zusätzlich zu Ihren Designern Markenrichtlinien zu vermitteln.

Großartige Inhalte sind nicht nur gut geschrieben, sie müssen auch kommunizieren Stimme und Ton Ihrer Marke durch einen einheitlichen Schreibstil. Diese beiden Schlüsselwörter sind so wichtig zu erfassen, dass MailChimp sogar ihre Bezeichnung trägt Content Style Guide nach ihnen.

Anhand dieses Beispiels können Sie sehen, wie MailChimp seine Texter anweist, Formulierungen zu formulieren, die mit dem Charakter ihrer Marke übereinstimmen, wobei die Emotionen ihrer Benutzer zu einem bestimmten Zeitpunkt.

Inhaltsstil-Anleitungen können ziemlich vollständig sein, selbst wenn sie grammatikalische Regeln enthalten, die Sie von einem Englischprofessor erwarten würden. Der Leitfaden für Tuts+ macht genau das. (Ihr Inhaltsleitfaden sagt mir sogar, ich soll es als “Tuts +” und nicht als “Tutsplus” schreiben!)

Fazit

Styleguides erleichtern das Skalieren Ihres Online-Geschäfts. Mit dieser wichtigen Ressource müssen Sie nicht länger nach neuen Teammitgliedern suchen, um sich über die Regeln Ihrer Marke zu informieren.

Es gibt Millionen von Unternehmen – aber nur eines von Ihnen. Schützen Sie den Wert Ihrer Einzigartigkeit, indem Sie fest darauf achten, wie Sie präsentiert werden. Setzen Sie jetzt einen Styleguide für eine Marke ein, die auch in Zukunft erkennbar bleibt.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map