Wie man einen Design-Handoff-Prozess erfolgreich durchführt?

Sind Sie Freiberufler:in? Oder ein Start-up oder vielleicht ein etabliertes Technologieunternehmen? Unabhängig davon ist ein Design-Handoff-Prozess für jeden Produktentwicklungsprozess von großer Bedeutung. Selbst mit einem hochqualifizierten Produktteam kann die Phase vom Design zur Entwicklung sehr herausfordernd sein. In diesem Artikel beleuchten wir die notwendigen Schritte für einen reibungslosen Handoff.  

Was ist ein Design-Handoff?

Der Design-Handoff ist die Phase im Produktentwicklungsprozess, in der Designer:innen ihre Ideen zur Entwicklung übergeben. Er findet im Wesentlichen statt, wenn alle Designanforderungen erfüllt und Prototypen getestet wurden. Anschließend wird das Design zur Codierung an die Entwickler:innen übergeben. Obwohl der Handoff am Ende des Designprozesses erfolgt, ist es von immenser Bedeutung, dass Designer:innen und Entwickler:innen von Beginn jeder Designaufgabe an eng kommunizieren.

Praktisch lässt sich der Handoff-Prozess als die Überführung des Designergebnisses in software-engineering-orientierte Informationen beschreiben, sodass sowohl Designer:innen- als auch Entwickler:innen-Teams in einer gemeinsamen Sprache kommunizieren können. Mithilfe einer solchen gemeinsamen Sprache kann der Handoff-Prozess reibungslos und einfach gestaltet werden. 

Die Notwendigkeit eines Design-Handoffs

Wenn Sie Unternehmer:in sind, wie würden Sie den Eintritt in den Softwaremarkt zur Produkteinführung sehen? Sind Sie nicht der Meinung, dass das Design Ihres Produkts einen guten Zweck erfüllen und die Identität Ihrer Marke widerspiegeln sollte? Zudem zieht gut durchdachte Software die Aufmerksamkeit der Verbraucher:innen stärker auf sich, und wenn sie ihren Zweck erfüllt, ist der Erfolg zweifellos garantiert. Um mehr über Design für nachhaltige Aufmerksamkeit zu erfahren, klicken Sie hier.

Obwohl es vorteilhaft ist, Software zu haben, die gut funktioniert, kann ein großartiges Design Ihrem Produkt einen erheblichen Mehrwert verleihen. Aus diesem Grund sollte eine gut durchdachte Design-Handoff-Checkliste griffbereit sein, um eine starke Verbindung zwischen Designer:innen und Entwickler:innen aufzubauen, die zur Entwicklung nützlicher Software führt.

Was sind die Herausforderungen? 

Der Design-Handoff-Prozess birgt zahlreiche Herausforderungen. Es ist sehr wichtig, diese im Auge zu behalten, damit der Handoff-Prozess Ihres Unternehmens verbessert und gleichzeitig einfach und bequem gestaltet werden kann.

• Mangelhafte Kommunikation zwischen Designer:innen und Entwickler:innen

Wie wir alle wissen, ist Kommunikation der Schlüssel zu einer gesunden Beziehung. Daher ist sie auch im Design-to-Dev-Handoff-Prozess erforderlich, um eine gute Beziehung zwischen Designer:in und Entwickler:in aufrechtzuerhalten. Es zeigt sich, dass Kommunikationsstörungen zwischen beiden Teams zu verschiedenen Arten von Missverständnissen und Problemen führen, was zu einer schlechten Benutzererfahrung führt. Einige der häufigsten Probleme, die aus mangelhafter Kommunikation zwischen den Teams entstehen, sind:

• Unnötige, vielfältige Feedbackschleifen zwischen Designer:innen und Entwickler:innen;
• Unvorhergesehene Qualitätssicherungsprobleme, QA-Probleme, die zeitaufwändiger sind als erwartet;
• Unfähigkeit, überlappende Fähigkeiten zu nutzen;
• Unzureichende Nutzung neuer Tools, die die Zusammenarbeit erheblich erleichtern könnten. 

• Unterschiede zwischen Entwickler:innen und Designer:innen 

Da Designer:innen und Entwickler:innen aus völlig unterschiedlichen Bereichen kommen, haben sie oft unterschiedliche Interessen und Fähigkeiten und gehen folglich Herausforderungen ganz anders an. Das ist jedoch durchaus verständlich. Ich möchte hinzufügen, dass, wenn Sie ein Team aus Designer:innen und Entwickler:innen haben, die sich nicht um die Aktivitäten der anderen kümmern, eine Wissenslücke entsteht, die zu Konflikten oder Disharmonie führen kann. 

Um mehr über die Bedeutung der Kommunikation zwischen Designer:innen und Entwickler:innen zu erfahren, klicken Sie hier.

• Fehlen eines Designsystems

Das Fehlen eines geeigneten Designsystems erlaubt es den Designer:innen nicht, klare Parameter zu haben, die so hilfreich sein könnten. Folglich neigen Designer:innen dazu, kreativer zu werden und Inkonsistenzen zu schaffen, was zu schlechten Benutzererfahrungen führt und Entwickler:innen demotiviert. Daher wird der gesamte Handoff-Prozess stark beeinträchtigt. Lesen Sie mehr über nutzerzentriertes Design und Nutzervertrauen, um mehr über die Bereitstellung einer guten Benutzererfahrung zu erfahren.

• Mangelnde Konsistenz

Inkonsistenz kann zu größeren Schwierigkeiten führen. Sie werden feststellen, dass dies der Fall ist, wenn eine Komponente in den Design-Mockups verschiedene Versionen in mehreren Mockups aufweist oder sogar nicht mit der Dokumentation übereinstimmt. Zum Beispiel die Schriftgröße. Ein:e Entwickler:in kann durch solche Diskrepanzen verwirrt werden. 

Lassen Sie mich Ihnen einige häufige Stellen zeigen, an denen solche Inkonsistenzen auftreten. Erstens: Wenn die Überschrift in der Newsletter-Komponente der Überschrift in der Kartenkomponente ähnelt, sollen sie dann gleich oder unterschiedlich sein? Zweitens: Abstände – der horizontale Abstand in der Karussell-Komponente beträgt 21px, kann er auf 20px normalisiert werden? Wie sieht es mit dem Abstand unter dem Menü aus, der 18px beträgt – kann er normalisiert oder zu einer Variablen abstrahiert werden? Schließlich: Inkonsistenzen zwischen mobilen und Desktop-Mockups – der Button ist auf dem Desktop um 25px und auf dem Mobilgerät um 20px vom Formularelement versetzt. Wird dies als Fehler betrachtet? Und wenn ja, welcher Wert soll gewählt werden?

• Design-Mockups schaffen unrealistische Möglichkeiten  

Es zeigt sich, dass Design-Mockups manchmal unrealistische Möglichkeiten schaffen, zum Beispiel, wo alle Namen die gleiche Länge haben. Es gibt einen großen Unterschied zwischen Annahmen und Realitäten, da sehr viele Dinge auf einer Website platziert werden können. Was zum Beispiel, wenn der Text länger ist als im Mockup gezeigt? Wenn der Inhalt zudem seine empfohlenen Grenzen überschreitet, denken die Entwickler:innen oft an Dinge wie diese:

• Soll dies dem Raster entsprechen? Wird es umbrechen?
• Soll das CMS eine Zeichenbegrenzung durchsetzen?
• Soll es mit JavaScript begrenzt werden? Und auch eine Ellipse hinzugefügt werden?

• Mangelnde ordnungsgemäße Dokumentation

Wenn jemand lediglich „Mockups“ erhält, kann das eine Fülle von Informationen auf einmal sein, ohne jeglichen Kontext. Hier ein kleines Beispiel zum besseren Verständnis: Wenn Sie eine einzelne Landingpage erstellen, wird Ihnen das keine Schwierigkeiten bereiten. Wenn Sie jedoch ein komplettes Designsystem für ein CMS mit Hunderten von Komponenten implementieren, kann das sehr mühsam sein. Wenn zudem ein komplexes Design ohne Dokumentation präsentiert wird, müssen die Entwickler:innen die Dokumentation selbst erstellen. Das bedeutet:

• Ein Inventar der Abstände. Ist ein Raster verfügbar? Wenn ja, wie soll es aussehen?
• Ein Inventar aller Typografie-Stile.
• Ein Inventar aller Komponenten.

Das bedeutet viele Tabellenkalkulationen. Es kostet tatsächlich Zeit, und rechnen Sie daher 2-3 Tage für kleine Websites und 1-2 Wochen für größere Websites ein. Außerdem wird es sicherlich nicht beim ersten Mal korrekt sein, sodass später eine Nachbearbeitung erforderlich sein wird. Wenn Sie Teil eines größeren Front-End-Entwicklerteams sind, ist Dokumentation nicht optional. Und wenn Sie alleine arbeiten, müssen Sie sie erstellen, um Annahmen zu validieren, gut mit Designer:innen zu kommunizieren und etwas zu haben, das Sie übergeben können, wenn/während Sie das Projekt verlassen. 

