Red lauscht gebannt den Ausführungen von Stephen Hay zum Thema "Responsive Design Workflow"

Ein neuer Design-Workflow: Stephen Hays "Responsive Design Workflow"

04.09.13

Responsive Design bedingt ein völlig neues Denken von heutigen Designern. Stephen Hay präsentierte in seinem Workshop einen Ansatz, um die neuen Anforderungen zu erfüllen.

Neue Design Workflows

Stephen Hay, der Gründer von Zero Interface, präsentierte an der Frontend Conference 2013 in Zürich seinen Workflow, welchen er erfolgreich für seine tägliche Arbeit als Web Designer und Entwickler einsetzt. In seinem Workshop „Responsive Design Workshop“ zeigte er einen Weg, mit den Herausforderungen Responsiven Designs umzugehen. Die einzelnen Schritte sind simpel und erlauben ein iteratives Vorgehen, welches sich flexibel dem Projekt anpasst.

Design mit und für Inhalt

Zu Beginn jedes neuen Projektes steht der Inhalt der Website oder Applikation. Entscheiden Sie, welcher Inhalt verwendet wird, welcher vermieden wird und erstellen Sie ein Inventar des gesamten Inhaltes (Content Inventory). Dabei wird nicht nur reiner Text berücksichtigt, sondern auch Bilder, Formulare, Buttons, Icons, Karten, etc. Diese Inhalte bilden eine Basis für die weiteren Schritte und verhindern blindes Designen.

Einfache Benutzeroberflächen und der Gebrauch von Wireframes

Wenn wir Benutzeroberflächen entwerfen, ist es wichtig, diese so einfach wie möglich zu halten. Zusätzliche Funktionen sorgen schnell für Verwirrung und erschweren die Bedienung. Wireframes sollen dazu beitragen, diese grundlegenden Funktionen abzubilden, werden jedoch heutzutage oft als Designwerkzeug missbraucht. Laut Stephen sollten Wireframes zur Darstellung der Inhaltshierarchie verwendet werden - er spricht von sogenannten „Content Reference Wireframes“ um dieses Prinzip hervorzuheben.

Content Reference Wireframes können durch ihre bewusste Schlichtheit ohne Weiteres mit einfachem HTML/ CSS erstellt werden, was zusätzlich eine flexible Präsentation auf verschiedenen Geräten erlaubt. Sie sind keine Kunstwerke, aber ein exzellentes Grundgerüst, das klar auf den Inhalt fokussiert. So kann der Kunde dazu bewegt werden, vorab nur über die Inhaltsstruktur zu sprechen, ohne dass visuelle Entscheidungen getroffen werden.

Werkzeuge als Hilfsmittel

Das perfekte Werkzeug für responsives Design existiert bis anhin noch nicht. Werkzeuge wie Adobe Reflow bieten erste gute Ansätze, befinden sich jedoch noch ganz am Anfang der Entwicklung. Dies bedingt, dass wir auf eine Kombination verschiedener Werkzeuge zurückgreifen müssen. Stephen macht klar, dass nicht die Werkzeuge den Unterschied machen, sondern wie wir damit arbeiten. Neue Web-Applikationen wie Jetstrap oder Divshot bieten zwar eine Vielzahl von Details, diese können jedoch zum falschen Zeitpunkt kontraproduktiv wirken, da sie vom eigentlichen Inhalt ablenken.

Strukturierter Text

Inhalt in seiner Basis ist Text. Ohne Struktur kann dieser Inhalt jedoch nicht von Computern verstanden und somit auch nicht weiterverarbeitet werden. Texte lassen sich einfach strukturieren, beispielsweise mit Markdown oder HTML. Je mehr Bedeutung wir den Inhalten durch Struktur geben, desto wertvoller sind diese für den responsiven Workflow.

Lineares Design: von grob zu fein

Wenn es darum geht, über Farben, Typography, Iconography und Bilder zu entscheiden, ist der beste Weg, mit groben Skizzen zu beginnen und und diese anschliessend immer mehr zu verfeinern. Beginnend mit Thumbnails werden in kurzer Zeit so viele verschiedene Layout Ideen wie möglich erstellt, aus welchen schliesslich die Besten daraus ausgewählt werden. Diese werden weiter verfeinert und wiederum selektiert. Diese schnellen, groben Skizzen ermöglichen es, jede Idee zu betrachten, auch wenn sie noch so sinnlos scheinen mag - vielleicht entwickelt sich aus der albernsten Idee eine interessante Alternative. Detaillierte Mockups werden erst erstellt, sobald die Ideen ausgearbeitet sind. Ein weiterer Tipp von Stephen ist, sich von Photoshop abzuwenden und stattdessen HTML/ CSS zu verwenden um responsive Mockups zu erstellen, die unter anderem einen schnelleren und flexibleren Umgang mit Veränderungen ermöglichen.

Statische Seiten generieren

Mit Werkzeugen wie Dexy oder Jekyll können wir schliesslich dazu übergehen, aus unseren Textdateien eine statische Website zu generieren. Dies bietet erneut mehr Flexibilität gegenüber dem herkömmlichen Weg mit Photoshop, da Inhalte schnell ersetzt werden können und sich flexibel mittels CSS anpassen anstatt manuell eingepasst werden zu müssen.

Screenshots, um Mockups zu präsentieren

Wenn es darum geht, dem Kunden erste Mockups zu präsentieren, empfiehlt Stephen Hay, anstelle der eigentlichen Mockups, welche mittels HTML/ CSS bereits im Browser lauffähig sind, Screenshots vorzuzeigen. Dadurch wird vermieden, dass über Funktionen diskutiert wird, die noch nicht implementiert wurden. Die Browser-Version sollte erst präsentiert werden, sobald das grundlegende Basis-Design abgenommen wurde.

Styleguides als Ergänzung

Styleguides helfen, zusätzlich das Design zu beschreiben und vereinfachen anschliessend die Entwicklung. Mittels Werkzeugen wie PhantomJS und CasperJS lässt sich die Erstellung von Styleguides inklusive Screenshots sogar automatisieren.

Richtlinien für den Workflow

Jeder Schritt im Workflow baut auf dem vorhergehenden auf, so dass ein kumulativer Effekt entsteht. Das Ganze ist ein iterativer Prozess, in dem jeder Schritt simpel ist. Wichtig ist dabei, dass jeder Schritt dokumentiert wird und alle Teammitglieder bei jedem Schritt miteinbezogen werden. Es ist an der Zeit, dass wir das Wasserfall-Modell verabschieden und die Zusammenarbeit im Team ins Zentrum setzen!