Warum Entwickler in den Designprozess integriert werden sollten

Entwickler im Webdesign
Keine Kommentare

Im Bereich des Webdesigns scheitern ambitionierte Projekte selten an kreativer Einfallslosigkeit, sondern häufig an ihrer technischen Umsetzbarkeit. Der Grund ist hierfür häufig der gleiche: Das Letzte, woran Designer bei ihrer Arbeit denken, sind die Entwickler – und das ist ein Fehler. Insbesondere bei der Gestaltung von Webseiten hängt der Erfolg von einem Kriterium ab: einer gelingenden Kommunikation.

Als Designer handelt man sich eine Menge unnötiger Probleme ein, wenn man die Anliegen von Entwicklern gänzlich aus dem eigenen Designprozess heraushält. Im schlimmsten Fall ist die gesamte Arbeit umsonst, wenn sich bei der Umsetzung herausstellt, dass das konzipierte Design technisch überhaupt nicht umsetzbar ist. Hinzu kommt, dass sich nur sehr wenige Designer ausreichend mit der Entwicklung von Software auskennen. Mangelnde Kenntnis und gestalterischer Übermut sind nicht selten die Gründe dafür, warum es am Ende zumeist zu hitzigen Diskussionen und Wortgefechten kommen kann, die sich über Tage und Wochen hinziehen können.

Streitereien sind nicht nur schlecht für die Arbeitsatmosphäre, sondern gereichen besonders Kunden zum Nachteil. Statt sich den Wünschen des Auftragsstellers zu widmen, wird viel Zeit damit verschwendet, Probleme zu lösen, die zumeist durch die Einbeziehung der Entwickler in den Designprozess hätten vermieden werden können.

Designer versus Entwickler

Auf den ersten Blick verwundert es wenig, warum Designer und Entwickler nicht besonders gut zusammen arbeiten können. Mitunter treffen hier zwei völlig verschiedene Welten aufeinander. Meistens genügt schon ein schneller Blick über die Schreibtische, um sich die Gegensätze vor Augen zu führen: Auf der einen Seite der kreative Querdenker mit blitzsauberer Arbeitsplatte; auf der anderen Seite der pragmatische Realist, eingebunkert in vielerlei Krimskrams. Außer dem gleichen Bürogebäude haben sie nur selten etwas gemeinsam.

Aber das müssen sie auch gar nicht. Abseits aller möglichen Unterschiede ist die mangelhafte Kommunikation vor allem eines: lästig für beide Seiten. Der Anreiz, Entwickler in den Designprozess zu integrieren, ist daher kein selbstloser Akt oder eine besondere Teambuilding-Methode. Sie ist in erster Linie eine Optimierung des Arbeitsprozesses: weniger Arbeit für beide Seiten – eine klassische Win-Win-Situation. Aber wie integriert man die Entwickler in den eigenen Gestaltungsprozess?

Das Interface als Ausgangspunkt

Wenn man eine Webseite gestaltet, verliert man schnell aus den Augen, dass das, was man als simple Grafik entwirft, letzten Endes als Interface funktionieren muss. Die Übersetzung von digitaler Kunst in die Sprache von Entwicklern, die häufig auf Systemen und Frameworks basiert, ist nicht problemlos möglich und stellt beide Seite vor einige Hindernisse.

Bei der Gestaltung einer Webseite seiner kreativen Energie zügellos freien Lauf zu lassen, ist daher meistens nicht die beste Idee. Auch wenn beispielsweise HTML5 und CSS3 mittlerweile in der Entwicklung weit vorangeschritten sind, ist es immer noch schwierig, sämtliche Ideen eins zu eins und mit vollem Support umzusetzen.

Um das Fehlschlagen einer späteren Implementierung zu minimieren, ist es sinnvoll, das gestalterische Konzept an den Möglichkeiten und Grenzen des Interfaces auszurichten. Statt exotische Strukturen zu entwerfen, sollte man sein Design entlang von häufig genutzten UI-Elementen konzipieren.

Browserkompatibilität

Zu denken ist hierbei zum Beispiel an die Browserkompatibilität. Als Designer fühlt sich die Erstellung eines Webseiten-Interface ähnlich an wie die Gestaltung einer mobilen App. Aus der Sicht eines Entwicklers unterscheiden sie sich jedoch stark voneinander. Webseiten müssen nicht nur auf einem Betriebssystem und unterschiedlichen Bildschirmgrößen funktionieren, sondern auf ganz verschiedenen Systemen und Browsern laufen, die nicht alle die gleichen Techniken unterstützen.

Um auch hier den Entwicklern entgegen zu kommen, kann man als Designer auf Open-Source-Programme wie Modernizr (Cross-Browser Support) oder Fallback.js (Zentralisierung von JavaScript-Dateien) zurückgreifen. Man muss nicht unbedingt wissen, wie sie funktionieren. Meistens reicht es schon, sie gegenüber Entwicklern zu erwähnen – als Zeichen des guten Willens.

Modelle und Skizzen

Unerlässlich für die Vermittlung der eigenen kreativen Ideen und Vorschläge ist die Anfertigung von grafischen Skizzen und Modellen (Mockups). Sich am Interface zu orientieren, ist nur ein erster Schritt. Ziel sollte es sein, für alle möglichen Situationen den Developern eine grafische Vorlage an die Hand zu geben. Auf diese Weise verringert man die Wahrscheinlichkeit, dass bei der Umsetzung noch Unklarheiten herrschen.

Bei der Erstellung von Modellen und Skizzen sollte man deshalb immer darauf achten, die Grafiken so groß zu gestalten, wie sie am Ende dargestellt werden sollen. Umfasst ein Design verschiedene JavaScript-Interaktionen, ist es sinnvoll, sie zu visualisieren – zu denken wäre hier etwa an die Gestaltung eines Dropdown-Menüs. Für Entwickler ist es äußerst hilfreich zu wissen, wie ein solches Menü im eingeklappten und im ausgeklappten Zustand aussehen soll.

Generell ist es wichtig, sich darüber Gedanken zu machen, wie ein Design sich verhält. Wie verändert sich beispielsweise der Seitenaufbau, wenn sich User ein- und ausloggen? Oftmals wird auch vergessen, Kleinigkeiten zu gestalten, wie etwa Fehlermeldungen, 404-Seiten oder Favicons. An alles sollte man denken, wenn man mit Entwicklern kommuniziert. Je mehr Details, desto besser. Wenn man die technischen Hürden minimieren will, sollte man nichts dem Zufall überlassen.

Responsive Design

So empfiehlt es sich etwa bei der Gestaltung einer responsiven Webseite, für jeden einzelnen Breakpoint ein eigenes Modell anzufertigen. Auf diese Weise kann man den Entwicklern einen guten Eindruck davon vermitteln, wie sich das Design an verschiedene Auflösungen und Bildschirmgrößen anpassen soll. Wie positionieren sich Grafiken und Icons? Bleiben sie fix oder verändern sie ihre Lage? Vergrößert oder verkleinert sich die Schriftart und wie passt sich die Navigation an unterschiedliche Auflösungen an? Alles Fragen, die beantwortet werden sollten.

Natürlich ist das mit viel Arbeit verbunden. Nicht bei jedem Projekt ist es sinnvoll, für jede einzelne Seite ein Modell anzufertigen. Allerdings kann das nicht pauschal gesagt werden, sondern muss von Projekt zu Projekt entschieden werden. Feststeht, dass durch das genaue Ausarbeiten der eigenen Vorstellungen und Ideen Entwickler einen besseren Eindruck davon gewinnen können, was später wie umgesetzt werden soll.

Best Practices

Je genauer man als Designer kommuniziert, was man sich vorstellt, desto höher ist die Wahrscheinlichkeit, dass der eigene Entwurf letztlich auch technisch umgesetzt werden kann. Sollte man einmal nicht genau wissen, was die Entwickler von einem erwarten oder brauchen, sollte man nicht zögern, nachzufragen.

Oftmals können jedoch gängige Missverständnisse durch die Anpassung der eigenen Arbeitsweise ausgeschlossen werden. So sollte man sich als Designer angewöhnen, nicht wahllos Ebenen zu erstellen, sondern sie logisch in Gruppen zu organisieren und mit sinnvollen Namen zu versehen. Entwürfe und Modelle sind meistens sehr komplex. In der Regel müssen Entwickler nur selten auf die Grafikdateien zurückgreifen. Hält man Ordnung, fällt es ihnen in solchen Situationen deutlich einfacher, genau das zu finden, was sie suchen.

Es gibt verschiedene Plugins und Erweiterungen für Photoshop, die einem die Arbeit erleichtern. Mit PNG Hat kann man auf einfache Art und Weise Mockups slicen und exportieren. CSS Hat bietet die Möglichkeit, Ebenen direkt in CSS-Code zu übersetzen. Und mit Renamy kann man seine unterschiedlichen Layer innerhalb von Sekunden umbenennen.

Zudem ist es hilfreich, die verschiedenen Grafiken, Icons, Fotos etc. als einzelne Files in unterschiedlichen Dateiformaten abzuspeichern und als Paket den Developern zukommen zu lassen. Auf diese Weise müssen sie nicht selber die Bilder in die gewünschten Formate exportieren. Sinnvoll ist es ebenfalls, die Export-Tools von Grafikprogrammen zu verwenden. In Photoshop ist es etwa möglich, Grafiken durch das Slice-Tool zu exportieren. Auch Sketch besitzt eigene Export Optionen für Interface Grafiken. Das eigene Design zu organisieren kostet in der Regel nicht viel Zeit und erspart Entwicklern eine Menge Arbeit.

Interaktionen und Prototypen

Wenn interaktive Elemente eine Visualisierung voraussetzen, sollte man die Dateien in Prototypen konvertieren. Gegenüber einfachen Modellen können beispielsweise interaktive Wireframes dabei helfen, die eigenen Ideen und Vorstellungen den Entwicklern besser zu vermitteln.

Durch sie gewinnt man einen Eindruck davon, wie einzelne Content-Elemente bei Interaktionen grafisch miteinander in Beziehung treten sollen. Die Developer sind so in der Lage, Feedback über die angedachte Design-Infrastruktur geben zu können, ohne dass hierfür alle Grafikelemente vollständig ausgearbeitet sein müssen. So können technische Ungereinheiten ausgeräumt werden, die womöglich erst im späteren Verlauf des Produktionsprozesses aufgefallen wären.

Fazit

Damit der eigene Entwurf nicht zum technischen Alptraum wird, ist es wichtig, die Entwickler in alle Schritte des Designprozesses zu integrieren. Von der Ausrichtung der eigenen Idee am Interface über die Gestaltung von Skizzen und Modellen bis hin zur Konzipierung von Prototypen – überall ist eine gute Kommunikation zwischen Designern und Entwicklern das A und O.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -