• Haupt / Merkmal

Webdesign-Automatisierung: Optimieren Sie Ihren Designprozess

Es war einmal eine Zeit, in der das Wort 'Automatisierung' im Kopf des professionellen Webdesigners hauptsächlich negative Konnotationen hervorrief. Es hat dich an programmatisch denken lassen Webdesign-Tools Dies führte zu billigen, aber schlecht codierten Websites für diejenigen, die sich die Dienste eines professionellen Designers nicht leisten konnten (im Gegensatz zur neuen Generation von Webseitenersteller ). Oder vielleicht die Art von Basisdienstleistung, die Sie selbst einem bargeldarmen Kunden mit einem vorgefertigten anbieten würden WordPress-Theme oder Drupal-Vorlage .

• Hauptabbildung: Marcus Ohnmacht

Aber das ändert sich alles. Die Automatisierung des Webdesigns ist nicht nur für Kunden am unteren Ende der Lebensmittelkette wichtig. Es wird auch für diejenigen am oberen Ende immer relevanter. Das liegt daran, dass in einer Welt, in der die Die größten Unternehmen sind zunehmend designorientiert - denken Airbnb , Uber oder Deliveroo - die digitalen Dienste, die erforderlich sind, um die heutigen globalen Verbraucher bei Laune zu halten, übertreffen die Fähigkeiten eines einzelnen Designers oder eines kleinen Teams, das einzelne, maßgeschneiderte Seiten erstellt.

Und da Kunden größere und komplexere Lösungen verlangen (wenn Sie eine komplexe Site haben, benötigen Sie diese) Web-Hosting das kann mithalten), hat die Popularität von Komponentenbibliotheken und Entwurfssystemen zugenommen, wodurch ein Element der Automatisierung in den Entwurfsprozess einbezogen und dessen Skalierung unterstützt wurde.

Wenn Sie ein kleiner Webshop sind, der hauptsächlich für kleine Unternehmen arbeitet, hat dies möglicherweise noch keine Auswirkungen auf Sie. Aber ohne zu wissen, wohin Ihre Kunden, Ihre Karriere oder die Gesellschaft insgesamt als nächstes gehen, ist dies immer noch ein Trend, über den wir alle Bescheid wissen müssen. Wir prüfen also, wohin der Automatisierungszug fährt und wann ein guter Zeitpunkt ist, um an Bord zu springen.

Musterbibliotheken

Die einfachste Form der Automatisierung im Webdesign ist die Musterbibliothek. Es wird auch als Komponentenbibliothek oder Mustersprache bezeichnet und ist im Wesentlichen eine Sammlung wiederverwendbarer UI-Elemente, aus denen eine Website besteht. Dies können beispielsweise Formulareingaben, Schaltflächen, Bereiche, Navigationsleisten, Bildschieberegler, verwandte Links und Funktionen für soziale Medien sein.

Eine Musterbibliothek definiert, wie all diese Elemente aussehen, wie sie funktionieren und wie sie codiert sind. Einige gute Beispiele sind die von MailChimp , Einsamer Planet und auch Eine Liste auseinander .

Nur weil Musterbibliotheken im Trend liegen, heißt das nicht, dass Sie sie unbedingt verwenden sollten. 'Ich würde sagen, wenn Sie nur eine Website und einen Satz von Komponenten haben, ist eine Musterbibliothek möglicherweise übertrieben', sagt Andy Budd, Mitbegründer und CEO der in Brighton ansässigen UX-Beratungsfirma Clearleft . 'Wenn Sie nur zwei oder drei Designer haben, sprechen diese gut miteinander und Sie speichern alle Ihre Dokumente in einer gut strukturierten Skizzen- oder Photoshop-Datei. Sie brauchen wirklich keine.'

Wenn Sie nur eine Website und einen Satz von Komponenten haben, ist eine Musterbibliothek möglicherweise übertrieben

Cellyn Tan, Designerin für digitale Produkte bei der Londoner Digitalberatung Roter Dachs stimmt zu. „Wir nutzen in unterschiedlichem Maße sowohl Musterbibliotheken als auch Entwurfssysteme“, sagt sie. „Wie weit wir bei der Systematisierung und Aufrechterhaltung einer Benutzererfahrung gehen werden, hängt jedoch von den Prioritäten des Projekts ab. In einem relativ kleinen Produktteam lässt sich die Einhaltung einer Reihe von Gestaltungsprinzipien, einer konsistenten typografischen Hierarchie und von Farbschemata nur mit gut organisierten Dateien und Gesprächen verwalten. “

Ein Design-System im gesamten Team implementieren? Anständig Cloud-Speicher wird dazu beitragen, dass die Dinge zusammenhalten.

Für Daniel Smith, CEO der in Bournemouth ansässigen Agentur für digitales Marketing Fireworx Bei diesem Gleichgewicht geht es darum, die Bedürfnisse und Erwartungen der Kunden zu erfüllen. „Bei einigen Unternehmen, für die wir arbeiten, ist alles auf ihren Plattformen maßgeschneidert, sodass die Automatisierung keine große Rolle spielt. Es ist eine maßgeschneiderte Lösung “, sagt er. 'Ich habe immer darauf geachtet, dass Sie als Agentur eine Reihe von Tools haben und wir vor allem das beste Ergebnis für einen Kunden erzielen möchten.'

Bei einigen Projekten kann das Erstellen einer Musterbibliothek jedoch erhebliche Vorteile bieten. Wenn Sie die Notwendigkeit beseitigen, Elemente immer wieder von Grund auf neu zu erstellen, bedeutet dies: Je mehr Ihre Vorgänge skalieren, desto konsistenter können Sie den Benutzern sein, desto weniger repetitiv wird Ihre Entwurfsarbeit und desto produktiver - zumindest theoretisch - Ihre Betrieb wird.

Das ist sicherlich was für eine digitale Agentur Masters Allen hat seit der Umstellung auf einen stärker automatisierten Ansatz festgestellt, sagt Senior-Entwickler Tim Jarram. „Wir verfügen jetzt über eine vertraute Codebasis auf allen unseren Websites, mit der wir schnell und effizient arbeiten können“, sagt er. 'Infolgedessen haben wir festgestellt, dass wir intelligenter arbeiten und unseren Kunden einen klareren, effektiveren Entwurfs- und Bauprozess bieten konnten.'

Entwurfssysteme

Obwohl der Begriff 'Musterbibliothek' häufig synonym mit den Begriffen 'Design System' und 'Style Guide' verwendet wird, gibt es wichtige Unterschiede zwischen ihnen. Kurz gesagt, ein Styleguide definiert die Grundlagen einer Benutzeroberfläche wie Farben und Typografie. Die Musterbibliothek ist ein Speichersystem für ihre Komponenten. und das Designsystem erklärt, wie diese beiden Teile miteinander verbunden sind und zusammenarbeiten.

Es gibt jedoch keine feste Regel, was ein Design-System enthalten oder tun muss. „Ein Designsystem ist ein bisschen wie eine Marke“, erklärt Craig Frost, Designleiter bei Pusher , ein Spezialist für Echtzeittechnologien mit Sitz in London.

'Eine Marke ist nicht nur ein Logo, sondern eine breitere, matschigere Sache. Und ich denke, ein Design-System ist auch eine breite, matschige Sache. Unabhängig davon, ob Sie eine Software, eine API, eine Benutzeroberfläche, einen Inhalt oder was auch immer entwerfen, können Sie mit einem Entwurfssystem herausfinden, wie Sie Ihre Ideen kommunizieren, und sie dann so festigen, dass sie leicht zu vermitteln sind Andere.'

Werkzeuge aufrüsten

Das Erstellen Ihres Designsystems ist jedoch nur ein Schritt auf dem Weg zur Automatisierung Ihrer Webdesigns. Als Nächstes finden Sie ein Tool, mit dem Sie diese Systeme verwalten, kuratieren und zentralisieren können. Viele Teams erstellen ihre eigenen, aber Sie möchten möglicherweise nur eine Standardlösung verwenden, z Fraktal .

Dies ist ein Tool, das Clearleft für seine eigenen internen Zwecke erstellt hat und das der Community seitdem als kostenloser Open-Source-Download zur Verfügung gestellt wird. Sie können damit nicht nur Komponentenbibliotheken für Ihre Webprojekte erstellen, sondern auch eine integrierte Dokumentation erstellen sowie eine API mit vollem Funktionsumfang, mit der Entwickler diese Bibliotheken in ihre Tools und Produktionsbuilds integrieren können.

„Fraktal ist die zentrale Quelle der Wahrheit, zu der jeder in der Organisation geht. Hier befindet sich Ihre gesamte Dokumentation “, erklärt Budd. 'Hier würden Sie beispielsweise sagen:' So sieht eine Schaltfläche aus. Hier sind fünf Schaltflächenstile und hier der Code für jede Schaltfläche. Und dies sind unsere drei Layouts. “Es ist dieser zentrale Speicherplatz. Für alle, die ein Design-System haben, möchten Sie so etwas. '

Wie genau Sie Ihr Design-System in Ihren Workflow integrieren, hängt vom Umfang des Projekts und den von Ihnen verwendeten Technologien ab. Eines ist jedoch sicher: In diesem Bereich gibt es derzeit viele Innovationen, und es lohnt sich auf jeden Fall, sich nach dem besten Werkzeug für den Job umzusehen.

Die vom Airbnb-Designteam veröffentlichte React Sketch-App ist beispielsweise sehr beliebt: eine Open-Source-Bibliothek, mit der Sie React-Komponenten schreiben können, die in Sketch-Dokumente gerendert werden. Entwickelt für Teams, die in großem Maßstab arbeiten, können Sie in mehr über die App erfahren dieser Blog-Beitrag .

In der Zwischenzeit freut sich Frost, dass das browserbasierte Designtool Figma eine Lese-API mit einer Schreib-API in Arbeit hat. 'Mit der Read-API können Sie einige coole Dinge erstellen', sagt er. „Wenn Sie beispielsweise eine Reihe von Symbolen in Figma haben, können Sie diese dort bearbeiten, ausbauen und dann in GitHub versionieren. Wir freuen uns jedoch sehr, dass wir mithilfe der bevorstehenden Write-API die Dinge umgekehrt machen. '

Es ist einfach, dass sich die Dinge während des Erstellungsprozesses ändern und nicht zum Entwurfswerkzeug zurückkehren ... Aus diesem Grund freuen wir uns über die Aussicht, dass unsere Quelle der Wahrheit kein Entwurfswerkzeug ist

Angesichts der Tatsache, dass Designer auf diese Weise ihre Designsysteme aktualisieren können, wenn sich die Dinge während des Entwicklungsprozesses weiterentwickeln, ist Frosts Begeisterung leicht zu verstehen. 'Nach meiner Erfahrung sind Design-Tools zwar nützlich, um lose Ideen zu erkunden und dorthin zu gelangen, wo Sie hin müssen, aber sie sind nicht so gut darin, diese Position zu halten', sagt er.

„Es ist wirklich einfach, dass Dinge veraltet sind, sich während des Erstellungsprozesses ändern und sich nicht wieder zum Entwurfswerkzeug zurückziehen. Was also mit der Zeit wächst, sind Inkonsistenzen und ein Zusammenbruch der Kommunikation: all die Dinge, die Sie letztendlich dazu bringen, in ein paar Jahren zurückzublicken und sich zu fragen, was schief gelaufen ist.

'Aus diesem Grund freuen wir uns über die Aussicht, dass unsere Quelle der Wahrheit kein Designwerkzeug ist. Letzteres für das zu verwenden, was es am besten kann - ein Whiteboard zum Herumwerfen von Ideen -, aber diese soliden Ideen über dieses System und all die Dinge, die es dort im Code verkörpert, an einem Ort zu behalten, den wir versionieren können und darauf aufbauen. “

DesignOps

Komponentenbibliotheken, Designsysteme und die Tools, mit denen sie in Ihren Workflow implementiert werden sollen, helfen Webdesignern, ihre Prozesse zu automatisieren. Aber wenn Sie die Größe eines globalen Riesen erreichen, brauchen Sie etwas mehr. Schritt vorwärts, DesignOps.

