Im ersten Teil des Experten-Interviews ist zur Sprache gekommen, welche Arbeiten auf dem Weg zu fertigen Layouts nötig sind. Warum aber ist damit die Projektarbeit für Web-Designer noch längst nicht abgeschlossen? Und warum sind Bedarfsänderungen manchmal ganz einfach umzusetzen, erfordern manchmal aber auch einen gehörigen Zusatzaufwand? Der zweite Teil des Interviews mit Marion Fiedler, Art Director bei //SEIBERT/MEDIA/DESIGN.

Wir sind an dem Punkt angekommen, dass die Design-Abteilung dem Kunden die Layouts präsentieren. Dieser entscheidet sich, nun beginnt die Umsetzung. Was haben Designer dann konkret zu tun?

Der nächste Schritt auf dem Weg zur Programmierung ist die Vermaßung. Ich nehme das Layout, das ich mit Photoshop gestaltet habe, und vermaße wirklich die einzelnen Bereiche. Man schaut also, wie breit die rechte Spalte ist, wie breit die linke Spalte, wie breit der Content-Bereich …

Auf Pixel-Ebene.

Ja. Jeder Abstand wird pixel-genau festgehalten, jede Button-Größe usw. Die Farben werden entnommen, es wird festgehalten, welche Farbwerte wo eingesetzt werden müssen. Und so geben wir das an die Programmierung weiter: alle Abstände, Größen, Farben. Die Programmierer bekommen von uns einen großen Ausdruck der Seite, auf dem all diese Werte genau vermerkt ist.

Neben den exakten Maßen und Farben kommunizieren wir der Programmierung auch die verwendeten Schriftarten und -größen (also das Typographiekonzept) sowie das Verhalten von interaktiven Elementen (Links, Buttons usw.) und der Navigation. Wie groß ist zum Beispiel die Hauptüberschrift? Wie reagieren Links und Buttons bei einem Mouse-over-Effekt? Wie sieht ein Navigationspunkt im aktiven Zustand aus?

Zudem erstellen wir die Bilder, die die Entwickler brauchen. Es wird ja nicht alles auf der Seite programmiert. Buttons zum Beispiel, die dreidimensional aussehen, die Glanzeffekte haben, die haptisch wirken, kann kein Entwickler programmieren – das sind Bilder, die wir mit Photoshop erstellen und an die Programmierer weitergeben.

Apropos Programmierbetreuung. Das ist ein Posten, der in jedem Angebot enthalten ist. Was gehört denn zur Programmierbetreuung, welche Unterstützungsarbeiten sind nötig?

Die Vermaßung gehört schon dazu, das Aufbereiten der Layouts, damit die Entwickler damit weiterarbeiten können. Dazu kommt die Erstellung der Bilder, die der Programmierer integriert. Programmierbetreuung ist darüber hinaus vor allem Qualitätssicherung.

Zwischendurch schickt uns der Entwickler immer wieder einen Vorschau-Link auf den aktuellen Zwischenstand: So sieht das jetzt aus, schaut mal, da fehlt noch ein Bild, hier weiß ich nicht genau, was ich machen soll. Also schauen wir immer drüber, setzen uns gegebenenfalls nochmal zusammen oder schicken kleine Änderungs- und Korrekturwünsche per E-Mail an den Programmierer. Da arbeiten wir Hand in Hand.

Die Entwickler haben nun also mit der Umsetzung angefangen, alles geht den ganz normalen Projektweg in der Reihenfolge Konzeption, Design, Programmierung. Jetzt merkt der Kunde, dass ihm auf einer Unterseite die Farbe der Buttons oder der Navigationsleiste so doch nicht gefällt. Nun möchte er also eine Farbänderung: Hier muss das Blau ein bisschen heller werden. Das wird ja wohl kein großer Aufwand sein …

Wenn es eine Farbänderung ist, die nur die Programmierung betrifft, ist es keine große Sache, nein. Der Entwickler muss nur im Hexadezimalcode den entsprechenden Wert ändern, und das überträgt sich ja auf alle anderen Templates.

Eine größere Sache ist es dann, wenn wir Designer Bilder anfertigen müssen, denn dann sind Farbänderungen immer mit Mehrarbeit verbunden. Sagen wir mal, es gibt auf der Seite 20 Buttons für alle möglichen Funktionen. Wenn es sich dabei um einen Button handelt, der nur mehrfach auf der Seite eingesetzt wird (z.B. ein Pfeil), muss man natürlich den Button auch nur einmal bearbeiten.

Oft ist es aber so, dass Buttons mit Text, Glanzreflexen oder Schattierungen versehen sind. Wenn der Kunde dann sagt, dass ihm die Hintergrundfarbe der Buttons doch nicht mehr gefällt, die Schrift darauf aber weiß bleiben soll, muss man bei jedem einzelnen Button die entsprechende Farbebene angehen.

Heute werden zudem häufig Mouse-over-Effekte eingesetzt, um die Seite benutzerfreundlicher machen: Sobald man mit der Maus über ein Element fährt, soll der Bereich dunkler werden, wenn man klickt, soll er eine andere Farbe bekommen usw. Für jeden dieser Zustände (normal, mouse-over, aktiv) muss ein weiteres Bild erstellt werden. Und bei 20 Buttons können daraus schnell mal 40 bis 60 Bilder werden, die man bearbeiten muss.

60 Bilder neue Bilder für einen etwas helleren Blauton!

Die Erstellung zum Beispiel solcher Buttons ist eben liebevolle Detailarbeit, die nicht automatisiert werden kann. Das ist ein nicht zu unterschätzender manueller Aufwand.

Sicher kann man auch später immer Änderungen vornehmen, und wir machen das natürlich auch, wenn der Kunde das möchte. Gerade zu einem fortgeschrittenen Projektzeitpunkt sollte man über Bedarfsänderungswünsche aber wirklich gut nachdenken. Zum einen sind das ja häufig Zusatzleistungen, zum anderen können solche Änderungen auch den Projektzeitplan ziemlich durcheinanderbringen.

Wenn unser Kunde prototypische Layout-Vorschläge vorliegen hat, empfehle ich, dass sich wirklich alle Mitentscheider an einen Tisch setzen und die Entwürfe bis ins Detail diskutieren und durchgehen. In diesem Stadium ist es kein Problem, etwa eine Farbe anzupassen, und in diesem Stadium sollte so etwas im Optimalfall auch geschehen.

Spät vorgetragene Änderungswünsche bedeuten immer Verzögerung und Zusatzaufwand. Das geht nicht anders, das ist eben Handarbeit. Aber mit dieser professionellen, akribischen Arbeitsweise sind unsere Kunden auch zufrieden, weil so die hochwertigsten Ergebnisse, individuelle Ergebnisse erzielt werden.

Marion, vielen Dank für die Einblicke und die Zeit!

Weitere Informationen:
Einen Designer besser verstehen: So denkt und arbeitet er
Einen Designer besser verstehen: Seine Illusionen und seine Realität
Acht Vorurteile gegenüber Design und Designern

Mehr über die Creative-Commons-Lizenz erfahren