So hat Webdesign bis jetzt funktioniert: Ein Designer entwirft ein pixelgenaues Bild der Webseite in Photoshop oder Illustrator, schickt dieses Bild an den Programmierer, dieser zerschneidet es in kleine Stücke und entwickelt daraus eine fertige Webseite in HTML und CSS. Diese Arbeitsweise ist veraltet und bringt viele Nachteile mit sich.
Einer der größten Nachteile ist, dass Designer und Programmierer an zwei unterschiedlichen Versionen einer Webseite arbeiten. Deshalb ist es umständlich und langwierig, Änderungen vorzunehmen. Die Designer müssen immer erst ein neues Bild der Webseite malen, bevor die Programmierer die Änderungen an der wirklichen Seite vornehmen können.
Ein weiterer Nachteil vom Arbeiten in Photoshop & Co. ist, dass man sich viel zu oft in Details verliert. Man tüftelt stundenlang an Verläufen und Texturen herum, bevor man überhaupt weiß, welche Inhalte auf der fertigen Webseite angezeigt werden. Umso schlimmer, dass gerade diese Details stark von den unterschiedlichen Geschmäckern abhängen, und es dazu kommt, dass sich Projekte verschieben, weil dem Auftraggeber das Grün nicht warm genug ist.
Unser neues Buch: Wir erklären dir in klarer und verständlicher Weise, wie User Testing in der Praxis wirklich funktioniert » Zum Buch
Diese beiden Nachteile sind nichts Neues. Neu hingegen ist die Tatsache, dass es nicht mehr genügt, wenn eine Webseite bei 1024 Pixel Bildschirmbreite gut aussieht. Die Frage lautet, wie sieht die Seite auf einem iPhone aus? Wie steht es mit anderen Smartphones oder Tablets? Für jedes denkbare Gerät einen Photoshop-Entwurf zu machen, der später in HTML und CSS umgesetzt wird, würde wohl die meisten Projekt-Budgets sprengen.
Einfacher ist es hingegen, eine minimale Variante der Website in HTML und CSS umzusetzen und in den verschiedenen Browsern zu testen. Die Idee lautet, nicht in Photoshop zu beginnen, sondern erst am Ende die letzten Feinheiten, wie Hintergründe und Buttons, in einem Grafikprogramm zu erstellen, und dann in die bereits funktionierende Webseite einzubauen. Damit das möglich wird, ist es unumgänglich, als Webdesigner auch HTML und CSS zu lernen.
Das klingt anfangs nicht gerade intuitiv, und manche schrecken bestimmt vor der Vorstellung zurück, als Designer selbst Code zu schreiben. Wer sich mit HTML und CSS aber auseinandersetzt, wird feststellen, dass das erste für den Aufbau und die Gliederung von Informationen vorgesehen ist, und das zweite nichts geringeres bestimmt, als das Aussehen einer Webseite. Meiner Ansicht nach, fallen beiden Arbeiten eindeutig in den Tägigkeitsbereich eines Designers, und nicht in den eines Programmierers.
Ich denke wenn wir uns Webseiten genauer ansehen, stellen wir fest, dass Webdesign in erster Linie mit Typografie vergleichbar ist. Fast jede Informationen wird als Text angezeigt, Grafiken spielen im Vergleich nur eine kleine Rolle. Aus diesem Grund sollten wir damit aufhören, Bilder von Webseiten zu malen, und anfangen wirkliche Webseiten mit echtem Text in unseren Browsern zu entwickeln.
Nächster Artikel: Usability-Tests mit Papier-Prototypen
Philipp Rappold — 27. Oktober 2011
Guter Post! Stimme definitiv zu, das man als Webdesigner Ahnung von HTML+CSS haben sollte und dementsprechend auch bei den Entwicklungen am Laufenden bleibt.
Ich finds immer schade, wenn Kunden nur Design und nicht die Umsetzung haben wollen. Wird dann im Endeffekt nämlich in 9 von 10 Fällen nicht so umgesetzt, vor allem was Details betrifft. Was dann vor allem mich ärgert, wenn ichs dann nicht als Referenz verwenden kann.
Für den Fall, das ein Kunde dann doch mal Design PLUS Entwicklung möchte, fang ich zwar in Photoshop an, aber nur so lange bis ich eine - fürs Projekt passende - „visual language“ gefunden hab. Von da an gehts dann im Editor weiter…
Martin — 28. Oktober 2011
Sehr guter Beitrag, aber diesmal kann ich euch nicht völlig zustimmen. Ich finde nicht, dass die Entwicklung des HTML-Codes eine Aufgabe der „Designer“ ist. HTML und CSS sind ja formale Beschreibungssprachen und richten sich als solches eher an TechnikerInnen. Designer bevorzugen meiner Erfahrung nach eher eine visuelle Herangehensweise.
Es gibt natürlich Menschen, die beide Seiten beherrschen, leider sind diese aber eine Minderheit. Ich gehöre jedenfalls nicht dazu. Äußerst wichtig ist es aber, mehr Bewusstsein für die Besonderheiten im Web zu schaffen. Die wichtigste Botschaft lautet hier: „Das Web ist kein Printmedium!“
Ich bestehe in meinen Kooperationen mit Designern immer darauf, „echten“ Text zu verwenden, anstatt diesen in Grafiken zu (ver)stecken. Das ist mittlerweile mit der Unterstützung diverser Webservices bzw. modernisierter Lizenzbestimmungen auch für so gut wie alle Schriften möglich.
Außerdem habt ihr meine volle Zustimmung, wenn es um Detailverliebtheit und Grafische Finessen geht. Hier gilt es, von Anfang an Zurückhaltung zu üben und später zu ergänzen was technisch möglich ist.
Zu den unterschiedlichen Endgeräten: Der beste Ansatz ist hier meiner Meinung nach, von Anfang an auf die verschiedensten Endgeräte im Hinterkopf zu behalten. Dann für das meistgenutzte Gerät zu entwickeln. Und später für die restlichen zu ergänzen. Stichwort „Responsive Webdesign“.
Dazu eine interessante Frage auf stackexchange: http://ux.stackexchange.com/questions/13273/responsive-web-design-vs-separate-website-for-mobile?utm_source=twitterfeed&utm_medium=twitter
Stefan — 28. Oktober 2011
Danke, dass ihr eure Erfahrungen weitergegeben habt.
Ich denke Philip spricht einen interessanten Punkt an: Was passiert mit Webseiten, die schlussendlich anders (schlechter) umgesetzt werden, als vom Designer entworfen? Wer ist schuld, der Designer oder der Programmierer?
Die Antwort führt mich zu Martins Beschreibung von HTML und CSS als formale Beschreibungssprache. Das stimmt, und deshalb tun sich viele Designer schwer damit. In unseren Projekten ist HTML und CSS deshalb auch der Ort an dem sich Design und Programmierung treffen. Wir arbeiten alle zusammen am selben Code. Das heißt, während ein Programmierer an der Datenbank arbeitet, kann ein Designer am Styling arbeiten.
Ein Beispiel dafür wäre, dass ich Klassen in HTML vergebe und über CSS style, während ein anderer den Inhalt einpflegt und wieder jemand anders die MySQl-Abfragen einbaut – alles im selben Code. Wenn sich mein Box-Modell in HTML also als falsch, oder sagen wir einmal nicht optimal herausstellt, kann jemand, der mehr Ahnung von Entwicklung hat, meine Fehler ausbessern, ohne sich aber um Zeilenabstände, Schriftgrößen und Absatzformate kümmern zu müssen.
Ich denke es braucht nicht unbedingt Menschen, die beide Seiten beherrschen, sondern nur eine Möglichkeit, mit der beide Seiten am selben Produkt arbeiten können. Wenn Designer bereit sind, selbst CSS zu schreiben – und das versteht sich meiner Meinung nach von selbst, wo doch CSS für das Aussehen einer Webseite verantwortlich ist – und gemeinsam mit den Programmierern an komplexeren Dingen wie dem Layout der Seite arbeiten, erübrigt sich die Frage nach dem Schuldigen. Designer und Programmierer müssen miteinander arbeiten, nicht nacheinander – steht ja schon auf unserer Startseite ;)
Und zum Thema „Responsive Design“: Das sehe ich genau wie Martin. Der Link zu stackexchange ist auch interessant, weil einige Kommentare schon andeuten, dass „Responsive Design“ bei einfacheren Webseiten wunderbar ist, bei komplexen Seiten wie Amazon.com aber wohl kein Ersatz für eine mobile Version sein kann.
Martin — 8. November 2011
Ich denke dein gewünschtes Vorgehen wird noch die Ausnahme bleiben. 37Signals hatten ja mal einen schönen Artikel geschrieben sogar komplett auf Photoshop zu verzichten. Aus der Praxis sehe ich aber zwei - entscheidende - Punkte, die dagegen sprechen. Der Kunde will bunte Pixel sehen! Und selten erstmal Wireframes, Dummys oder minimalistische HTML-/CSS-Strukturen. Und die Tätigkeit Webdesign und Frontendentwicklung sind in Agenturen meistens klar getrennt. Selten mach einer beides - und noch seltener beides richtig gut! So ist das Vorgehen entweder was für eigene Projekte (wie bei 37Signals) oder man hat einen Kunden, der einen voll vertraut!
Stefan — 8. November 2011
Hier der Link zum Artikel von 37signals: Why we skip Photoshop
Hallo Martin,
Danke für deine Einblicke. Du hast recht, dass Webdesign und Frontend-Entwicklung in Agenturen meistens klar getrennt sind, aber muss sich das in Zukunft nicht ändern? Ich denke, dass die wirklich schlauen Kunden längst begriffen haben, dass Webdesign nicht bunte Pixel sind, und wenn sie es noch nicht wissen, ist es unsere Aufgabe, sie darüber zu informieren. Wir machen das meist mit Praxis-Beispielen, die jeder kennt: Google, Amazon, Facebook usw.
Sobald unsere Kunden verstehen, dass diese Webseiten nicht in Photoshop zusammengebastelt werden, um anschließend fertig umgesetzt zu werden, sondern so früh wie möglich online gehen, um Feedback zu sammeln und ständig weiterverbessert werden, verstehen sie, dass wir nicht mit Pixeln beginnen können.
Kunden die ihr Web-Projekt wirklich ernst nehmen, wissen außerdem, dass wir Papier-Prototypen bauen und testen, bevor wir überhaupt mit HTML und CSS beginnen. Wir argumentieren das damit, dass wir auf diese Weise eine Menge Zeit und Geld sparen können, und dabei alle Fehler die passieren – und Fehler passieren bei jedem Design – so früh wie möglich beseitigen können. Die Kunden die das verstehen, werden eine riesige Freude mit uns haben. Die Kunden, die gerne bunte Pixel sehen wollen, sollten wir ohnehin vermeiden. Sie werden mit uns keine Freude haben, und wir werden mit ihnen keine Freude haben.
Martin — 8. November 2011
Ja, durchaus löblich euer Vorgehen! Ich glaube, den meisten Kunden müsste man diese Art des Vorgehens noch erklären. Das würde aber bedeuten, dass intern (Agenturseitig) mehr Wert auf Konzeption und Usability(tests) gelegt werden müsste… Ist halt oft auch nicht so. Aber du hast recht „ist es unsere Aufgabe, sie darüber zu informieren“! Auf gehts ;)
Stefan — 8. November 2011
Wir sind dabei :)
Pingback Webdesign im Browser – Ein Praxisbeispiel | Simplease Blog — 12. Dezember 2011
[…] habe vor kurzem einen Blog-Artikel darüber geschrieben, warum wir Webseiten im Browser designen. Für jeden der sich dafür interessiert, habe ich ein paar Bilder und Screenshots unserer eigenen […]