„In den letzten zwei oder drei Jahren in Großbritannien und in den letzten fünf oder sechs Jahren in den USA haben sich viele Designteams von relativ kleinen und unterfinanzierten Einheiten zu ziemlich großen, leistungsstarken Einheiten entwickelt“, sagt Budd. „Vor fünf oder sechs Jahren, als Jeff Veen und Doug Bowman die ersten Designer bei Google waren, musste man sich keine Gedanken darüber machen, wie man effektiv ist und die Leistung optimiert. Aber springen Sie vorwärts und solche Unternehmen haben Hunderte, sogar Tausende von Designern. Sie müssen sich also überlegen, wie Sie diese Fähigkeiten einsetzen. “

Dieses Denken steht im Zusammenhang mit einer neuen Bewegung namens DesignOps, die von Kristin Skinner, Executive Design Management Champion bei Chase, und Designtrainer Dave Malouf vertreten wird. Das ist irgendwie neu.

„DesignOps ist die Weiterentwicklung des früheren Designmanagements“, sagt Stu Collett, Gründer von Super User Studio , eine Beratungsfirma für digitales Produkt- und Service-Design mit Sitz in London und Bath. „Kurz gesagt, es geht darum, Optimierungs- oder Designdenken auf eine betriebliche Ebene zu bringen. Es erleichtert die funktionsübergreifende Zusammenarbeit innerhalb eines Unternehmens und schafft einen Rahmen für effizientes und schnelles Arbeiten. “

Man könnte also sagen, dass DesignOps wie ein Designsystem für Steroide ist. Oder wie Collett es ausdrückt: „So wie UX in das Service-Design einfließt, beginnen Design-Systeme, ganzheitlich in Design-Vorgänge einzudringen.“

Auf die gleiche Weise, wie UX in das Service-Design einfließt, beginnen Design-Systeme, ganzheitlich in Design-Vorgänge einzudringen

Das fängt an zu passieren, sagt Budd, wenn man eine bestimmte Größe erreicht. 'Wenn Sie ein Team aus sechs Personen sind, benötigen Sie kein DesignOps', erklärt er. 'Wenn Sie ein Team mit 40, 50 oder 60 Mitarbeitern sind, wird DesignOps wahrscheinlich wichtig. Und wenn Sie ein Designteam von etwa 250 Mitarbeitern haben, wäre ich nicht überrascht, wenn Sie sechs, acht oder zehn Mitarbeiter in Ihrem DesignOps-Team haben möchten, die viele verschiedene Aufgaben erledigen. '

In der Praxis hat er festgestellt, dass DesignOps häufig ins Spiel kommt, wenn eine Organisation viele Junior- und Mid-Level-Designer hat und sie alle mit Arbeit überfordert sind. 'Das haben wir bei einigen Technologieunternehmen in San Francisco gesehen', erklärt er. „Und was auch immer in den USA passiert, passiert immer drei, vier oder fünf Jahre später in Großbritannien. Während DesignOps für uns Briten noch neu ist, kommt es definitiv bald an unsere Küste. '

Wie schnell es für das Unternehmen relevant sein wird, für das Sie arbeiten oder für das Sie sich beraten, hängt weitgehend davon ab, wie ehrgeizig sie sind, sagt Collett. 'Es ist für große Unternehmen am relevantesten, aber wir haben auch mit Startups zusammengearbeitet, die sich von Anfang an auf diese Art des Denkens konzentrieren', sagt er. „Dies ist häufig auf aggressive Wachstumspläne und die relative Unsicherheit ihrer Zukunft zurückzuführen. Die Arbeit mit dieser Art von Strenge verhindert, dass ein Monster entsteht (aus Sicht der laufenden Wartung), und ermöglicht es ihnen, auf Wachstum zu reagieren und konsistent zu skalieren. Für kleinere Teams ist dies im Allgemeinen nicht so wichtig. Sie können wahrscheinlich davonkommen, ein einfaches Design-Repository zu erstellen und es nicht zu verkochen. Wenn Sie jedoch im dritten Jahr ein Unternehmen mit 200 Mitarbeitern planen, ist dies sehr relevant. '

Woraus besteht DesignOps genau? Erstens hat DevOps wie sein Cousin DevOps ein technisches Element. 'Es geht zum Teil darum, die Werkzeuge und Technologien herauszufinden, die Sie benötigen, um Designs aus den Köpfen der Designer so schnell wie möglich in die Hände des Benutzers zu bekommen', sagt Budd. 'Eine Möglichkeit, dies zu tun, sind diese Designsysteme, Mustersprachen und Codebibliotheken - und ich denke, das ist das, worauf sich die Leute anfangs fixieren und fetischisieren.' Aber das ist noch nicht alles, was DesignOps ist. '

DesignOps unterscheidet sich von DevOps dadurch, dass es sich auch auf die menschlichen „Soft Skills“ konzentriert, die Sie benötigen, um ein Designteam aufzubauen. 'Es geht darum, sicherzustellen, dass Sie Ihre Designteams extern fördern, damit die Leute wissen, was Sie tun. Es gibt also ein Element der Kommunikation.' Es gibt auch ein Element der Personalabteilung, da Sie sicherstellen müssen, dass Sie einen wirklich guten Rekrutierungsprozess haben. Viele Designleiter müssen sehr schnell eine große Anzahl von Mitarbeitern einstellen. Daher ist es sehr wichtig, dass eine DesignOps-Person mit der Personalabteilung zusammenarbeitet, um sicherzustellen, dass sowohl die Einstellung als auch das Onboarding reibungslos verlaufen. “

Bei DesignOps geht es darum, sicherzustellen, dass Sie Ihre Designteams extern bewerben, damit die Leute wissen, was Sie tun

DesignOps befasst sich auch mit internen Prozessen, fügt er hinzu. „Es fragt: Wann haben Sie Besprechungen, welche Art von Besprechungen haben Sie? Wie strukturieren Sie Ihre Organisation, wo passen Designer hin? Sind Designer Teil des Designteams oder Teil des Produktteams? Wer kümmert sich um ihr Wachstum? Wer beurteilt sie nach ihren Fähigkeiten? Wie entscheiden Sie, wann Sie dieser Person eine Gehaltserhöhung geben? Wie verwalten Sie andere Personen in der Organisation und stellen sicher, dass bei der Erstellung neuer Produktideen ein gutes, robustes System für die Verwaltung neuer Produkte vorhanden ist? Und das wirkt sich natürlich auch auf das Produktmanagement aus. “

Auf diese Weise formuliert, klingt DesignOps möglicherweise nach einem großen Aufwand an Zeit, Mühe und Geld, den Sie vielleicht etwas überwältigend finden. Und in Wahrheit würden Sie sich nicht weit irren. 'Viele größere Unternehmen haben Schwierigkeiten, effektive DesignOps zu etablieren', gibt Collett zu. 'Es ist schwierig, unterschiedliche Funktionen oder Teams dazu zu bringen, neue Arbeitsweisen zu teilen, ihre Bedeutung gegenüber den damaligen BAU-Aufgaben zu etablieren und diese auf eine Weise zusammenzuführen, die für das Kerngeschäft funktioniert.'

Ob hart oder nicht, DesignOps ist hier, um zu bleiben, und wenn digitale Unternehmen größer und komplexer werden, werden nur diejenigen überleben, die es ernst nehmen. „Größere Unternehmen oder ehrgeizige Startups ignorieren DesignOps mit dem Risiko, Probleme mit Ressourcen, Workflows und Systemen zu haben, die sich auf ihre Skalierbarkeit auswirken, auf Marktanforderungen reagieren und wettbewerbsfähig bleiben“, schließt er.

Dieser Artikel wurde ursprünglich in net veröffentlicht, dem weltweit meistverkauften Magazin für Webdesigner und Entwickler. Kaufen Ausgabe 307 oder abonnieren .

Webdesign-Event London generieren kehrt vom 19. bis 21. September 2018 zurück und bietet einen vollen Zeitplan mit branchenführenden Rednern, einen ganzen Tag voller Workshops und wertvolle Networking-Möglichkeiten - verpassen Sie es nicht. Holen Sie sich jetzt Ihr Generate-Ticket .

Weiterlesen:

• Probieren Sie jetzt 20 hochmoderne Web-Tools aus
• Wie man Multitasking wie ein Profi
• CSS-Tricks zur Revolutionierung Ihrer Weblayouts