Praktiken, die helfen, die Herausforderungen zu mindern

Nachdem Sie nun eine Vorstellung von den Herausforderungen im Design-Handoff-Prozess haben, wollen wir nun die Lösungen zur Bewältigung dieser Schwierigkeiten in Form von Best Practices für den Design-Handoff beleuchten. 

• Frühe Kommunikation hilft

Eines der Hauptprobleme dieses Handoff-Prozesses ist die mangelnde Kommunikation. Es ist sehr wichtig, dass Entwickler:innen so früh wie möglich in den Designprozess einbezogen werden, regelmäßige Diskussionen führen und auch die Ideen und Vorschläge der Entwickler:innen in Brainstorming- und Prototyping-Sitzungen einbeziehen. Ein weiterer wichtiger Aspekt ist das Einholen von Feedback von den Entwickler:innen, da sie die Expert:innen sind, die wissen, was umgesetzt werden kann und was nicht. 

• Die gleiche Sprache sprechen ist der Schlüssel

Kommunikation ist wichtig, einverstanden. Aber was nicht übersehen werden sollte, ist die Art und Weise, wie Sie kommunizieren. Daher sollten Designer:innen und Entwickler:innen eine gemeinsame Sprache sprechen und während des gesamten Prozesses auf dem gleichen Stand sein. Unabhängig von der Verfügbarkeit von Mediator:innen sollten beide Teams zusammenarbeiten, um die besten Ergebnisse und Leistungen zu erzielen.

Designer:innen müssen darauf achten, dass nicht jeder die wahre Bedeutung versteht, wenn sie über Dinge wie Moodboards, Anschnitte, Kerning, Hurenkinder oder Deckkraft sprechen. Andererseits sind Entwickler:innen fasziniert, wenn sie von Widgets, Crawling, WYSIWYG, Cache oder API hören.

• Wissenslücken zwischen den Parteien reduzieren

Sie werden feststellen, dass Menschen in der Regel so sehr mit ihren eigenen Aufgaben beschäftigt sind, dass sie sich nicht darum kümmern, womit andere beschäftigt sind. Folglich führt dies zu einem Mangel an Verständnis zwischen verschiedenen Gruppen, die am selben Projekt arbeiten. Daher können durch die Verringerung der Wissenslücken zwischen Designer:innen und Entwickler:innen wesentlich bessere Ergebnisse erzielt werden. Zum Beispiel könnten Designer:innen großartige Ideen haben, die sich in komplexen Code übersetzen lassen, und die von einem:r Entwickler:in vorgeschlagene Lösung passt möglicherweise nicht gut zu einem benutzerfreundlichen Design. In solchen Situationen ist es daher ratsam, bereits in einem frühen Stadium des Handoff-Prozesses Gespräche zwischen den Teams zu führen. 

• Frühe Einbindung von Entwickler:innen

Einer der Fehler, den Teams machen, ist zu warten, bis die Designer:innen ihre Arbeit zuerst erledigt haben und dann das Produktdesign an die Entwickler:innen zu übergeben. Das kann wirklich verwirrend sein. Wenn Sie den Handoff-Prozess also reibungslos gestalten möchten, ist es ratsam, die Entwickler:innen bereits in den frühen Schritten des Prozesses einzubeziehen, wie zum Beispiel:

• Entwickler:innen die Teilnahme an Telefonkonferenzen mit Kund:innen ermöglichen;
• Einblicke von Entwickler:innen einholen, wie Designelemente in eine Webanwendung übersetzt werden könnten;
• Erste Designideen mit Entwickler:innen besprechen, da dies hilft, Code-Probleme frühzeitig zu erkennen, während Anpassungen noch einfach sind. 

• Teams zusammenbringen

Es kann eine großartige Idee sein, alle zusammenzubringen, anstatt sie ihr eigenes Ding machen zu lassen. Alle Teammitglieder gemeinsam an derselben Funktion im selben Raum arbeiten zu lassen, kann sehr viel Spaß machen. Wenn Designer:innen und Entwickler:innen an verschiedenen Standorten arbeiten, können Sie von Zeit zu Zeit virtuelle Meetings einrichten, um ihnen die Möglichkeit zu geben, ihren Arbeitsfortschritt zu besprechen. Solche kleinen menschlichen Interaktionen können einen großen Nutzen für Ihre Produktergebnisse und -erfolge haben. 

• Kommunikationsbemühungen optimieren

