Mit oder ohne Photoshop?
Die Jungs von 37signals (Wer bewundert sie nicht?) verwenden konsequent kein Photoshop (und auch kein anderes Pixelprogramm), wenn es um das Gestalten von Websites geht. Sie machen zunächst Papierskizzen und gehen dann direkt in HTML/CSS.
Ich mache das anders. Für mich ist der Photoshop-Mockup ein wichtiger Bestandteil des Entwicklungsprozesses:
- weil ich nur so die allgegenwärtige Schere im Kopf in den Griff kriege, die mir ständig sagt: »Diese Designidee ist aber nicht so leicht ohne Hacks umzusetzen. Da musst Du zuviel tricksen. Das kostet zuviel Ladezeit!« Die Schere beschränkt mich, und letztlich macht es doch auch bisweilen Spaß, auch herausfordernde und komplexere Screenideen möglichst elegant zu lösen.
- weil sich direktes HTML/CSS-Skripten nur für wirklich schlichte Seiten eignet. Sobald auch nur ein wenig Schmuck oder CD-Elemente im Spiel sind, muss man eh diverse Grafik-Elemente im Photoshop vorbereiten und als Hintergrundbild einsetzen. Und dann muss man vorab auch sehen, ob das alles harmoniert. Wer nur funktional und kastig daherkommt, hat es da natürlich leichter, aber das ist eben nicht immer möglich.
- weil viele Kunden einen rasch dahingeworfenen Klickdummy nicht richtig einordnen können: Ist das nun schon fertig? Aber warum stimmt es hier und da und dort noch nicht? Und da soll ich eine Freigabe erteilen, wenn die visuellen Elemente noch nicht ausdefiniert sind? Ein Photoshop-Screen hingegen ist in der Regel fertig ausgestaltet, aber eben noch nicht interaktiv. Das kann jeder Kunde gut beurteilen.
Wahrscheinlich liegt es einfach daran, dass 37signals Webapplikationen bauen, und ich größtenteils Websites. Und dass 37signals ihre Entwürfe nicht für einen speziellen Kunden machen, und somit auch nicht von dessen Urteil im Entstehungsprozess abhängig sind.
Eric Eggert am 3. Juni 2008 #
Mit Photoshop kann man die Deko besser früher/besser abschätzen, mit richtigem HTML und CSS direkt Interaktion. Es kommt darauf an, worauf man in welcher Phase wert legt.
Mich ärgert oft wie wenig durchdacht und teilweise „hingerotzt“ Photoshop-Vorlagen sein können, schlecht durchdachte Navigation, zu kleine Schrift, schlechte Kontraste und sich wiederholende Texte sowie einfach schlechte Abläufe, die dir beim HTML-Coden sofort auffallen.
(Ich hab ja aber eh keine Wahl, weil meine Photoshop-Künste sich auf einfarbige Flächen beschränken :))
Moritz am 3. Juni 2008 #
Ich bin auch eher jemand, der zuerst die grafische Umsetzung macht, und zwar die gesamte Website. Dadurch kann man, wie schon beschrieben, viel besser sehen, ob alles miteinander harmoniert. Außerdem stören mich da keine Browserbugs oder sonstwas. Ich kann die Elemente solange verschieben bis sie stimmig sind.
Marten am 3. Juni 2008 #
Hab mal über beide Standpunkte nach gedacht und kann dich gut verstehen. Der Kunde versteht kein simples HTML/CSS Gedöns, was nicht schick ist und nicht ansatzweise seinen Vorstellungen entspricht. »Warum ist denn da noch kein Schatten, ich dachte da sollte einer hin« »Ja das kommt später noch, jetzt gehts nur um die Funktion und den groben Aufbau« »Aha..«
So oder so ähnlich hab ich es schon öfter erlebt. Da ist ein recht fertiges Photoshop-Mockup natürlich viel besser – wobei ich ein Freund der Kombination beider Herangehensweisen bin.
Die ersten Entwürfe entstehen doch sowieso immer auf Papier und mit dem Kunden zusammen. Bei meinen Eigenen Seiten mach ich es aber andersrum. Erst die Funktion und dann die graphischen Spielerein.
Gregor am 3. Juni 2008 #
Ich habe auch gerade den Beitrag von den 37signals Jungs gelesen, hat mich nachdenklich gemacht. Ich finde beide Ansätze haben Ihren Anreiz, den optimalen Weg habe ich für mich noch nicht gefunden bzw. das Tool gibt es noch nicht.
Wir handhaben das für gewöhnlich so, dass von der Informations Architektur kommend erstmal Wireframes erstellen und die klickbar machen (sehr easy mit Fireworks), das wiederum als Vorlage nehmen fürs Design. Sieht dann so aus
* http://prototyp.einfachsmart.de/fischer-begeistert.de * http://prototyp.einfachsmart.de/fischer-begeistert.de_design
Ich habe schon vieles probiert und bin beim neuen Fireworks hängengeblieben. Wenn man die Screens klickbar macht, sind sie auch interaktiv, was 37signals bei statischen bildern vermissen
Harald am 3. Juni 2008 #
OK, wenn sie es meinen. Persönlich mache ich meine Vorentwürfe in Photoshop, und ich arbeite auch lieber mit Designern zusammen, die mir Bilder als Layout liefern – bis auf die mir bisher selten untergekommenen Designern, die modernes HTML abgeliefert haben.
Ich sehe aber auch die Bildentwürfe als Idee an, nicht als endgültige, pixelgenaue Vorlage – genauso wie eine Handskizze. Damit muss da auch nichts klickbar sein und soll es auch nicht.
Der Vorteil ist jedoch, dass ich die Gestaltungselemente ohne viel Aufwand für mein HTML exportieren kann, mit den richtigen Maße und passend zugeschnitten.
Max am 3. Juni 2008 #
Ich habe das Ziel mir beim designprozess keine Gedanken machen zu müssen, ob es letztlich machbar ist oder ob das blaue »e« mir alles kaputt macht. Von microsoft sollte die Kreativität nicht eingeschränkt werden.
Alle anderen probleme sind mit css machbar, irgend einen Weg gibt es immer und letztlich macht es doch auch bisweilen Spaß, auch herausfordernde und komplexere Screenideen möglichst elegant zu lösen.
Lothar am 3. Juni 2008 #
Dein letzter Satz sagt es eigentlich: Sie haben keinen konkreten Kunden, produzieren erst ein fertiges Produkt und vermarkten es dann. Wenn man so arbeitet, dann kann man sich die Methode aussuchen. Und da es eine Applikation ist, liegt der Schwerpunkt der Entwicklung natürlich auf der Funktion.
Meine Kunden sind oft aus der Prä-Internet-Generation. Die wollen nicht klicken, die verstehen die Funktion oft auch nicht. Die wollen ein schönes Bild sehen, Aaaaaaaaah sagen und überlassen mir dann den Rest. Und mir ist das auch lieber so. Ich kann mir eine Website erst vorstellen, wenn das Bild fertig ist. Ohne Bild einfach loscoden – das würde bei mir gar nicht gehen. Außer bei einem rein typographischen Ansatz vielleicht. Aber solche Aufträge sind bei mir selten.
tom am 4. Juni 2008 #
die jungs kennen fireworks offensichtlich nicht. es ist mir ohnehin seit jahren ein rätsel, warum man noch webseiten mit photoshop entwerfen sollte, wenn es viel bessere tools für diesen zweck gibt. photoshop ist eine bildbearbeitungssoftware. aktuellen ansprüchen, wie wireframing, ia, etc. genügt es einfach im workflow nicht. ganz anders fireworks, aber das nur am rande…
mal im ernst: wenn man für kunden arbeitet, geht’s ohne screens nicht.
Thomas am 4. Juni 2008 #
@ tom: Danke! Einfach nur Danke!
Nicolai Schwarz am 4. Juni 2008 #
tom hat vollkommen recht. Fireworks ist das ideale Tool, denn das kann eben beides: Pixel- und Vektorgrafik.
Stefan am 4. Juni 2008 #
Die beschreiben dort einen Wunschprozess … Ich kann froh sein, dass wir mittlerweile unsere Mockups nur noch sehr selten ausdrucken und zum Kunden schicken müssen. Leider muss ich jedes mal mit dem Kunden reden und erklären, dass er noch nicht an den Texten rumkorrigieren soll (oder das Lorem Ipsum kein Latein ist) und dass ich eigentlich nur wissen will, ob die Richtung der Gestaltung stimmt. Alle Typographie und Detailarbeit kommt bei mir erst in XHTML, dafür dauert es in Photoshop einfach zu lange. Aber wie schon gesagt wurde, müssen die meisten Kunden ein fertiges Produkt sehen, der Umsetzungsprozess ist ihnen dann meist egal.
Dominik am 4. Juni 2008 #
37s beschreiben ihren eigenen Prozess. Leider werden ihre Postings immer von vielen Leuten so aufgefasst, als wenn ihr Vorgehen auf alle Tätigkeiten in der »Internetbranche« 1:1 übersetzbar ist.
Das sind sie es nicht — 37s macht keine Internet-Seiten, sondern Internet-Anwendungen.
Dazu kommt, dass es meist (immer?) Eigenentwicklungen sind, bei denen sie die Entscheidungen treffen und nicht ein »irgendein« Kunde.
Genau aus diesem Punkt werden 37s‹ Vorgehensweisen für diejenigen unter uns, die ihr Geld mit Kundenaufträgen verdienen, wohl leider ein Wunschprozess bleiben.
Ole am 4. Juni 2008 #
»Ein Photoshop-Screen hingegen ist in der Regel fertig ausgestaltet, aber eben noch nicht interaktiv. Das kann jeder Kunde gut beurteilen.«
Das sehe ich etwas anders. Wir stellen immer wieder fest, daß ein Kunde enorme Schwierigkeiten damit hat, sich die interaktiven Elemente (z.B. Klappboxen, DropDowns, Linkzustände, etc.) vorzustellen, wenn er nur ein fertig ausgearbeitetes Layout bekommt. Es wird oft gewünscht, daß wir zusätzlich zu den Layouts noch Klickdummies anfertigen.
Des Weiteren ist es sehr wichtig, den Kunden darauf hinzuweisen, daß das Screen-Layout sich von der fertigen Website optisch unterscheiden kann (z.B. Formulare!!)…
Simon Wehr am 4. Juni 2008 #
When you’re just worried about how it’s going to look, you spend too much time on production value.
… und genau so sehen deren Websites auch aus. Als Designer muss ich sagen, dass ich da ganz froh um diese wasted time bin!
usp am 4. Juni 2008 #
@Simon:
Genau das habe ich mir auch gedacht! Die Applikationen sind ja wirklich nicht schlecht, aber vom Designer-Standpunkt aus gesehen einfach nur hässlich. Kleine Details und Eyecandy die eine Seite zu etwas besonderem machen, erzeugt man nun mal nicht mit CSS.
Bei eigenen Projekten benutze ich zwar auch weniger PS und gestalte auch nicht jedes Formular da ich es mir eben auch vorstellen kann, aber PS ist trotzdem immer mit dabei beim Gestalten.
Jan am 4. Juni 2008 #
Viele halten das für verrückt, aber ich halte InDesign annähernd für ein geeignetes Webdesign Programm. Zumindest für schnelle Entwürfe. Mit Musterseiten lässt sich der Hintergrund und ein Gestaltungsraster festlegen, danach kann man unzählige Seitenvariationen in einem Dokument entwerfen. Kopieren -> an Originalposition in neuer Seite einfügen -> weiter arbeiten. Dadurch bleibt ein Entwicklungsprozess erkennbar und man arbeitet an einer kleinen, überschaubaren Datei. Außerdem kann ich Stilvorlagen anlegen, und ähnlich wie bei der späteren CSS Headlines, Copy, Tabellenfarben etc im gesamten Dokument umswitchen.
Ganz klar, InDesign ist Vektorbasiert und man kann nicht, wie etwa in Illustrator in einen Pixelmodus wechseln.
Aber ich hoffe bei jeder neuen Version, dass endlich Pixel bei den Maßeinheiten zu finden sind, und ein Ansicht-Pixelmodus. (und das HSB Farbmodell !!!) Darum nutze ich doch meistens Illustrator. Photoshop eigentlich garnicht mehr.
Rocco am 4. Juni 2008 #
Die 37 Signals-Seiten (Basecamp, Campfire etcpp) sehen ja auch gleich bescheiden aus. :-) Das man dafür kein Photoshop benötigt ist klar.
Rocco
tom am 4. Juni 2008 #
;) ich wollt’s oben nicht sagen …
Peter am 4. Juni 2008 #
@Jan:
ich muss dir zustimmen – und gehe sogar noch drüber hinaus.
Ich musste feststellen, dass es in den Werbeagenturen, mit denen ich zusammen arbeite, einfach zu wenig Leute gibt, die Photoshop wirklich beherrschen (zumindest über die Bildbearbeitung hinaus). Manche schaffen nicht mal einen einfachen Kasten mit runden Ecken, obwohl diese Funktion als fertiges Werkzeug vorliegt. Das liegt nicht daran, dass die blöd sind, sondern dass sie normalerweise in Indesign arbeiten und andere Programme deshalb nicht ausreichend üben. Darüber kann ich mich entweder nutzlos aufregen oder ich suche eine Lösung: Also warum nicht Indesign einfach so umstricken, dass man damit Web-Entwürfe machen kann? Ich stelle »meinen« Designern ein Indesign-File zur Verfügung mit einer Anleitung. Darin sind Web-Browser-Vorlagen, Schriftgrößen und Ebenen, wie man das aus den bekannten Photoshop-Vorlagen kennt. In der Anleitung steht, wie damit umgegangen werden muss.
Arbeit natürlich generell in sRGB; in Indesign fällt den Leuten das auch nicht schwerer als in Photoshop. Die fehlenden Pixel in der Maßpalette sind auch kein Problem: einfach in Punkt denken: 1 Punkt = 1 Pixel und schon stimmen alle Maße. Schriftart und Größe für den Fließtext werden vorgegeben etc.
Über die Musterseiten ist ein pixelgenaues (genauer: punktgenaues) Positionieren der wiederkehrenden Elemente möglich. Über die Formate eine einheitliche Formatierung der Texte. Alle Gestaltungselemente sind in einer Datei und fliegen nicht in der Gegend rum …
So können die Designer wie gewohnt arbeiten, sind flott und nicht dauerhaft frustriert :-) Bevor der Entwurf zum Kunden geht, muss ein PDF bei mir abgegeben werden für eine Klärung der technischen Details: dann wird ausdiskutiert, ob die tolle Idee mit transparenten Buttons und Schatten auf runden Ecken auch mit vertretbarem Aufwand umgesetzt werden kann.
Nach der Freigabe erfolgt ein Export in ein PDF 1.7 mit allen Ebenen und ohne Downsampling der Bilder. Das PDF enthält die Ebenen, die ich nach Bedarf an- und abschalten kann. Die Ebenen passend in ein Photoshop-Dokument gerendert, dann habe ich praktisch die gleiche Funktionalität wie bei einem Entwurf direkt in Photoshop (nun ja, wenn der Designer bei der Aufteilung auf die Ebenen mitdenkt. Aber das lernen sie schon :-).
Nicht alles klappt so; Hintergründe für Sliding-Doors etc. müssen extra in Photoshop erstellt werden, die hochwertigen Bilder werden eh meist später nachgeliefert usw., aber das wäre bei einem Entwurf in Photoshop letztlich genauso.
Gruß
Peter
tom am 4. Juni 2008 #
da müsste ich natürlich mal ganz ketzerisch fragen, ob besagte designer dann normalerweise für print layouten…
jedem, der ernst- und dauerhaft für’s web gestaltet empfehle ich einen verlängerten testlauf mit fireworks. der workflow und die tools (u.a. die von flash bekannte bibliothek und instanzierbarkeit von symbolen – ein traum) überzeugt i.d.r. sehr schnell.
ist halt nicht so hipp wie photoshop, dafür aber viel günstiger ;)
fwolf am 5. Juni 2008 #
Ehrlich gesagt benutze ich inzwischen fast nur noch Kommandozeilen-Tools a la ImageMagick in Kombination mit Inkscape. Für den Anfang reicht das prima aus, danach kommen noch die vielfach beschriebenen »Klickdummies« dazu, die dank Inkscapes Exportfunktion auch keine großen Fragen aufwerfen.
cu, w0lf.
tom am 5. Juni 2008 #
du gestaltest auf der kommandozeile?!? wie geht das denn?
das dürfen unsere entwicklern nicht erfahren… ;)
inkscape habe ich mir die tage auch mal heruntergeladen. muss das demnächst mal ausführlicher testen, machte aber auf den ersten blick einen sehr guten eindruck. allerdings eher als freehand oder illustrator ersatz.
Christoph am 5. Juni 2008 #
für Skizzen nehme ich den Bleistift, fürs Rapid prototyping Pages oder Powerpoint, für die Umsetzung Coda (HTML/CSS) und eine Bildbearbeitung nur für Eye candy ganz zum Schluß. Beispiel: www.ferienhaus.drfreitag.net.
Zoe am 5. Juni 2008 #
Klar kann die besagte Schere im Kopf einschränken. Aber manchmal wünsche ich sie den Designern echt, deren PS-Entwürfe ich in HTML/CSS umbauen darf, weil die sich oft keinerlei Gedanken machen, ob ihre schicken Details mit vertretbarem Aufwand umsetzbar sind. Wenn nicht, kommen wieder die Auftraggeber und wollen doch bitte diesen einen Strich auch auf der Webseite haben, der im PS-Entwurf zu sehen war. Der Arbeitsablauf wäre sehr viel einfacher, wenn schon der Designer mal seine (meinetwegen in PS gemachten) Entwürfe kurz in HTML/CSS antesten würde und dann ggf. noch etwas ändert.
Thomas am 5. Juni 2008 #
Der ideale Ansatz hängt wohl vom Kunden und dem gegenseitigen Goodwill ab. Es gibt fakten- und leistungsorientierte Kunden, die genau das zu einem Zeitpunkt geliefert bekommen möchten, wie sie es bestellt haben. Im Angebot stand Screendesign, dann bitte: Screendesign liefern. Als Ausdruck, als klickbarer Dummy. Dann als nächstes die fertige Website, auf der Basis des Screendesigns. Oh, Ah, dass müssen Sie aber da und da noch korrigieren. Ein klickbarer Dummy ist eben keine verlinkte Websitestruktur.
Gerade bei größeren Projekten mit WCMS spielen so viele Faktoren ineinander (Machbarkeit innerhalb von XHTML, CSS und die technischen Möglichkeiten des CMS), dass man eigentlich zu einer flexiblen Entwicklung gezwungen ist. Für mich heißt dies: Screendesign entwickeln, parallel CMS implementieren, Kunden in CMS schulen, Screendesign nach und nach integrieren, Seite parallel dazu aufbauen, immer wieder mit dem Kunden durchklicken, korrigieren, … etc. Dazu mit Bildbearbeitungssoftware die Screens erstellen, gleichzeitig CSS Machbarkeit und die Software im Auge behalten.
Der Erfolg bei entsprechender Flexibilität des Kunden: Er kennt seine Seite aus dem ff, er versteht die Gründe für bestimmte strukturelle und gestalterische Zwänge.
Beim falschen Kunden fährt man vor die Wand, weil er ganz genaue Vorstellungen hat – die man dann rund um die Ecke biegen muß.
Fazit: It depends!
Peter H. am 6. Juni 2008 #
Auch wenn ich (noch) kein professioneller Webdesigner bin, halte ich von Photoshop-Enwürfen mitlerweile eher wenig. Mir ist dieses Pixelgeschiebe einfach zu unsauber, unelegant und erinnert mich immer ein wenig an die Bastelei im Fotosatz.
Daher arbeite ich momentan lieber mit Illustrator oder InDesign. Das heisst, ich mache zuvor einen Rohentwurf und erstelle dann sozusagen in besagten Programmen eine »Reinzeichnung«, der dann in html und css umgesetzt wird. So habe ich ein sauberes Layout was sich beliebig modifizieren lässt ohne tausend Filter oder cut&paste Kommandos. In Illustrator gibt es ja auch diese netten Slices und bei eingeschalteter Pixel-Ansicht kann man mit dem Programm sehr exakt arbeiten und hat noch ein paar nette Vektorasse zustätzlich im Ärmel. :-)
Was für die Farbgebung anbelangt hat es ausserdem den Vorteil, dass sich die Swatches nachträglich umfärben lassen und sich diese Änderung dann auf alle Elemente mit dieser speziellen Farbe anwenden lassen. Da ich viel Wert auf Farben im Webdesign lege, kommt mir diese Funktion äusserst gelegen.
Harald am 7. Juni 2008 #
Hmm, Indesign … geht auch. Aber kann ich da auch die Seiten mit Ebenen als Pixeldatei exportieren, um noch ein paar Details einzubauen? Für Leute, die aus dem Printdesign kommen ist das aber sicher eine durchaus praktische Lösung.
Ich mach nun ja auch nicht jeden Tag ein Screendesign, doch wenn ich es öfters machen müsste würde ich wohl auch erstmal mit nem Quelltext anfangen. Also erstmal SVG coden, um die grobe Aufteilung festzulegen und dann weiter in Illustrator oder PS. Die Festlegung der Größen wäre mir in grafischen Programmen auf die Dauer zu fummelig. Alles mit der Kommandozeile zu machen ist aber dann auch nicht mein Ding.
Fireworks habe ich nicht – vor Jahren hab ich es mal getestet …
Wenn es um ein schnelles schlichtes Design geht reicht mir immer noch HTML und CSS im Quelltext.
Simone am 10. Juni 2008 #
Ich halte es auch so wie 37signals, wobei wie Du schon bemerkt hast es sich auch nur um »schlichtere« Webseiten handelt die ich für mich erstelle. Bei Kunden mache im Vorwege auch einen grafischen Entwurf – sonst können sich die meisten nichts darunter vorstellen. Dient auch zu meiner Absicherung.
songtext am 18. Juni 2008 #
Ist es wichtiger, den rohen Entwurf schnell zur Hand zu haben, tuts eine Papierskizze. Will man schon ein fertiges Design dem Kunden präsentieren, wird sich der Kunde mit einer Skizze natürlich schon sehr stark wundern. Ich denk, mit dem richtigen Mittelmass kann man beide Wege gut nutzen. Ich selbst bin derzeit noch im Papiermodus, Photoshopdesigns sind noch nicht so mein Fall. Liegt aber eher daran, dass ich das einfach noch nicht kann. Bin noch recht neu in dem Business ;)