Als Webdesigner:in die Zusammenarbeit mit Entwickler:innen optimieren

Eine gute Zusammenarbeit zwischen Designer:innen und Entwickler:innen ist von entscheidender Bedeutung für den Erfolg eines Projekts. Doch in der Zusammenarbeit gibt es einige Stolpersteine, die beachtet werden sollten, denn häufig treffen unterschiedliche Arbeitsweisen und Erwartungshaltungen aufeinander. Ebenso werden Projekte oft nicht richtig geplant und einzelne Projektschritte erhalten zu wenig Aufmerksamkeit.

Für ein erfolgreiches Projekt bedarf es deshalb einer gewissen Vorbereitung und einen gemeinsamen Plan. Wie du dich als Designer:in auf die Zusammenarbeit vorbereiten kannst und worauf du achten solltest, möchte ich dir in diesem Artikel zeigen.

Häufige Fehler und Probleme in Webprojekten

Bevor wir uns mit einigen Lösungsansätzen zur Optimierung des Workflows beschäftigen, schauen wir uns zunächst an, welche Fehler und Probleme bei Webprojekten immer wieder auftreten.

• Designs werden von Designer:innen nicht vollständig ausgearbeitet, so dass Interaktionen, Edge Cases oder verschiedene Zustände von Elementen nicht berücksichtigt werden. Dies kann im späteren Projektverlauf zu Fehlern in der Umsetzung oder zu ungeplantem Mehraufwand führen.
• In der Projektplanung wird lediglich eine einfache »Übergabe« zwischen Design und Entwicklung vorgesehen, so dass davon ausgegangen wird, dass du als Designer:in deine Arbeit im Projekt erledigt hast, sobald du die Designs erstellt hast. Dies führt häufig dazu, dass die Entwürfe nicht korrekt umgesetzt werden oder im späteren Projektverlauf mehrere Korrekturschleifen erforderlich sind, die das Projekt unerwartet verzögern könnten.
• Die Kommunikation ist unzureichend, was zu unterschiedlichem Verständnis bei den beteiligten Personen führen kann. Im schlimmsten Fall kann dies bedeuten, dass die gewünschte Qualität oder die Projektziele nicht erreicht werden.
• Viele Designer:innen haben keine Erfahrung in der Programmierung und treffen Entscheidungen, die unerwartete Auswirkungen auf die Umsetzung haben. Das kann zu Verzögerungen oder Mehraufwand führen.

Je nach Projektgröße und Teamkonstellation gibt es weitere Punkte, die sich häufig als potenzielle Fehlerquellen erweisen. Viele Probleme sind auf mangelnde Kommunikation und schlechte Planung zurückzuführen.

Lösungen für deinen Designprozess.
Das solltest du beachten.

Es gibt einige Punkte, die vor, während und nach der Gestaltung von Websites und Apps zu beachten sind. Die folgende Liste soll helfen, die wichtigsten Punkte von Anfang an zu berücksichtigen.

• Bei den meisten Projekten ist es hilfreich, zunächst deine »Design Foundations« zu erstellen, also alle genutzten Schriftschnitte, Schriftgrößen, Farben, Abstände und andere Gestaltungsprinzipien zu sammeln. An diese Grundlagen solltest du dich beim Designen immer halten. Du solltest auch wiederverwendbare Komponenten oder Symbole verwenden und wenn möglich auf saubere Ebenen- und Komponentennamen achten. Stell dir einfach vor, du bekommst die Datei als Außenstehender. Was würdest du dir wünschen?
• Wurden alle notwendigen Vorlagen und Varianten im Design angelegt? Dabei solltest du auch an einiges denken, was zunächst nicht ganz offensichtlich ist: Empty States, Fehlermeldungen, Interaktionen, Edge Cases, Minimal- und Maximalausprägungen von Komponenten und Varianten für verschiedene Bildschirmgrößen. Wenn du diese Punkte nicht von Anfang an berücksichtigst, wird dich ein:e Entwickler:in wahrscheinlich während der Umsetzung darauf ansprechen. Dies kann für dich zu ungeplantem Mehraufwand führen.
• Wurden die Entwickler:innen in die Designphase einbezogen, so dass ein einheitliches Verständnis vorhanden ist? Wenn jemand deine Entwürfe zum ersten Mal sieht, fehlen manchmal wichtige konzeptionelle Hintergründe, die für die Entwicklung wichtig sind.
• Wurden bei der Erstellung der Entwürfe mögliche technische Limitierungen und Machbarkeiten besprochen? Hol dir rechtzeitig Feedback von den Entwickler:innen, damit du es in deinen Entwürfen berücksichtigen kannst.
• Wurden alle Gestaltungselemente und Prinzipien sorgfältig dokumentiert und ist klar definiert in welchem Zusammenhang sie genutzt werden sollten? (Schrifteigenschaften, Farben, Layout…)
• Wie wurden Interaktionen und Animationen definiert? Gibt es dazu originalgetreue Beispiele oder einfache Beschreibungen in Textform? Stelle sicher, dass das Verständnis bei allen beteiligten Personen gleich ist.
• Für die technische Umsetzung ist es nicht unbedingt notwendig zu wissen, warum welche Entscheidungen im Designprozess getroffen wurden. Es ist jedoch ratsam, die Regeln und Designvarianten zu dokumentieren. Du kannst zusätzlich verschiedene Anwendungsbeispiele ergänzen, um deine Ideen anschaulich zu vermitteln.
• Sind alle benötigten Assets vorhanden und für die Programmierung verwendbar (ggf. optimierte Bilder, Icons und Logos im Vektorformat, Webfonts etc.)?
• Wenn es Unklarheiten oder Fragen gibt, solltest du sie so schnell wie möglich klären. Warte nicht bis zum nächsten Termin, denn dann verlierst du unnötig Zeit und musst deine Entwürfe eventuell noch einmal überarbeiten. Mache dir am besten Notizen zu den technischen Rahmenbedingungen und frage immer nach, wenn du dir unsicher bist.

Grundsätzlich ist es ratsam, das Projekt zwischendurch immer wieder aus der Distanz zu betrachten. Frage dich, ob deine Ideen klar und verständlich aufbereitet sind, ob alle Fragen ausreichend geklärt sind und ob die Projektziele von allen Personen verstanden werden.

Nicht aufhören zu kommunizieren.

Im fortgeschrittenen Projektverlauf, wenn deine Designs umgesetzt werden, solltest du weiterhin mindestens als Ansprechpartner:in verfügbar sein. Häufig werden Rückfragen an dich gestellt oder du gibst Feedback, erklärst deine Ideen ausführlicher oder musst noch etwas nachliefern. Außerdem wäre es ideal, wenn die Entwickler:innen dir regelmäßig Zwischenstände zeigen würden, damit du Feedback geben kannst. In dieser Projektphase ist es besonders wichtig, regelmäßig zu kommunizieren.

Es ist also sinnvoll, vorab gewisse Rahmenbedingungen zu vereinbaren:

• Wie und wie häufig wird miteinander kommuniziert?
• Wie oft wird der Projektfortschritt besprochen? In der Regel sind mehrere feste Termine pro Woche sinnvoll (je nach Projektgröße). Diese Termine können genutzt werden, um den aktuellen Stand zu besprechen, Fragen zu stellen und ein gemeinsames Verständnis zu erreichen.
• Wenn dir etwas unklar ist oder du Abstimmungsbedarf hast, sprich so früh wie möglich mit den Entwicklern. Wenn du deine Fragen für dich behältst, können sie nicht gelöst werden. Das kann später zu größeren Problemen führen. Am besten ist es, einen gemeinsamen Kommunikationskanal einzurichten, der gut für euch funktioniert.

Zusammenfassung

Es ist besonders wichtig zu betonen, dass deine Arbeit als UI- oder Webdesigner:in niemals mit der Fertigstellung des Layouts enden sollte. Du solltest aktiv am Projekt beteiligt bleiben, um zumindest als Ansprechpartner*in für Rückfragen zur Verfügung zu stehen.

Eine regelmäßige und offene Kommunikation von Anfang an ist unerlässlich. Sprich mit erfahrenen Entwickler:innen über die technische Machbarkeit deiner Ideen, um unerwarteten Mehraufwand zu vermeiden. Bereite deine Entwürfe sorgfältig vor, dokumentiere sie nachvollziehbar und kommuniziere sie verständlich.

Stellt im Team sicher, dass ihr das gleiche Verständnis und die gleichen Erwartungen an das Projekt habt. Klärt rechtzeitig, wie ihr kommunizieren wollt, schafft funktionierende Kommunikationskanäle und seid in jeder Phase des Projekts transparent.