6 Dinge, die Sie jetzt in Ihren Design Guide einfügen können
Design Guides sind ein unschätzbares Werkzeug, um die Leistung des Designteams zu maximieren und eine konsistente Markenidentität sicherzustellen. Wir betrachten sechs wesentliche Komponenten erfolgreicher Design Guides.
Ein Design-Leitfaden ist mehr als nur ein Dokument, das mit einer neuen Website oder Markenidentität geliefert wird. Ein guter Design Guide ist ein Kunstwerk für sich und findet praktische Anwendung in der täglichen Designarbeit. Es zeigt, was Ihr Projekt ist und zu sein strebt. Es sollte Elemente von Design, Sprache und sogar Code auf eine Weise zusammenführen, die überschaubar, nutzbar und leicht zu verstehen ist.
Es beginnt mit diesen sechs Gestaltungselementen, die in Ihrer Dokumentation enthalten sein müssen. (Wenn nicht, ändere deinen Guide sofort!)
1. Markenidentitätsbeispiele
Ihr Designleitfaden sollte Ihre Markenidentität in einem visuellen Format präsentieren, das repräsentativ für die Art und Weise ist, wie Designmaterialien aussehen sollen. Das ist ein Klassenbeispiel von Show, erzähl es nicht. (Obwohl es in der Anleitung einiges zu erzählen gibt, um mit den visuellen Beispielen zu gehen.)
Die besten Beispiele sind Anwendungsfälle, die genau veranschaulichen, was die Designstandards darstellen sollen.
Verwenden Sie Screenshots von Ihrer Homepage, mobilen Homepage, App oder jedem anderen Ort, wenn das Design am besten ist.
Was ist schön an der Liebe zu reiten Design-Handbuch ist, dass jede Seite in der Broschüre wie die Website aussieht, Marken Konsistenz zu schaffen. Der Guide bringt sogar kleine Elemente des Designs in den Fokus, etwa den korrekten Stil für Apps-Icons in einer akkuraten Darstellung.
Der beste Teil bei der Verwendung realer Beispiele in einem Designleitfaden besteht darin, dass Sie keine zusätzlichen Arbeiten zur Präsentation von visuellen Elementen erstellen müssen. Du hast sie schon in der Hand. Außerdem wissen die Teammitglieder, dass die geschriebenen Richtlinien in der Praxis funktionieren, weil es einen visuellen Beweis gibt.
2. Designrichtlinien
Von Farbmustern über Typografiepaletten bis hin zu Formen und Verwendung von Designelementen sollte alles klar umrissen werden.
Warum sieht und funktioniert das Design in gewisser Weise? Was ist die Philosophie dahinter?
Wenn Sie diese Dinge erklären, können Benutzer den Design-Stil genauer und konsistenter über Medien anwenden. Wenn es um das Design von Websites geht, ist es eine gute Idee, Elemente einzubeziehen, die sich von denen anderer Print-Branding-Produkte unterscheiden können und wie sie miteinander in Beziehung stehen. Zum Beispiel entscheiden sich viele Designer für eine andere Typografie-Palette, die gedrucktes Branding imitiert, um die Verwendung von Google Fonts zu Typekit für eine einfache Verwendung zu maximieren.
Stellen Sie sicher, dass Sie beachten, welche Schriftarten eine Ersetzung sind, wenn dies Teil Ihrer Entwurfsstrategie ist.
Wenn Design-Richtlinien umrissen werden, wenn es darauf ankommt - H1-Tags sind immer 88 Punkte oder Thumbnail-Bilder sind immer 200 mal 200 Pixel -, aber unnötige Details nicht über-kommunizieren. Sie möchten, dass die Teammitglieder Informationen auf einen Blick sehen und nutzen, nicht beschwert werden und versuchen, in einem Meer von Spezifikationen etwas zu finden.
3. Stimme und Persönlichkeit
Richtlinien zum Schreiben sind nicht so lustig wie andere visuelle Elemente eines Designleitfadens, aber sie sind genauso wichtig.
Ein beschreibender Schreibstil für die Kopie kann sich auch auf die Grafik auswirken. Es trägt zu der Art von Bildern bei, die Sie verwenden möchten, und sogar zu Elementen wie Farbe und Typ. Alle diese Elemente gehen zusammen, um eine Gesamtpersönlichkeit für die Marke zu schaffen.
Es ist wie die Außenwelt dich identifizieren wird.
Darüber hinaus wird eine starke Stimme und Persönlichkeit Teil der visuellen Identität. Eine gute Persönlichkeit zeigt sich in Designelementen, weil Nutzer Designelemente auch außerhalb des Rests der Marke fast identifizieren können. (Denken Sie Coca-Cola rot oder Disneys Unterschrift Schriftart.)
4. SEO-Schlüsselwörter
Suchmaschinenoptimierung könnte einer der meistgesprochenen und am wenigsten spaßigen Teile des Website-Designs sein. Denken Sie frühzeitig und oft an Keywords.
Fügen Sie sie in die Art und Weise ein, wie Sie über die Marke sprechen, in beschreibender Sprache über das Design und fügen Sie eine Liste der wichtigsten Keywords in den Designleitfaden selbst ein.
Urban Outfitters hat eine gut gestaltete (und lustige) Keyword-Liste in seinem Brand Guide. Während die Bekleidungsmarke viele verschiedene Schlüsselwörter verwendet, sind die wichtigsten Wörter farblich hervorgehoben, so dass Sie sie sofort sehen.
Eine Keyword-Liste wie diese bringt jedes Mal, wenn Sie sie sehen, die Wörter, die Sie sagen möchten. Die meisten Leute, die eine Kopie schreiben, werden Ihnen sagen, dass sobald Sie ein Wort in einem bestimmten Kontext sehen oder darüber nachdenken, es in Ihrem Kopf hängen bleibt. Genau das soll die SEO-Keyword-Liste tun.
Designelemente sollten jederzeit mit diesen Keywords korrelieren, da diese Inhalte im gesamten Design der Website enthalten sind.
5. Muster- und Elementstile
Bei so vielen verschiedenen Medien online (ganz zu schweigen von Unternehmen, die auch gedruckte Elemente entwerfen), ist es wichtig, Führer für alle möglichen Anwendungen zu haben.
Dies gilt für Stand- und animierte Versionen von Logos, Farbpaletten, Mustern und sogar Gestaltungselementen wie Formularfeldern und Navigation.
Ihr Designbuch sollte einen Abschnitt enthalten, der diesen Elementen gewidmet ist. Und wenn Sie möchten, dass das Team Sie wirklich liebt, erstellen Sie an einem Online-Speicherort einen Muster- und Elementstyling, damit Benutzer Elemente einfach kopieren und einfügen können, um sie schnell zu verwenden.
6. Code-Snippets
Jeder Website-Design-Leitfaden muss viele häufig verwendete Code-Snippets enthalten. Von den Schaltflächen über kleine Animationen bis hin zu Slider-Effekten - diese kleinen Code-Teile verlängern Ihren täglichen Workflow um Stunden, da Sie die Spezifikationen nicht mehr bei jedem neuen Element manuell eingeben müssen.
Dies funktioniert für alle Blog-Posts - fügen Sie einen Code-Block für Bilder hinzu, den Blogger einfach kopieren und einfügen können, für die richtige Größe und Zuschneiden - um mehr ausgearbeitete UI-Effekte.
Firefox enthält Informationen zu Designkomponenten in seinem Designleitfaden für die kürzlich überarbeitete Marken- und Logoverwendung. Auch wenn Sie keine vollständige Bibliothek mit Codefragmenten bereitstellen, denken Sie daran, einige Basisinformationen wie beispielsweise die Verwendung von H1 bis H4 auf Seiten innerhalb des Website-Designs und das Formatieren von Schaltflächen und Bildern hinzuzufügen.
Fazit
Der beste Teil eines Designleitfadens ist, dass er kein statisches Dokument sein muss. Sie kann wachsen und sich verändern, wenn Ihre Marke und Ihre visuelle Identität dasselbe tun.
Die meisten Designer - insbesondere Websitedesigner - entscheiden sich für Online-Versionen eines Designleitfadens, damit Änderungen und das Ergreifen von Code- und Farbausschnitten schnell und einfach vorgenommen werden können. Erwägen Sie, eine Stilrichtlinienseite zu Ihrer Website hinzuzufügen, und denken Sie daran, sich häufig darauf zu beziehen (und sie zu aktualisieren).