it-swarm.com.de

wie man einen Styleguide für ein Team von 2-4 implementiert

Ich lese gerade Lean UX und es gibt eine Idee, die ich noch nie zuvor gelesen habe.

Es geht um Styleguide.

Ich würde das gerne umsetzen, aber mit einem möglichst geringen Platzbedarf für den Anfang.

Ich bin ein Softwareentwickler. Normalerweise arbeite ich mit einem Grafikdesigner zusammen, der keine Erfahrung mit HTML/CSS hat. Normalerweise produziert er ein Design entweder in psd oder ai.

Wie erstelle ich einen Styleguide, der für einen nicht-technischen Grafikdesigner und mich für die Zusammenarbeit einfach zu verwenden ist?

Ich möchte den Styleguide wie eine lebende Dokumentation. Vorzugsweise sollte es auch HTML/CSS-Code der Elemente enthalten, die ich leicht kopieren und einfügen kann.

Muss ich

  • suchen Sie einen Server und installieren Sie ein Wiki?
  • google Docs verwenden?
  • etwas anderes benutzen?

Ich habe dies gelesen X Style Guide Techniken aber ich möchte etwas für ein kleines Team von 2-4.

8
Kim Stacks

Ich habe Erfahrung mit drei verschiedenen Tools zum Erstellen von Styleguides:

Confluence Der erste von mir implementierte Styleguide wurde mit Confluence erstellt. Es war eher eine Entwurfsmusterbibliothek, die Muster und Best Practices für die häufigsten Entwurfsprobleme der Benutzeroberfläche enthielt. Jedes Muster enthielt ein Beispielbild, eine Beschreibung, wie es funktioniert und warum es verwendet werden sollte, und zugehörige Designdateien. Es wurde hauptsächlich von Designern verwendet, Entwickler fanden es nicht so nützlich, da es keine Codebeispiele für deren Implementierung gab.

WordPress-Blog mit Pea.rs-Thema Irgendwann haben wir pea.rs , ein Open Source WordPress Theme, das WordPress Blog zu einem Musterbibliothekstool macht. Entwickler mochten es etwas, da es CSS & HTML für die Musterbeispiele verwendet, die Entwickler im Code verwenden können. t Unterstützung mit Twitter Bootstrap in den Beispielen nicht jQuery, und Designer mochte es nicht, weil es einige wichtige Funktionen fehlte, die sie wie das Hochladen von Dateien für das Design benötigen würde

Patternry Jetzt verwenden wir Patternry , ein gehostetes Styleguide-Tool. Was uns besonders gefällt, ist die Möglichkeit, Twitter Bootstrap in den Musterbeispielen) zu verwenden, die Mustervorlagen anzupassen und den Live-Editor für Markups und Stile zu verwenden, um das Modellieren von Designs im Internet zu vereinfachen Was uns nicht gefällt ist, dass das Produkt noch etwas unausgereift ist, einige der Funktionen nicht wie erwartet funktionieren, keine Versionskontrolle haben und sich nicht in eine externe Versionskontrolle integrieren lassen System.

3
Binarydude

Aufgrund meiner Erfahrung mit der Erstellung einiger Styleguides in verschiedenen Formaten (HTML, Wiki, PDF, Doc) fand ich, dass einfache statische HTML-Seiten die größte Flexibilität bieten. In der Regel sind es Entwickler, die die Erstellung von Web-Style-Guides vorantreiben, da sie der Hauptnutznießer sind. Infolgedessen liegt die Last für das Erstellen und Verwalten wahrscheinlich zunächst bei Ihnen. Beginnen Sie daher mit der einfachsten Methode, nämlich statischen HTML-Seiten.

Wenn Sie später Buy-Ins von anderen Stakeholdern erhalten, ist es nicht schwierig, den gesamten Inhalt für Nicht-Entwickler-Mitwirkende auf Wiki oder Confluence zu übertragen.

Der Styleguide von Starbucks beweist, dass Sie keine ausgefallene Wiki/Collaboration-Software benötigen. http://www.starbucks.com/static/reference/styleguide/

