Brad Frost hat mir kürzlich einige Folien von einem seiner Vorträge gezeigt. Er hatte einige Grafiken, die verschiedene Ansätze zeigten, wo eine Stilrichtlinie in den Prozess eines Teams passen kann. Wie Sie sich vielleicht vorstellen können, ist es die Frage, ob man überhaupt eine hat oder nicht, die über ihre Wirksamkeit entscheidet.
Ich dachte, ich versuche, meine eigenen Gedanken zu diesen Ansätzen basierend auf meinen eigenen Erfahrungen zu erklären.
Am Rande
Oder vielleicht könnten wir es das „Nach der Tatsache“-Modell nennen. Die Idee ist, dass Sie eine Stilrichtlinie *haben*, aber es ist diese separate Sache, die außerhalb des eigentlichen Prozesses existiert. Sie müssen sie separat pflegen und aktualisieren. Änderungen an der Website spiegeln sich nicht in der Stilrichtlinie wider, es sei denn, Sie nehmen sich die Zeit dafür. Änderungen an der Stilrichtlinie spiegeln sich nicht in der Website wider, es sei denn, Sie tun dies.
Nützlich als Referenz, vielleicht. Ich habe an einer Stilrichtlinie wie dieser gearbeitet. Es dauerte lange, bis sie überhaupt genutzt wurde, und sie wurde schnell wieder aufgegeben.
Der Diktator
Bei diesem Ansatz ist die Stilrichtlinie *das Gesetz*. Nichts geht in die Produktion, das nicht Teil der Stilrichtlinie ist. Wenn etwas auf der Website benötigt wird, wird es in die Stilrichtlinie integriert und ist dann auf der Website nutzbar.
Die Akzeptanz der Stilrichtlinie ist natürlich hoch, weil sie sein muss. Alles ist dokumentiert. Das sind potenziell gute Dinge. Dies ist auch potenziell frustrierend – der Prozess kann langsamer sein, was traurig ist, da Geschwindigkeit ein Hauptgrund für die Verwendung einer Stilrichtlinie ist.
Es besteht auch die Gefahr, dass Sie „eine Stilrichtlinie gestalten“ und nicht „eine Website gestalten“.
Die Hippie-Kommune
Alles ist verbunden, *Kumpel*. Die Stilrichtlinie baut die Website auf, aber die Website baut auch die Stilrichtlinie auf. Es ist nur ein Satz von Assets, die auf unterschiedliche Weise verpackt sind. Eine Art sieht aus wie eine Stilrichtlinie, eine Art sieht aus wie eine Website.
Das kann nett sein, da Sie an beiden arbeiten und die Änderungen in beiden widerspiegeln könnten. Die einzige potenzielle Gefahr hierbei ist, dass es zu gut sein könnte, um wahr zu sein. Diskussionen könnten auseinanderfallen. Die Stilrichtlinie wird möglicherweise nicht so aktuell gehalten, wie Sie vielleicht annehmen würden.
Der Auspuff
In diesem Modell arbeiten Sie im Allgemeinen an der Website selbst. Die Stilrichtlinie wird aus Produktions-Assets erstellt. Sie wird im Wesentlichen Teil des Tests. „Sieht die Stilrichtlinie nach diesen Änderungen noch korrekt und kohärent aus?“ Die potenzielle Gefahr dieser Methode ist, dass die Leute die Richtlinie wegen ihrer Platzierung am Ende des Prozesses nicht mehr beachten.
Die CodePen Style Guide ist so etwas in der Art, aber ich hoffe, sie noch mehr in Richtung Hippie-Stil zu entwickeln.
Die Antwort
Nie eine, fürchte ich.
Für viele weitere Informationen besuchen Sie StyleGuides.io und den Podcast von Brad Frost und Anna Debenham.
Es ist nicht spießig, es ist ganzheitlich! Die einzige Schwierigkeit, die Sie haben, ist, wenn ein Designer mit dem Webgelände nicht vertraut ist und versucht, die exekutive Kontrolle auszuüben, was zu Leid für alle Beteiligten führt und letztendlich zu verwaschenem Müll führt, der schwer anzupassen und zu codieren ist, ohne zu schummeln.
Diese Kreaturen sind leicht zu erkennen, sie tragen normalerweise Brogues ohne Socken. Meiden Sie sie wie die Pest! :-)
Davon abgesehen ist die Gestaltung von Marken über verschiedene Medien (d. h. Druck und Web) immer noch eine seltene und beeindruckende Fähigkeit. Sie wird selten gelehrt oder diskutiert, selbst auf BA-Niveau. Das weiß ich aus Erfahrung, als ich versuchte, mit Design-Praktikanten zusammenzuarbeiten, die buchstäblich keine Ahnung haben und in kalten Schweiß ausbrechen, wenn sie aufgefordert werden, Vorlagen für Seiten zu erstellen.
Darüber hinaus (und mehr im Einklang mit Ihrem Artikel) ist die Schaffung eines zweiseitigen Dialogs zwischen Designer und Coder entscheidend für den Erfolg eines Projekts.
Als Art Director gebe ich dem Stil (der UX/UI beinhaltet) Vorrang und Voreingenommenheit, da dies *vor* den Produktionsaspekten der Codierung und Funktionalität vom kreativen Team und Marketingteam festgelegt werden sollte.
Letzte Sache: Die Funktion bestimmt das Design! Jony Ive, ich spreche mit Ihnen und dem Abendessen Ihres Hundes namens Yosemite!
Diktator meldet sich. Ich bin ein selbst bekennender Kontrollfreak und lebe und sterbe nach den in der Stilrichtlinie festgelegten Stilen. Ich mag Absolutheit. Ich mag viel Vordenken und Planung, selbst bei einem scheinbar einfachen Auftrag. Auf einer CMS-Website, die an einen Kunden übergeben wird, der wenig Design-Know-how hat, aber sich selbst verwalten möchte, bereitet es ihn auf den Erfolg vor, da er bereits eine gute Vorstellung davon hat, wie er alles von Überschriften 1 bis 6, Schaltflächen und anderen Elementen, mit denen er interagieren wird, am besten nutzt. Besser noch, die meisten dieser Dinge können über das WYSIWYG des CMS leicht eingestellt werden, indem man einfach etwas Text auswählt und aus einem Dropdown-Menü „blockquote“ wählt, zum Beispiel, so ist es wirklich gesperrt. Wir sehen fast nie eine von Kunden verwaltete Website mehr, die eine Wand aus Großbuchstaben, Fettdruck und Comic Sans Text ist. Für solche Szenarien kann es sogar ein Lehrmittel sein.
Diktator.
Wenn es nicht mit der akzeptierten Stilrichtlinie übereinstimmt – dann sollte es einen verdammt guten Grund dafür geben, angehängt zu werden. Andernfalls ändern Sie es, um es an die Stilrichtlinie anzupassen.
Es ist der beste Weg, Kohärenz über Medien, auf verschiedenen Seiten derselben Website und in Ihrer Markenbotschaft zu wahren.
Es dauert länger, die Website fertigzustellen, aber die Wartung ist danach viel einfacher. Was jeder Programmierer und Coder zu vergessen scheint, ist, dass die Wartung die Produktion irgendwann überholen wird.
Die Wartung wird auf lange Sicht mehr Zeit in Anspruch nehmen – auch wenn die anfängliche Produktion aufgrund der religiösen Befolgung einer Stilrichtlinie langsamer war.
Nimm einen Bleistift und zeichne ein Quadrat.
Sind die gegenüberliegenden Seiten parallel, gleich lang? Alle Ecken rechte Winkel?
Ist es wirklich ein gutes Quadrat, basierend auf Ihrer Fähigkeit, das Medium, den Bleistift, zu beherrschen?
Sie werden es wissen, weil die Stilrichtlinie eines Quadrats Teil von Ihnen ist und Sie sie nie in Frage stellen müssten, sie ist einfach Teil des bekannten Substrats dieser Zeichnung, die Sie gerade machen.
Ein wirklich talentierter visueller Designer gibt Ihnen dieses Substrat und Sie können es kaum erwarten, es in HTML/CSS/JS zu realisieren, und wenn Sie wirklich gut sind, werden Sie bis zu einem gewissen Grad wissen, ob Ihre Darstellung getreu ist.
Werden Sie jemals eine vollständige Stilrichtlinie erhalten? Nein. Sie werden mit einem neuen Panel zum visuellen Designer zurückkehren, das nicht zu den Paradigmen der anderen Panels passt. Und der Designer wird Ihnen, wenn er wirklich gut ist, eine neue, immer funktionsreichere Version dieses Quadrats geben. Es wird so „richtig“ sein, dass Sie mit noch größerer Begeisterung zu Ihrer Tastatur zurückrennen und denken: „Float! Nein! Inline! Nein! Inline-Block! Ja!!!“
So hat die Stilrichtlinie einen Platz, aber sie umgibt, unterstützt und inspiriert. Und Sie müssen sich überhaupt keine Gedanken über die Wartung machen, der visuelle Designer wird das automatisch tun, während er auf Ihre fortlaufenden Bedürfnisse reagiert.
Es funktioniert tatsächlich so in der realen Welt – aber nur, nur, nur, wenn Sie einen großartigen visuellen Designer haben, und nur, nur, nur, wenn Sie in der Lage sind, zu reagieren...
Ich finde eine Mischung aus Diktator und Randbedingungen funktioniert gut: Sie aktualisieren die Stilrichtlinie in Phasen, basierend auf der letzten Runde der Design-Iterationen. Das ist die Randbedingungen-Phase. Aber sie wird zum Diktator für die NÄCHSTE Phase. Nicht zu diktatorisch am Anfang, eher, wenn sie sich ausformt. Sonst kann sie sich nicht ausformen. Früher ist sie dazu da, zu leiten, aber oft ignoriert zu werden.
Nennen wir es... Den Beifahrer?
Ich denke, das ist ein Thema, das viel Kontroverse mit sich bringt. Meiner ehrlichen Meinung nach sind Stilrichtlinien gut für große Projekte, aber für ein schnelles Entwicklungsprojekt werden sie oft nicht genutzt.
Und hässlicher Mist entsteht... Ich denke, die Geschwindigkeit, mit der ein Projekt voranschreitet, hängt teilweise von den Fähigkeiten/Erfahrungen der Beteiligten ab. Die meisten verpfuschten Projekte, die ich gesehen habe, brauchten nur ein oder zwei Stunden am Anfang des Prozesses und möglicherweise ein oder zwei Stunden am Ende, um die Arbeit richtig abzuschließen (und das liegt normalerweise daran, dass diese zusätzliche Stunde oder zwei Vorbereitung am Anfang die Misskommunikation und das Missverständnis gelöst hätte).
Grundlegend sprechen wir hier auf einer CSS-Website über die Verbindung zwischen einem Designer und einem Front-End-Entwickler (wenn es verschiedene Personen sind). Ich arbeite nur mit Front-End-Entwicklern zusammen, die Design wirklich verstehen. Ich bin immer wieder erstaunt über Leute, die CSS können, aber kein Design verstehen. Von ihnen bekommen Sie normalerweise schreckliches CSS.
ziemlich auf Eis gelegt, ich liebe diese Website absolut, schönes Thema.
Ich bin Lehrer und pflege oder implementiere keine Produktionsseiten, daher kann ich nichts zum Team-Aspekt sagen. Für mich sind Stilrichtlinien ein wesentliches Kommunikationsmittel in der Designphase. SGs geben Designern und Kunden eine einfache Möglichkeit zur Zusammenarbeit. Eine gute Stilrichtlinie ist ein Artefakt dieses Prozesses. Ich erwähne das, weil ich kürzlich von Style Tiles (styletil.es) erfahren habe und WOW. Das Konzept ist so gut – ich musste es einfach teilen.
Hey Chris –
Vielen Dank für die Behandlung eines großartigen Themas, da ich an fast allen genannten Variationen beteiligt war. Über die von Ihnen skizzierten Modelle hinaus gibt es eine weitere Taktik, die meiner Meinung nach funktionieren könnte und die ich derzeit untersuche. Ich habe dieses Jahr an der SXSW Interactive teilgenommen und an einem Panel namens Style Frameworks von @martigold von Tonic3 teilgenommen. Neben einem großartigen Panel, bei dem sie ihre Folien improvisieren musste (kein Projektor), brachte sie eine Fülle von Erkenntnissen in die Unterhaltung, die meiner Meinung nach die Schwierigkeit berührten, die wir alle mit Stilrichtlinien haben. Nämlich, niemand will präskriptive Standards, weil sie nicht verwendet werden.
Ihr Vortrag konzentrierte sich auf ein Style Framework, bei dem Sie keine Lego-Blöcke vordefinieren (z. B. Spezifikationsdokumente mit tatsächlichen Maßen erstellen), sondern nur die Komponenten oder die Blöcke selbst erstellen.
Anstatt einer Diktatur ist es eher eine Republik, in der jeder einen Anteil hat und für die Teile verantwortlich ist, für die er sich begeistert. (z. B. Sie mögen Akkordeons? Großartig. Sie besitzen Akkordeons im Framework usw.). Eigentum ist wie ein Rechenzentrum, in dem jeder beiträgt/auffüllt, wie nötig. Jeder besitzt einen Standard, aber nicht DIE Standards. Das Einverständnis von UX, Entwicklung, Marketing und PM ist alles wichtig, damit es keine Silos gibt.
Sie hat eine Website erstellt, die hier kostenlos herunterladbar/teilbar ist: http://www.styleframework.com
Ich mag auch die Organisation der Website als Modell für den Aufbau Ihres eigenen Style Frameworks. Unter anderem hat sie Überschriften wie „Welche Probleme löst diese [Komponente]?“, „Speicherort der Assets“, „Eigentum und Governance“, „Kommentare & Fragen“ usw. Ich empfehle den Leuten dringend, sich dort Inspiration zu holen. Ihre Folien sind auch auf Slideshare online verfügbar.
Vielen Dank nochmals für diesen aufschlussreichen Beitrag.
Anthony Rezendes
@arezendes
Vielen Dank, Chris, für den Beitrag. Für mich war es bei einer meiner früheren Tätigkeiten der Diktator und danach eine Mischung aus Randbedingungen und Auspuff. Tatsächlich ist das einer der Gründe, warum ich mich dieser Aufgabe gewidmet habe, die Richtlinie in den Dokumentationsprozess zu integrieren. Jetzt stellen wir sicher, dass sie eher dem Diktator entspricht.
Ich glaube fest daran, dass das Hippie-Kommune-Modell am nützlichsten ist. Normalerweise codiere ich eine Seite, füge dann das CSS hinzu, und erstelle dann aus der Gesamtausgabe mehrerer Webseiten ein Stilhandbuch. Zu diesem Zeitpunkt befinde ich mich im Randbedingungen-Modell. Wenn eine Website wächst, beginne ich, die CSS-Regeln zu einem eher Auspuff-Modell zu verfeinern, bis es zu einer reifen Hippie-Kommune werden kann. Das Randbedingungen-Modell neigt dazu, aus den Regeln mehrerer Websites zu wachsen. Da diese thematisch unterschiedlich sind, dauert es eine Weile, bis die Regeln für eine thematische Website in die Stilrichtlinie für eine einzelne Website eingegrenzt sind. Ich habe viel aufzuräumen, um meine reife Hippie-Kommune zu entwickeln, aber das ist mein Ziel für zukünftige Websites.
Bei den Websites, die ich als Kleinunternehmer erstelle, finde ich Ihre Modelle ausdrucksstark für die Lektionen, die ich auf dem Weg gelernt habe. Stilrichtlinien sind für mich nützliche Ausgangspunkte für all meine Websites. Außerdem bin ich der einzige Coder für meine Websites, also kann ich meine Stilrichtlinien beliebig nutzen und missbrauchen. Dennoch sehe ich die Notwendigkeit eines Satzes grundlegender Stilrichtlinien, die ich leicht an das Thema der neuen Website anpassen kann.
Vielen Dank für die Konzeptualisierung dieser Modelle. Es hilft, meine eigenen früheren Handlungen zu klären und könnte zukünftige Handlungen effizienter machen – sobald ich meine Stylesheets tatsächlich aufgeräumt habe!!
Bei WGU verwenden wir die Exhaust-Methode, wenn auch mit Einschränkungen. Wenn Sie Dutzende von experimentellen Designelementen und Stilvariationen für Conversion-Tests und verschiedene Abteilungszwecke erstellen, ist ein guter Teil Ihrer Website-Styles transient. Wir haben einen Teil des Stylesheets der Website, der nur als experimentell gekennzeichnet ist, und diese Dinge können irgendwann in die offizielle Stilrichtlinie aufgenommen werden oder auch nicht.
Als Design-Entwickler habe ich die besten Ergebnisse erzielt, wenn eine allgemeine Stilrichtlinie bereits abgeschlossen ist und schnell für das Web verfeinert wird. Dies sollte im ersten Quartal der Projektlebensdauer erfolgen. Dann sollten, je nach Bedarf während der Entwicklung, budgetierte Designer beauftragt werden, Konzepte für alle Sonderfälle zu erstellen, die immer auftreten.
Zu oft frisst der Designprozess viel zu viel Zeit, sodass die Entwickler hinterher aufräumen müssen, wenn die Designer zu einem anderen Projekt gewechselt sind. Es ist viel billiger, wenn ein Designer ein paar Konzepte mit dem Kunden durcharbeitet, als ein Entwickler, daher müssen sie bis zum Ende verfügbar sein.
Meine bevorzugte Methode könnte also als „Die Hippie-Gefängnis-Kommune“ beschrieben werden: eine Kurzhantel, bei der die linke Seite die Designphase der allgemeinen Stilrichtlinie ist und die rechte Seite die Hippie-Kommune umschließt. Das Projekt profitiert von einer gründlichen Design-Erkundung, einer langen Entwicklungszeit und Designern, die im Projekt gebunden sind, um die Entwickler zu unterstützen.