search home list

Design im Browser – Hot or Not?

Design im Browser, eine für das digitale Zeitalter eigentlich sehr alte Design-Methode, erfährt durch den Aufstieg von Responsive Design wieder starken Aufschwung. Am Anfang — noch bevor Grafikeditoren ihren Weg ins Web Design fanden — war es durchaus üblich, Webseiten direkt im Browser zu designen.

design-here-please

Make it pretty!

Als hübsche Bilder und visuelle Stile im Web wichtiger wurden, nutzten viele Designer klassische Design-Applikationen, wie Photoshop, Fireworks, etc. Viele von ihnen hatten zuvor für Printmedien designt und diese waren die Werkzeuge, die sie kennen und lieben gelernt hatten. Diese Vorgehensweise ist durchaus verständlich, und die meisten von uns hätten es wohl genau gleich gemacht. Nichtsdestotrotz hat dies dazu geführt, dass Designer über Jahre hinweg Webseiten mit mittelmäßigen Werkzeugen designten. Diese Applikationen waren einst nicht Web Design konzipiert worden und die Designs die darin entstehen sind bis heute nicht in der Lage, den Möglichkeiten des finalen Mediums gerecht zu werden. Soll heißen, es ist weder möglich im Grafikeditor die flexible Natur des Web, noch jegliche interaktiven Elemente angemessen darzustellen.

Responsive Design als Katalysator

Seit der Explosion der Nutzungszahlen von mobilen Endgeräten ist das Schlagwort Responsive Design immer relevanter geworden. Mit dieser an und für sich relativ simplen Technik können Webseiten so gestaltet werden, dass sie unabhängig von der Bildschirmgröße immer über ein optimales Layout verfügen. Diese Technik erfordert viel mehr Hirnschmalz in Konzeption und Umsetzung. Immerhin müssen gleich mehrere, miteinander kompatible Layouts entworfen und die Code-Basis möglichst effizient programmiert werden. Schließlich soll die Webseite auch bei schwachen Datenverbindungen möglichst performant funktionieren.

Die Notwendigkeit, für eine unbestimmte Anzahl an Bildschirmgrößen zu designen, hat die den Grafikeditoren inhärenten Grenzen sehr deutlich hervorgehoben: Designs für alle Größen im Grafikeditor zu konzipieren impliziert einen viel zu hohen Aufwand und das Resultat rechtfertigt diese Methodik in keinster Weise. Aus diesem Grund besinnen sich immer mehr Designer und Entwickler auf die “Design im Browser” Technik, die zwar für viele Designer nicht ganz einfach ist, jedoch klare Vorteile mit sich bringt.

Hot!

hot

  • Sofortige Möglichkeit, auf jeglichen Bildschirmgrößen bzw. in unterschiedlichen Browsern zu testen.
  • Der Kunde sieht von Anfang an, wie sich die Webseite tatsächlich entwickelt und es kommt nicht zu Diskrepanzen zwischen grafischem Design und dem vollendeten Produkt.
  • Interaktionsmechanismen, Animationen, Transitions, sowie Hover und Active States können korrekt abgebildet werden und geben dem Kunden mehr Aufschluss über das tatsächliche Look & Feel der Webseite.
  • Der Code kann, sofern er pflichtbewusst programmiert wurde, von den Entwicklern weiterverwendet werden und es entstehen keine Wegwerf-Dokumente.
  • Änderungen, die sich aus Feedbackrunden ergeben, können wesentlich einfacher und mit entsprechend geringerem Aufwand eingebaut werden.
  • Durch den Einsatz von Versionierungssystemen, wie Git, Subversion oder Mercurial ist es viel einfacher möglich, mit den Designs zu experimentieren, alte Versionen wiederherzustellen und konkrete Meilensteine im Projekt auch auf Code-Basis zu markieren.

Not?!

not

