Entwerfen eines Styleguides: Elemente, die zum Aufbau überzeugender Produkte beitragen

Wenn Sie sich Unternehmen wie Dropbox, Google und Twitter ansehen, werden Sie feststellen, dass jedes seine eigene Ästhetik hat. Bei allen mobilen und Web-Produkten herrscht ein Gefühl der Konsistenz und Einheitlichkeit des Designs.

Die Art und Weise, wie Unternehmen und Produkte Konsistenz erreichen, erfolgt durch Styleguides. Ein Styleguide ist eine Reihe von Standards, die Designs an der Stimme und Mission eines Unternehmens ausrichten.

Konsistenz ist wichtig, weil sie Vertrauen schafft. Beim Design geht es darum, Beziehungen zwischen Produkten und Benutzern herzustellen.

Ziel dieses Artikels ist es, Ihnen einige gut durchdachte Styleguides und Branding-Richtlinien vorzustellen. Es enthält auch einige der wichtigsten Elemente, die jeder Styleguide haben sollte.

Hoffentlich dienen diese Elemente und Beispiele als Inspirationsquelle und beeinflussen, wie Sie in Zukunft nachhaltige Produkte entwerfen.

Bevor wir anfangen ...

Hier sind einige Vorschläge für das Entwerfen von Styleguides.

  • Entwerfen Sie zuerst Ihr Produkt und erstellen Sie dann einen Styleguide. Beginnen Sie nicht mit der Erstellung eines Styleguides. Finden Sie zuerst heraus, was funktioniert und was nicht. Dann standardisieren Sie es.
  • Sie werden mit Ihrem Styleguide nie ganz zufrieden sein. Das ist okay. Das Erstellen einer universellen Designsprache ist ein iterativer Prozess.
  • Verstehen Sie die Stimme und Botschaft, die Ihr Produkt vermitteln soll, bevor Sie einen Styleguide schreiben.

Prinzipien

Styleguides sollten immer eine Seite mit Designprinzipien haben. Designprinzipien sind eine Reihe von Richtlinien, die beeinflussen, wie Designer Probleme beim Erstellen eines Produkts angehen und lösen.

Eines der Hauptmerkmale eines guten Designprinzips ist, dass es nicht offensichtlich oder zu weit gefasst ist. Ein gutes Designprinzip sollte spezifisch genug sein, um einem Designer bei Entscheidungen zu helfen.

Werfen wir einen Blick auf die Richtlinien für die Benutzeroberfläche von Apple, die einen Abschnitt zu Designprinzipien enthalten. Eines ihrer Prinzipien ist die direkte Manipulation .

Die direkte Manipulation von Bildschirminhalten bindet die Menschen ein und erleichtert das Verständnis. Durch die direkte Manipulation können sie die unmittelbaren, sichtbaren Ergebnisse ihrer Handlungen sehen.

Diese Beschreibung erklärt, dass direkte Manipulation ein Prinzip ist, das physische und digitale Interaktionen regelt und vermittelt. Es hilft Designern bei der Auswahl von Interaktionsmodi wie Wischen und Drehen.

Weniger ist mehr, wenn es um Designprinzipien geht. Beginnen Sie mit drei Leitprinzipien und iterieren Sie von dort aus.

Weitere Informationen zu Designprinzipien finden Sie in Julie Zhuos Artikel A Matter of Principle. Es hat mich sehr beeinflusst, wie ich über Designprinzipien denke.

Typografie

Typografie ist der Schlüssel zur Erzielung einer Einheit zwischen mehreren Produkten und Designs. Jeder Styleguide sollte einige Abschnitte enthalten, in denen die Typografiespezifikationen aufgeführt sind.

Es ist wichtig, die Anzahl der verwendeten Schriftarten und Größen zu begrenzen, um Ihre Designs einfach zu halten. Als allgemeine Faustregel beginnen Sie mit höchstens zwei Schriftarten - eine für Ihre Überschriften und eine für Ihre Körper. Meistens brauchen Sie nicht mehr.

Fügen Sie auch beispielhafte Anwendungsfälle der Typografie hinzu, damit andere Designer und Entwickler verstehen, wann Dinge wie Fett oder Kursiv verwendet werden müssen.

Wenn Sie Probleme beim Auswählen von Schriftarten haben, lesen Sie Typewolf und FontPair. Informationen zur Schriftgröße finden Sie unter Modular Scale und im zugehörigen Artikel Mehr aussagekräftige Typografie.

Denken Sie auch daran, dass Schriftarten nicht in Stein gemeißelt sind. Sie können sie später jederzeit ändern.

Bilder

Zeigen, nicht erzählen. Bilder sind ein mächtiges Werkzeug in den Händen eines Designers. Bilder sind dynamisch. Sie vermitteln auf den ersten Blick Bedeutung und rufen Emotionen hervor.

Wenn Sie über die Ressourcen verfügen, sollten Sie einen Abschnitt hinzufügen, in dem angegeben ist, welche Arten von Bildern andere Designer verwenden sollten, um die Stimme und Identität Ihres Produkts zu vermitteln.

