Styleguide – Anleitung zum Erstellen mit Vorlage & Beispiel

Die Erstellung eines Styleguides ist oft eine langwierige, entscheidungsintensive Aufgabe. Die meisten großen Unternehmen investieren viel Zeit und Geld, um sicherzustellen, dass der Leitfaden ihre Marke, ihre Unternehmenskultur und alle ihre Design- und Marketinganforderungen vollständig abdeckt.
Aber was ist mit den kleinen Unternehmen, den Start-ups und den klammen Unternehmern? Nun, hier ist eine schnelle Anleitung für einen einfachen und doch funktionalen Styleguide.
(Anmerkung des Autors: Mir ist klar, dass es eigentlich „Styleguide“ heißen sollte, aber ich verzichte aktiv auf die Rechtschreibprüfung zugunsten eines effektiveren Begriffs).
Publikum, Publikum, Publikum. Wenn Sie sonst nichts lesen, denken Sie bitte daran, dass Sie bei allen Dingen, die mit Design zu tun haben, immer Ihr Publikum berücksichtigen sollten.

Anleitung zum Erstellen

Sie möchten einen großartigen Styleguide erstellen? Hier ist die ultimative Anleitung, die Sie benötigen, Anhang von der Automarke Audi als Beispiel.

1. Logo(s) einbinden

Das Logo ist die primäre visuelle Identität der Marke und als solche verdient es den ersten Platz in unserem Prozess.
Stellen Sie sicher, dass Sie alle Variationen des Logos einbeziehen (z. B. helle / dunkle / transparente Hintergründe, individuelle Embleme, Mobile vs. Desktop, usw.). 

Dies ist auch ein guter Zeitpunkt, um die Details zu erläutern, wie das Logo verwendet werden soll

  • Welche Abstände sollten um das Logo herum bestehen?
  • Welche Art von Hintergründen sind angemessen?
  • Wann verwenden Sie das Emblem und wann das vollständige Logo?

Wenn Sie es ganz genau nehmen wollen, können Sie auch alle „Do’s“ und „Don’ts“ für die Verwendung des Logos angeben.

audi logo

2. Erstellen Sie eine Farbpalette

Farben wecken Emotionen und beeinflussen die Erinnerung. Die Farbpalette ist der Kern jeder Marke und sollte den allgemeinen Ton widerspiegeln, den Sie kommunizieren möchten.

Möchten Sie eine lebendige und energiegeladene Marke? Wählen Sie eine hohe Sättigung und Helligkeit. Möchten Sie eine „professionellere“ Marke? Wählen Sie eher gedämpfte, traditionelle Farben. Nutzen Sie jedoch Akzente, um hilfreiche Farbspritzer zu setzen, die besonders für aussagekräftige Call-to-Action-Aufrufe nützlich sind.
Tools wie das oben gezeigte (DesignGapp) und Adobes Color können komplementäre / zusammengesetzte / analoge Farben anzeigen, um gute Übereinstimmungen für Ihre Primärfarbe zu finden.

Profi-Tipp: Stellen Sie sicher, dass Ihre Farben bei der Verwendung in Text im Web zugänglich sind. Es gibt Tools, mit denen Sie überprüfen können, ob sie die minimalen Schwellenwerte erfüllen.

audi brand colors

3. Wählen Sie die Schriftart(en)

Wenn Sie jemals eine Design-Debatte anregen wollen, bringen Sie Schriftarten ins Spiel. Die von Ihnen gewählte(n) Schrift(en) werden, genau wie Ihre Farbpalette, den Stil Ihrer Marke vermitteln.

Ich will ehrlich sein, ich habe es nicht durch die gesamte Helvetica-Dokumentation geschafft, aber ich weiß genug über Schriftarten, um zu wissen, wie wichtig sie für ein Design sind. Wenn Sie ein hippes Tech-Startup sind, wollen Sie wahrscheinlich nicht mit Comic Sans beginnen. Wenn Sie ein lustiges Spielzeugunternehmen sind, wäre Arial eine langweilige Wahl. Verwenden Sie auf keinen Fall Papyrus.

Es gibt viel zu bedenken bei der Schriftart (Gewicht / Stil / Größe), aber diese Entscheidungen helfen dabei, den textlichen Ton Ihres Inhalts zu etablieren. Berücksichtigen Sie auch Ihr Medium – wenn Sie sich auf den Druck konzentrieren, sind Serifenschriften tendenziell besser lesbar als bei einem Web-Engagement, bei dem serifenlose Schriften besser wiedergegeben werden (dies ist jedoch Gegenstand von Diskussionen und technologischen Updates).

