xingtwittersharerefreshplay-buttonpicture as pdflogo--invertedlinkedinkununuinstagram icon blackShapeGroup 3 Copy 2Group 2 Copydepartment_productdepartment_datascienceuserclosebasic clockblogShapearrows slim right copy 3arrows slim right copy 3arrows slim right copy 3

Lean Design Development für responsive Websites

Sarah

Sarah |

09. Oct 2014 |

- min Lesezeit

Lean Design Development ist eine effiziente Methode, um zügig und effektiv eine responsive Website zu entwickeln. Pixelgenaue Layout-Dateien für alle Viewports gehören der Vergangenheit an. Voraussetzung dafür ist die Vernetzung von Design und Entwicklung.

Website Designprozess

Der herkömmliche Designprozess zur Erstellung einer Website ist recht linear. Der UX-ler erstellt Wireframes, gibt diese an den Designer, der sie „anmalt” und dann pixelgenaue Photoshop-Dateien aller Unterseiten erstellt. Die gehen dann weiter an den Entwickler, der sie „zusammenbaut”. Soweit so gut. Ist die Anforderung allerdings eine Responsive Website zu erstellen, wird es schnell kompliziert und aufwändig. Angenommen man optimiert diese Website auf 3 Viewports (Mobile - Tablet - Desktop) und für die Mobile und die Tablet Version noch auf 2 Ausrichtungen (Horizontal & Landscape), so explodiert die reine Anzahl der Photoshop-Dateien. Nicht nur aus Sicht der Konzeption, sondern auch die reine Produktionszeit von pixelgenauem Design geht ins Unermessliche. Wie kann dieser Prozess optimiert werden?

Style Tiles

Unseren Ansatz, um den Herausforderungen einer Responsive Website gerecht zu werden, nennen wir Lean Design Development. Das bedeutet, Design und Entwicklung werden nicht als getrennte Schritte des Prozesses behandelt, sondern passieren zeitgleich und in direktem Austausch. Der UX-ler legt das Grundgerüst, indem er Scribbles und Wireframes erstellt und das Verhalten der Website über Responsive Design Patterns definiert. Die verschiedenen Viewports und Ausrichtungen werden von Anfang an angedacht. Der Designer entwickelt parallel ein grobes Design über Style Tiles. Statt fertiger Screens wird also zunächst nur eine Designrichtung, ein Look & Feel der globalen Assets (Buttons, Links, Farben, Schriften, Headlines…), definiert.

Diese beiden Schritte passieren iterativ und beeinflussen sich wechselseitig. Sobald der User-Flow durch das UX definiert ist, setzt der Entwickler das Backend auf. Wenn es an die Ausgestaltung der Seiten geht, arbeitet das Design sehr eng mit dem Frontend zusammen. Dabei entstehen keine kompletten Photoshop-Datein der Unterseiten. Durch die globalen Definitionen in den Style-Tiles kann der Entwickler an vielen Stellen schon selbständig arbeiten - und allgemeingültige Elemente anlegen. Der Designer kommt dann direkt dazu, um an der Testumgebung Änderungen vorzunehmen und ihre Wirkung zu testen. Einzelne Module, die sehr viel Komplexität mitbringen und viel UI-Gestaltung erfordern, können bei Bedarf vom Designer gestaltet und dann wieder direkt an den Entwickler weitergegeben werden. Dieser Prozess ist somit ein Wechsel- und vielmehr noch ein Zusammenspiel von Design und Entwicklung, die idealerweise beieinander sitzen und zu einer Einheit verschmelzen.

One Product – One Brain

Design und Entwicklung bauen so gegenseitiges Verständnis auf und teilen ihr Wissen. Klar ist, dass beide Disziplinen ihre Berechtigung und Unterschiede haben. Beim Lean Design Development wird das Produkt, das als Ergebnis herauskommt, als Einheit betrachtet. Genau so sollte auch der Prozess sein.

We love it

Wir haben sehr gute Erfahrungen mit Lean Design Development gesammelt. Der Prozess, gerade bei Responsive Websites und Apps, wird kompakter, strategischer und schneller. Durch das Wegfallen aufwändiger Design-Produktionszeiten werden langwierige Korrekturschleifen in den produzierten Design-Dateien minimiert. Durch das parallele Arbeiten von Anfang an und das frühzeitige Einsteigen der Entwicklung verkürzt sich die Gesamt-Entwicklungszeit des Produktes oder Projektes. Das soll nicht heißen, dass die Qualität des Designs vernachlässigt wird. Vielmehr verlagert sich die Zeit an manchen Stellen auf die Zusammenarbeit zwischen Design und Entwicklung. Bei Feinheiten wird gemeinsam etwas mehr Aufwand in die Feinjustierung investiert.

Entscheidender Vorteil: Die Wirkung aller Anpassungen können unmittelbar im Browser in verschiedenen Viewports betrachtet und kontrolliert werden. Die Design-Abnahme geschieht praktisch unmittelbar in der gemeinsamen Arbeit.


Ähnliche Artikel

Ähnliche Artikel