Web-Design

Photoshop lügt! Gestalte Webseiten direkt im Browser [Gastbeitrag]
Kommentare

„Fireworks and Photoshop can’t cut it for responsive design — they’re bringing a knife to a gun fight“, sagt Webdesigner und Autor Andy Clarke und auch Branchenprophet Ethan Marcotte predigt seit 2010 vom großen Umdenken im Webdesign. Wenn der klassische Webdesign-Workflow überholt ist, wie sieht die Alternative dann eigentlich aus?

Abbildung 1

Der klassische Webdesign-Workflow nach Jason Santa Maria © rukzuk AG

Das Problem des ursprünglichen Webdesign-Prozesses liegt in seiner Herkunft begründet. Während man vor zehn Jahren noch davon ausgehen konnte, dass der Nutzer am Desktop auf seinem Schreibtisch die zu gestaltende Webseite besucht, wissen wir heute, dass fast die Hälfte aller Nutzer ihren Bildschirm in der Hosentasche mit sich herum tragen. Tendenz steigend. Die Anforderungen haben sich also verändert und es ist Zeit, darauf zu reagieren.

„Designing in the browser“ lautet das neue Credo. Dabei wird ein Webseiten-Layout nicht mehr bis ins Detail in Photoshop gestaltet, sondern so früh wie möglich in HTML/CSS/JavaScript als echte, meist zunächst statische Webseite umgesetzt. Die Gestaltung wird anschließend im Browser finalisiert.

Ein Grund für die Gestaltung im Browser ist die Tatsache, dass Photoshop nicht in der Lage ist, den heutigen Design-Standards gerecht zu werden. Die Darstellung in Photoshop entspricht nie dem, was später die Webseiten-Besucher sehen werden.

Beispielsweise unterscheiden sich Schriftrendering und verfügbare Schriftarten und auch Interaktionen und Animationen können in einen Photoshop-Entwurf nicht integriert und getestet werden. Problematisch sind auch die Textinhalte.

Während der Designer bei der Erstellung des Layouts in Photoshop von einer festen Textlänge ausgeht, werden später von Redakteuren oft beliebig lange Inhalte eingegeben. In Photoshop kann nur schwer simuliert werden, wie sich das Layout bei überlangen Inhalten verhalten soll.

Abbildung 2

Webdesign in der Post-Photoshop-Ära: Flexible Layouts für alle Bildschirmgrößen © rukzuk AG

Noch schwieriger verhält es sich mit der Darstellung eines responsive Layouts, also eines Layouts, das sich dynamisch an mobile Endgeräte wie Smartphones und Tablets anpasst. Photoshop ist pixelbasiert, im Browser lassen sich jedoch auch prozentuale Werte verwenden.

Für Agenturen und Freelancer ist es zudem eine große Herausforderung, die Funktionsweise und das Konzept hinter solchen Layouts vor der finalen Umsetzung einleuchtend dem Kunden zu demonstrieren.

Statische Screenshots oder ausgedruckte Prototypen mit Endgerät-Umrahmung sind wenig zielführend. Deutlich komfortabler ist es, dem Kunden seine zukünftige Seite direkt selbst erleben zu lassen. Im besten Fall auf seinem eigenen Smartphone.

Dieses realitätsnahe Testen bringt nicht nur dem Kunden Vorteile, sondern garantiert sowohl auf Design- als auch auf Entwicklerseite die technische Machbarkeit.

Dass sich die Idee eines Designers nicht oder nur schwer umsetzen lässt, fällt damit bereits im Designprozess auf und nicht erst im letzten Entwicklungsschritt. Das ist nicht nur zeitsparend, sondern es vermeidet auch eine falsche Erwartungshaltung beim Kunden.

Bei all dem Glanz birgt aber auch die Gestaltung im Browser einige Schattenseiten. Es erfordert vom Designer nämlich nicht nur ein Um- oder Wegdenken vom bisherigen Drag-and-Drop ins statische Pixel-Canvas, sondern vor allem sehr gute HTML- und CSS-Kenntnisse. Gerade im Hinblick auf HTML5 und CSS3 stellt das für viele Designer aber eine große Hürde dar.

