Photoshop überspringen? Nö, mach ich nicht.

Kann man Photoshop während des Gestaltungsprozess weglassen und stattdessen nach den Skizzen direkt mit xhtml/css weitermachen?

  • von Lennart Prange

Vor längerer Zeit veröffentlichte 37 Signals, bekannt durch Produktivitäts-Tools wie Basecamp oder Highrise, einen Artikel, in dem sie erläuterten, warum sie Photoshop bei der Entwicklung ihrer Web Oberflächen nicht mehr benutzen.

Dieser Beitrag hat nicht nur 205 Kommentare, sondern auch viele Backlinks. Er wurde sehr ausführlich diskutiert, aber leider gab es daswebdesignblog.de damals noch nicht. Ich behielt meine Gedanken zu dem Thema also für mich.

In einem aktuellen Beitrag hat das smashingmagazine die alte Thematik wieder aus der Kiste gekramt und natürlich nimmt die Diskussion jetzt wieder Fahrt auf.

Ich habe mit diesem Blog nun auch die Möglichkeit, etwas mitzumischen und vielleicht auch eine kleine Diskussion anzustoßen. Auf Deutsch.

Extrem verlockend

Prozessoptimierung – so nennt man das, was 37Signals da vorschlägt, wohl in Fachkreisen. Es ist aber keine gewöhnliche kleine Anpassung des Prozesses, die ein paar Minuten spart, sondern eine Anpassung, die einen riesigen Brocken Zeit aus dem Workflow haut.

Normalerweise sieht es ja so aus (ungefähr): Skizzen – Gestaltung mit Photoshop – Nachbau der Photoshop Datei mit xhtml/css. Es ist, meiner Ansicht nach, eine sehr offensichtliche Optimierungsmöglichkeit, Schritt 2 und 3 zu kombinieren. Schmeißt man Photoshop raus, muss man die Gestaltung jetzt zwar mit Code machen, dafür fällt das Nachbauen am Ende aber weg. Ist man fertig mit der Gestaltung, ist auch das Template fertig. Für den Webdesigner und den Kunden ist es auch viel angenehmer. Man hat dann gleich das richtige Erlebnis und keine Grafik. Es gibt Rollovers, Drop-Down Navis, Suchfelder und und und.

Schauen wir uns kurz an, was sich aus der Änderung unseres Arbeitsablaufes ergibt: Zeitersparnis und eine bessere Präsentation beim Kunden.

Wow.

Spätestens jetzt müssen die Alarmglocken läuten. Diese Optimierung ist so gut, dass man unbedingt nach Fallstricken suchen muss.

37Signals

Da Basecamp & Co. bekannte und häufig genutzte Applikationen sind, kann 37Signals nicht so viel falsch machen. Was bei den Einen zum Erfolg führt, muss aber nicht gleich bei allen anderen funktionieren. Vor allem steht in dem Beitrag nicht, dass es ein Rat für Webdesigner ist.

37Signals kann man in diesem Fall meiner Meinung nach tatsächlich überhaupt nicht als Vorbild nehmen. Mich wundert es wirklich, dass so viele Webdesigner sich angesprochen gefühlt haben. Denn 37Signals hat doch nur wenig mit uns zu tun. Sie machen Web Apps, keine Webseiten. Sie arbeiten für sich, nicht für Kunden.

Etwas genauer – Teil 1 (“Sie machen Web Apps”)

Das Ziel des Workflows von 37Signals sind keine Webseiten, die vielleicht mit Texturen arbeiten, abgerissene Kanten haben oder viele Verläufe benutzen. Am Ende steht eine Web App, deren Oberfläche zwar schick und funktional aber auch genauso schlicht ist. Hier braucht es nicht viele Effekte oder grafische Leckerbissen, für die man Photoshop benötigen würde.

Etwas genauer – Teil 2 (“Sie arbeiten für sich”)

37Signals hat einen eigenen Stil entwickelt und diesen Stil findet man in fast allen Oberflächen ihrer Apps. Jedenfalls würde ich das auf Grund der Screenshots der Apps so sagen.

Nachdem das Layout skizziert ist, brauchen sie Photoshop nicht. Wozu auch? Sie wissen, wie sie nun weiter arbeiten müssen, denn der Stil ist vorgegeben.

Da die meisten Webdesigner aber für immer andere Kunden arbeiten und jede Webseite komplett anders aussieht, lässt sie das Modell von 37Signals nicht so einfach übertragen.

Zwischenfazit

37Signals ist erfolgreich und sicherlich ein Vorbild in vielen Bereichen, gestaltet in diesem Fall aber unter ganz anderen Voraussetzungen als der typische Webdesigner.

Allerdings heißt das nicht, dass der Arbeitsablauf nicht beim typischen Webdesigner funktionieren kann. Die Vorschlag ist definitiv interessant, wie ich bereits oben festgestellt habe. Es muss allerdings geschaut werden, ob die Argumente von 37Signals auch für normale Webdesigner zutreffend sind und ob man auf Grund den unterschiedlichen Voraussetzungen nicht noch Gegenargumente finden könnte.

Die Haken

Nun konkret: Warum halte ich von der Idee nicht viel?

Texturen, Verläufe, Lichteffekte usw. brauche ich bei einigen meiner Projekte. Mit CSS kann ich diese nicht generieren. Photoshop muss also zwangsläufig in den Workflow. Andernfalls würde ich meine Möglichkeiten so sehr einschränken, dass nach kurzer Zeit wahrscheinlich alle Designs ähnlich aussehen, ihr Stil nie variiert und kaum noch Kunden kommen. Auch wenn ich Photoshop noch benutzen würde, würde es mich sehr nerven, wenn ich dort ständig Grafiken erstellen müsste und erst nach der Einbindung durch den Code die Grafiken in der gesamten Komposition betrachten könnte. Das würde meinen Workflow auch ständig unterbrechen.
Außerdem könnte ich so nicht wirklich komfortabel experimentieren. Es ist um einiges effektiver, dieses Experimentieren in Photoshop zu tun. Dort kann ich die Deckkraft einfach anpassen, Farben verändern, Bereiche wegradieren und und und.

Außerdem würde die Anpassung des Prozesses nur dann wirklich Zeit sparen, wenn der Kunde mit meinem ersten Versuch zufrieden ist. Sollte er mit dem, was ich da gemacht habe, überhaupt nicht zufrieden sein, muss ich von vorne anfangen. Und das wäre verdammt aufwändig. Anpassungen sind meiner Meinung nach viel einfacher in Photoshop vorzunehmen.

Es mag sein, dass man sich bei der Arbeit mit Photoshop um zu viele Details kümmert, aber diese Details müssen nun mal da sein, bevor man das Design dem Kunden präsentiert. Und das lässt sich um einiges einfacher mit Photoshop machen. Bevor ich mich mit Font-Embedding rumschlage, will ich doch wissen, ob der Kunde das so überhaupt gut findet. Bevor ich eine Box mit mehrfachem Border mache, möchte ich Gewissheit haben, dass der Kunde das ansprechend findet. Da Photoshop mir viel einfacher die Möglichkeit gibt, eine realitätsnahe “Simulation” der späteren Webseite zu erstellen, wird es weiterhin in meinem Prozess fest verankert sein.

Diskussion?!

Ich überspringe Photoshop also nicht. Klar, bei 37Signals funktioniert es, aber sie haben auch ganz andere Voraussetzungen. Wie sieht es mit euch aus? Vielleicht sollte man es auch einfach mal probieren?

11 Kommentare

  1. Manuel - Limearts Blog
    2. August 2010 um 00:37 Uhr

    Eine gute Frage die sich pauschal nicht beantworten lässt. Es gibt solche Fälle und wieder komplett andere. Ich hatte auch schon Projekte bei denen Photoshop eigentlich erst zum Einsatz kam, als es um Feinheiten ging. Das Logo, Illustrationen, also typische Grafiken die sich in der Seite wieder fanden, während das Layout mit wenigen Versatzstücken und ein zwei Platzhaltern direkt gecodet wurde.
    Das ging recht gut weil ich vorab schon ein Bild für das Endergebnis vor Augen hatte und somit sagen konnte in welchen Bereichen ich auf Grafik verzichten, bzw ausschließlich per CSS stylen kann.

    Allerdings sind das rückblickend auf all meine Arbeiten doch ziemliche Ausnahmefälle gewesen. Erst recht dann wenn die Produktion an einen Kunden ging, der natürlich vorab etwas sehen und beanstanden wollte.

    Dass man durchweg mit diesem Stil erfolgreich sein kann zeigt die Nische in die 37Signals gesprungen ist. Sobald Mehrere versuchen auf diesen Zug auf zu springen, kommen wir vermutlich wieder an den Punkt unter dem viele Free-Template-Seiten leiden. Es mag etliche Entwürfe geben, aber diese variieren auf den ersten Blick nicht sonderlich stark, weil die klaren Alleinstellungsmerkmale fehlen.

  2. Thomas
    2. August 2010 um 00:40 Uhr

    Hört sich toll an: “Photoshop überspringen”, ist im Grunde aber, wie von dir auch sehr gut erklärt, nichts was für einen Webdesigner wirklich Sinn ergibt. Im Grunde ist die Idee doch noch nicht einmal neu oder kreativ: Habe ich ein bestehendes Projekt in das ich neue Inhalte einbauen möchte, dann gehe ich auch nicht extra über Photoshop, denn da geht es meist doch eher um das Verschieben von Div-Boxen als um gestalterische Arbeit.

    Bei mir wird daher auch weiterhin Photoshop genutzt, schon allein, weil mir der Umgang damit Spass macht und weil es für mich kaum ein besseres Gefühl gibt als hier die Deckkraft um ein paar Prozent zu ändern und diesen oder jenen Filter auf einen Bereich anzuwenden und dann festzustellen: Sieht gut aus.

  3. Martin
    2. August 2010 um 01:59 Uhr

    Hatte die Diskussion gar nicht mitbekommen und dachte bis eben ich wär der Einzige der Photoshop weglässt. Der primäre Grund weshalb ich im Browser layoute ist, daß ich direkt sehe wie es live wirkt. Wie die Schriften aussehen. Wie das Layout bei verschiedenen Fensterbreiten verändert. Etc… Das geht mit Photoshop einfach nicht. Bei Kunden spart man sich so auch die ständig nötigen Erklärungsversuche was man sich dabei wie gedacht hat, weil sie es ja direkt live und unverfälscht testen können und sich später nicht wundern müssen, warum etwas in ihrem Browser anders aussieht. Aber Zeit ist natürlich ein großer Punkt. Mit Photoshop brauch ich bei allem deutlich länger. Eine kleine Zeile im Css kann Stunden in Photoshop bedeuten. Und ich bin in Photoshop nach 12 Jahren sicher nicht langsam. Aber das hängt natürlich davon ab wie gut man coden kann.

    Ob das für Webdesigner nun eine gute Technik will ich nicht direkt behaupten. Aber folgendes mit Sicherheit:

    Statt mit dem Layout zu beginnen, kümmert man sich erst um den Content und strukturiert ihn. Also mit semantisch korrekten Markup auszeichnen. Und erst dann styled man den Content per Css und nimmt wenn nötig Photoshop zur Hilfe.

    So entsteht kein Code, der sich nach dem Layout richtet. Zur Erinnerung: Der Abschied von Tabellen diente der Trennung von Layout und Code. Aber Hand aufs Herz, wer kann schon wirklich von sich behaupten, daß er beim Coden nicht aufs Layout schaut und bei einem Redesigns dann auch den Code ändern muss. Im Endeffekt benutzen wir doch nur keine Tabellen mehr, weil es uncool ist und verwenden statt dessen total idiotische tabellenähnliche Div-Strukturen. Da hätten wir genauso gut bei Tabellen bleiben können und würden häufig sogar noch Code sparen.

    Sowas würde nicht passieren, wenn man es in der richtigen Reihenfolge machen würde. So würde sich auch der Workflow in den Agenturen verändern. Erst müssen alle Inhalte her (statt wenn alles fertig ist noch Wochen lang zu warten bis der Kunde den Content liefert), dann macht sich der Coder an die Arbeit und beendet seinen Teil der Arbeit. Und erst ganz am Ende kommt der Designer ins Spiel und styled die Seite mit Css. Ob er dafür nun Photoshop brauch oder nicht ist nebensächlich.

    (Falls der Verzicht auf Photoshop zum großen Trend wird, werden sich die Photoshopper warm anziehen müssen, weil sich die Kunden dann sicher nicht mehr mit statischen Layouts zufrieden geben werden und Agenturen dann keine Zeit mehr für Photoshoplayouts verschwenden werden wollen)

  4. Coyanis
    2. August 2010 um 07:38 Uhr

    Ein interessanter Artikel, der den aktuellen Zeitgeist im Webdesign Segment darstellt. Ich beobachte zur Zeit immer häufiger, dass Layouts auf ein Minimum reduziert werden.

    Das sah anfangs gut – anders- aus, nimmt durch die eingeschränkten Gestaltungsmöglichkeiten den Designs die Individualität und die Note des Designers. Insofern stimme ich dir voll und ganz zu.

  5. Lars Ebert
    2. August 2010 um 10:39 Uhr

    Auch ich bin der Meinung, dass die Arbeit mit Photoshop fest in meinen Arbeitsablauf verankert ist. Photoshop werde ich jedenfalls nicht überspringen.

  6. Tyll
    2. August 2010 um 11:08 Uhr

    Ich fand den Artikel von Smashing Magazine sehr interessant, und er spiegelt auch sehr interessante Meinungen wieder, vorallem die HTML Ebenen für Photoshop wären denke ich durchaus ein positiver Eingriff in den Workflow, allerdings kann ich auf Photoshop nicht verzichten, es kann sein das ich es nicht anders gelernt habe, aber Photoshop stellt bei mir neben dem alten Stift & Papier-Stil auch einen wichtigen Teil des kreativen Prozeses dar.

    Insgesamt ein sehr interessanter Artikel, danke!

  7. nik
    9. August 2010 um 00:39 Uhr

    Ich kannte die Artikel bisher nicht, wohl aber den: http://24ways.org/2009/make-your-mockup-in-markup Und den fand ich sehr überzeugend.

    Mich persönliche nervt es, Photoshop-Layouts umsetzen zu müssen, erst recht, wenn großzügig verteilte Schatten und weich gerenderte Schriften nicht oder nur mit unnötigem Aufwand umgesetzt werden können. Ich finde, man sollte dem Konzept eine Chance geben. Zumindest für das wesentliche Layouts. Die kleinen i-Tüpfel kann man dann immer noch in stundenlanger Verliebtheit „shoppen“.

  8. Flo
    10. August 2010 um 10:25 Uhr

    Ich finde Photoshop für einen Workflow mit “echten” Kunden auch sehr wichtig, wobei wir oft Photoshop-Layouts als klickbare Dummies umsetzen um diverse Interaktionen dem Kunden zu erläutern. Das passiert aber nur sehr rudimentär, z. B. nur ein Drop-Down oder ein Bildwechsel via JS (oder sogar ganz in Flash).

    Photoshop wegzulassen ist in manchen Fällen vielleicht wirklich praktisch, aber nicht wenn man Kunden hat die nicht wissen was sie wollen oder nicht wissen was gut ist (beides kommt zuhauf vor).

    Generell sind die Themen der “Webdesign- & Webenticklungszene ” in großen (meist englischsprachigen und nerdigen?) Blogs zwar interessant und innovativ, oft habe ich aber das Gefühl “haben die andere Kunden als ich/wir?”. Ich finde die Themen einfach oft nicht praktikabel genug für den alltäglichen Umgang mit Kunden …

  9. Georg S. Kuklick
    12. August 2010 um 20:45 Uhr

    Ich halte es für ineffizient oder sogar falsch Layouts für eine Website, also ein interaktives System mit wiederkehrenden Elementen, in Adobe Photoshop zu gestalten. Ich glaube der immer noch häufige Einsatz von PS in dem Bereich ist in der mangelnden Bereitschaft einiger Designer ein passendes Werzeug zu erlernen begründet. PS ist geeigent für Composing und Bildbearbeitung aber nicht für das Layouts eines interaktiven Systems. Was fehlt PS dazu?

    – das Arbeiten mit Seiten
    – das arbeiten mit Symbolen (wie zb in Adobe Flash)
    – das Arbeiten mit Stilen
    – das Arbeiten mit interaktiven Elementen (mouse-over- etc.)
    – das Arbeiten mit Templates
    – ein HTML/CSS Export für MockUps und KlickDummies

    Adobe Fireworks kann das alles. Zusätzlich kann ich die gewohnten PS Filter verwenden. Wenn die Bordmittel von Adobe Fireworks nicht reichen handelt es sich meist um Kleinigketen die ich dann auch in PS erledigen kann um diese anschliessend in FW zu importieren. Zudem gibt es eine Menge Symbolsammlungen für Grids, Informationsarchitektur, MockUps etc.

    Adobe Photoshop ist einfach das falsche Werkzeug für den Entwurf interaktiver Systeme.

  10. Jürgen
    21. August 2010 um 11:21 Uhr

    Bei mir hängt das stark vom Projekt ab, manchmal ist es einfach nötig erst ein Design in Photoshop zu erstellen.

    In den meisten Fällen überspringe ich diesen Schritt allerdings und das schon immer.

    So hat jeder seine bevorzugte Methode, die klarerweise auch oft von den Kunden abhängt. Es wird hier kein allgemeines Richtig oder Falsch geben.

  11. shortee
    23. August 2010 um 20:35 Uhr

    schön zusammengefasst.

    bei eigenen projekten lass ich zb. auch gerne photoshop weg, ich hab ein layout im kopf oder als skizze und setze es um.
    für kunden muss man dann schonmal vorab was präsentieren, wobei ich eher zum prototyp und einem layout-screen tendiere.

    schlimm wird es, wenn sich jemand im photoshop austobt, der an der umsetzung dann nicht beteiligt ist bzw. keine ahnung hat.