Mit DevTools den UX-Design-zu-Entwicklungs-Prozess verbessern

Ich möchte Ihnen gerne erzählen, wie ich sehe, wie Code und Design sich überschneiden und gegenseitig unterstützen. Insbesondere möchte ich darauf eingehen, wie Designer Code in ihrer täglichen Arbeit nutzen können. Ich schlage dies nicht vor, weil es eine erforderliche Fähigkeit ist, sondern weil selbst ein grundlegendes Verständnis von Coding Designs verbessern und die Übergabe von Design an die Entwicklung reibungsloser gestalten kann.

Als UX-Designer bin ich immer auf der Suche nach guten Möglichkeiten, meine UX-Designprobleme zu erkunden und die endgültigen Designs anderen zu vermitteln. In den letzten 30 Jahren habe ich immer eng mit Entwicklern zusammengearbeitet, aber im Allgemeinen gab es eine große Kluft zwischen dem, was ich tue, und dem, was Entwickler tun.

Ich kann auf grundlegendem Niveau programmieren. Zum Beispiel habe ich C an Doktoranden unterrichtet, als ich selbst Doktorand war. Ich habe an der Benutzerfreundlichkeit von JDeveloper, der integrierten Entwicklungsumgebung (IDE) von Oracle für Java, gearbeitet. Ich habe auch eine sehr kurze Zeit daran gearbeitet, die UX einer WordPress-Content-Management-Umgebung zu vereinfachen, um sie für weniger technisch versierte Benutzer zugänglich zu machen. Dies erforderte ein gutes Verständnis von HTML und CSS. Ich habe auch ehrenamtlich am Design der PHP-Website mitgearbeitet und ein gewisses Verständnis für die serverseitige Webentwicklung entwickeln müssen.

Aber selbst mit diesen Erfahrungen bin ich in keiner echten Bedeutung des Wortes ein Entwickler. Wenn ich mir Code ansehe, dann in einem "Just-in-Time"-Lernmodell – ich schlage nach, was ich brauche, und bastle dann daran herum, bis es funktioniert. Dieses Lernen wurde oft missbilligt, ein bisschen wie Autofahrenlernen ohne Fahrstunden. Man gewöhnt sich schlechte Entwicklungsgewohnheiten an, aber vielleicht ist das für meine Arbeit in Ordnung.

Nein, ich entwickle oder schreibe keinen Code. Meine tägliche Arbeit besteht hauptsächlich aus Zeichnen, Sprechen und Sammeln von Anforderungen. Was das Design angeht, beginne ich mit Skizzen in einem Notizbuch oder verwende Balsamiq. Dann erstelle ich UX-Wireframes und Prototypen mit Tools wie Axure, Adobe XD, InVision Studio, Figma und Sketch. Wenn ich meine Ergebnisse an die Entwicklung übergebe, sind alle visuellen Elemente und Dokumentationen definiert und kommuniziert. Aber ich überschreite nicht die Grenze zur Code-Entwicklung. Das ist einfach nicht mein Fachgebiet.

Warum sollten Designer Code kennen?

Wir haben bereits festgestellt, dass ich kein Entwickler bin, aber ich bin kürzlich zu einem Verfechter dafür geworden, dass Designer ein gutes Gespür dafür bekommen, wie Design und Code interagieren.

Tatsächlich nenne ich es "mit Code spielen". Ich schlage definitiv nicht vor, dass UX-Designer Entwickler werden, aber zumindest denke ich, dass Designer davon profitieren würden, wenn sie sich mit einem grundlegenden Verständnis dessen, was derzeit mit CSS möglich ist, und den Best Practices in HTML vertraut machen.

Experimentieren ist ein wichtiger Teil des Designs. Code ist nur ein weiteres Medium, mit dem wir experimentieren und schöne Lösungen entwickeln können. Wir werden uns also ein paar Möglichkeiten ansehen, wie Designer mit Code experimentieren können, auch mit einem leichten Verständnis dafür. Was wir hier behandeln, mag für Entwickler offensichtlich sein, aber es gibt viele Designer da draußen, die noch nie mit Code experimentiert haben und dies zum ersten Mal sehen werden.

Also, für sie (und vielleicht als Auffrischung für Sie) schauen wir uns die folgenden Browser-Tools an.

DevTools: Der ultimative Code-Spielplatz

Eine der Bedenken, die ein UX-Designer haben könnte, ist, wie sich ein Design im Browser bewährt. Sind die Farben korrekt? Sind die Schriftarten durchgängig lesbar? Wie reagieren die Elemente auf verschiedenen Geräten? Funktioniert mein grauer Hover-Zustand mit dem weißen/grauen Zebra-Streifen auf meinen Anwendungsrastern in der Praxis? Dies sind einige der Styling- und Interaktionsprobleme, über die Designer nachdenken, wenn wir unsere Arbeit zur Entwicklung übergeben.

Hier können DevTools der beste Freund eines Designers sein. Jeder Browser hat seine eigene Version davon. Möglicherweise haben Sie solche Tools bereits ausprobiert. Es ist diese kleine "Inspizieren"-Option, wenn Sie mit der rechten Maustaste auf den Bildschirm klicken.

Was DevTools zu einer wunderbaren Ressource macht, ist, dass es eine Möglichkeit bietet, den Code einer Live-Website oder Webanwendung zu manipulieren, ohne eine Entwicklungsumgebung einrichten zu müssen. Und es ist vergänglich. Alle vorgenommenen Änderungen sind nur für Ihre Augen bestimmt und werden in dem Moment weggespült, in dem der Browser aktualisiert wird.

Darüber hinaus kann DevTools andere Geräte simulieren.

Und wenn Sie es noch nicht gesehen haben, hat Firefox einen wunderbaren neuen Formpfad-Editor veröffentlicht, der sehr wertvoll für die Erkundung interessanter Designs ist.

In den letzten Monaten habe ich an einem komplexen Webclient für eine Enterprise-Level-Anwendung gearbeitet. Im letzten Sprint war meine UX-Design-Aufgabe, das Aussehen der Einstiegsseite der Webanwendung zu erkunden und ein neues Farbschema einzuführen. Es war schwierig, sich vorzustellen, wie sich die Änderungen, die ich vornahm, auf das Tool als Ganzes auswirken würden, da einige der Komponenten, die ich änderte, im gesamten Produkt verwendet werden.

Als wir eines Tages eine Designentscheidung besprachen, testete einer der Entwickler meine vorgeschlagene Änderung einer Komponente mit den neuesten DevTools in seinem Browser. Ich war erstaunt, wie sehr sich DevTools seit meinem letzten Erinnern entwickelt und erweitert hatte. Ich konnte sofort die Auswirkungen dieser Änderung auf unsere gesamte Webanwendung erkennen und wie sich verschiedene Designentscheidungen mit dem bestehenden Design interagierten. Ich begann selbst mit DevTools zu experimentieren und konnte mit meinen eigenen einfachen CSS-Änderungen an Komponenten Vorschauen erstellen und experimentieren, wie sich diese auf die gesamte Webanwendung auswirken würden. Super hilfreich!

Allerdings war es auch etwas frustrierend, meine Experimente und Änderungen nicht für zukünftige Referenz speichern zu können. Also habe ich mich umgesehen, um zu sehen, was es sonst noch gibt, um meinen Designprozess zu unterstützen.

Chrome Browser-Erweiterungen

DevTools sind schon von Haus aus erstaunlich, aber das Experimentieren mit Code wird noch großartiger, wenn Browser-Erweiterungen hinzugefügt werden. Insbesondere Chrome hat ein paar, die ich wirklich mag.

Chrome-Erweiterung 1: User CSS

User CSS ist eine Chrome-Browser-Erweiterung, die es Ihnen ermöglicht, die Änderungen, die Sie in DevTools vornehmen, in einem bearbeitbaren CSS-Code-Tab zu speichern. Diese CSS-Änderungen werden automatisch auf dieser Seite ausgeführt, wenn User CSS aktiviert ist. Das bedeutet, dass Sie CSS-Überschreibungen für jede Seite im Web einrichten, sie später anzeigen und mit anderen teilen können. Dies kann ein unglaubliches Werkzeug sein, wenn Sie beispielsweise eine Designüberprüfung einer Staging-Website vor der Veröffentlichung durchführen oder wirklich jede Designexploration für eine Webanwendung oder Website, die in einem Browser sichtbar ist.

Das Erste, was ich mit User CSS mache, sind die Änderungen im Chrome Elements Panel. Dann schneide und füge ich einfach die CSS-Änderungen von Chrome DevTools in den User CSS-Code-Tab ein, während ich fortfahre. Dieses Video zeigt im Detail die verschiedenen Möglichkeiten, CSS, HTML und JavaScript in Chrome DevTools zu bearbeiten und wie ich UserCSS verwende.

User CSS verfügt über einen schönen integrierten Code-Editor, sodass mein Code immer gut formatiert ist und Syntaxhervorhebungen enthält, sodass ich mich nicht um solche Dinge kümmern muss. Besonders gefällt mir die Tatsache, dass Überschreibungen sofort ausgeführt werden, sodass Sie Änderungen "on the fly" sehen können. Es gibt auch einen nützlichen Schalter, mit dem Sie Ihre Überschreibungen ein- und ausschalten können. Dies macht es sehr einfach, einem Team eine Reihe von Änderungen zu demonstrieren. Diese Erweiterung hat es mir ermöglicht, einfach einen Vergleich zwischen einem bestehenden Seitenlayout und vorgeschlagenen Änderungen zu präsentieren. Ich habe sie sogar verwendet, um ein einfaches Video zu erstellen, das die vorgeschlagenen Designänderungen demonstriert.

In diesem Video nehme ich einige einfache Bearbeitungen an meiner Webseite vor und zeige dann, wie ich die Bearbeitungen durch einfaches Klicken auf den Ein/Aus-Schalter von User CSS ein- und ausschalten kann.

Diese Erweiterung ist perfekt, wenn Sie nur CSS bearbeiten müssen, insbesondere wenn Sie sehr einfache Designänderungen vornehmen möchten und diese Änderungen beibehalten möchten. Wenn die Komplexität eines Designs zunimmt, habe ich jedoch festgestellt, dass ich mehr als einen Code-Schnipsel gleichzeitig speichern möchte. Das Kopieren und Einfügen von Code in und aus dem User CSS-Editor wurde zu einer Plage. Ich wollte etwas mit mehr Flexibilität und Freiheit zum Experimentieren. Ich wollte auch einfache Änderungen am HTML meiner Webanwendung ansehen und sogar ein bisschen JavaScript ausprobieren.

Da kommt die nächste Erweiterung ins Spiel.

Chrome-Erweiterung 2: Web Overrides

Die zweite Chrome-Erweiterung, die ich gefunden habe, heißt Web Override und sie bietet eine Möglichkeit, HTML, CSS *und* JavaScript zu überschreiben. Alle davon! Dies wird in drei Tabs präsentiert, ähnlich wie bei CodePen, was es zu einem sehr mächtigen Werkzeug für die Erstellung von groben, funktionierenden Design-Prototypen macht.

Web Overrides ermöglicht es Ihnen auch, mehrere Dateien zu speichern, sodass Sie verschiedene Teile eines Designs in verschiedenen Kombinationen ein- oder ausschalten können. Es schaltet auch schnell zwischen den verschiedenen Optionen um, um verschiedene Designkonzepte zu präsentieren.

Dieses Video zeigt, wie ich ein HTML-Element in eine Seite eingefügt und das neue Element mit grundlegendem CSS bearbeitet habe.

Die Verwendung des HTML-Tabs ermöglicht es, jedes Element auf der Seite zu bearbeiten, z. B. ein Logo auszutauschen, unnötige Elemente zu entfernen oder neue hinzuzufügen. Der JavaScript-Tab ist ähnlich, da ich einfache Änderungen vornehmen kann, wie z. B. zusätzlichen Text in den Website-Titel einzufügen, um zu testen, wie dynamische Änderungen das Layout beeinflussen könnten – dies kann nützlich sein, um verschiedene Szenarien zu testen, wie z. B. Unterschiede bei der Internationalisierung.

Diese Bearbeitungen mögen aus Programmiersicht trivial sein, aber sie ermöglichen es mir, Hunderte von alternativen Designs in viel kürzerer Zeit und mit viel weniger Risiko zu erkunden, als Pixel in einer Designanwendung herumzuschieben. Ich konnte einfach nicht so schnell Ideen mit meinen traditionellen UX-Prototyping-Tools erkunden, wie ich es mit dieser einen Erweiterung kann.

Und mehr noch, sowohl ich als auch mein Team haben Vertrauen in die Design-Ergebnisse, weil wir sie frühzeitig im Browser getestet haben. Selbst die pixelgenaueste Photoshop-Datei kann bei der Übertragung des Designs in den Browser verloren gehen, da sie eigentlich nur ein Schnappschuss eines Designs in einem statischen Zustand ist. Das Testen von Designs zuerst im Browser mit diesen Erweiterungen beweist, dass das, was wir entworfen haben, möglich ist.

Auf der anderen Seite sollten Sie vielleicht nachsehen, wie Jon Kantner ähnliche Browser-Erweiterungen verwendet hat, um CSS zu *deaktivieren*, um die semantische Markup verschiedener Websites zu prüfen. Es ist nicht unbedingt designbezogen, aber interessant zu sehen, wie diese Werkzeuge unterschiedliche Anwendungsfälle haben können.

Was ich bisher gelernt habe

Ich bin begeistert von dem, was ich gelernt habe, seit ich mich mit DevTools und Browser-Erweiterungen beschäftigt habe. Ich glaube, meine Designs sind dadurch viel besser geworden. Ich kann auch produktivere Gespräche mit Entwicklern führen, da wir nun eine Möglichkeit haben, gut zu kommunizieren. Der gemeinsame Nenner zwischen Design und Code in schnellen Prototypen hilft wirklich, die Diskussion zu erleichtern. Und weil ich mit tatsächlichem Code spiele, habe ich ein viel besseres Gespür dafür, wie der zugrunde liegende Code schließlich geschrieben wird, und kann die Arbeit der Entwickler viel besser nachvollziehen – und vielleicht auch, wie ich ihre Arbeit erleichtern kann.

Es hat auch eine Kultur des kollaborativen Rapid Prototyping in meinem Team geschaffen, was eine ganz andere Geschichte ist.

Das Spielen mit Code hat neue Ideen eröffnet und mich ermutigt, meine Arbeit an den Kontext des Webs anzupassen. Es wurde gesagt, dass es ideal ist, früher im Designprozess in den Browser zu gehen, und dies sind die Arten von Werkzeugen, die es mir (und Ihnen) ermöglichen, genau das zu tun!

Haben Sie andere Werkzeuge oder Prozesse, die Sie zur Erleichterung der Zusammenarbeit zwischen Design und Code verwenden? Bitte teilen Sie sie in den Kommentaren!