Aufgrund der Vielzahl an Kommunikationskanälen können Nachrichten übersehen und Teammitglieder unwissentlich ausgeschlossen werden. Wir sehen auch, dass dies selbst den besten Teams passiert und eine große Herausforderung für remote arbeitende Teams darstellt. Solche Bedenken können verhindert werden durch:

• Bereitstellung eines dedizierten Kanals, zu dem alle relevanten Parteien eingeladen sind;
• Erstellung von Kommunikationsrichtlinien (z.B. E-Mail-Updates müssen zu Beginn oder am Ende jedes Arbeitstages mit allen geteilt werden, Updates sollen regelmäßig im Kanal mit dem @here-Befehl geteilt werden usw.);
• Nutzung von Google Drive, Dropbox oder ähnlichen Tools zum Teilen von Informationen, gemeinsamen Assets usw.;
• Regelmäßige Gruppentreffen mit allen Teammitgliedern während des gesamten Projekts durchführen;
• Bei Zweifeln einen Anruf tätigen.

• Vorbereitung auf den Entwickler-Handoff

Zu diesem Zeitpunkt können neue Probleme auftreten. Wenn zum Beispiel ein Design von der Seite abweicht, erfordert dies zusätzliche Anpassungen sowohl von den Designer:innen- als auch von den Entwickler:innen-Teams. Um potenzielle Probleme im Handoff-Prozess zu reduzieren, können Sie daher vollständige Bildschirmaufnahmen erstellen und Notizen zu den Designs hinzufügen. Es gibt auch verschiedene Plugins zum Erstellen von Bildschirmaufnahmen. Wenn Sie Notizen zu den Designs hinzufügen möchten, ist Sketch eines der besten Tools, obwohl es viele andere Apps gibt, für die Sie sich entscheiden können. Sie können klar mit Tools wie Figma, InVision, Adobe, Marvel (Mason) kommunizieren. Es ist immer ratsam, eine gründliche Recherche bezüglich der für Sie und Ihr Team geeigneten Tools durchzuführen. 

• Bereitstellung von Designdateien und allen erforderlichen Assets

Ein:e Designer:in trägt eine große Verantwortung, den Entwickler:innen zum Erfolg zu verhelfen. Es kann sehr vorteilhaft sein, wenn Designer:innen alle erforderlichen Designdateien und Assets mithilfe von Google Drive, Dropbox und sogar einigen anderen Tools an die Entwickler:innen weitergeben können. 

• Informationen zu den neuesten Trends teilen

Es liegt in der Verantwortung sowohl der Designer:innen als auch der Entwickler:innen, mit den neuesten Trends Schritt zu halten, um ansprechende Produkte für die Nutzer:innen zu schaffen. Beide Teams können interessante Artikel oder Informationen über neue Entwicklungen und deren Umsetzungsprozesse austauschen. Ein solcher Austausch neuer Ideen, Pläne und Erkenntnisse auf verschiedenen Ebenen kann eine große Hilfe sein. Um mehr darüber zu erfahren, wie Sie Ihren Design-Geist frisch und innovativ halten, klicken Sie hier.

• Ein Handoff-Meeting durchführen

Ein Handoff-Meeting kann als sehr effektiver Weg angesehen werden, um einen reibungslosen Übergabeprozess zwischen Design- und Entwicklungsteams zu implementieren. Solche Meetings können die Energie der Mitarbeiter:innen steigern und alle Arten von Zweifeln und Bedenken klären, was zu einem erfolgreichen Handoff zwischen Designer:innen und Entwickler:innen führt.

Zum Beispiel können beide Teams eine ausführliche Diskussion über Qualitätssicherung und Launch-Phasen führen. Sie können berechtigterweise klare Zeitpläne und Erwartungen festlegen, die den Mitarbeiter:innen helfen, Klarheit über ihre Aufgaben und Verantwortlichkeiten zu gewinnen.

• Wissensüberschneidungen nutzen

Wie bereits erwähnt, können Wissenslücken ein großes Problem bei der Durchführung eines reibungslosen Handoff-Prozesses darstellen. Zum Beispiel werden Sie feststellen, dass es Designer:innen gibt, die großartige Ideen haben, aber da ihnen Programmierkenntnisse fehlen, können ihre Ideen möglicherweise nicht umgesetzt werden. Im Gegenteil, die Entwickler:innen sind sich nicht immer bewusst, dass etwas, das technisch möglich ist, nicht unbedingt zu einer guten Benutzererfahrung führt. Daher können durch die Nutzung von Wissensüberschneidungen alle Probleme und Bedenken, die durch mangelndes Verständnis zwischen den Teams verursacht werden, leicht gelöst werden.

