Wie Frontend-Entwickler die Arbeit von Designern stärken können

Veröffentlicht: 2022-03-10

Kurze Zusammenfassung ↬ Als Frontend-Entwickler möchte ich mich bei den Designern da draußen für all die Missverständnisse entschuldigen, die in der Vergangenheit passiert sind. Ich denke, es ist an der Zeit, dass wir Entwickler unser Bewusstsein für die Rolle der Designer verbessern und ihnen zeigen, dass wir über unseren eigenen Bildschirm hinausblicken können – und sollten.

Dieser Artikel richtet sich hauptsächlich an Sie, lieber Frontend-Entwickler, der gerne Benutzeroberflächen implementiert, aber Schwierigkeiten hat, die Erwartungen mit den Designern abzustimmen, mit denen Sie zusammenarbeiten. Vielleicht werden Sie als „UI-Entwickler“ oder „UX-Ingenieur“ bezeichnet. Unabhängig von dem Titel, den Sie mit sich herumtragen, besteht Ihr Job (und auch meiner) darin, mehr als nur Designdateien Leben einzuhauchen. Wir sind auch dafür verantwortlich , die Lücke zwischen den Design- und Entwicklungsworkflows zu schließen. Beim Überqueren dieser Brücke stehen wir jedoch vor mehreren Herausforderungen.

Heute möchte ich praktische Tipps mit Ihnen teilen, die mir in den letzten Jahren geholfen haben, effizienter mit Designern zusammenzuarbeiten.

Ich glaube, es ist unsere Aufgabe als UI-Entwickler, Designern nicht nur auf ihrem Weg zu helfen, zu lernen, wie das Web funktioniert, sondern auch ihre Realität kennenzulernen und ihre Sprache zu lernen.

Den Hintergrund von UX-Designern verstehen

Die meisten UX-Designer (auch als Webdesigner oder Produktdesigner bezeichnet) da draußen haben ihre ersten Schritte in der Designwelt mit Tools wie Photoshop und Illustrator gemacht. Vielleicht waren sie Grafikdesigner : Ihr Hauptziel war es, Logos und Markenidentitäten zu erstellen und Layouts für Zeitschriften zu entwerfen. Sie hätten auch Marketingdesigner sein können: Werbetafeln drucken, Banner entwerfen und Infografiken erstellen.

Das bedeutet, dass die meisten UX-Designer ihre frühen Tage damit verbracht haben, für den Druck zu entwerfen, was ein völlig anderes Paradigma ist als ihr aktuelles Medium, der Bildschirm. Das war ihre erste große Herausforderung. Beim Drucken kümmerten sich Designer um die Pixelausrichtung, jedoch auf einem festen Bereich (Papier). Sie mussten sich nicht mit einem dynamischen Layout (Bildschirme) auseinandersetzen. Auch das Nachdenken über Textbruch oder Interaktionszustände gehörte einfach nicht zu ihrem Job. Designer hatten auch völlige Freiheit bei Farben, Bildern und Typografie ohne Leistungseinschränkungen.

Glücklicherweise gab es viele Bemühungen der autodidaktischen UX-Designer-Community, Entwicklungsgrundlagen zu vermitteln, zu diskutieren, ob Designer das Programmieren lernen sollten, und zu verstehen, wie man die Übergabe an Entwickler am besten durchführt. Dasselbe galt auch für die Entwicklungsseite (mehr dazu gleich). Es gibt jedoch immer noch Reibungen zwischen den beiden Feldern.

Auf der einen Seite beschweren sich Designer jedes Mal, wenn eine Implementierung nicht zu ihren Entwürfen passt, oder fühlen sich missverstanden, wenn diese von den Entwicklern ohne klare Erklärung abgelehnt werden. Auf der anderen Seite könnten Entwickler davon ausgehen, dass Designer etwas Technisches wissen, obwohl dies möglicherweise nicht der Fall ist. Ich glaube, das können wir alle besser.

Mehr nach dem Sprung! Lesen Sie unten weiter ↓

Umarmen Sie eine neue Art des Denkens

Die von uns erstellten Websites und Apps werden auf einer Vielzahl von Bildschirmgrößen angezeigt. Jede Person wird sie auf mehreren Geräten verwenden. Unser gemeinsames Ziel ist es, ihnen auf ihren Reisen ein vertrautes Erlebnis zu bieten.

Wenn wir als Entwickler denken, dass Designer bei der Pixelausrichtung wählerisch sind, müssen wir verstehen, warum das so ist. Wir müssen erkennen, dass es jenseits von Treue und Beständigkeit liegt. Es geht um die Summe aller Teile, die zusammenarbeiten. Es ist Zusammenhalt. Wir müssen es annehmen und unser Bestes tun, um es zu erreichen. Das Erlernen der Grundlagen der Konstruktionsprinzipien ist ein guter Ausgangspunkt . Verstehen Sie, wie wichtig es ist, die richtigen Farben auszuwählen, wie die Hierarchie funktioniert und warum Leerraum wichtig ist.

Hinweis : Es gibt einen Online-Kurs namens „Design for Developers“ und ein Buch namens „Refactoring UI“ – beide sind großartig, um Ihnen den Einstieg zu erleichtern. Damit sind Sie in der Lage, Benutzeroberflächen mit einem scharfen Blick fürs Detail zu implementieren und einen erheblichen Einfluss auf die Kommunikation mit Designern zu haben.

Steigern Sie das Bewusstsein Ihrer Designer

Sie gehen vielleicht davon aus, dass Designer das Web genauso gut kennen wie Sie. Nun, vielleicht nicht. Eigentlich müssen sie das nicht! Es liegt in unserer Verantwortung als Entwickler, sie über den aktuellen Stand des Webs auf dem Laufenden zu halten.

Ich habe mit den beiden Seiten dieses Spektrums gearbeitet: Designer, die denken, dass alles gebaut werden kann (wie komplexe Filter, neues Scrollverhalten oder benutzerdefinierte Formulareingaben), ohne sich Gedanken über die Browserkompatibilität zu machen. Dann gibt es Designer, die von den „geringen Einschränkungen des Webs“ ausgehen und einfach davon ausgehen, dass etwas nicht umsetzbar ist. Wir müssen ihnen die wahren Möglichkeiten des Webdesigns zeigen und dürfen nicht zulassen, dass die Einschränkungen ihre Fähigkeiten einschränken.

Bringen Sie ihnen das Programmieren bei, nicht das Programmieren

Das scheint widersprüchlich zu sein, aber ertragen Sie mich: Zu wissen, wie man codiert, ist der Kern der Arbeit eines Entwicklers. Wir arbeiten in einer schnelllebigen Branche, in der jeden Tag neue Dinge auftauchen. Es wäre eine heuchlerische Bitte von uns, von Designern zu verlangen, dass sie Programmieren lernen. Wir können ihnen jedoch helfen, den Code zu verstehen .

Setzen Sie sich 15 Minuten lang neben den Designer, mit dem Sie zusammenarbeiten, und bringen Sie ihm bei, wie er selbst sehen kann, ob die Spezifikationen eines Elements korrekt sind, und wie er sie ändern kann. Ich finde Firefox Page Inspector dafür bemerkenswert benutzerfreundlich.

Heutzutage ist es eine Freude, Layouts zu visualisieren, CSS-Animationen zu debuggen und Typografie zu optimieren. Zeigen Sie ihnen einen gebrauchsfertigen Code-Spielplatz wie Codepen, den sie erkunden können. Sie müssen nicht alle CSS-Spezifikationen kennen, um zu verstehen, wie das Layoutparadigma funktioniert. Sie müssen jedoch wissen, wie Elemente erstellt werden und sich verhalten, um ihre tägliche Arbeit zu unterstützen.

Designer in den Entwicklungsprozess einbeziehen

Laden Sie Designer ein, an dem Stand-up-Meeting teilzunehmen, Teil des QA-Prozesses zu sein und sich mit Ihnen zusammenzusetzen, während Sie visuelle Details in Ihren Implementierungen verfeinern. Dadurch verstehen sie die Beschränkungen des Webs und werden bald erkennen, warum die Implementierung einer Funktion Zeit braucht.

Bitten Sie Designer, Sie in ihren Designprozess einzubeziehen

Sie werden feststellen, dass sie viel mehr tun, als „die Dinge hübsch zu machen“. Sie erfahren mehr über den Forschungsprozess und wie Benutzertests durchgeführt werden. Sie werden feststellen, dass für jeden Designvorschlag, den sie Ihnen zeigen, zuvor mehrere andere Studien fallen gelassen wurden. Wenn Designer eine Änderung beantragen, fragen Sie nach dem Grund dafür, damit Sie mehr über die getroffenen Entscheidungen erfahren . Letztendlich werden Sie verstehen, warum sie wählerisch in Bezug auf Leerraum und Ausrichtung sind, und hoffentlich werden Sie es bald auch sein!

Ich finde es wichtig, die Frontend-Entwicklung als Kernbestandteil des Designprozesses und Design als Kernbestandteil des Entwicklungsprozesses zu behandeln. Das Eintreten für eine Denkweise, bei der jeder die Möglichkeit hat, sich am Design- und Entwicklungszyklus zu beteiligen, wird uns allen helfen, die Herausforderungen des anderen besser zu verstehen und auch großartige Erfahrungen zu machen.

Wir können unterschiedliche Tools verwenden, aber wir müssen dieselbe Sprache sprechen

Jetzt, wo wir beginnen, den Arbeitsablauf des anderen etwas besser zu verstehen, ist es Zeit für den nächsten Schritt: dieselbe Sprache zu sprechen.

Über den Code-Editor hinausblicken

Sobald Sie anfangen, auf Ihre Umgebung zu achten, sind Sie besser gerüstet, um Probleme anzugehen. Lernen Sie das Geschäft besser kennen und hören Sie sich an, was Designer zu sagen haben. Das macht Sie zu einem Teammitglied mit reichhaltigeren Beiträgen zum Projekt. Die Zusammenarbeit in Bereichen, die über unser Fachwissen hinausgehen, ist der Schlüssel zu sinnvollen Gesprächen und gegenseitigem Vertrauen.

Nutzung von UI-Systemen als Vertrag

Bitten Sie Designer, ihr Designsystem mit Ihnen zu teilen (und wenn sie keins verwenden, ist es nie zu spät, damit anzufangen). Das erspart Ihnen die Mühe, die verwendeten Farben von Hand auszuwählen, Ränder herauszufinden oder einen Textstil zu erraten. Stellen Sie sicher, dass Sie mit dem UI-System so vertraut sind wie sie.

Möglicherweise sind Sie bereits mit dem komponentenbasierten Konzept vertraut. Einige Designer nehmen es jedoch möglicherweise nicht so wahr wie Sie. Zeigen Sie ihnen, wie Komponenten Ihnen helfen können, Benutzeroberflächen effizienter zu erstellen. Verbreiten Sie diese Denkweise und verabschieden Sie sich auch von ähnlichen, aber nicht gleichen Namen: Header vs. Hero, Pricing Info vs. Price Selector . Wenn ein Teil der Benutzeroberfläche (auch als „Komponente“ bezeichnet) erstellt wird, sollten Sie darauf achten, dieselben Namen zu verwenden, damit sie sich sowohl in Design- als auch in Codedateien widerspiegeln. Wenn dann jemand sagt: „Wir müssen das Angebotseinladungs-Widget optimieren“ , weiß jeder genau, wovon die Rede ist.

Die wahre Quelle der Wahrheit anerkennen

Obwohl die Benutzeroberfläche zuerst in den Designdateien erstellt wird, liegt die wahre Quelle der Wahrheit auf der Entwicklungsseite. Am Ende des Tages ist es das, was die Leute tatsächlich sehen, oder? Wenn ein Design aktualisiert wird, ist es eine gute Idee, eine Randnotiz über seinen Entwicklungsstatus zu hinterlassen, insbesondere bei Projekten, an denen eine große Anzahl von Personen beteiligt ist. Dieser Trick hilft, die Kommunikation reibungslos zu halten, sodass sich niemand (einschließlich Sie) wundert: „ Das ist anders als die Live-Version. Ist das ein Bug oder wurde der oder die noch nicht implementiert? ”

Die Schulden unter Kontrolle halten

Sie wissen also alles über technische Schulden – es passiert, wenn die Kosten für die Implementierung von etwas Neuem hoch sind, weil wir in der Vergangenheit eine Abkürzung genommen haben, um eine Frist einzuhalten. Dasselbe kann auch auf der Designseite passieren und wir nennen es Design Debt .

Man kann sich das so vorstellen: Je höher die UX & UI Inkonsistenz, desto höher die Schuld (technisch und gestalterisch). Eine der häufigsten Inkonsistenzen besteht darin, dass verschiedene Elemente dieselbe Aktion darstellen. Aus diesem Grund spiegelt sich schlechtes Design normalerweise in schlechtem Code wider . Es liegt an uns allen, sowohl als Designer als auch als Entwickler, unsere Designschulden ernst zu nehmen.

Zugänglich zu sein bedeutet nicht, dass es hässlich sein muss

Ich freue mich sehr zu sehen, dass wir beide, als Entwickler und Designer, endlich damit beginnen, Barrierefreiheit in unsere Arbeit zu integrieren. Viele von uns denken jedoch immer noch, dass das Entwerfen barrierefreier Produkte schwierig ist oder unsere Fähigkeiten und Kreativität einschränkt.

Ich möchte Sie daran erinnern, dass wir kein Produkt nur für uns selbst herstellen. Wir erstellen ein Produkt, das von allen Menschen verwendet werden kann , einschließlich derjenigen, die das Produkt auf andere Weise als Sie verwenden. Berücksichtigen Sie, wie einzelne Elemente leichter zugänglich sein können, während die aktuellen Benutzerabläufe klar und kohärent bleiben.

Wenn beispielsweise ein Designer wirklich glaubt, dass die Erstellung einer erweiterten Auswahleingabe notwendig ist, stehen Sie ihm zur Seite und arbeiten Sie zusammen, um ihn auf eine zugängliche Weise zu entwerfen und zu implementieren, die von einer Vielzahl von Menschen mit unterschiedlichen Fähigkeiten verwendet werden kann.

Geben Sie Designern wertvolles Feedback

Es ist unvermeidlich, dass beim Durchgehen der Designs Fragen auftauchen. Das ist aber kein Grund, sich über die Fehler der Designer oder ihre ehrgeizigen Ideen zu beschweren. Die Designer sind nicht dazu da, Sie in den Verstand zu treiben, sie wissen nur nicht immer intuitiv, was Sie für Ihre Arbeit brauchen. Die Wahrheit ist, dass Sie in der Vergangenheit auch nichts über dieses Zeug wussten, also seien Sie geduldig und nehmen Sie die Zusammenarbeit als eine Art des Lernens an.

Je früher das Feedback, desto besser

Der Zeitpunkt des Feedbacks ist entscheidend. Der Feedback-Workflow hängt stark von der Projektstruktur ab, daher gibt es dafür keine Einheitslösung. Ich glaube jedoch, dass wir, wenn möglich, einen Workflow mit regelmäßigem Feedback anstreben sollten – beginnend in den frühen Stadien. Diese Denkweise der offenen Zusammenarbeit ist der Weg, um die Möglichkeit unerwarteter großer Wiederholungen später zu reduzieren. Denken Sie daran, je später Sie dem Designer Ihr erstes Feedback geben, desto höher sind die Kosten für ihn, um bei Bedarf einen neuen Ansatz zu erkunden.

Erklären Sie abstrakte Ideen in einfachen Worten

Erinnern Sie sich, als ich sagte, dass Leistung bei den früheren Jobs der Designer keine Rolle spielte? Nicht ausflippen, wenn sie nicht wissen, wie man optimierte SVGs für das Web erstellt. Wenn Sie mit einem Design konfrontiert werden, für das viele verschiedene Schriftarten geladen werden müssen, erklären Sie ihnen, warum wir die Anzahl der Anfragen minimieren und vielleicht sogar variable Schriftarten nutzen sollten. Abgesehen davon, dass es schneller geladen wird, bietet es auch eine konsistentere Benutzererfahrung. Vermeiden Sie es, zu viele Fachbegriffe zu verwenden, wenn Sie etwas erklären, es sei denn, Designer sind lernbegierig. Sie können dies als Gelegenheit sehen, Ihre Kommunikationsfähigkeiten zu verbessern und Ihre Gedanken zu klären.

Lassen Sie nicht zu, dass Annahmen zu Entscheidungen werden

Einige Fragen zu einer Designspezifikation tauchen erst auf, wenn wir uns im Code die Hände schmutzig machen. Um die Dinge zu beschleunigen, könnten wir versucht sein, Entscheidungen auf der Grundlage unserer Annahmen zu treffen. Bitte nicht. Jedes Mal, wenn Sie eine Annahme in eine Entscheidung umwandeln, riskieren Sie das Vertrauen, das Ihnen das Designteam bei der Implementierung der Benutzeroberfläche entgegenbringt. Wenden Sie sich im Zweifelsfall an uns und klären Sie Ihre Zweifel . Dies wird ihnen zeigen, dass Ihnen das Endergebnis genauso wichtig ist wie ihnen.

Führen Sie keine Problemumgehungen selbst durch

Wenn Sie gebeten werden, ein Design zu implementieren, das zu schwierig ist, sagen Sie nicht „Geht nicht“ oder beginnen Sie selbst mit der Implementierung einer billigen alternativen Version davon. Dies führt sofort zu Reibungen mit dem Designteam, wenn es sieht, dass seine Designs nicht wie erwartet umgesetzt wurden. Sie reagieren möglicherweise wütend oder sagen nichts, fühlen sich aber niedergeschlagen oder frustriert. Das alles lässt sich vermeiden, wenn wir ihnen mit einfachen Worten erklären, warum etwas nicht geht, und alternative Vorgehensweisen vorschlagen. Vermeiden Sie dogmatisches Verhalten und seien Sie offen für die Zusammenarbeit an einer neuen Lösung .

Informieren Sie sie über die Graceful Degradation- und Progressive Enhancement-Techniken und bauen Sie gemeinsam eine ideale Lösung und eine Fallback-Lösung auf. Beispielsweise können wir ein Layout von Flexbox zu CSS Grid erweitern. Dies ermöglicht es uns, den Kernzweck einer Funktion zu respektieren und gleichzeitig Webtechnologien optimal zu nutzen.

Wenn es um Animationen geht, seien wir ehrlich: Im Grunde sind Sie genauso begeistert, die nächste Wow -Animation umzusetzen, wie die Designer, sie zu erstellen. Der Unterschied zwischen uns und ihnen besteht darin, dass wir uns der Beschränkungen des Internets bewusster sind. Lassen Sie sich davon jedoch nicht in Ihren eigenen Fähigkeiten einschränken! Das Web entwickelt sich schnell, also müssen wir das zu unseren Gunsten nutzen.

Wenn Sie das nächste Mal gebeten werden, einen Prototyp zum Leben zu erwecken, versuchen Sie, ihn nicht von vornherein abzulehnen oder alles selbst zu machen. Sehen Sie es als Gelegenheit, sich selbst zu pushen. Animationen sind einer der wählerischsten Teile der Webentwicklung. Stellen Sie also sicher, dass Sie jeden Keyframe mit Ihrem Designer verfeinern – persönlich oder indem Sie einen privaten synchronisierten Link teilen.

Denken Sie über den Idealzustand hinaus – gemeinsam

Hier ist die Sache: Es geht nicht nur um dich. Eine der Herausforderungen der Designer besteht darin, ihre Benutzer wirklich zu verstehen und die Designs auf die attraktivste Weise zu präsentieren, um sie dem Produktmanager zu verkaufen. Manchmal vergessen sie, was jenseits des Idealzustands liegt, und Entwickler vergessen es auch.

Um diese Lücken zu vermeiden, stimmen Sie die Szenarioanforderungen mit den Designern ab:

Das Worst-Case-Szenario
Ein Szenario, in dem die schlimmsten Möglichkeiten eintreten. Das hilft Designern, Nein zu festen Inhalten zu sagen und sie fließend werden zu lassen. Was passiert, wenn der Titel mehr als 60 Zeichen hat oder die Liste zu lang ist? Gleiches gilt für das Gegenteil, das leere Szenario. Was soll der Benutzer tun, wenn die Liste leer ist?
Interaktionszustände
Der Browser ist mehr als schwebend und herumklickend. Es gibt eine Reihe von Zuständen: Standard, Schweben, Fokus, Aktiv, Deaktivieren, Fehler … und einige davon können gleichzeitig auftreten. Schenken wir ihnen die gebührende Aufmerksamkeit.
Der Ladezustand
Wenn wir Dinge lokal erstellen, verwenden wir möglicherweise Mocks und vergessen, dass das Laden tatsächlich einige Zeit in Anspruch nimmt. Lassen Sie die Designer auch von dieser Möglichkeit wissen und zeigen Sie ihnen, wie die Leute erkennen können, dass das Laden nicht so lange dauert.

Wenn Sie all diese Szenarien berücksichtigen, sparen Sie viel Zeit beim Hin- und Hergehen während der Entwicklungsphase.

Hinweis : Es gibt einen großartigen Artikel von Scott Hurff darüber, wie man schlechte Benutzeroberflächen repariert, der uns einem barrierefreien Produkt einen Schritt näher bringen wird.

Umfassen Sie Änderungswünsche

Entwickler sind dafür bekannt, dass sie nicht allzu glücklich darüber sind, wenn jemand einen Fehler in ihrem Code findet – besonders wenn es sich um einen Designfehler handelt, der von einem Designer gemeldet wurde. Es gibt viele Memes, aber haben Sie jemals darüber nachgedacht, wie diese Fehler sowohl die Qualität der Erfahrung als auch Ihre Beziehung verschlechtern können, wenn diese Designfehler beiläufig abgetan werden? Es geschieht langsam, fast wie beim Einschlafen. Stück für Stück, dann auf einmal. Designer beginnen vielleicht damit, zu sagen: „ Es ist nur ein winziges kleines Detail“, bis sich Gleichgültigkeit und Ressentiments aufbauen und nichts gesagt wird. Der Schaden ist dann bereits angerichtet.

Diese Situation ist zweifach: sowohl für Ihre Kollegen als auch für Ihre Arbeit. Lassen Sie das nicht zu. Arbeite daran, was deine Reaktion färbt. Ein wählerischer Designer kann unbequem sein, aber es kann auch die oberflächliche Interpretation von Aufmerksamkeit und Enthusiasmus eines Ingenieurs sein. Wenn Ihnen jemand sagt, dass Ihre Umsetzung (noch) nicht perfekt ist, legen Sie Ihr Ego beiseite und zeigen Sie ihm, wie Sie seine harte Arbeit bei der Verfeinerung des Endergebnisses anerkennen.

Gehen Sie ab und zu von der Platte

Wir alle haben Aufgaben zu erfüllen und Roadmaps abzuschließen. Einige der besten Arbeiten geschehen jedoch inoffiziell. Es wird nicht in das TO DO -Board eingeloggt und das ist in Ordnung. Wenn Sie einen Designer finden, mit dem Sie eine Beziehung haben, schleichen Sie sich in seinen Arbeitsbereich und erkunden Sie gemeinsam neue Experimente. Man weiß nie, was da noch kommen kann!

Fazit

Wenn Sie bereit sind, vom Designteam zu lernen, lernen Sie auch andere Denkweisen kennen. Sie werden Ihre Denkweise zur Zusammenarbeit mit anderen Bereichen aus Ihrer Erfahrung heraus weiterentwickeln und gleichzeitig Ihr Auge für die Schaffung neuer Erfahrungen verfeinern. Seien Sie da, um zu helfen, und seien Sie offen für das Lernen, denn Teilen macht uns besser.

Dieser Artikel wäre nicht möglich ohne das Feedback vieler toller Menschen. Ich möchte den Designern Jasmine Meijer und Margarida Botelho dankbar dafür danken, dass sie mir geholfen haben, eine ausgewogene Perspektive über die Missverständnisse zwischen Designern und Entwicklern zu teilen.