Photoshop & Co bei Web-Layouts überspringen?

Achtung: Dieser Beitrag ist schon etwas älter.
Es kann sein, dass sein Inhalt nicht mehr aktuell ist, Links veraltet sind oder dass auch niemand mehr auf neue Kommentare antwortet.

In ihrem Weblog »Signal vs. Noise« haben 37signals einige Gründe aufgeführt, warum Sie Web-Layouts nicht erst in einem Grafikprogramm wie Photoshop entwerfen, sondern vom Skizzenbuch direkt in den HTML/CSS-Editor wechseln. Eine der Hauptgründe mit der diese Vorgehensweise begründet wird ist, dass die Photoshop-Layouts – wie auch die Entwürfe auf Papier – nicht klickbar und sich damit keine Interaktion vermitteln lässt. Zudem lassen sich Entwürfe auf Papier schneller anfertigen: »Sie sind schnell, billig und schmutzig«.

Ein weiterer Grund ist die Typografie im Internet: Photoshop und Co. konnten die Texte noch nie so darstellen, wie sie später auch im Browser erscheint. Dazu spielen im Webdesign einfach zu viele Faktoren eine Rolle, dass Photoshop-Entwürfe 1:1 in das Internet übertragen werden können. Zudem verleitet das designen in Photoshop sehr dazu, sich in unzähligen Details zu verlieren (ich spreche hier aus Erfahrung).

Gleichzeitig mehren sich aber auch die kritischen Stimmen dieser Praxis. 37signals hätten es schließlich sehr einfach, weil sie für keine Kunden arbeiten müssen. Für normale Webdesigner die mit Kunden zusammenarbeiten, wäre eine solche Vorgehensweise kaum vor dem Kunden zu vertreten. Einige Interessante Stimmen dazu bei Gerrit und Manuela.

Der Kunde möchte schließlich sehr genau sehen können was er später geliefert bekommt. Allerdings gibt es hierbei auch wieder einen Nachteil: Kunden denken – wenn Sie einen ausgearbeiteten Screen-Entwurf sehen – es sei schon ihre Seite. Da wie oben angesprochen sich eine Seite nicht immer zu 100% genau im Browser umsetzen lässt, meckern Kunden häufig später herum, wenn Elemente nicht genauso aussehen und platziert sind wie auf dem Screen-Entwurf gezeigt.

Ich selber versuche in letzter Zeit immer häufiger die Entwürfe in Photoshop wegzulassen. Meistens reduziere ich sie auf Wireframe, die zur groben Visualisierung der Größenverhältnisse dienen (siehe dazu einen Beitrag bei den Webkrauts). Anschließend erstelle ich HTML/CSS/JavaScript-Prototypen die schon die komplette Funktionalität enthalten. Diese Prototypen lassen sich dann später sehr schnell und einfach in das jeweils verwendete Content Management System einbinden.

Sofern ausreichende Kenntnisse in HTML/CSS vorhanden sind, lassen sich Prototypen im Browser meist schneller erstellen, als der Entwurf in Photoshop oder Fireworks. Und hier hat man schon eine Version mit der direkt gearbeitet werden kann und die nicht erst in das eigentliche Medium portiert werden muss.

Bei sehr Grafik-lastigen Websites können Photoshop-Screens aber auch ihre Vorteile haben, da hier bereits bei dem Entwurf die benötigten Grafiken erstellt werden und für die HTML-Umsetzung nur noch »herausgeschnitten« werden müssen.

Wie man in den Diskussionen schnell erkennen kann, gibt es bei diesem Thema keinen richtigen Weg. Bei jedem Projekt und Kunden sollte abgewogen werden, welcher Weg am produktivsten, nutzbringendsten und schnellsten ist. Worauf sich ein Webdesigner allerdings nicht mehr einlassen sollte ist, etliche unterschiedliche Screens in Photoshop zu bauen. Mit maximal drei Screens (Startseite und zwei Unterseiten) sollte sich das Meiste und Wichtigste visualisieren lassen. Ansonsten läuft grundlegend etwas falsch.

Abonniere den RSS-Feed für weitere Webdesign Tutorials und Artikel.

Bisher 1 Kommentar

Marc Tiedemann 05 Jun 08

Ich denke auch, dass man immer von Fall zu Fall entscheiden muss. Bei einem sehr grafiklastigen Projekt geht es ja gar nicht ohne PS.

Allerdings sehe ich schon ein sehr großes Problem in der Erwartungshaltung der Kunden. Ich persönlich finde es schon sehr schwierig alleine den Unterschied zwischen einem fixen und einem flexiblem Layout zu erklären. Und wenn man dann den Kunden noch zusätzlich mit einer Photoshop “Skizze” verwirrt ist das auch meistens eher kontraproduktiv.

Daher mein Vorschlag: Skizze per Hand machen und die (wenn möglich) grob mit dem Kunden abstimmen. Danach auch gleich in HTML/CSS umsetzen und natürlich ggf. zusätzlich in PS, wenn man Grafiken benötigt. Das PS Dokument bekommt der Kunde aber nie vollständig zu Gesicht.

Wenn der Kunde den Entwurf dann gleich im Browser betrachten kann, baut er schneller ein Verhältnis zu “seinem” Projekt auf.

Schreibe einen Kommentar