Doch all die schönen Vorteile verpuffen manchmal im Nichts, denn Design im Browser ist nicht immer die geeignete Methode. Das Problem, das sich durch Design im Browser ergibt, ist ein zeitliches. Design im Browser dauert manchmal einfach zu lange. Wir selbst mussten diese bittere Einsicht kürzlich am eigenen Leib erfahren. Design im Browser ist eine Technik, die anfangs einiges an Vorbereitungszeit in Anspruch nimmt. Es muss ein Framework aufgesetzt und die grundlegenden Stile und Komponenten entworfen werden. Farben, Typographie, interaktive Elemente — all das ist nötig, um sinnvoll und zeiteffizient mit dem interaktiven Prototypen arbeiten zu können. Klar, würde man auf diese Äußerlichkeiten zu Beginn verzichten und sich mit “Boxes & Arrows” begnügen, so könnte man viel Zeit sparen. In unserem Fall forderte der Kunde jedoch einen Prototypen, der voll und ganz den Branding-Guidelines des Unternehmens entsprach. Halbfertige Komponenten waren keine Option. Dieser Anspruch, gepaart mit einem enormen Zeitdruck hat dazu geführt, dass wir dem Kunden letztendlich statische Wireframes liefern mussten, da wir diese schneller produzieren konnten. Es liegt einfach in der Natur des Grafikeditors, dass visuelle Stile und Layout äußerst schnell und effizient entworfen werden können. Die Arbeit mit dem Browser erfordert mehr Denkarbeit:

  • Wie können gewisse Effekte erzielt werden?
  • Wie können sie am effizientesten programmiert werden?
  • Welche Code-Teile können wiederverwendet werden?

In einem Grafikeditor hingegen reichen oft ein paar Mausklicks und schon zeichnen sich erste Formen des visuellen Stils ab und können weiter verfolgt oder eben auch wieder verworfen werden. Diese Reibungslosigkeit ist bei Design im Browser leider nicht gegeben und das ist der Grund, weshalb diese Methode zu Beginn einfach mehr Zeit in Anspruch nimmt.

Fazit

Trotz dieses Umstands und den möglichen Schwierigkeiten, die sich daraus ergeben, sind wir große Fans von Design im Browser und wenden es bei jeder Gelegenheit an. Wir können auch jedem nur raten, es so viel wie möglich einzusetzen und sich ein entsprechendes Framework, sowie die notwendigen Werkzeuge einzurichten. Wenn die Zeit vorhanden ist, bringt Design im Browser viele entscheidende Vorteile mit sich. Es ist jedoch aufzupassen und genau abzuwägen, wann es im Projekt keinen Platz für Design im Browser gibt.

Pro Design im Browser

Gegen Design im Browser

Show all articles

One Response

  1. Hey, schöner Überblick. Danke Thomas!
    Ich glaube es gibt hier 3 wichtige Punkte zu erwähnen:

    1. Setup: ich denke es ist wichtig sich auf diese neue Art des “Desgins” richtig vorzubereiten. Sprich man braucht ein System das hierfür passt. Ob das jetzt das gleiche Framework ist mit dem danach weiterentwickelt wird sei dahingestellt, aber die Vorbereitungen müssen passen. Die wichtigsten Elemente sollte schon bereit liegen und schnell zum Einbauen sein. (Layout) Außerdem sollte und muss das Design reduziert sein. Wie du schon erwähnt hast, sind komplette Designs nicht in der Zeit umsetzbar.

    Das bringt mich zu Punkt 2: Komplette Designs sind einfach nicht praktisch im Browser. Die Zeit wird nicht bezahlt und die Tools, Editor, sind auch nicht die richtigen. (derzeit) Wie du auch schon erwähnt hast, haben wir schon “immer” falsch designed. Ein Bild kann nie eine Website darstellen. Das hat nur funktioniert, da wir ein paar Jahre großteils die selbe Monitorgröße hatten. Außerdem erweckt das klassische Webdesign Bild einen falschen Eindruck beim Kunden. Dieser denkt die Website wird überall so aussehen. Wird sie aber nie. Das bringt uns zum nächsten Punkte

    3. Der Kunde muss umdenken, bzw. dazu gezwungen werden. Er sollte ein Design im Browser bekommen, das das Verhalten und das Layout der Seite dynamisch zeigt. Zusätzlich bekommt er fertig designed Elemente, die zeigen wie das Design aussehen wird.

    Ich denke hier wird noch viel passieren und es wird sich noch zeigen wie hier in Zukunft gearbeitet wird. Spannend ist es auf jeden Fall=)

What do you think?