Nike ist ein gutes Beispiel für ein Unternehmen, das Bilder verwendet, um seine Marke zu vermitteln. Ihre Fotos haben eine filmische Qualität, die Sie dazu inspiriert, an ihrer Mission und Marke teilzunehmen.

Bilder beschränken sich nicht nur auf Fotos. Unternehmen wie Dropbox verwenden in ihren Designs selten Fotos. Stattdessen vermitteln sie ihre Persönlichkeit durch Illustrationen.

Hier ist ein Beispiel für Hubspots Bildstil-Leitfaden.

Beachten Sie, wie sie den Ton und das Ziel der Fotografie beschreiben, bevor Sie Beispiele liefern.

Mit Richtlinien für die zu verwendenden Bilder können Designer den Benutzern die Bedeutung besser vermitteln und sie letztendlich in eine zusammenhängende Erfahrung eintauchen lassen.

Gitter und Abstände

Bei gutem Design geht es sowohl um Leerzeichen als auch um Inhalte. Styleguides sollten diese Mentalität widerspiegeln und einen Abschnitt über Gitter und Abstände enthalten.

Es ist wichtig, ein Rastersystem einzurichten, das für jeden Anwendungsfall geeignet ist. Geben Sie im Abschnitt zu Rastern Informationen wie die Anzahl der Spalten und Zeilen, Ränder und Beispielverwendungen an.

Informationen zum Lesen von Rastern finden Sie unter Eine Anleitung zum Erstellen von Rastersystemen, die als Grundierung auf Ihren Inhalten basieren. Und folgen Sie ihm mit Modular Design For Grids.

Der Abstand sollte einen eigenen Abschnitt haben. Ein gleichmäßiger Abstand zwischen den Produkten schafft ein Gefühl von Einheitlichkeit und Ausgewogenheit.

Eine Liste der Randgrößen ist sowohl für Designer als auch für Entwickler nützlich. Insbesondere können Entwickler die Raumskala in Sass-Variablen kodifizieren.

Wenn Sie beispielsweise den Marvel-Abstands-Styleguide als Referenz verwenden, sieht das Sass-Gegenstück möglicherweise folgendermaßen aus:

$space-smaller: 5px;$space-small: 10px;$space-medium: 20px;$space-large: 40px;$space-larger: 80px;$space-largest: 240px;

Farbe

Farbe ist ein weiteres wesentliches Element in Styleguides. Farbe hilft dabei, visuelle Hierarchien zu etablieren und emotionale Resonanz zu erzeugen.

Farbabschnitte in Styleguides erleichtern Designern das Leben. Anstatt sich Gedanken darüber zu machen, welche Farben verwendet werden sollen, können Designer auf den Styleguide verweisen. Dadurch können sie sich auf Inhalte konzentrieren.

Wie Buffer es in ihrem Styleguide formuliert:

Die konsequente Verwendung von Farben verleiht einem Produkt ein Gefühl der Vertrautheit und Einheit. Das Farbschema von Buffer soll klar, unauffällig und freundlich sein.

Im obigen Beispiel benennt Buffer jede ihrer Farben. Dies ist besonders für Entwickler nützlich, da sie die Farben in Sass-Variablen umwandeln können:

$primaryColor = #168eea;$headingColor = #323b43;$bodyColor = #59626a;$borderColor = #ced7df;$lightBorderColor = #eff3f6;$fillColor = #f4f7f9;

Beachten Sie, wie Buffer PrimaryColor anstelle eines Namens wie brandBlue verwendet . Wählen Sie Namen, die die Rolle der Farbe anstelle der Farbe selbst beschreiben. Dieser Ansatz erleichtert es Designern und Ingenieuren, ihre Farbwerte anzupassen, ohne den Namen ändern zu müssen.

Wenn Sie mehr über die Auswahl von Farben erfahren möchten, lesen Sie den Artikel, den ich über das Entwerfen in Farbe geschrieben habe.

Komponenten

A lot of designers and developers think about UIs as collections of components. The idea is that each UI component is its own entity. For example, a card is a single component.

Using this approach, designers can re-use components across multiple products and designs. This creates design consistency. It also minimizes the amount of time designers spend re-inventing the wheel designing UI components that already exist within an organization.

Component-based thinking also helps engineers. Design components can translate neatly into code. From an engineering perspective, components are like lego blocks that you can compose together.

While you’ll often see components in UI and pattern libraries, it’s also useful to include components in styleguides for other designers to reference.

For example, Mapbox has a styleguide that includes all of their commonly used components. This includes buttons, inputs, and forms. This way their designers and developers know what UI components are already available.

If you want to learn more about components check Brad Frost’s Atomic Web Design article.

Principles, typography, imagery, grids and spacing, color, and components. This list isn’t exhaustive, but these six topics form the basis of a good styleguide.

What are your thoughts on styleguides? What are some of the lessons that you’ve learned in the process of creating styleguides? Leave a note below or tweet at me.

If you enjoyed this article, you might enjoy Photos and stories from a designer.

Photos and stories from a designer

Some of the best designers are also some of the best storytellers.medium.com

You can find me on Medium where I publish every week. Or you can follow me on Twitter, where I post non-sensical ramblings about design, front-end development, and virtual reality.

P.S. If you enjoyed this article, it would mean a lot if you click the ? and share with friends.