• Einen Prototyp bereitstellen

Eine der besten Möglichkeiten, einen Handoff erfolgreich durchzuführen, ist die Erstellung interaktiver Prototypen. Die Verfügbarkeit eines Prototyps kann allen helfen, ihr gemeinsames Ziel zu verstehen und die Richtung zu erkennen, in die sich das Produkt entwickelt. Zusätzlich kann er helfen, die geplante Navigationsstruktur der Website, den primären Benutzerfluss, Animationen und Interaktionen sowie die interne Verlinkung der Website oder Anwendung zu veranschaulichen. Um mehr über Prototyping in der Softwareentwicklung zu erfahren, klicken Sie hier.

• Ein Designsystem erstellen

Um die Effizienz zu steigern und konsistente Erlebnisse zu liefern, müssen sich Teams auf Standard-Namenskonventionen, festgelegte Verfahren und die Erstellung eines Designsystems einigen. Dies wird die Zusammenarbeit zwischen Designer:innen und Entwickler:innen verbessern und das Unternehmensprodukt beim Skalieren konsistenter machen. Um mehr über den Aufbau eines Designsystems im großen Maßstab zu erfahren, klicken Sie hier.

• Ordnungsgemäße Dokumentation pflegen

Das primäre Ergebnis der Dokumentation ist ein Styleguide. Er muss priorisiert werden, da er einen wesentlichen Beitrag zu einem reibungslosen Handoff-Prozess leistet. Der Styleguide variiert also in seiner Komplexität, von aufwendig bis simpel. Ein Styleguide kann als interaktive Website gehostet werden oder auch ein Google Doc sein. Er besteht aus:

• Rastersystem und Abstände
• Farben
• Typografie-System
• Designprinzipien, Ressourcen und Personas, die während der Discovery-Phase gesammelt werden

Design-Handoff-Tools können vorteilhaft sein 

Designer:innen nutzen in der Regel Teammanagement-Tools, soziale Medien oder sogar andere Kommunikationstools, um das Entwickler:innen-Team zu erreichen. Doch durch den Einsatz eines Handoff-Tools kann die Kommunikation erheblich verbessert werden. Neben einer besseren Koordination können Designer:innen Zeit sparen, indem sie ihre Ideen einfach an die Entwickler:innen übertragen, die diese dann umsetzen und in exzellente Produkte verwandeln können. Auch für die Entwickler:innen kann es vorteilhaft sein, da Fehler in einem sehr frühen Stadium des Handoff-Prozesses behoben werden können. Diese Tools ermöglichen es Designer:innen, das Design in Code zu übersetzen, damit Entwickler:innen es verstehen und beim Aufbau hochwertiger Produkte nutzen können. Schauen wir uns nun einige nützliche Design-Handoff-Tools für Designer:innen an, die zu einem reibungslosen Design-Handoff führen können. 

• Mockplus Cloud

Mockplus Cloud kann als All-in-One-Kollaborations- und Handoff-Tool für Designer:innen und Entwickler:innen angesehen werden, um Prototypen zu erstellen, zusammenzuarbeiten und Designs an einem Ort zu übergeben. Mit diesem Tool können Designer:innen Wireframes, Hi-Fi-Prototypen und andere visuelle Designs direkt aus Sketch, Photoshop, Adobe XD und Figma reibungslos importieren. Zudem können alle relevanten Design-Spezifikationen wie Abstände, Maße, Assets und Code-Snippets einfach generiert werden. Mit einem einzigen Link können Designer:innen alles an Entwickler:innen übergeben. So wird es für Entwickler:innen einfach, sich mit einem Link anzumelden, Designs zu prüfen, Code-Snippets anzuzeigen und Assets mit einfachen Klicks herunterzuladen. Es gibt auch eine Funktion, bei der alle Ressourcen automatisch an die Plattform angepasst werden können, für die Sie entwickeln. Während die Projekte mit Designsystemen verknüpft sind, können Entwickler:innen auch Variablennamen verschiedener Farben, Schriftarten und anderer Komponenten problemlos anzeigen. Es beschleunigt den Entwicklungsprozess insgesamt.

Die wichtigsten Funktionen umfassen:

• Import von Designs mit Assets aus Sketch, Adobe XD, Photoshop und Figma;
• Hochladen von Prototypen aus Axure, Justinmind, Mockplus und Dokumenten;
• Erstellung von UI-Flows und interaktiven Prototypen per Drag-and-Drop;
• Kommentieren, Überprüfen, Testen und Iterieren von Designs mit einfachen Klicks;
• Prüfen, Kopieren und Herunterladen von Design-Spezifikationen, Assets und Code-Snippets mit einem Klick;
• Es verbindet Design und Engineering eng miteinander.

• Zeplin

Zeplin ist in Sketch, Figma, Photoshop und Adobe XD integriert. Mit jedem dieser Tools können Sie Ihre Designs in CSS, Swift, Android, Objective-C oder React Native Code übersetzen. Gleichzeitig können Sie sogar die Stile jeder Ebene und markierte Assets exportieren. Dieses Tool hat Kollaborationsanwendungen wie Jira, Slack und Trello integriert.

• Die wichtigsten Funktionen umfassen:
• Integration mit Jira, Slack und Trello;
• Generierung von RGB- und HEX-Werten für alle Ihre Designs;
• Bereitstellung von Buttons, Icons oder Layern mit markierten Assets;
• Unterstützung verschiedener Plattformen, einschließlich iOS, Android und Web.

• Avocode

Avocode kann als nützliches und praktisches Handoff-Tool angesehen werden. Es gibt kaum einen Unterschied zwischen Zeplin und Avocode. Dieses Tool hat die Integration mit Sketch, Adobe XD und Photoshop erreicht. Es funktioniert auch mit Figma und Linux. Derzeit ist es das einzige Tool, das diese Funktion bietet. Es ermöglicht die Versionskontrolle und Zusammenarbeit mit E-Mail-Benachrichtigungen. Zusätzlich ist es auch in Slack integriert, um seinen Benutzer:innen eine bessere Organisation und Kommunikation mit den Teams zu ermöglichen. 

Die wichtigsten Funktionen umfassen:

• Unterstützung von CSS-Code-Exporten und dem Export mehrerer Bilder;
• Export von Stilen nach SASS, Stylus und Less;
• Unterstützung verschiedener Plattformen, einschließlich Web, macOS, Windows und Linux;
• Bereitstellung vollständiger Spezifikationen, Farben (HEX, RGBA, HSLA), Schriftarten, Stile und Größen. 

• Marvel 

Marvel ist sehr beliebt für seine extrem benutzerfreundliche Oberfläche. Es ist eines der am einfachsten zu beherrschenden Tools. Daher dauert es nicht lange, sich mit diesem Tool vertraut zu machen. Es ist ein narrensicheres Handoff-Tool, das Ihnen hilft, verschiedene Interaktionen mühelos zu synchronisieren. Es ist eine Webanwendung und funktioniert sehr gut mit Sketch. 

Die wichtigsten Funktionen umfassen:

• Designs sofort in Code, Spezifikationen und Assets umwandeln;
• Immer synchron mit den neuesten Designänderungen;
• Code als CSS, Swift und Android XML exportieren;
• Handoff funktioniert mit Sketch oder in Marvel erstellten Designs 

• Sympli

Sympli kann als sehr leistungsstarkes Handoff-Tool angesehen werden. Es ist in Sketch, Photoshop und Adobe XD integriert. Zudem verfügt es über eine Git-basierte App namens Versions. Diese Anwendung ist derzeit nur für macOS verfügbar. Es verfügt über eine benutzerfreundliche Oberfläche und zahlreiche nützliche Funktionen, die sich für Entwickler:innen als sehr vorteilhaft erweisen. Mithilfe dieses Tools können Sie Ihren Workflow mit Jira, Azure Boards, Microsoft Teams und Slack-Integration optimieren. 

Die wichtigsten Funktionen umfassen:

• Überprüfung und Zusammenarbeit mit Inline-Kommentaren;
• Sketch-, Figma-, Adobe XD- und Photoshop-Mockups in Assets und Spezifikationen umwandeln;
• Integration mit Projektmanagement- und Entwicklungstools; 

• InVision

InVision ist eines der bekanntesten Tools der Branche. Als Produktdesign-Plattform verfügt es sogar über eine Handoff-Funktion. Dieses Tool unterstützt viele Plugins und Integrationen. InVision verfügt über ein Add-on für Sketch und Photoshop. Dieses nützliche Widget heißt Craft. Es ermöglicht Benutzer:innen, ihre Designs mit InVision zu synchronisieren. Folglich können alle Änderungen mit dem gesamten Team synchronisiert werden, und Designer:innen können jederzeit zur neuesten Version wechseln oder Updates zurücksetzen. Gleichzeitig können Entwickler:innen sie prüfen und daraus echten Code generieren.

