Design trifft Code (eBook)

1Die Kluft zwischen Design und Entwicklung überbrücken

Das Web ist ein Ort des Wandels. Jedes Jahr werden neue Technologien und Frameworks eingeführt. HTML und Cascading Style Sheets (CSS) bilden nach wie vor die Grundlage für das Erstellen von Webseiten und Webanwendungen. Beides wird ständig weiterentwickelt, um den Anforderungen der Entwickler gerecht zu werden, wenn sich Design weiterentwickelt.

Ein Teil der Webentwicklung besteht darin, mit den dafür verwendeten Technologien auf dem Laufenden zu bleiben. Aber wie funktioniert das beim Design? Obwohl sich die Werkzeuge im Laufe der Zeit ändern, sind viele der zugrunde liegenden Konzepte zeitlos. Was Sie sehen, ist eine Verschiebung der Trends im Laufe der Zeit. Meine Kenntnisse über Webentwicklung sind für mich als Spezialistin für Webdesign von unschätzbarem Wert. Auf die Frage, ob Designer programmieren lernen sollten, lautet meine Antwort: Ja. Das Verständnis dafür, was im Web möglich ist, ist von großem Vorteil. Es macht die Kommunikation zwischen Designern und Entwicklern viel einfacher. In der Technik gilt die Kommunikationslücke zwischen Designern und Entwicklern als eine der am schwersten zu überbrückenden. Eine weniger häufig gestellte Frage lautet: »Sollten Entwickler lernen zu entwerfen?« Auch hier lautet meine Antwort: Ja. Zumindest wenn es um das Verständnis von Designgrundlagen geht. Wenn Entwickler über Designkenntnisse verfügen, können sie eine Benutzeroberfläche schnell aktualisieren, während sich ein Designteam mehr auf die Lösung von User-Experience-Abläufen konzentriert als auf kleine Anpassungen an Pixeln. Ein CEO teilte meinem Entwicklungsteam einmal mit, dass sich die Benutzeroberfläche eines unserer Tools nicht so effizient anfühlte wie die einiger unserer Mitbewerber. Er meinte damit, dass es zu viel Leerraum zwischen den Komponenten gab. Die Benutzeroberfläche war nicht so raffiniert, wie sie sein könnte. Einer der Entwickler reduzierte die Abstände zwischen den Komponenten und straffte das Design. Er brauchte keinen Designer, um Mock-ups zu erstellen. Stattdessen konnte er eine Änderung vornehmen, sie einem Designer zeigen, um sicherzustellen, dass die Teams sich bei der Änderung einig waren, und dann die Änderungen an der Benutzeroberfläche umsetzen.

Wenn Entwickler Ihr Produkt mit einem anderen Design vergleichen, den Unterschied – in diesem Fall die Verwendung von Leerraum – erkennen und eine Änderung vornehmen können, können Sie sich als Designer auf die Lösung komplexerer Probleme konzentrieren. Ein guter Entwickler weiß, dass sich kleine visuelle Änderungen positiv auf das Erstellen eines ausgefeilten Designs auswirken.

1.1Wie Entwickler von Design- und User-Experience-Grundlagen profitieren

Designer und Entwickler sprechen in der Regel unterschiedliche Sprachen und haben unterschiedliche Fähigkeiten. Designer konzentrieren sich auf den Benutzer und die Gestaltung des Bildmaterials. Entwickler konzentrieren sich auf die Umsetzung von Bildern in etwas Interaktives für Kunden. Die beiden Bereiche überschneiden sich jedoch, da Entwickler das, was ein Designer entworfen hat, mit Code nachbilden, in der Regel mit CSS. Das Verständnis für das Was und Warum hinter dem, was man zum Leben erwecken möchte, macht einen zu einem besseren Entwickler und gibt das nötige Selbstvertrauen, um Designentscheidungen zu treffen, wenn man keinen Designkollegen hat. Design ist viel mehr als nur Optik und Ästhetik. Diese sind zwar wichtig und das Erste, was Kunden bemerken, wenn sie auf Ihrer Webseite landen. Aber der Rest des Erlebnisses ist genauso wichtig. Wenn die Webseite nur langsam lädt oder die Besucher die von ihnen erwarteten Hauptaufgaben, wie den Kauf eines Artikels, nicht ausführen können, reicht die Ästhetik nicht aus. Sie müssen wissen, wie Sie Entscheidungen über die User Experience treffen können, die wiederum die Entscheidungen über das visuelle Design beeinflussen. Als ich vor über zehn Jahren meine Karriere begann, sah der typische Arbeitsablauf für ein Websiteprojekt folgendermaßen aus:

1. 1.Der Designer verglich für das Projekt die Websites der Konkurrenten seines Kunden und beurteilte, was gut gemacht war und was nicht.
2. 2.Der Designer erstellte einige Benutzer-Personas der Personen, auf die das Projekt abzielt, für die Lösung eines bestimmten Bedürfnisses (z.B. Informationen liefern, ein Produkt kaufen, einen Termin buchen, Hotels vergleichen usw.).
3. 3.Auf der Grundlage der Wettbewerbsforschung, der Benutzer-Personas und der geschäftlichen Anforderungen erstellte der Designer Wireframes, einfache Diagramme der Website, die die Platzierung der Inhalte zeigen, und holte dann die Zustimmung des Kunden zu diesen Wireframes ein.
4. 4.Der Designer ging schließlich in die visuelle Entwurfsphase des Projekts über, stellte dem Kunden pixelgenaue Mock-ups zur Überprüfung zur Verfügung, überarbeitete die Mock-ups, holte die Genehmigung ein und übergab das Projekt dann an den Entwickler, um die Website zu programmieren.
5. 5.Der Entwickler nahm die statischen Mock-ups und erstellte die interaktive Website.
6. 6.Nach einem Qualitätstest, bei dem auf Fehler oder Probleme geprüft wurde, wurde die Website veröffentlicht.

All diese Schritte finden auch heute noch statt. Dieser Arbeitsablauf ist weitgehend Gegenstand dieses Buches: der Projektzyklus vom Beginn der User-Experience-Phase über das User-Experience-Design (Wireframes) bis zur Anwendung visueller Designelemente, um das Design zum Leben zu erwecken. Wir werden diesen Projektzyklus jedoch anpassen, um uns auf moderne Arbeitsabläufe zu konzentrieren, die ein iteratives Design und eine iterative Entwicklung, engere Arbeitsbeziehungen und ständiges Testen und Forschen zur Verbesserung eines Designs fördern.

Der Arbeitsablauf in dem zuvor Aufgeführten ist zwischen dem Designer und dem Entwickler aufgeteilt. Ein User-Experience-Designer kann sich ausschließlich auf die Wettbewerbsforschung und das Wireframing konzentrieren, während er mit einem visuellen oder Interaktionsdesigner zusammenarbeitet, der sich auf Designentscheidungen wie Typografie, Farbe, Abstände und Animationen konzentriert – all die visuellen Aspekte einer Webseite, die ich in diesem Buch untersuchen werde. Nichtsdestotrotz wird die Arbeit zwischen Designern und Entwicklern aufgeteilt, wobei die Entwickler erst bei der Übergabe einbezogen werden.

Diese Arbeitsweise lässt keinen kollaborativen Ansatz zu. Entwickler verfügen über Einblicke und Kenntnisse, die Designer in der Regel nicht haben. Entwickler frühzeitig in den Prozess einzubeziehen, ist für den Projektzyklus von Vorteil. Egal ob es darum geht, unnötige Arbeit zu vermeiden, wenn ein Designmerkmal nicht implementiert werden kann, oder um eine andere Perspektive, die die kreative Richtung beeinflussen kann – es ist ein Gewinn für beide Seiten.

1.1.1Zusammenarbeit und Kommunikation verbessern

Designer erwarten nicht, dass ihre Kollegen aus der Entwicklungsabteilung Designexperten werden, so wie Entwickler nicht erwarten, dass Designer Experten für JavaScript werden. Jeder von uns hat seine Rolle aus einem bestimmten Grund. Aber die Arbeit, die wir tun, ist miteinander verwoben. Der von den Entwicklern geschriebene Code kann sich auf das Design auswirken, und was die Designer entwerfen, kann sich auf die Entscheidungen auswirken, die die Entwickler beim Code treffen müssen. Manchmal gibt es auch eine Grenze für das, was von einem Entwickler gebaut werden kann, entweder aufgrund technischer Beschränkungen oder einer Codelösung, die sich negativ auf das Benutzererlebnis auswirken würde, z. B. eine Animation, die das Laden der Webseite verlangsamt. Wenn man versteht, welche Entscheidungen für das Design ausschlaggebend sind, kann man die Zusammenarbeit und Kommunikation zwischen Designern und Entwicklern effizienter gestalten und das Hin und Her aufgrund dieser technischen Einschränkungen verringern. Wenn Entwickler mit den entsprechenden Werkzeugen und dem entsprechenden Vokabular ausgestattet sind, können sie den Designern mehr umsetzbares Feedback geben und die richtigen Fragen stellen. Sie können beginnen, das Warum hinter Designentscheidungen zu verstehen.

Dieses Buch soll dazu beitragen, Entwicklern die Terminologie und das Verständnis zu vermitteln, um während des gesamten Projektverlaufs effektiver mit einem Designteam zu kommunizieren. Auch wenn Sie nicht...