Visuelle Tools statt Quellcode

Abbildung 3

Codeless Webdesign im Browser mit rukzuk © rukzuk AG

Überwunden werden soll diese Hürde nun mit neuen visuellen Tools, die Designern das Coden ersparen. Neben den klassischen Entwickler-Werkzeugen wie den Chrome-Developer-Tools und Firebug, welche gewisse HTML/CSS-Kenntnisse voraussetzen, sind in den letzten Monaten einige Web- und Desktop-Anwendungen veröffentlicht worden, die den „Designing in the browser“-Ansatz verfolgen. Sie sollen weniger technik-affinen Designern ermöglichen, Webseiten zu gestalten ohne selbst programmieren zu müssen.

Das Angebot reicht von reinen Prototyping-Tools wie Proto.io und EASEL über Code-Generatoren wie Adobe Edge Reflow, Macaw und Webflow bis hin zu All-in-one Tools wie Webydo oder rukzuk, welche den kompletten Webdesign-Workflow abdecken, in dem sie Design-Tool und Content-Management-System kombinieren.

Tool ist gleich Tool ist gleich Tool?

Durch die Flut an neuen Tools fällt es schwer, den Überblick zu behalten. Jedes dieser Tools will verstanden und beherrscht werden, und das kostet vor allem Zeit. Worin bestehen also die Unterschiede?

Während webydo zwar die Gestaltung in den Browser verlegt, kleben die eingefügten Elemente nach wie vor an einer exakten Pixelposition. Eigentlich sollten sich Elemente im Web aber dynamisch an umgebende und innenliegende Elemente anpassen. Vor allem können keine responsive Layouts erstellt werden.

„Single Purpose“-Tools wie Reflow, Macaw und Webflow bieten zwar die Möglichkeit, Webseiten zu gestalten, allerdings generieren sie lediglich Code. Die Umsetzung der Webseite in Templates für ein CMS muss in einem zusätzlichen technischen Schritt vorgenommen werden.

Für uns als Macher von rukzuk war es besonders wichtig, den Prozess konsequent weiter zu gehen. Daher unterstützt rukzuk die visuelle Entwicklung von responsive Layouts. Bei der Gestaltung einer Website kann das Ergebnis jederzeit auf einem Smartphone oder Tablet sofort getestet werden.

Und über das integrierte CMS  lassen sich aus dem Designmodus heraus bereits die Bearbeitungsrechte für den Seitenmodus festlegen. Der Redakteur kann dann die Inhalte der Webseite selbstständig pflegen. Die Prozesskette schließt sich für uns mit der Publikation der Webseite auf einen von rukzuk unabhängigen Live-Server.

Ein weiterer Punkt, in dem sich rukzuk von den Mitbewerbern abhebt, ist die Flexibilität. Entwickler können über eigene Module jederzeit neue Funktionen integrieren.

Unsere Motivation für die Entwicklung von rukzuk entstand aus der langjährigen Erfahrung mit diversen Content-Management-Systemen und unserer damit einhergehenden Unzufriedenheit. Die ersten Prototypen für die Kombination aus Design-Tool und CMS haben wir bereits vor über zehn Jahren erstellt.

Die Entwicklung von rukzuk begann im Jahr 2010. Dabei haben wir von Beginn an mit verschiedenen Vorab-Versionen erste Kundenprojekte umgesetzt, z.B. für ProSiebenSat1 und die Deutsche Telekom.

Wer Photoshop also wieder ausschließlich zur Bildbearbeitung nutzen möchte, findet die besten Effekte hier in unserem Tutorial. Auch lohnt es sich, diese Systeme mal anzuschauen:

Design-Tools mit integriertem CMS:

rukzuk

Webydo

Code-Generatoren:

Adobe Edge Reflow

Divshot

Froont

Macaw

Webflow

Prototyping-Tools:

EASEL

Proto.io

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -