Warum Startups einen Styleguide brauchen

Selbst für einen erfahrenen Designer ist es schwierig, einen neuen Styleguide für ein bestimmtes Produkt zu erstellen – es gibt viele mögliche Designrichtungen, und der Prozess kann schnell überwältigend werden. Das Startup-Leben ist hektisch, schnell und voller Klischees wie „Perfekt ist der Feind des Fertigen“, „Bewege dich schnell und mache Dinge kaputt“ oder „Starte es jetzt, repariere es später“.

Unter solchen Slogans und wechselnden Prioritäten einen Styleguide zu erstellen, ist eine Herausforderung, aber ein Muss, wenn das Design eines Produkts langfristig erfolgreich sein soll.

In den letzten Jahren haben wir viel über Designsysteme, Styleguides, Musterbibliotheken und Atomic Design gehört. Obwohl diese Tools sehr nützlich sind, kann ihre Verwendung übertrieben erscheinen, wenn Sie nur ein paar Bildschirme für ein MVP erstellen oder eine App demonstrieren möchten. Ein Styleguide verbessert jedoch nicht nur Ihren Designprozess im Allgemeinen, sondern macht Ihre App auch solider und konsistenter.

Lassen Sie uns zuerst über die Hauptvorteile eines Styleguides sprechen und dann auf das herausfordernde Startup-Umfeld eingehen. Abschließend besprechen wir, wie sich ein Styleguide als lebendiges Dokument immer weiterentwickelt.

Die fünf wichtigsten Gründe, warum ein Styleguide eine gute Idee ist

1. Ein Styleguide macht Designs konkret und Branding klar

Als einsamer Designer in einem Startup – was oft der Fall ist – gibt es nicht viele Möglichkeiten, Designentscheidungen anderer Teammitglieder zu überprüfen und in Frage zu stellen. Obwohl möglicherweise alle zusammenarbeiten, werden Designs nicht unbedingt mit anderen geteilt. Das bedeutet, dass nur eine Person die endgültigen Designs validiert.

Ein Styleguide bietet einem Startup Anleitung und Dokumentation als Referenz. Es wird einige der Designentscheidungen des Designers oder des Teams in Frage stellen, da sie im globalen Kontext der App validiert werden müssen. Das Entwerfen einer UI-Komponente, weil sie auf einem Bildschirm gut funktioniert, wird sie nicht schneiden. Ein gut durchdachtes Design sollte ein einzelnes Designproblem in einer Situation sowie ein allgegenwärtiges Problem lösen, das auf anderen Bildschirmen Ihrer App zu finden ist.

Ein Styleguide macht den gesamten Designstil, Markenrichtlinien, Spezifikationen und Regeln für alle in Ihrem Unternehmen verfügbar. Es ist nur einen Klick entfernt. Sie können zu einer URL gehen, um einfach auf einen Online-Styleguide zuzugreifen oder ein PDF herunterzuladen. Design wird zur Aufgabe aller – es liegt nicht mehr in der alleinigen Verantwortung des Designteams. Es ist ein umsichtiger Ansatz, der die Benutzeroberfläche Ihres Produkts verbessert.

2. Ein Styleguide macht Ihr Design konsistenter

Es bietet eine Art Wörterbuch für Ihre UI-Designsprache. Sie können dieselbe Terminologie verwenden, wenn Sie etwas kommunizieren möchten, das Sie bereits ausgedrückt haben. Stellen Sie sich vor, wir hätten leicht unterschiedliche Wörter, um dasselbe auszudrücken:

1. "Es regnet; Ich brauche meinen Regenschirm.“
2. „Es regnet, ich brauche meinen Regenschirm“
3. „Es regnet, ich brauche meinen Regenschirm“

Es mag eine Sprache poetisch machen, aber schwer verständlich. Im Grunde ist es die gleiche Idee mit der Benutzeroberfläche einer Website oder einer App. Der Einfachheit halber sollten Sie nur dann ein neues „Wort“ erfinden, wenn Sie wirklich etwas Neues erschaffen. Auf diese Weise sind Sie an eine strenge Regel gebunden, die besagt: „Nur Komponenten, die ein Designproblem im gesamten Produkt wiederholt lösen, dürfen in das Produkt und anschließend in den Styleguide.“

Konsistenz macht Ihr Produkt benutzerfreundlicher; Ein gut nutzbares Produkt kann zu mehr Engagement und Umsatz führen.

3. Die Wiederverwendung derselben Systemkomponenten erleichtert die Verwendung Ihrer App

Wie im Sprachbeispiel ist Konsistenz entscheidend. Sobald jede Komponente vom Benutzer verstanden wird, sind die Menschen bei ihrer erneuten Verwendung in einem anderen Kontext bereits mit ihrem Verhalten vertraut. Wenn es um Benutzerinteraktionen geht, verbessert diese Konsistenz die allgemeine Benutzerfreundlichkeit des Produkts.

Die Arbeit mit einem komponentenbasierten Designsystem spart Geld und erleichtert auch die Aktualisierung eines Produkts. Wenn es in einer bestimmten Situation ein Usability-Problem mit einer Komponente gibt, kann es einmal behoben werden, und alle anderen potenziellen Probleme mit dieser Komponente werden ebenfalls aktualisiert.

4. Ein Styleguide macht Ihre App langfristig schneller zu entwickeln

Wenn Ihr Team eine gemeinsame Komponente für einen Bildschirm entwickelt, entwickelt es eine Lösung, die es auch anderswo verwenden wird. Das spart Entwicklungszeit – viel davon. Wenn Ihr Unternehmen skaliert, kann dies bedeuten, dass Sie bis zum Zehnfachen der Arbeitsstunden sparen, die für den Bau eines neuen Bildschirms erforderlich sind.

5. Ein Styleguide erleichtert Produktionseffizienz und Innovation

Das Erstellen eines Styleguides macht Designs für den Rest des Unternehmens zugänglicher und leichter verfügbar. Entwickler und Designer können eine Idee schneller und einfacher prototypisieren. Bootstrap wird oft dafür gelobt, dass es Entwicklern leicht gemacht wird, einen funktionierenden Prototyp zu erstellen – Ihr Styleguide dient demselben Zweck. Es bietet eine Referenzgrundlage für eine neue Benutzeroberfläche, die von Entwicklern erstellt wird, ohne dass das Designteam zuerst den Bildschirm erstellen muss (obwohl das Designteam die endgültigen Bildschirme einer QA unterziehen sollte).

Die Herausforderungen eines Startups, ein Styleguide im Wandel

Das Erstellen eines Designsystems in einer Startup-Umgebung ist nicht so linear wie in einem reiferen Unternehmen, in dem sie an einen optimierten Prozess gewöhnt sind. In einem traditionelleren Unternehmen führt das Designteam UX-Recherchen, Ideenfindung und Experimente durch und erstellt dann den endgültigen Marken-Styleguide. Dieser Prozess ist nicht für alle Unternehmen geeignet. Startups arbeiten in einem Umfeld, in dem ihre Vision und die Anforderungen an das Produkt ständig im Fluss sind. Sie arbeiten mit MVPs (Minimum Viable Products), unvollständigen Versionen ihrer Apps, die verwendet werden, um ihre Idee zu testen und den Benutzern ihr Potenzial aufzuzeigen.

Bei der Erstellung eines Styleguides kann dies zu einem Problem werden.

In einer Umgebung, die sich ständig weiterentwickelt, hat ein Designer normalerweise Mühe, einen Styleguide zu erstellen, der einigermaßen „fixiert“ sein soll. Ein Designer hat möglicherweise nicht die Zeit, alle zu erstellenden Komponenten gründlich zu durchdenken, auch wenn sie möglicherweise noch in der nächsten Version der App enthalten sind. Facebook hat bekanntermaßen sein Hamburger-Menü gegen eine Tab-Navigation ausgetauscht, als sie ein wenig gereift waren. Glaubst du, wer auch immer das Hamburger-Menü dort hingelegt hat, hat es auch zum Facebook-Styleguide hinzugefügt?

Vielleicht denken Sie sogar, dass es noch nicht an der Zeit ist, einen Styleguide zu erstellen. Sie werden vielleicht erkennen, dass Sie langfristig einen brauchen werden, aber im Moment ist es wichtiger, Bildschirme für die Usability-Tests der App zu erstellen. Darüber hinaus benötigen Sie einige Marketingseiten, um für Ihre App zu werben. Plötzlich muss Ihr Design hochgefahren werden, und während Sie Bildschirme erstellen, beginnen Sie den Wert eines Styleguides zu erkennen, der Ihre Designs und die Unternehmensmarke konsistent halten kann.

Das Problem ist, dass Sie nicht genau wissen, wann der richtige Zeitpunkt ist, Flexibilität gegen Stabilität einzutauschen. Sie müssen entscheiden, wann Sie mit dem Styleguide beginnen und wann Sie sich nur auf die Erstellung von Bildschirmen konzentrieren sollten. Ein optimaler Ansatz könnte darin bestehen, einen Styleguide gleichzeitig mit der Bereitstellung von Bildschirmen zu erstellen – auf diese Weise können Sie möglicherweise das Beste aus beiden Welten nutzen.

Beginnen Sie mit einigen UI-Inspirationen

Ein guter Anfang, insbesondere wenn Sie kein Designer sind, besteht darin, Beispiele für Designstile zu sammeln, die Ihnen gefallen, oder, was noch wichtiger ist, was die Benutzer Ihrer Meinung nach ansprechen werden. Sammeln Sie so viele Beispiele wie möglich und legen Sie sie in einen Ordner/InVision-Board/Niice-Board/etc. Sie können zusammen mit Ihrer Design-Sensibilität als Referenz und Inspiration verwendet werden. Sie können später darauf aufbauen, um eine Musterbibliothek zu erstellen.

Als ich zum Beispiel an einem Styleguide für ein Unternehmen arbeitete, das Künstler in der Unterhaltungsindustrie fördert, fragten wir uns, ob helle oder dunkle Hintergründe einen größeren Einfluss auf unsere Benutzer haben würden. Ich habe mir Hunderte verschiedener Websites in der Spiele-/Film-/Visualproduktion angesehen, um zu sehen, wie sie dunkle und helle Hintergründe verwenden.

Ich habe ein Referenzblatt erstellt, auf dem ich die häufigsten Muster hervorgehoben habe. Ein Muster, das ich identifiziert habe, war, dass Unternehmen in dieser Branche dazu neigten, dunklere Hintergründe zu verwenden, wenn sie ihre Produkte präsentierten, aber weiße Hintergründe in ihren Marketingbemühungen, E-Commerce und Geschäften verwendeten.

Sie müssen nicht so tief gehen, aber ich fand, dass visuelle Referenzen helfen, nicht nur beim Erstellen eines Styleguides, sondern auch beim Erinnern an einige der Anwendungsfälle, für die Sie möglicherweise entwerfen müssen. Sobald Sie mit den gesammelten Referenzen ein gutes Gefühl haben, können Sie mit der visuellen Gestaltung beginnen.

Entwerfen Sie solide UI-Komponenten

Bei der Arbeit in Startups ist es schwieriger, Komponenten zu erstellen als Seiten zu erstellen – zumindest am Anfang. Wenn Sie eine Seite entwerfen, haben Sie oft eine Vorstellung davon, wie sie verwendet werden soll. Das ist nicht unbedingt der Fall, wenn Sie eine Komponente entwerfen. Sie versuchen, für einen bestimmten Anwendungsfall zu entwerfen, aber Sie möchten, dass es Teil eines universellen Designsystems ist, und Sie müssen es so angehen. Beispielsweise möchten Sie möglicherweise eine Unternavigationskomponente mit drei Schaltflächen erstellen. Möglicherweise benötigen Sie es auch, um mit vier, fünf oder zehn Tasten zu arbeiten, und es muss auf Mobilgeräten, Tablets und Desktops funktionieren. Sie müssen vorausdenken.

Sie möchten ein bestimmtes Maß an Beständigkeit oder Durchhaltevermögen in einer Komponente. Gemeinsame Komponenten sollten sich nicht oft ändern, und sie müssen an vielen Stellen in Ihrem Produkt wiederverwendbar sein. Wenn Sie beispielsweise nur an einer iOS-App interessiert sind, möchten Sie Ihre Komponente anhand der Anzahl der Optionen oder der Länge des Inhalts testen, nicht unbedingt anhand der Bildschirmgröße. Die Idee ist, dass, wenn es in der Benutzeroberfläche an vielen Stellen in Ihrer App möglich ist, Sie wissen, dass es sich um eine Komponente handelt, die das Potenzial hat, Teil Ihres Styleguides zu sein.

Ein Startup muss praktisch bei Null anfangen und dann schnell handeln. Ihr Chef möchte vielleicht bis zum Ende des Tages einen gestalteten Bildschirm haben. Das heißt, man kann nicht wirklich einen ganzen Styleguide entwickeln und dann den Bildschirm erstellen. Schlimmer noch, Sie entwerfen möglicherweise einen Styleguide mit Komponenten, die nie das Licht der Welt erblicken werden, weil sich die Vision des Unternehmens geändert hat. Wie sie sagen, ist es besser, jetzt zu versenden.

