Design-to-Development-Übergabe: So wird's richtig gebaut

Sie haben das ausgefeilte Mockup gesehen. Die Farben strahlen, der Abstand fühlt sich genau richtig an, die Schaltflächen betteln förmlich darum, angeklickt zu werden. Alle geben ihr Okay, die Datei wird an den Entwickler weitergegeben, und ein paar Wochen später erscheint die Live-Seite. Nur ist der Abstand etwas verschoben, die Schriftarten wirken schwerer, eine Schaltfläche hat die Farbe gewechselt und dieser schöne Hover-Effekt ist nirgends zu finden. Niemand hat absichtlich etwas falsch gemacht, doch irgendwo zwischen dem Design und der Umsetzung ging der Zauber verloren.

Diese Lücke hat einen Namen. Es ist die Übergabe vom Design zur Entwicklung, der Moment, in dem ein statisches Bild einer Website zu einem lebendigen, codierten Ding wird. Es ist eine der am meisten unterschätzten Phasen im gesamten Prozess, und hier verlieren gute Projekte leise ein wenig ihres Glanzes. In diesem Leitfaden erklären wir, was die Übergabe tatsächlich ist, warum so viel bei der Übersetzung verloren geht und wie ein paar einfache Gewohnheiten dafür sorgen, dass die fertige Website der Vision treu bleibt, auch wenn Sie selbst keine einzige Codezeile schreiben.

Was die Übergabe wirklich beinhaltet

Ein Design ist ein Bild. Es zeigt, wie eine Seite in einem idealen Zustand, auf einer Bildschirmgröße, mit Platzhalterinhalten aussehen sollte. Eine erstellte Website ist eine Maschine. Sie muss auf jedem Bildschirm funktionieren, mit realen Inhalten unvorhersehbarer Länge, auf Klicks, Berührungen, Fehler und langsame Verbindungen reagieren. Die Übergabe ist der Akt, den Personen, die die Website erstellen, alles zu geben, was sie brauchen, um das Bild als funktionierende Maschine nachzubilden und alle Situationen zu bewältigen, die das Bild nie gezeigt hat.

Deshalb ist die Übergabe so wichtig. Der Designer stellte sich ein fertiges Erlebnis vor; der Entwickler muss tausend kleine Entscheidungen treffen, die das Design nie explizit gemacht hat. Je klarer die Übergabe, desto weniger dieser Entscheidungen gehen schief. Sie liegt im Herzen des umfassenderen Webdesign-Prozesses und fungiert als Brücke zwischen zwei sehr unterschiedlichen Arten von Handwerk.

Warum Dinge bei der Übersetzung verloren gehen

Die Verluste sind selten dramatisch. Es sind kleine, sich ansammelnde Fehler, und sie resultieren meist aus Informationslücken und nicht aus Sorglosigkeit. Das Design zeigte die Startseite auf einem breiten Bildschirm, sagte aber nichts darüber aus, wie sie sich auf einem Telefon neu anordnen sollte. Die Schaltfläche sah im Ruhezustand so aus, aber niemand definierte, wie sie aussehen sollte, wenn ein Cursor darüber schwebt. Eine Überschrift verwendete eine Schriftstärke, die nie angegeben wurde, also riet der Entwickler.

Jede dieser Lücken erzwingt eine Annahme, und Annahmen weichen von der Absicht ab. Wenn man das über eine ganze Website multipliziert, kann sich das Endprodukt subtil, aber unverkennbar anders anfühlen als das von allen genehmigte Design. Die Lösung besteht nicht darin, sorgfältiger anzunehmen; sie besteht darin, von vornherein weniger Lücken zu lassen.

Der blinde Fleck des Responsive Design

Eine der größten Ursachen für Abweichungen ist die Bildschirmgröße. Ein Design, das nur in Desktop-Breite gezeigt wird, verbirgt hundert Fragen dazu, wie es sich auf kleineren Bildschirmen verhält. Wohin verschwindet das Menü? Wie stapeln sich die Spalten? Welche Elemente schrumpfen und welche bewegen sich einfach? Wenn diese Antworten nicht gegeben werden, muss der Entwickler sie erfinden, und seine Erfindung stimmt möglicherweise nicht mit dem überein, was sich jemand vorgestellt hat. Dies frühzeitig zu durchdenken, ist die Essenz eines guten Mobile-First-Designs, und es ist viel billiger, auf dem Papier zu entscheiden, als es nach der Umsetzung zu entdecken.

Die Zutaten einer sauberen Übergabe

Was genau sollte eine gute Übergabe also enthalten? Es geht weniger um ein einziges magisches Dokument als vielmehr um ein vollständiges Bild. Der Entwickler muss nicht nur wissen, wie Dinge aussehen, sondern auch, wie sie sich verhalten, was in ungewöhnlichen Situationen passiert und welche zugrunde liegenden Regeln gelten. Die folgende Tabelle schlüsselt die wesentlichen Punkte auf.

Design mit Blick auf die Umsetzung

Die reibungslosesten Übergaben beginnen lange bevor die Datei übergeben wird. Sie beginnen damit, dass das Design selbst mit Blick auf die spätere Umsetzung erstellt wird. Ein Design, das einen konsistenten Satz von Schaltflächen, Abständen und Textstilen wiederverwendet, lässt sich viel leichter originalgetreu übersetzen als eines, bei dem jede Seite das Rad neu erfindet. Diese Konsistenz ist die Grundlage dessen, was Designer als Designsystem bezeichnen, und sie zahlt sich bei der Übergabe enorm aus.

Wiederverwendbare Komponenten sind hier das Geheimnis. Wenn der gleiche Schaltflächenstil auf der gesamten Website erscheint, baut der Entwickler ihn einmal und verwendet ihn überall wieder, und er bleibt identisch. Die gleiche Logik gilt für eine gut durchdachte Call-to-Action-Schaltfläche oder für die wiederkehrenden Muster in Ihrem Raster und Layout. Das Entwerfen in Systemen statt in einzelnen Bildschirmen eliminiert ganze Kategorien von Abweichungen, bevor sie überhaupt auftreten können.

Definieren Sie die Zustände, nicht nur das Ruhebild

Eine Schaltfläche ist nicht eine Sache. Sie hat ein Ruhebild, ein Hover-Bild, ein gedrücktes Bild, ein Fokus-Bild und manchmal ein deaktiviertes Bild. Ein Formularfeld hat einen leeren Zustand, einen gefüllten Zustand und einen Fehlerzustand. Wenn ein Design nur das Ruhebild zeigt, muss der Entwickler den Rest erfinden. Das Ausformulieren dieser Zustände ist eines der wertvollsten Dinge, die eine Übergabe enthalten kann, und es ist genau die Art von Detail, die Mikrointeraktionen und Animationen beabsichtigt statt improvisiert wirken lässt.

Sprechen Sie miteinander

Kein Dokument, so gründlich es auch sein mag, ersetzt ein Gespräch. Die besten Übergaben sind kein einseitiges Überwerfen über eine Mauer; sie sind ein Dialog. Der Entwickler wird Situationen erkennen, die der Designer nie bedacht hat, und der Designer wird erkennen, wo die Umsetzung von der Absicht abweicht. Ein kurzes Kick-off-Gespräch, ein gemeinsamer Kanal für schnelle Fragen und eine Überprüfung während der Umsetzung fangen Probleme ab, solange sie noch kostengünstig zu beheben sind.

Dieser kollaborative Geist ist wichtig, egal ob Sie ein internes Team haben oder mit einem externen Partner zusammenarbeiten. Wenn Sie eine Website in Auftrag geben, fragen Sie frühzeitig, wie das Team die Übergabe verwaltet, denn ein reibungsloser Prozess ist ein starkes Zeichen für ein professionelles Unternehmen. Es ist eines der Dinge, die es wert sind, hinterfragt zu werden, wenn Sie sich entscheiden, wie Sie einen Webdesigner auswählen.

Die Umsetzung am Design überprüfen

Sobald die Website erstellt ist, gibt es einen Schritt, den zu viele Teams überstürzen: einen sorgfältigen Vergleich des Live-Ergebnisses mit dem ursprünglichen Design. Legen Sie sie nebeneinander und suchen Sie nach den kleinen Abweichungen. Stimmt der Abstand? Sind die Schriftarten korrekt? Funktionieren die Hover-Effekte? Hält es auf einem Telefon genauso gut zusammen wie auf einem Desktop? Diese Überprüfung, manchmal auch als Design-QA bezeichnet, ist der Punkt, an dem die letzten Prozent des Feinschliffs erzielt werden.

Seien Sie in dieser Überprüfung spezifisch und freundlich. "Es sieht etwas daneben aus" hilft niemandem; "der Abstand über dieser Überschrift sollte größer sein und die Schaltflächenfarbe ist etwas zu hell" gibt dem Entwickler etwas, worauf er reagieren kann. Betrachten Sie es als eine gemeinsame Mission, die Website so gut wie möglich zu machen, und nicht als eine Schuldsuche. Das Ziel ist ein fertiges Produkt, das dem Versprechen des Designs wirklich entspricht.

Warum dies für das Endergebnis wichtig ist

Es ist leicht, die Übergabe als eine technische Kleinigkeit hinter den Kulissen zu betrachten, aber sie zeigt sich direkt in dem, was Ihre Besucher erleben. Eine originalgetreu erstellte Website wirkt kohärent und durchdacht. Eine schlecht übersetzte Website wirkt auf eine Weise, die die Leute nicht immer benennen können, leicht fehlerhaft, und diese leise Unstimmigkeit untergräbt das Vertrauen. Die Sorgfalt, die Sie in die Übergabe investieren, ist Teil dessen, was einer Website das schwer zu fälschende Gefühl verleiht, professionell gemacht zu sein.

Wenn Sie ein Projekt planen und sicherstellen möchten, dass zwischen Design und Umsetzung nichts verloren geht, lohnt es sich, dies mit Leuten zu besprechen, die dies täglich tun. Sie können diese Unterhaltung über die Kontaktseite beginnen. Ein wenig Planung hier erspart Ihnen später viel Frustration.

Zusammenführung

Die Übergabe ist der Punkt, an dem Vision auf Realität trifft, und sie ist viel zu wichtig, um dem Zufall überlassen zu werden. Entwerfen Sie in wiederverwendbaren Systemen, definieren Sie, wie Dinge sich verhalten und nicht nur, wie sie aussehen, dokumentieren Sie die schwierigen Randfälle, lassen Sie Designer und Entwickler im Gespräch bleiben und überprüfen Sie die fertige Umsetzung mit dem Original. Nichts davon erfordert, dass Sie technisch versiert sein müssen. Es erfordert lediglich ein gemeinsames Engagement, die Details richtig zu machen. Tun Sie das, und die Website, die live geht, wird so aussehen und sich so anfühlen, wie die, in die sich jeder am Bildschirm verliebt hat, und genau das ist der Sinn der Sache.

Häufig gestellte Fragen

Referenzen

1. IBM Systems Sciences Institute. "Relative Cost of Fixing Defects." ibm.com.
2. McKinsey & Company. "The Business Value of Design." mckinsey.com.
3. Nielsen Norman Group. "Design Systems and Consistency." nngroup.com.