2
Jung Lee

Wenn die Arbeit mit einer Marke, die Sie möchten, stark sein und bleiben soll, was dazu führen kann, dass Personen an entfernten Standorten mit ihr arbeiten, wenn keine Redakteure an Ihren Inhalten arbeiten, um sicherzustellen, dass Standards beibehalten werden, um ein einheitliches Markenerlebnis für alle Besucher zu gewährleisten sicher auch erstellen und immer pflegen:

  • redaktionelle Standards und wählen Sie einen allgemeinen kommerziellen Styleguide für Ihre schriftlichen Inhalte (wie Associated Press (AP) oder Chicago Manual of Style)

  • fotostandards (Welchen Fotografie-Stil wird Ihre Marke verwenden? IE Reportage, Objekte/Personen, die immer so umrissen sind, dass der Hintergrund weiß ist, oder ...?

  • UX-Designbibliothek, die den Stil Ihrer Marke für verschiedene Interaktionen zeigt

  • bevorzugte Schriftarten (für Seitentitel und Untertitel, für allgemeinen Text, für Bildunterschriften, für Diagramme und Grafiken)

    • farbpaletten: Primärfarben, Sekundär- und potenziell Tertiärfarben, die in verschiedenen Fällen und unter verschiedenen Umständen verwendet werden können (verwendete Farbpaletten für Schwebeflug/Klick/Balkendiagramm, Titelstile und Farben)

Stellen Sie sicher, dass Sie auch Nicht-Web-, Druck- und andere Standards sowie E-Mail-Standards und Präsentations-, Eventdekor-, Papier-, Verpackungs-, Swag-Stile und Ausführungsstandards usw. einbeziehen.

Zu technischen Standards, die Sie möglicherweise auch benötigen/müssen, gehören Social-Media-Standards, Barrierefreiheitsstandards und Namenskonventionen, insbesondere wenn mehrere Personen/Teams ein oder mehrere zentralisierte Content-Management-Systeme verwenden.

Stellen Sie sicher, dass Sie aktualisieren, wenn Teile Ihrer Standards aktualisiert werden!

0
SafetyFirst

Ich persönlich benutze dafür gerne Wiki (wir verwenden Confluence). Ich bevorzuge die Verwendung des Namens "Design Guide" anstelle von "Style Guide", da dieser breiter ist und unser Guide so ziemlich alles enthält, was Sie zur Verwendung unserer Widget-Bibliothek benötigen.

  • Wir haben eine Wiki-Seite mit allen aufgelisteten UI-Komponenten, die jeweils auf einer eigenen Seite ausführlich beschrieben werden und von jedem bearbeitet oder kommentiert werden können
  • Auf der Seite finden Sie eine Übersicht, einen Entwurf mit Messungen, definierten Interaktionen, Empfehlungen zur Verwendung der Komponente, zugehörige Komponenten, Entwicklungsanweisungen für die Verwendung der Komponente (die API für die Widget-Bibliothek) und die detailliertere Implementierung, die als Referenz beschrieben wird.
  • Da wir JIRA for Dev-Tickets verwenden, listen wir außerdem alle Tickets auf, die auf diese Seite verlinken. Die Dev-Tickets beschreiben das Design nicht, sie beziehen sich auf den Design Guide oder auf Seiten, die einzelne Designs beschreiben (die wegwerfbarer sind, da der Design Guide immer auf dem neuesten Stand gehalten wird).
  • Wir haben schrittweise mit der Erstellung des Design-Handbuchs begonnen, wenn wir neue Komponenten in der Benutzeroberfläche benötigen

Ich hoffe, das hilft Ihnen beim Einstieg. Wir verwenden dies in unserem Team, wo wir einen UX-Desinger/PM (mich), zwei Front-End-Entwickler und einen gfx-Designer haben. Der Design Guide hilft dem Branding und anderen Teilen des Unternehmens, den Überblick über die Entwicklungen in der Front-End-Entwicklung und unseren neuen Benutzeroberflächen zu behalten

0
Skuirrel