Das Erstellen eines großartigen Styleguides braucht Zeit, und da er zur Grundlage Ihres Designsystems wird, möchten Sie ihn richtig machen. In einer Startup-Umgebung müssen Sie an Ihrem Styleguide mit allem im Tandem arbeiten.

Der Styleguide als lebendes Dokument

Sie sollten Ihren Styleguide als Work in Progress betrachten. Wie ein Startup, das seine Strategie herausfindet, werden Sie Ihren Styleguide im Laufe der Zeit herausfinden. Sie werden es im Laufe der Zeit bearbeiten und anpassen, bis es zur Grundlage Ihrer Benutzeroberfläche wird. Ein sinnvoller Ansatz ist es, das erste Mockup gleichzeitig mit dem Styleguide zu starten. Öffnen Sie zwei Dateien mit Ihrer bevorzugten Software (in meinem Fall Sketch); eine heißt page name und die andere styleguide . Während Sie an Ihrem Bildschirmdesign arbeiten, können Sie Ihren Styleguide mit den Elementen ausstatten, aus denen Ihr Design besteht.

Wenn Sie damit beginnen, mehr davon zu tun, werden Sie früh feststellen, dass einige Komponenten die besten Kandidaten für die Aufnahme in den Styleguide sind. Wenn Sie sich beispielsweise für einen Symbolstil entschieden haben, können alle Ihre Symbole von Anfang an in den Styleguide aufgenommen werden.

Normalerweise erstelle ich einen Abschnitt mit dem Namen „Bis jetzt erstellte Symbole“. Wenn jemand irgendwann ein Symbol benötigt, muss er zuerst diesen Abschnitt durchgehen, bevor er ein neues erstellt.

Andere offensichtlich zu berücksichtigende Elemente sind Farben, Schaltflächen, Selektoren, Titel, Kopfzeilen, Fließtext usw. Wenn Sie einen Stil speziell für das Marketing verwenden, können Sie ihn in Ihren Styleguide aufnehmen und ihn entsprechend kennzeichnen. Es ist in Ordnung, wenn Sie sich nicht vollständig auf einen bestimmten Artikel festgelegt haben. Sie können die UI-Elemente in Ihrem Designsystem später bei Gelegenheit verfeinern und den Leitfaden entsprechend aktualisieren. Vergessen Sie nicht, der Styleguide ist ein lebendiges Dokument , besonders bei einem Startup.

Wenn ich schließlich anfange, Layouts in die Anleitung einzufügen, weiß ich, dass ich anfange, einen Punkt zu erreichen, an dem alle Komponenten nahe an ihrem endgültigen Zustand sein sollten. Dieser Teil markiert den Wendepunkt im Styleguide-Erstellungsprozess – jetzt können Sie feiern! Eine gute Möglichkeit, einen solchen Meilenstein zu feiern, besteht darin, ein Logo oder Symbol (z. B. einen Namen) für die Version 1.0 des Styleguides zu erstellen.

Einige Leute gehen sogar so weit, das Logo/Symbol als Aufkleber zu drucken, damit das Team eine Art Trophäe hat. Das ist auch der Punkt, an dem ich normalerweise zur traditionelleren Arbeitsweise mit dem Guide zurückkehre, indem ich zuerst diesen Styleguide öffne und dann eine neue Datei für die gewünschte Schnittstelle erstelle.

Fazit

Indem Sie als Designer so früh wie möglich einen Styleguide erstellen, stellen Sie sicher, dass Ihr Startup einen höheren Qualitätsstandard einhält. Es mag eine Herausforderung sein, aber es ist die Mühe wert. Ein solider, abgerundeter Styleguide wird Ihnen nicht nur dabei helfen, ein besseres Produkt zu haben, sondern auch, die Entwicklungskosten zu senken.

Es gibt eine Möglichkeit, dies auch in einer schnelllebigen Umgebung zu erreichen, in der schnelle Entscheidungen getroffen werden und Designs manchmal schnell geändert werden müssen. Hoffentlich hilft der oben beschriebene Prozess Designern in jedem Startup, die Herausforderungen von Komplexität und Geschwindigkeit zu bewältigen und gleichzeitig einen robusten Styleguide zum Nutzen des Produkts zu erstellen.

• • •

Weiterführende Literatur im Toptal Design Blog:

• eCommerce UX – Best Practices im Überblick (mit Infografik)
• Die Bedeutung von Human-Centered Design im Produktdesign
• Die besten UX-Designer-Portfolios – inspirierende Fallstudien und Beispiele
• Heuristische Prinzipien für mobile Schnittstellen
• Antizipatorisches Design: Wie man magische Benutzererlebnisse schafft