Profi-Tipp: Versuchen Sie, nicht mehr als zwei Schriftarten in einem Design zu verwenden, da dies visuell ablenkend wirken kann.

audi typos

4. Bildmaterial einbeziehen

Wählen Sie Bilder, die die Gesamtästhetik der Marke unterstreichen. Diese Bilder dienen dazu, den Ton der visuellen Sprache zu bestimmen.
Fotografien, Illustrationen und Grafiken können Ihre Marke vermenschlichen und viel über die Markenwahrnehmung aussagen, die Sie etablieren möchten. Ob es sich um ein Foto von jemandem handelt, der Ihr Produkt benutzt, eine aussagekräftige Hintergrundgrafik oder eine maßgeschneiderte Illustration – sie alle helfen dabei, Ihre Marke effektiv an Ihr Publikum zu kommunizieren.

Ich persönlich habe mich in meinen Entwürfen immer stark auf die Fotografie verlassen. Es verleiht ein großes Maß an visuellem Interesse und kann so viel alleine kommunizieren (besonders effektiv ist es, wenn es von einfachem Text und einem Call-to-Action begleitet wird).

Profi-Tipp: Eines meiner Lieblingstools für großartige lizenzfreie Stockbilder ist Unsplash – sie haben eine riesige Bibliothek und großartigen Entwickler-Support.

audi bildsprache

5. Ikonographie hinzufügen

Die Verwendung von Ikonografie ist ein großartiger Weg, um schnelle Verbindungen zu schaffen und das Verständnis für Ihren Inhalt zu fördern.

Wenn Ihr Text und Ihre Inhalte von Icons begleitet werden können, sind Sie in der Regel erfolgreicher bei der effizienten Vermittlung von Bedeutung. Die meisten Menschen sind visuell orientiert, und Icons sind leicht zu scannen und sehr nützlich (vor allem in Webprodukten / Apps).

Ihr Styleguide sollte alle Versionen Ihrer Icons bereithalten, damit Ihre Design-, Entwicklungs- und Marketing-Teams sie in ihren Ergebnissen verwenden können.
Profi-Tipp: Versuchen Sie, Icons aus einer einzigen Bibliothek zu verwenden, um sicherzustellen, dass der gesamte Designstil konsistent ist. Ich verlasse mich bei webbasierten Projekten stark auf IcoMoon.

icons audi

6. UI-Elemente einrichten

Wenn Sie web- oder app-basierte Lösungen haben, stellen Sie sicher, dass Sie klar kommunizieren, wie die UI-Elemente verwendet werden sollen.

Egal, ob es darum geht, wie und wann Kopfzeilengrößen oder verschiedene Schaltflächenstile verwendet werden sollen, Ihr Styleguide sollte sehr klar über das Design der UI-Elemente sein und wie sie implementiert werden sollten. Es gibt viele verschiedene UI-Elemente, also nehmen Sie alle auf, die für Ihren Kontext zutreffen, aber seien Sie gründlich und stellen Sie sicher, dass Ihre Entwicklungsteams Input und Zugang haben.

Profi-Tipp: Geben Sie, wann immer möglich, spezifische Details zur Implementierung dieser Elemente an. Fügen Sie CSS oder notwendiges Javascript hinzu, um Ihrem Team die Arbeit zu erleichtern.

audi bildsprache

Beispiele

Die obigen Bildbeispiele zeigen sehr gut, wie sich der Style Guide von Audi aufbaut. Nachfolgend weitere Beispiele für Ausschnitte diverser Styleguides von großen Unternehmen.

Nike

nike style guide

Amazon

amazon styleguide

VW

vw style guide logo

Zusammenfassung

Wie bei allem, was mit Design zu tun hat, gibt es eine große Menge an Subjektivität, wie ein Styleguide aufgebaut sein sollte. Betrachten Sie dies als meine eigene Meinung, die ich in über 20 Jahren in der Branche gelernt habe.
Vollständige Offenlegung: Ich bin der Schöpfer von DesignGapp, das die Schritte in diesem Artikel begleiten und jedem helfen soll, der schnell einen Styleguide erstellen möchte. Ich würde mich über Ihr Feedback freuen!

Teile diesen Beitrag

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email
Nach oben scrollen