pixelgraphix

Da stimme ich dir zu Manuela. Vor allem Kunden wollen nicht die Katze im Sack kaufen. Der Aufwand sollte sich aber in Grenzen halten. In den meisten Fällen reicht es, die Startseite und eine Detailseite auszuarbeiten.
Leider werden für Design und Umsetzung häufig zwei verschiedene Agenturen ausgesucht. Genau dabei wird leider meist viel Geld unnötig verschwendet, da die Designagentur meist Vorlagen für jede Seite bis ins Detail ausarbeiten (und meist keine Rücksicht auf die Umsetzbarkeit machen).

Yepp, sehr schön :)
ab in die mento bookmarks damit.

Sehe ich auch so, wenn ich mal einen Entwurf mit Grafiktools gemacht habe, dann bin ich mich in Spielereien und Details hängen geblieben. Liegt aber auch daran, dass ich PS und co. weniger unterwegs bin und das Handwerk nicht beherrsche.
Daher gehe ich immer direkt vom Papier in den Editor. Mir liegen Typolayouts und somit ist das auch recht gut machbar.

• Off-Topic: da ich weis, dass du Plugin Text Control einsetzt: neue Version, funktioniert in WP 2.5 und 2.6 sauber, DL ist leider nicht via SVN auf wp.org erreichbar, weil der Autor keine Rückmeldung gibt. Deshalb bei mir abgelegt (zip).

Für Kunden ist es unerlässlich ein Screendesign stark auszuarbeiten. Wie sollen Kunden sich das sonst vorstellen können. Es gibt außerdem schon einige Tricks in Photoshop Texte etc. so aussehen zu lassen wie es dann später mit HTML / CSS wirken wird.
Ich verstehe nur nicht wie ein Designer sagen kann dass es im HTML und vor allem in verschiedenen Browsern unterschiedlich aussehen wird. Dann hat der Designer (oder wer auch immer das Screendesign zum HTML bringt) seine Arbeit nicht richtig gemacht. Mal abgesehen von der Schriftglättung in div. Browser sollte (und das ist wirklich kein Problem) die Seite in allen Browsern kompatibel sein und gleich aussehen. Ich greife allerdings auch auf eine über 10 Jährige Erfahrung im HTML Bereich zurück und verwende keine WYSIWYG Editoren. Die machen eh nur Müll.

Übrigens ist die Seite von 37signals tatsächlich nicht besonderes. Keine Emotionen, sehr unübersichtlich. Vielleicht sollten die mal wieder Photoshop zur Hand nehmen und ihr Design vorher “durchspielen” ;)

@Manuela: Gern !

Das hat auch viel mit der Herangehensweise zu tun. Wenn man den Kunden durch Wireframes und Gedankengänge mitnehmen kann und eng mit ihm zusammenarbeitet (was leider sehr selten der Fall ist), dann ist es auch kein Problem das Layout direkt in HTML zusammen zu stöpseln.

Auch haben 37signals natürlich eine andere Herangehensweise an ihre eigenen Webapplikationen als andere Webdesigner an Webseiten. Dort steht die Usability im Vordergrund und das spiegelt sich fast notwendiger weise in den einfachen Layouts wieder.

Schöne Screendesigns sind sicherlich nur in Zusammenarbeit mit einem guten Grafikprogramm möglich (und da ist es egal wie es heißt). Ich bewundere Webdesigner, die ganze Webseiten in Photoshop layouten – Bei mir reicht’s nichtmal für einfarbige Flächen. Außerdem finde ich gerade Content in Photoshop einzufügen eine Qual.

@Sacha: Natürlich ist es ein gewisser Aufwand, Websites cross-browserfähig zu machen bzw. die Layouts einigermaßen anzunähern. Geht das nicht,. layoute ich einfach die betreffende Sektion im “störenden” Browser ein wenig anders, so daß es gut aussieht. Generell arbeite ich immer von standard-konformen Clients hin zu den proprietären…

Ein Vorteil von Papier, der rein physio-/psychologisch erwiesen ist, ist die Tatsache, daß ein Wechsel des Mediums (eben weg vom PC hin zum Papier) das Gehirn neu stimuliert. Ein weiteres einfaches Bsp dazu: Ich habe eine zeitlang mit elektronischen Stickies auf dem Schirm gearbeitet, bin dann aber wieder zu den alten Papierzetteln bzw. der Papier-To-Do-List aus obigem Grunde zurückgekehrt.

Generell also der Appell : In der “Rohschnitt”-Phase ruhig weg vom Screen und z.b. auch mal ein 3D-Objekt aus Papier basteln, sich in der Natur oder in der Architektur mit neuen Texturen und Formen “versorgen” (und bitte nicht nur über Flickr angucken ;)) – diese halt abstrahieren und versuchen, die Essenz davon in sein Design einfliessen zu lassen.
Ich musiziere nebenbei und höre auhc ganz gern in der Entwurfsphase je nach Projekt mal Klassik, Rock, Blues, Jazz…

Da muss ich doch auch glatt mal was dazu schreiben: Natürlich ist es gut, sich seine Gedanken zu machen und die ruhig auch auf Papier niederzuscribblen. Allerdings ist es meiner Meinung nach unerlässlich, Screendesigns auch in Photoshop oder ähnlichem umzusetzen. Einerseits, um dem Kunden ganz klar zu zeigen, wie sein Autritt später einmal aussieht, andererseits um selbst auch flexibler, auszutesten, was gut aussieht und was nicht…Muss also SaschaK rechtgeben, dass man als Grafiker auf ein “Grafikprogramm” wohl kaum verzichten darf und kann… (Ich hoffe ihr merkt was!)

Natürlich bleibt es jedem selbst überlassen, wie er an ein Projekt herangeht und wie er es dem Kunden präsentieren möchte. Allerdings ist es so wie in jedem Beruf: Es gibt Minimalisten und Amateure und eben Leute die sich noch dahinter klemmen und sich Zeit lassen etwas kreatives zu entwickeln. Jeder eben so wie er denkt und Zeit hat :)

Zu 37signals sage ich an dieser stelle nicht mehr als: Mies!

Abschließend noch ein Wort zu den Herrschaften die grundsätzlich glauben, dass ihr Weg der einzig Wahre sei und die die Weisheit mit Löffeln gefressen haben: Ohne Fleiss kein Preis :)

Super FrankG dann sind wir auf einer Wellenlänge :)

Ich kann mir ehrlich gesagt nur schwer vorstellen wie man in der Webentwicklung für einen Kunden ohne Fireworks o.ä. auskommen kann. Ok, Scribbles auf Papier sind eine schöne Sache und wahrscheinlich auch schnell umsetzbar, aber mehr als eine erste grobe Skizze kann das meiner Meinung nach nicht sein.

Wenn 37signals dies als Grundlage für eigene Projekte nimmt, mag das noch funktionieren. Für externe Kunden halte ich dies aber für nicht ausreichend, weil zu unflexibel und zu wenig aussagekräftig.

Ich bin auch der Meinung, dass Fireworks eindeutig das bessere Produkt für Wireframes und Layouts ist. Photoshop ist hier in der Tat zu starr und unflexibel – zumindest war das bisher die Erfahrung. Fireworks ist wirklich ein klasse Tool, mit dem sich gut und schnell arbeiten lässt. Außerdem lassen sich hier schnell und ohne größeren (weiteren) Aufwand Klickdummys und die Grundlage für die spätere Umsetzung erstellen.

Natürlich muss man nicht die komplette Website im Vorfeld durchlayouten. Die Erfahrung hat aber zumindest bei uns gezeigt, dass es sehr zu empfehlen ist die Homepage und 2-3 Unterseiten zu gestalten. Und diese auch im Detail auszuarbeiten. Zum einen bekommt der Kunde (wie schon weiter oben gesagt) so einen aussagekräftigen Eindruck von dem zu erwartenden Produkt, zum anderen ist das eine nicht unerhebliche Vorarbeit für die spätere Umsetzung. Gerade wenn Layout und Prototypen-Erstellung vielleicht von unterschiedlichen Personen ausgeführt werden.

Wenn ich z.B. XHTML/CSS erstelle, will ich vorher wissen welche Elemente ich benötige, wie ein Submit-Button auszusehen hat, wie sich Headlines auf Unterseiten verhalten, etc. Natürlich kann mann hier nich 100% alle Fälle abdecken, aber es ist möglich Templates zu erstellen ohne alle 5 Minuten nachfragen zu müssen und fehlende Elemente “nachzudesignen”…

Mag sein, dass andere ohne Wireframes und komplexe Layouts auskommen. Bei uns stellen diese aber eine wichtige Grundlage für die Umsetzung dar, auf die ich nicht verzichten kann und will.

Ich denke, dass sich die detailierten Feinheiten erst mit dem Kunden ergeben, daher gibts bei mir nach ner Screendesign-Phase, so 2-3 Seitenlayouts, wo ich neben den Grundgedanken auch versciedene Varianten teste, nen XHTML-Dummy, der dann als Zwischenergebnis dient.
Ohne PS und Co könnte man nicht so gut die Varianten testen und dem entsprechend sieht die Seite dann auch aus…
Meist benutze ich auch einen Screen, auf dem ich verschiedene kleine Elemente teste, bevor ich sie dann umsetze.

Ich muss mal eine Lanze für 37signals brechen. Natürlich gibt es wunderhübsche Designs mit vielen Schatteneffekten, Verläufen und allerlei Photoshopfiltergeschwurbel. Das kann ja auch oft sehr schön aussehen und hat seine Berechtigung. Aber dem was 37signals machen, liegt eine ganz andere Herangehensweise zugrunde und ich finde es hat (auch grafisch) einen eigenen Charme, der durchaus über die reine Funktionalität hinausgeht.

Früher waren Layouts mit 8-Punkt Pixelschriften schick, dann gab es viel Flashseiten und heute kann man in den CSS-Galerien bewundern, was Leute alles so aus Photoshop und Wordpress herauskitzeln – aber das alles hat meiner Meinung nach gar nicht mal so viel mit “Design” zu tun, sondern betrifft nur einen Teilaspekt.

Design sollte für mein Empfinden eher als Gesamtheit verstanden werden. Dazu gehören Konzept, Arrangement und Layout, in denen Usability genauso wie grafische Stringenz und evtl. nötiger Eyecandy ihren Platz haben können – und so betrachtet stehen die 37signals Leute wieder gar nicht mal so schlecht da. Denn sie haben es zumindest geschafft einen eigenen Stil zu etablieren, der mit einfachen Mitteln über eine bestimmte Farbwelt, ausgewogener Typographie (nicht kunstvoll, aber ausgewogen), minimaler grafischer Akzente und moderne Technologien (Ajax etc.), einer gewissen Veränderung des Webs hin zu mehr Funktionalität und Alltagstauglichkeit Tribut zollt. Und meiner Meinung nach auch wiedererkennbar ist.

Klar sehen deren Webseiten für manchen auf den ersten Blick vielleicht etwas plakativ und auch auf eine Art amerikanisch aus, aber trotzdem ist es eine für mich klare Bildsprache, die mir manchmal einfach lieber ist, als ein total verspieltes Photoshoplayout, das irgendwie auf den Screen gezwungen wurde und nur aufgemotzte Fassade für mittelmäßigen Gebrauchs- bzw. Unterhaltungswert ist.

Ach was wäre das schön, wenn das endlich bei all den Grafikdesignern ankommen würde, die mal eben schnell ein Layout zusammenklicken und sich keine Gedanken darüber machen wie die Seite in einem Browser aussehen wird – ganz zu schweigen von Browserkompatibilität.

Leider erlebe ich immer wieder, dass gerade wenn man für andere Agenturen tätig ist, selten jemand darauf achtet, ob es technisch umsetzbar ist. Hauptsache der Kunde unterschreibt den Vertrag. Und derjenige, der für die technische Realisierung zuständig ist, muss sehen wie er das hinbekommt. Aus Kostengründen entstehen dann häufig qick and dirty Lösungen, die nicht nötig wären, wenn von vornerein etwas besser kalkuliert würde und der Techniker schon früher in die Planung einbezogen würde.

Glücklicherweise haben dies die Agenturen mit denen ich zusammenarbeite erkannt, sodass die Arbeit – als technisch und benutzerfreundlich orientierter Webdesigner – richtig Spaß macht. Schwierig wird es immer dann, wenn dritte (grafikorientierte) Agenturen mit ins Spiel kommen.

Gruß,
robles

Ich bin der Meinung und das mache ich soweit auch, man muss es eben seinem Kunden auch entsprechend kommunzieren, dass a.) Mockup vs. Final immer einen Tick anders aussehen wird b.) Browser nie ein 100% identisches Bild liefern können (eher wollen).

Auf der anderen Seite finde ich, dass man nicht immer alles auf Papier scribblen kann, widerum anderes lässt sich in PS oder jedem anderen Grafikprogramm nicht schnell und einfach erfassen. Spiegelungen, Schattenwürfe oder mal schnell eine Farbe angepasst, versuch das mal auf Papier. Da hat man dann 3 – 10 Scribbles und es sieht immer noch nicht entsprechend aus.

