3 Online-Styleguides, die es richtig machen
2015 schien das Jahr von Styleguides . Es ist zwar fantastisch zu sehen, wie immer mehr Websites ihre Designrichtlinien online teilen, aber es gibt einige Punkte, die zu berücksichtigen sind, wann Erstellen Sie Ihren eigenen Styleguide .
Unterstützen Sie zunächst Ihre Designelemente mit klaren Anweisungen. Es gibt eine Reihe von Webdesign Style Guide Beispiele, die alle Elemente eines Design-Systems enthalten, aber nur wenige oder gar keine Informationen darüber enthalten, wann und warum sie verwendet werden sollen. Wenn Sie Dos and Don'ts, Bildunterschriften und Etiketten schreiben, kommunizieren Sie so, als würden Sie das Team verlassen, möchten aber, dass das System weiterlebt. Teilen Sie die Ziele des Systems und seiner Elemente sowie Ihre Erwartungen an die Ergebnisse mit. Seien Sie im Einklang mit Stimme und Ton.
Zweitens betrachten Sie die Entwicklung des Designs. Schließen Sie Muster ein, die jetzt möglicherweise nicht existieren, aber möglicherweise in Zukunft. Wenn man bedenkt, wie sich Muster entwickeln, bleibt ein Design-System länger an Ort und Stelle. Starbucks 'älterer Styleguide enthält möglicherweise nicht viele unterstützende Inhalte, verwendet jedoch Beispiellayouts in seinem Rastersystem, die in der vorherigen Version der Website nicht regelmäßig verwendet wurden.
Nutzen Sie abschließend den interaktiven Styleguide. Erstellen Sie Elemente, die das Design mehrerer Geräte und die verschiedenen Zustände dieser Elemente unterstützen (z. B. das Schweben auf Schaltflächen), und entwerfen Sie dann den Styleguide, um diese Muster und Interaktionen widerzuspiegeln. Wenn ein Styleguide zeigen kann, wie sich Elemente ändern, wenn ein Benutzer mit ihnen interagiert, fügt er der Erfahrung eine zusätzliche Tiefenebene hinzu.
Hier sind drei gute Beispiele.
01. NC.gov
NC.govs Styleguide Enthält unterstützende Beschriftungen für Design- und Markup-Muster, die den Ton für die Verwendung dieser Elemente festlegen.
02. CodePen
CodePen-Handbuch hat mehrere Schaltflächenzustände, ein ansprechendes Raster, das seinem Rastersystem folgt, und geht tief in die Formvalidierung ein.
03. Frontify
Frontify, ein Service, der bei der Erstellung von Styleguides hilft, verwendet sein eigenes Produkt, um seine zu erstellen Gestaltungsrichtlinie . Das Ergebnis ist gut organisiert und geht bis ins kleinste Detail.
Wörter :: Sam Kapila
Sam Kapila ist ein in Texas lebender Designer und Dozent bei The Iron Yard, einer internationalen, immersiven Codierschule. Dieser Artikel erschien ursprünglich in Ausgabe 277 von Netzmagazin .
Mochte dies? Lese das!
- Nail Styles Guides mit dieser Mini-Meisterklasse
- Wir enthüllen das Beste Web-Schriftarten für Ihre Website
- Sehen Sie sich diese atemberaubenden Beispiele an Pointillismus
- Diese Adobe Illustrator-Tutorials wird Sie tagelang beschäftigen
- Schauen Sie sich diese inspirierenden Beispiele an 3D Kunst
