Kollaborativer Workflow zwischen Designern und Entwicklern
Die Zusammenarbeit zwischen Designern und Entwicklern ist entscheidend für den Erfolg eines jeden Projekts. Unseren Workflow ermöglicht es uns, schnell auf Kundenwünsche zu reagieren und eine reibungslose Kommunikation zwischen den verschiedenen Teams zu gewährleisten.
In diesem Artikel gibt eine unserer Entwicklerinnen Einblicke in den Workflow bei 1xINTERNET für eine gute Zusammenarbeit von Designern und Entwicklern.
Problemstellungen, die in Projekten auftreten können
Manchmal ist es mühsam, ein Projekt von Grund auf neu zu entwickeln, vor allem, wenn der Workflow zwischen Design und Entwicklern nicht gut organisiert ist. Als Entwickler verstehen wir den Entwurf des UX-Designs manchmal nicht, oder wir missverstehen Stile oder Funktionsweisen, wenn wir die Layoutstrukturen umsetzen sollen.
Deshalb müssen wir das Design immer wieder neu validieren, indem wir uns jede Komponente einzeln anschauen und sie auf ihre Konsistenz hin prüfen. Es kann vorkommen, dass wir die Funktionsweise bestimmter Elemente erraten müssen (wie das Hovering-Verhalten von Links), weil im Designentwurf nichts über die Funktion bestimmter Elemente definiert wurde.
Der Workflow zwischen Design und Entwicklern
Es ist sehr wichtig, eine gute Basis und eine definierte Struktur für Projekte zu haben. Das erleichtert die Entwicklung, weil wir genau wissen, wo wir bestimmte Informationen finden. Wir verwenden immer dieselbe Struktur und können daher problemlos zwischen Projekten hin- und herwechseln. Unabhängig davon, an welchem Projekt wir gerade arbeiten, wissen wir genau, wo wir Informationen zum Design finden. Wie definieren wir den besten Prozess für unseren Workflow, um Design und Entwicklung aufeinander abzustimmen?
Enge Abstimmung zwischen Kunden, Designern und Entwicklern
Eine gute Kommunikation zwischen allen Beteiligten eines Projekts ist wichtig. Deshalb treffen wir Entwickler uns regelmäßig mit den Designern, um uns abzustimmen und sicherzustellen, dass alles auf die Bedürfnisse des Kunden abgestimmt ist. Diese Treffen sind entscheidend, um Unklarheiten zu beseitigen oder die letzten Änderungen zu besprechen, um sicherzustellen, dass Kundenwünsche richtig umgesetzt werden.
Einheitliche Templates
Unsere Templates haben immer die gleiche Struktur. Dadurch ist die Anpassung an jedes Projekt problemlos möglich und die Elemente sind immer leicht zu finden. Diese Templates fungieren als Brücke zwischen Designern und Entwicklern. So ist es möglich, zwischen verschiedenen Projekten wechseln zu können und sich auch in neuen Projekten schnell zurechtzufinden.
Permanente Verbesserungen für beste Qualität
Der Prozess der Revision/ Qualitätsanalyse ist bei 1xINTERNET fest verankert. Unsere Entwickler sind von Anfang an in die Projekte mit eingebunden. Sobald eine neue Funktion gefunden wird, die auch für andere Projekte geeignet erscheint, wird sie in das Designtemplate integriert und kann anschließend für alle Projekte verwendet werden.
Setzen Sie Ihr Drupal-Projekt erfolgreich mit uns um
Methoden für eine guten Zusammenarbeit im Team
Für das Designteam:
Alle Design-Themes werden in Figma dokumentiert, dem Tool, das wir zur Verwaltung des Workflows zwischen Designern und Entwicklern verwenden. Sobald wir ein Projekt aufgesetzt haben, können wir es hier dank der vordefinierten Design-Templates, Muster und Komponenten leicht reproduzieren und modifizieren.
Anpassungen des Designs an ein neues Projekt
Jedes Mal, wenn wir ein neues Projekt starten, richten wir zuallererst ein neues Basis-Theme und ein neues Designsystem ein.
Im Designsystem haben wir ein atomares Design, d. h. ein aus Einzelteilen bestehendes System, das wir zu Elementen und Templates zusammenfügen. Diese können mehrfach verwendet werden, um effektive und reproduzierbare Schnittstellen-Designsysteme zu erschaffen.
Mit dieser Methodik im Hinterkopf haben wir eine allgemeine Checkliste aller Elemente, die die Designer gestalten müssen. Wir können auf Grundlage unserer Templates gewünschte Anpassungen vornehmen, wodurch der erste Aufwand reduziert wird. Zudem trägt dies zur Konsistenz des Projekts bei. Erfahren Sie mehr über die wichtigsten Grundsätze des atomaren Designs!
Sobald wir das Designsystem mit den Stilen für das neue Projekt aktualisiert haben (Markenfarben, Schriftart, Abstände usw.), folgen die nächsten Schritte: die Anwendung der Lösung und die Drupal-Integration, um mit den reellen Datensätzen zu arbeiten.
Praktische Beispiele und Projektintegration
Zu Beginn des Projekts müssen wir die Anforderungen des Kunden verstehen, dann passen wir das Design an, aktualisieren die Komponenten und integrieren sie anschließend in Drupal.
Das folgende Beispiel zeigt, wie wir Lösungen anwenden und integrieren:
Wenn wir zum Beispiel eine Karte (Webkomponente Molekül) in Drupal integrieren wollen, müssen wir zunächst festlegen, welche Informationen wir anzeigen wollen. Stellen wir uns vor, dass wir Kurzinfos zu einem Blog-Contenttyp anzeigen wollen.
Es gibt verschiedene "Arten" von Karten, z. B. Karten mit Bild, mit Link, mit hinterlegten Informationen. Hier wollen wir eine Karte verwenden, die einen Titel, einen Autor und einen Link zum Lesen von hinterlegten Informationen enthält. Im Blog Content-Typ werden wir dafür bestimmte Bereiche verwenden, die innerhalb der Karte ausgewählt werden können. Im Falle des Titels der Karte werden wir zum Beispiel ein bestimmtes "Label" verwenden und das entsprechende Template aufrufen. So geht es weiter mit allen Informationen, die wir anzeigen wollen.
So wird es schließlich angezeigt:
Bei 1xINTERNET haben wir einen kollaborativen Workflow entwickelt, um Projekte auf die effizienteste Art und Weise zu realisieren. Wir verwenden dafür einen wiederkehrenden Designprozess und fördern die Kommunikation und Zusammenarbeit von Designern und Entwicklern während des gesamten Projekts. Mit diesem bewährten Ansatz erreichen wir Folgendes:
- Kommunikation: Eine gute Kommunikation im Team ist die Grundlage für ein erfolgreiches Projekt.
- Stabilität: Designer und Entwickler arbeiten gemeinsam und aufeinander abgestimmt.
- Struktur: Mit einer guten Struktur, die auf Templates basiert, können wir schneller auf Bedarf reagieren und Anpassungen umsetzen. Unser Code ist einfach zu handhaben und leicht wiederverwendbar.