Der Weg von Scribble direkt zum ersten HTML-Prototypen finde ich für meine Arbeit nicht realisierbar, da ich sehr viele Ideen erst im Gestaltungsprozess mit Photoshop realisieren kann.

Grobkonzept mit Scribbles, ja. Keine Mockups in Photoshop… für mich nicht möglich.

Es geht hier um das Werkzeug und nicht um die Uniform oder das Design an sich. Das steht hier gar nicht zur Diskussion!

Ähem, da sind hier wohl viele dabei und die Diskussion im Original hast Du auch verfolgt?

Ich behaupte nicht, dass keine Profis hier anwesend sind. Doch Aussagen wie “es ist nur eine meinung, und wer ohne photoshop gut klarkommt, der kommt eben mit weniger werkzeug aus” oder “Ach was wäre das schön, wenn das endlich bei all den Grafikdesignern ankommen würde, die mal eben schnell ein Layout zusammenklicken und sich keine Gedanken darüber machen wie die Seite in einem Browser aussehen wird – ganz zu schweigen von Browserkompatibilität” sprechen nicht unbedingt für ein Profi, der Gestaltung von Websites im Griff hat und auch technisch nicht auf die Nase gefallen ist (sondern eher für Kiddies und Programmierer). Ich bin Grafiker und ein wenig Programmierer, grössere technische Sachen lassen wir von Partnern umsetzten. Ich bin kein Linuk-Freak der findet, ja “auch im GIMP kann man schöne Designs machen..”. Doch wie oben geschrieben: Photoshop ist suboptimal, doch es gibt z.Z. kein besseres Programm, das auch kompatibel ist. So geht das. Vielleicht war das oben ein wenig “arrogant” formuliert… ;-)

@David: Was stört dich an der Werkzeug-Metapher? Ich dachte mit dem Musiker-Vergleich wird es etwas klarer.

Worauf ich hinauswollte war lediglich, dass die Anforderungen sehr unterschiedlich sein können und manche Seite nur mit Typographie und wenigen Bildern auskommt (lässt sich prima in HTML/CSS entwerfen), während andere Seiten eben von aufwendigen grafischen Elemente profitieren (da braucht man dann PS bzw. FW) – das ist deshalb trotzdem nicht zwangsläufig wertiger oder professioneller.

Um nochmal kurz den Originaltext zu zitieren: “Inwieweit man so einen Entwurf gestalten »muss« hängt vom jeweiligen Projekt ab.”

So ist das – und da muss man ja nicht gleich von “Kiddies” und “Programmierern” schimpfen ;)

Dann mal frohes Schaffen!

Also jetzt wird es piefig. Woher kommen nur diese ganzen Weisheiten? Vielleicht sollten wir alle eine handvoll Referenzen nehmen und diese uns gegenseitig um die Ohren hauen bis alle nur noch mit Gimp arbeiten.

@David: Hast Du den Kommentar von Thomas wirklich gelesen (Usability, …)?
Und wieder eine Frage: Was ist ein konservativer Grafiker? – Hier wird doch der Hund in der Pfanne verrückt.

Wenn Seiten mit viel Text nicht für das Internet ausgelegt wären, würde das Internet nicht funktionieren. Schliesslich heisst ein Teil dieses “System” Hypertext und war vorangig für denn wissenschaftlichen Bereich der Bevölkerung angedacht. Das dort nur kleine Datenmengen verarbeitet werden, wäre mir neu.

Zuallererst zu mir: Ich sehe mich weder als guten Designer noch Programmierer sondern als Frauen- ääääh Kundenversteher :-) Ich habe früher meine Designs immer selbst erstellt, mittlerweile habe ich eine Mitarbeiterin die Designs im Photoshop erstellt. Pro Kunde erstellen wir 1, 2 oder 3 Designvorschläge (je nachdem, ob es schon ein CI/CD gibt und wieweit der Kunde schon Vorstellungen / Ideen hat). Ich fahre dann zum Kunden, präsentiere diese und hole Feedback. Meistens machen wir dann nach den ersten Vorschlägen einen finalen der bis jetzt immer gut angemommen wurde. DIe Umsetzung von Photoshop auf HTML/CSS mache ich zur Zeit selbst, möcht aber in Zukunft auch hier einen aufbauen…

Für mich ist die Fragestellung welche “Methode” (Photoshop, nur Hand-Skizzen oder schon HTML-Klckdummy) ich bei Kunden verwende, um Designs zu präsentieren in den meisten Fällen eine Frage des jeweiligen Kunden. Ich habe Kunden die schon seit 5-6 Jahren Leistungen von mir beziehen und ich sozusagen das 2. oder 3. neue Design erstelle (alle 2 Jahre neues Design)… Da haben die Kunden sozuagen schon ein gutes Gefühl und ich komme mit einem Photoshop-Entwurf aus, der dann in den meisten Fällen nicht detailgetreu oder 1:1 so umgesetzt wird. Hier sind die Inhalte dahinter auch sehr oft schon vorhanden und ich tausche dann nur das Gewand der Pages aus, was mit einer guten Abkapselung bzw. Trennung zwischen HTML/CSS und Content Management System ganz gut funktioniert. Ich verwende hier übrigens Typo3…

Bei einem neuen Kunden der eventuell noch keine Internet-Präsentation besitzt und wenig Web-Erfahrung hat baue ich auch kleine Klick-Dummys damit sich der Kunde vorstellen kann, wie die Navigation funktioniert und sich die einzelnen Unterseiten aufbauen.

Ich muss aber auch sagen, dass meine Web-Projekte eher klein sind (1-2 Navigations-Ebenen). Meiner Erfahrung nach ist eine detailiertere Planung gerade bei größeren Projekten mit mehreren Naviationsebenen und Unterseiten notwendig….

Ich bin der Meinung das Fireworks die absolut beste Lösung für Screendeigns ist.
Es ist mit den Funktionen einfach perfekt auf das Web zugeschnitten.

Fireworks rules.

super artikel und auch großartige kommentare vielen dank

Nachtrag (sorry Manuela):
Jeff Croft spricht mir aus der Seele.

Ultimately, I found that for me, the best workflow was to go through the Photoshop step, but to jump out of it and into HTML /CSS as soon as possible. Once I have the basic look and feel accomplished, I start working with HTML and CSS .

Und natürlich beeinflusst das ausschließliche Designen mit den vergleichsweise minimalistischen Mitteln von CSS den eigenen Stil respektive die eigene Arbeit.

Ich bin der gleichen Meinung wie Jonas.
Ich brauche Photoshop schon um ein bisschen herumzuprobieren und so zu meinen Ideen zu kommen…

Wenn man die Schriften in Photoshop richtig einstellt, sehe sie dann auch so aus wie auf dem Papier, und auch so, kann man den Entwurf am Ende auch genauso umsetzen wie er in Photoshop aussieht…

also ich komme ohne einen ps-mockup nicht aus. muss ich zugeben. aber ich muss diesen dann nicht bis zu 100% durchstylen, das mache ich dann mit CSS ;)
Sehr guter Artikel! Muss gleich mal Feeds abbonieren!

ich gehöre zu den usern, die schnell ladezeiten und somit weniger grafiklastige webseiten bevorzugen. oft ist mir aber auch schon aufgefallen, was man im photoshop definitiv nicht beachten kann, dass die skyscraper und sonstigen banner das layout manchmal echt zerstören.

Wir lassen Photoshop auch mehr und mehr ausser acht und gehen vom Papier gleich in die Programmierung. Papier ist meist viel aussagekäftiger, außerdem kann man lokal besser ausprobieren, als in Photoshop.

finde das richtige ist ein gesunder mittelweg. wie schon bereits beschrieben finde ich es auch nicht gut, details zu sehr und immer mehr auszubauen, jedoch lässt sich in der heutigen zeit doch schon kaum mehr auf die grafik-helferchen verzichten.

Ich bin auch dazu über gegangen, mir lediglich mit Bleistift und Papier ein paar Skizzen zu erstellen. Bei einigen Seiten mit sehr viel Grafik kann es jedoch auch so sein, dass man manchmal kaum Zeit verliert, wenn man den Skizzen-Schritt direkt überspringt und lediglich die Ebenen der einzelnen Bilder so verteilt, wie sie grob später aussehen sollen.

Ganz ohne Photoshop geht trotzdem nichts.

Vielen Dank für diesen interessanten Artikel! In der Tat verführen Photoshop-Screendesigns den Kunden dazu, nach pixelgenauen Umsetzungen zu verlangen – ein Punkt, der zu erklären sich als schwierig gestaltet. Nichtsdestotrotz erachte ich ein fertiges Screendesign als unverzichtbare Hilfe für die Visualisierung und Kundenkommunikation.