Die wichtigsten Funktionen umfassen:

• Spezifikationen für unterbrechungsfreie Entwicklung personalisieren;
• Design in Code umwandeln mit entwicklerfertigen Spezifikationen;
• Integration mit Jira, Confluence, Storybook und Trello;

• Figma

Für Design, Prototyping und Zusammenarbeit ist Figma eine der besten Plattformen. Eine Design-Handoff-Funktion wird ebenfalls von dieser Plattform unterstützt. Als One-Stop-Plattform bietet es eine praktische Funktion für Entwickler:innen. Zudem können Entwickler:innen mit reiner Lesezugriffsberechtigung die Seiten und Frames der Datei navigieren. Sie erhalten sogar Zugriff auf alle exportierbaren Ressourcen wie Bilder und Stile. Derzeit unterstützt es CSS, Swift und XML. Zudem verfügt es über eine Side-by-Side-Vergleichsfunktion, die es Entwickler:innen ermöglicht, zwei Fenster mit einfachen Klicks zu vergleichen.

Die wichtigsten Funktionen umfassen:

• Größe, Abstand und Designeigenschaften anzeigen;
• Einstellungen für verschiedene Plattformen markieren;
• Offline-Export von Design-Markierungen.
• Senden Sie einen Link zu Ihrem Prototyp oder betten Sie ihn in Ihr bevorzugtes Tool ein.

• Adobe XD

Für Wireframing, Prototyping und Zusammenarbeit ist Adobe XD eine der bekannten Plattformen. Als vektorbasiertes User Experience Design-Tool für Web- und Mobil-Apps unterstützt es auch geeignete Design-Handoff-Funktionen, die von Entwickler:innen genutzt werden können, um aus dem Design zu erstellen. Diese Plattform unterstützt Funktionen wie Trigger, Interaktionen, Vorschau, Overlay-Unterstützung, Export nach After Effects. Zusätzlich bietet es Zustände, Wiederholungsraster, Vektorzeichenwerkzeuge, Präzisionsdesignwerkzeuge, Asset-Export, responsives Resizing. Mit dieser Plattform können Sie mühelos mit Dropbox Paper, Jira, Microsoft Teams, Slack, Zeplin und mehr arbeiten.

Die wichtigsten Funktionen umfassen:

• Links und CSS-Snippets an Entwickler:innen senden;
• Gespräche und Feedback von Stakeholdern direkt verfolgen;
• In Echtzeit zusammenarbeiten und eine einzige Quelle der Wahrheit schaffen;
• Benutzerdefinierte Namen für Farben und Zeichenstile zur Verwendung im Coding erstellen.

• Framer

Framer kann als vollständiges Design-Tool angesehen werden, das schnelles Prototyping, Bausteine und zahlreiche Design-Ressourcen bietet. Ursprünglich war es ein JavaScript-basiertes interaktives Tool. Doch jetzt gibt es Framer X, ein Tool, das den gesamten Designprozess optimiert. Zweifellos unterstützt dieses Full-Service-Tool die Design-Handoff-Funktion. Während Prototypen erstellt werden, können Entwickler:innen den Code direkt auf dem Canvas rendern und mit nur wenigen Klicks HTML, CSS und fortgeschrittene React-Komponenten erhalten. 

Die wichtigsten Funktionen umfassen:

• Integration mit Figma und Sketch;
• Unterstützung von Plattformen wie Web, macOS, iOS, Android;
• Code als CSS und HTML exportieren. 

• Specctr

Das Specctr Handoff-Tool kam vor einigen Jahren auf den Markt. Es hilft Designer:innen, den Handoff-Prozess zu vereinfachen. Dieses Tool verfügt insbesondere über ein einzigartiges Panel, das Designer:innen eine schnelle und einfache Möglichkeit bietet, ihre Projekte zu erstellen und zu verwalten. Sie können CSS im Browser vorschauen. Es ermöglicht Ihnen, Stile mit Projektseiten zu synchronisieren und Projekte mit Entwickler:innen, Teamkolleg:innen und anderen Benutzer:innen zu teilen. Zudem ermöglicht das Specctr-Panel, Ihr Dokument in wenigen Sekunden zu redlinieren, was sehr vorteilhaft und praktisch ist.

Die wichtigsten Funktionen umfassen:

• Code als CSS exportieren;
• Spezifikationen in die Cloud hochladen.

Sehen wir uns nun an, was Sahil Sharma, UX/UI-Designer bei OSL, zum Design-Handoff-Prozess zu sagen hat. Sahil ist ein sehr kreativer Designer, der seine Kund:innen stets mit seinen außergewöhnlichen Designfähigkeiten und -techniken überrascht. In unserem Gespräch erzählte er, wie einige der nützlichen Handoff-Tools dazu beitragen, ein insgesamt einheitliches Designsystem bereitzustellen. Die Tools helfen im Wesentlichen dabei, die Lücke zwischen Designer:innen und Entwickler:innen zu schließen und ermöglichen es Designer:innen, Designs einfach zu generieren, die den gewünschten Designstandards und -spezifikationen entsprechen. Bei OSL hat Sahil mehrere Projekte unter Verwendung verschiedener Design-Handoff-Tools betreut, von denen er einige seiner Projekterfahrungen teilte. 

Das erste Projekt, mit dem ich mich vertraut gemacht habe, ist Techtud. Für dieses Projekt nutzte Sahil das Design-Handoff-Tool Figma, um das gesamte Techtud-Projekt zu gestalten. Da Prototyping, wie wir wissen, eine der wichtigsten Aufgaben ist, die richtig gehandhabt werden muss, bevorzugte Sahil hier die Verwendung des Prototyping-Tools InVision App, da es Ihnen ermöglicht, schnell und einfach interaktive Mockups für Ihre Designs zu erstellen. Zusätzlich hilft es auch, diese Mockups mit Ihrem Team oder Kund:innen zu teilen, sobald Sie bereit sind. Schließlich konnten die Entwickler:innen mithilfe des Design-Handoff-Tools Zeplin Sahils fertiges Design präzise prüfen und implementieren und ihren Arbeitsprozess bedenkenlos fortsetzen.

Dann stießen wir auf ein Drupal-Website-Entwicklungsprojekt für eine digitale Blockchain-Plattform. Für dieses Projekt nutzte Sahil insbesondere das Tool Adobe XD, da es eine gute Zusammenarbeit mit den Entwicklungsteams ermöglichte. Dieses Tool ermöglichte es ihm, wichtiges Feedback von Entwickler:innen bezüglich Designstandards und -spezifikationen zu erhalten. Und infolgedessen konnte er die gewünschten Designanforderungen und -erwartungen reibungslos erfüllen.

Während unserer Diskussion konnte ich also klar erkennen, wie die verschiedenen Design-Handoff-Tools die Arbeit eines:r Designers:in erheblich einfacher und bequemer gemacht haben. Sahil bestätigte meine Meinung zusätzlich, indem er bestätigte, dass solche Tools die Qualität des Design-Handoff-Workflows drastisch verbessert haben und es einem:r Designer:in ermöglichen, ihre Designideen selbstbewusst zur Entwicklung zu übertragen. 

Sehen Sie sich diese Videos an, in denen Menschen ihre Einblicke in den Design-Handoff-Prozess geteilt haben. 

Mehr zum Design-Handoff

Wie übergeben Sie also ein Designprojekt? Was sollen Designer:innen tun, nachdem sie ihren Design-Handoff abgeschlossen haben? Endet damit ihre Verantwortung? Nicht ganz, denn sie müssen auf zwei wichtige Dinge achten. Erstens sollen sie die Entwickler:innen fragen, ob noch etwas unklar ist und ob sie zusätzliche Informationen benötigen. Zweitens ist es sehr vorteilhaft, eine Design-QA (Qualitätssicherung) durchzuführen, um die Implementierung zu überprüfen und sicherzustellen, dass sie dem Design entspricht und sich entsprechend verhält. Es kann eine gute Idee sein, Entwickler:innen um eine interne Version zu bitten, damit Designer:innen diese vor der Veröffentlichung testen können. Darüber hinaus können Designer:innen bei der Feststellung von Problemen die Entwickler:innen informieren, damit diese die Bedenken so früh wie möglich beheben können. 

Um mehr über Webdesign zu erfahren, klicken Sie hier.

Fazit

Dieser Artikel kann eine große Hilfe für alle sein, die genau wissen möchten, was der Design-Handoff-Prozess ist. In diesem Artikel habe ich versucht, Ihnen einige der besten Wege aufzuzeigen, um Handoff-Fehler zu vermeiden und einen reibungslosen und einfachen Handoff zu gewährleisten. Ich hoffe, dass Sie einige der Tipps umsetzen und mühelose Design-Handoffs erleben werden.

Als Drupal-Partner engagiert sich OpenSense Labs für aktive Unterstützung. Für eine langfristige und erfolgreiche Zusammenarbeit kontaktieren Sie uns unter [email protected].