Über die Zukunft von Photoshop im Webdesign

Jahrelang erzählte ich Kunden, dass wir zunächst ein Layout in Photoshop erstellen müssen, um die „Programmierkosten“ niedrig zu halten. Schließlich kann ich in Photoshop in Sekundenschnelle mal einen Text per Maus von A nach B verschieben, während das in HTML & CSS, womöglich noch mit CMS im Hintergrund, Stunden dauern könnte. Doch ist das wirklich noch so? Welche Rolle wird Photoshop in der Zukunft des Webdesign spielen?

Wenn ich überlege, wie viele Stunden wir jedes Mal in die Gestaltung in Photoshop reinstecken, nur um später das Layout noch mal in HTML & CSS umzusetzen, wäre es da nicht einfacher, das Layout direkt im Browser zu entwickeln? Tatsächlich sprechen immer mehr Gründe wie die vielen unterschiedlichen Bildschirmgrößen und -auflösungen gegen Photoshop als Layout-Werkzeug. Und doch bin ich noch nicht so weit, dass ich auf Photoshop gänzlich verzichten würde.

Wofür sich Photoshop auch in Zukunft nutzen lässt

Die Größte Stärke von Photoshop liegt ganz klar im Erstellen und Bearbeiten von Bildern. Dafür wurde es gemacht und da kommt auch so schnell kein anderes Programm ran. Auch für ein paar Tests und Prototypen eignet sich Photoshop gut. Schnell mal gucken, wie groß und in welcher Farbe der Teaser auf dem Headerbild sein soll? Photoshop ist das Werkzeug meiner Wahl. Selbst wenn es darum geht, Farben und Formen für ein Layout zu finden und diese mal eben zu kombinieren ist Photoshop unverzichtbar.

Das war’s allerdings auch schon.

Was Photoshop in Zukunft nicht mehr leisten kann

Photoshop ist einfach nicht dafür gemacht, eine Website vom Header bis zum Footer vernünftig darzustellen. Das fängt beim Schriftrendering an, geht über fehlende Formatierungsmöglichkeiten (h1 – h6, ul, ol) und endet bei den vielen unterschiedlichen Bildschirmgrößen, die sich in Photoshop nicht vernünftig berücksichtigen lassen. Wer mal eine iPhone-Ansicht in Photoshop erstellt hat, erinnert sich vielleicht an die Diskrepanz zwischen der Größe auf dem Monitor und auf dem späteren Smartphone-Display. Eine Website fürs Smartphone sollte auch auf einem solchen betrachtet bzw. gestaltet werden.

Ebenso wenig ist Photoshop für interaktive Elemente geeignet. Die Funktion einer Off-Canvas-Navigation auf dem Smartphone kannst du lang und aufwendig illustrieren und beschreiben, schneller versteht es der Kunde aber, wenn er es sieht und ausprobieren kann. Genauso verhält es sich mit Buttons, Hover-Effekten usw. Die Funktion eines Buttons wird mitunter erst durch das Feedback beim Mouseover wirklich sichtbar. Das ist mit Photoshop einfach nicht gut zu simulieren.

Ich bin mir sicher, dass uns Photoshop auch bei uns in der Agentur noch eine Weile erhalten bleiben werden. Auch weil wir nicht immer Gestaltung und Umsetzung komplett machen. Doch mittlerweile versuchen wir so schnell wie möglich den Sprung ins Web zu schaffen und nicht zu viel Zeit mit theoretischen Layouts in Photoshop zu verbringen.

Ich bin Steuermann bei Erdmann & Freunde, einem Netzwerk für Contao-Webworker, und schreibe hier über Themen aus dem Bereich Webdesign und Webentwicklung.

5 Kommentare

  1. Carolina sagt:

    Wer hat das eigentlich angefangen, das Weblayouts mit Photoshop gebaut werden müssen? Ich fand das noch nie geeignet, zumal es ja auch in der CS6 an Grafikformaten nicht all das unterstützt was man haben möchte. Alleine das Ebenengehühner, das dann für den Export wieder auseinandergebastelt werden muss. Grau-en-voll. Probier mal Fireworks aus, das ist exakt dafür gemacht. Hoverstates on the fly, sauberer Export, sinnvolle Dokumentenvorgaben, mehr PNG-Formate und und und …

  2. Lutz sagt:

    Hi, Dennis, grundsätzlich pflichte ich dir bei, dass Photoshop mit dem jetzigen Funktionalitätsstand künftig nur noch rudimentär eine Rolle beim Webdesign wird spielen können.
    Allerdings hat das aktuelle CS6 endlich Absatz- und Zeichenformate, mit denen man sehr wohl p, h1-h6 etc. darstellen kann. [@Carolina] Und mit den Ebenenkompositionen (seit CS3?) lassen sich in einem PSD auch alle möglichen Ansichten verwalten und per fertigem Script automatisiert ausgeben. Selbst die Vorschau in einem Smartphone-Browser läßt sich doch über die Vorgabe einer entsprechenden dpi simulieren.
    Standard-Designs kann man sicher ohne PS gleich in HTML/CSS anlegen, ambitioniertere brauchen Tools wie PS.
    Mit einer durchdachten Kombination aus PS-Basisdesign, einem verbindlichen Wireframe und HTML/CSS kann man allerdings den PS-Aufwand deutlich verringern.

  3. Chris sagt:

    Photoshop ist zwar nicht das Tool meiner Wahl wenn es um Weblayouts geht, jedoch finde ich den Ansatz, direkt in HTML/CSS zu starten gar nicht so verkehrt. Es würde vielleicht auch letztendlich zu einem besseren Resultat, mit entsprechender Reduktion auf’s Wesentliche, führen. Keine Conversion-Bremsen in Form von grafischen Schnickschnack :-)

    @Carolina Fireworks ist, mal abgesehen von der leichten Instabilität, ein wirklich großartiges Tool. Ich frag mich immer wieder, wie man mit Photoshop, schnell und effektiv ein Screendesign zaubern kann :-)
    Vielleicht hab ich mich mit Photoshop auch nie genug auseinandergesetzt und bin zu schnell „geflüchtet“.

  4. Ugo Arangino sagt:

    Wieso muss man überhaupt mit Photoshop arbeiten?
    Mock-ups lassen sich schnell auf Papier erstellen, die ersten Entwürfe flexibel in HTML und CSS gestalten. Anschließend kann man mit der Richtigen Umsetzung beginnen. Das Projekt selber ist dann immer das Mock-up selbst.

    Ich bin zwar nur ein Amateur, aber diese Vorgehensweise hat sich als ziemlich effektiv und Zeit sparend herausgestellt.

  5. Dennis Erdmann sagt:

    Vielen Dank für die zahlreichen Antworten.

    @Carolina: Fireworks habe ich mir angesehen, aber es ist weniger die Bedienung von Photoshop, die mir Kopfzerbrechen bereitet, sondern fehlende Features, die ein Grafikprogramm, egal ob Photoshop oder Fireworks, nicht bieten können.

    @Lutz Vielen Dank für den Hinweis. Absatzformate kannte ich noch nicht und sollten ein paar Dinge leichter machen. Was die Darstellung im Smartphone-Browser betrifft, so muss ich das Layout auf dem Smartphone sehen. Dafür habe ich bisher Liveview (http://www.zambetti.com/projects/liveview/) genutzt, allerdings ist das auch nur eine Notlösung.

    @Chris Da gebe ich dir recht. Man läuft aber auch Gefahr, dass das Layout evtl. unter den Erwartungen bleibt, weil sich nur noch auf bekannte, mit CSS mögliche Effekte beschränkt.

    @Ugo Es gibt natürlich auch ein paar nette Online-Tools, die einem bei der Farbgestaltung helfen können, z.B. Colour Lovers (http://www.colourlovers.com), ganz auf Photoshop zu verzichten kann ich mir aber (noch) nicht vorstellen. Und es wird auch spannend zu sehen, was Adobe in Zukunft auf den Markt bringen wird, um Webdesignern das Leben leichter zu machen. Ich glaube Adobe Edge Reflow (http://html.adobe.com/edge/reflow/) ist erst der Anfang.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *