Als UI/UX Designer richtig mit Programmierern zusammenarbeiten

Du als Designer musst auf die Entwickler zugehen

Am besten involvierst du Programmierer schon während deines Design-Prozesses mit ein, damit Unklarheiten schon im Voraus geklärt werden können. Alles, was du gestaltest, sollte auch umsetzbar sein und nur der Programmierer weiß, ob das in der vorgegebenen Zeit und mit ihrem Budget überhaupt machbar ist.

Für einen Programmierer ist es genauso wichtig zu wissen, worum es in einem Projekt überhaupt geht und welche Gedanken dahinter stecken. Nur wenn sie Details verstehen, wissen sie auch, warum du bestimmte Entscheidungen wie gestaltet hast und wie diese deshalb umgesetzt werden müssen.

Um deine Layouts schon vor der Programmierphase zu präsentieren und zu besprechen, empfehle ich dir ein Prototyping Werkzeug zu verwenden. Das macht es super einfach, gemeinsam über die bisher entstandenen Arbeit zu schauen. Ich habe auch schon in einem Beitrag beschrieben, wie ich mit InVision und Sketch arbeite und warum diese Tools auch für eine Zusammenarbeit mit Entwicklern sinnvoll sind.

Sobald dein Design-Part aber abgeschlossen ist und die Dateien übergeben werden sollen, sind die anderen gefragt.

Egal ob du dein Layout an nur einen Programmierer übergibst, oder an ein ganzes Entwickler-Team. Du musst immer vorher fragen, wie sie arbeiten und wie du am besten deine Dateien für sie aufbereiten und übergeben solltest.

Vielleicht brauchen sie bestimmte Informationen gar nicht, die du sonst eigentlich immer aufwendig in einem Styleguide dargestellt hast. Oder sie können exportierte Dateien am besten bearbeiten, wenn sie auf eine bestimmte Weise benannt sind.

Stell dich darauf ein, dass es bei jedem Projekt neue Anforderungen von Programmierern geben kann. Genauso wie du, lernen auch sie dazu und entwickeln sich ständig weiter. Vielleicht gibt es deshalb neue Methoden, die seit dem letzten Mal dazugekommen sind.

Deine Arbeit ist nicht vorbei, sobald das Design erledigt ist

Und es geht auch nicht nur um ein gutes Handling der Projektdateien!

Sobald der erste Part programmiert ist, musst du Feedback geben und genau prüfen, ob das Design auch deinen Vorstellungen entspricht. Du solltest gefühlt oder am besten wirklich neben ihnen sitzen und Details Stück für Stück mit ihnen durchgehen.

Manche arbeiten dabei auch mit Werkzeugen wie Slack, Basecamp oder Trello. Größere Unternehmen haben vielleicht auch eine eigene Software, mit der man dieses Feedback sammeln kann.

Du musst dich anpassen und wenn nötig, für eine neue Software anmelden oder dir eine kleine Einführung geben lassen.
Definitiv sollte es für beide Seiten ein einfacher Weg sein, um über Probleme, Fragen und Fehler schnell zu kommunizieren.
Weil oft ist es eben so, dass man nicht jeden Tag nebeneinander sitzen kann und über das Internet kommunizieren muss.

Alle müssen sich wohlfühlen und es dürfen keine Anspannungen entstehen.

Wenn sie kein eigenes Programm bevorzugen und du eine Empfehlung machen kannst, solltest du von Anfang an darauf achten, diesen Schritt gut vorzubereiten und die Vorteile auch wirklich griffbereit zu haben.

Ich rate grundlegend davon ab, bei einer Zusammenarbeit mit Entwicklern hauptsächlich über Emails zu kommunizieren. Dadurch entstehen einfach zu viele Probleme und zudem ist der Austausch von Dateien oft nicht logisch und nachvollziehbar genug.

Es gibt ja auch extra Unternehmen, die sich genau über diese Zusammenarbeit Gedanken machen und deshalb speziell auch Softwares dafür entwickeln. Warum sollte man diese dann nicht nutzen?

Designer müssen sich an Entwickler anpassen

Genauso wie wir während unseres Design-Prozesses, haben auch Programmierer ihre gewohnten Abläufe und an diese solltest du dich halten. Es gibt keinen Grund, zu versuchen, sie an uns anzupassen. Sie sind der nächste Schritt in der Produktionsreihe.

Du kannst von ihnen nicht erwarten, dass sie nur für dich etwas Neues lernen. Sie arbeiten als Team oder auch alleine am besten auf einem bestimmten Weg zusammen und daran solltest du dich halten.

Wenn du mit Respekt an die Sache rangehst und das Meiste aus einem Projekt rausholen willst, schreibe ihnen keine Lösungen vor oder verbiete irgendetwas! Sie sind diejenigen, die dein Design erst lebendig und bedienbar machen und entscheidend dafür, wie das User Interface letztendlich empfunden wird.

Frage einfach, wie sie es machen möchten oder welche Software und Techniken sie in der Vergangenheit verwendet haben. Vermutlich sind die Antworten die Programmierer geben, weitaus nützlicher als du dir gerade vorstellen kannst. Sie sind die Experten auf ihrem Gebiet und wissen, worauf es ankommt. Und darauf müssen wir als Designer vertraune. Oft ist es auch zusätzlich eine neue Sichtweise aus einer anderen Perspektive, die auch für dich sehr wertvoll ist.

Du musst nicht derjenige sein, der alles weiß. Selbst wenn du wie ich als Designer auch Praxiserfahrung in der Entwicklung hast, ist die Rollenverteilung klar vorgegeben: Du bist dafür zuständig die Lösung zu gestalten und der Programmierer soll sie umsetzen.

Schick dem Entwickler keine exportierten JPGs!!

→ Die richtige Kommunikation um Layouts im Team abzustimmen.

Die Zeiten sind vorbei, dass wir uns unnötig lange und große Emails hin und her schicken müssen. Nutze ein Prototyping Tool wie InVision, importiere deine Screens und synchronisiere diese direkt oder mit einem Cloud-Service wie Dropbox.

Sobald du etwas an deinem Layout ändern musst, ersetzt du anschließend einfach das Bild und boom, synchronisiert sich dein Klickdummy von ganz allein.

Das ewige hin und her gehört der Steinzeit an. Wirklich! Mach das nicht! Mach ihnen zum Beispiel auch nicht zusätzlich mehr Arbeit um Größen und Abstände selbst in deinen Bildern ausmessen zu müssen. Dafür gibt es mittlerweile genügend Lösungen!

Einige Werkzeuge, die eine Übergabe deines Layouts an Entwickler erleichtern

Diese Tools geben dem Programmierer einen genauen Einblick in dein Sketch-File, ohne dass er dafür die Sketch-App öffnen, installieren oder kaufen muss! Und das sind drei super Vorteile!

Mit diesen Werkzeugen können sie Ebenen, Abstände und zu exportierende Dateien (SVG, JPGs, PNGs etc) einsehen, runterladen und ausmessen.

• InVision Inspect - Unterstützt dich und dein Team bei der Übergabe von Design zum Engineering.
• Zeplin.io - Kooperationswerkzeug für Designer und Entwickler.
• Avocado - Sketch Dateien überprüfen und kontrollieren. Generiert CSS, Swift, Android & React Native Code direkt aus den Ebenen.
• Sketch Measure - Sketch Plugin (keine Anmeldung oder Account nötig). Generiert automatisch ein HTML File, welches von Entwicklern indexiert werden kann.