Fünf Gründe warum Webdesigner keine Angst vor Code haben sollten

Webdesigner sollten Code beherrschen. Und zwar nicht um den technischen Part zu übernehmen, sondern um besser und effizienter gestalten zu können. Doch wie alles Neue ist es mit einer gewissen Einstiegshürde verbunden.

Ich selbst beschäftige mich wieder seit Ende 2012 intensiv mit HTML und vor allem CSS. Damals kristallisierte sich Responsive Webdesign als die Vorgehensweise für Webdesign heraus und es wurde immer absurder für jedes Template und jeden Breakpoint eine Photoshop-Vorlage zu erstellen. Seitdem ich den Umgang mit Code als Teil meines Design-Prozesses adaptiert habe, erfahre ich viele Vorteile. Das sind meine fünf Gründe warum sich Designer mit Code auseinander setzen sollten:

1. Es ist einfach zu lernen

HTML und CSS zu lernen ist leicht. Die Sprachen sind dafür gemacht worden, um möglichst einfach angewandt werden zu können. Die Lernkurve ist steil und man hat schnell Erfolgserlebnisse. Natürlich gibt es auch gewisse Tücken (der Teufel liegt wie immer im Detail), doch das Beste ist HTML, CSS und Java Script kann man kostenlos lernen. Es gibt zahlreiche wirklich gute Tutorials und Ressourcen wie Codecademy, CSS Tricks oder HTML Dog, alle nur eine Suchanfrage entfernt.

Ganz wichtig: es muss dabei kein produktionsreifer Code rausspringen. Ich nenne das Ergebnis Design-Code mit dem Ziel einen Prototyp erstellen zu können um besser zu gestalten. Dinge wie Browser-Kompartibilität oder Wartbarkeit müssen hier kein Thema sein. Für den Start ist es am besten die Erwartungen nicht zu hoch zu schrauben. Es reicht wenn der Prototyp erst mal nur als Vorlage für ordentliches Front End Development dient. Mit der Zeit und Neugierde wird sich die Qualität des Codes steigern.

2. Es ist nachhaltig

Es gibt mittlerweile einige grafische Tools, die sich den Ansprüchen von Responsive Webdesign stellen. Das sind zum Beispiel Sketch, Webflow, Macaw, Adobe Edge Reflow, mittlerweile auch Adobe Muse oder vielleicht auch bald Adobe Experience Design. Mit all diesen Tools können (mal besser mal schlechter) interaktive Prototypen mit flexiblen Layouts erzeugt werden, mit einigen sogar ganze Websites. Wozu dann also Code lernen?

Ich selbst habe mich vor zwei Jahren genauer mit Adobe Edge Reflow und mit Macaw auseinandergesetzt. Die Gründe, warum ich mich damals dagegen entschieden habe damit zu arbeiten waren:

1. Der Workflow war ziemlich anstrengend und buggy
2. Die Möglichkeiten waren recht eingeschränkt
3. Die Zukunft dieser Produkte war sehr vage (mittlerweile wurde die Weiterentwicklung von Macaw eingestellt)

Das mögen alles Kinderkrankheiten gewesen sein und vieles mag mittlerweile auch besser laufen. Doch im Endeffekt läuft es mit diesen Tools ja auch nur auf Code hinaus. Sie erzeugen HTML, CSS, vielleicht ein bisschen Java Script – die drei Grundbausteine des Web Designs. Ich halte es für sinnvoller und nachhaltiger sich gleich mit diesen ohne Umweg zu beschäftigen. Hier kann man davon ausgehen, dass diese weiterhin erhalten bleiben. Bevor ich also lerne, wie ich eine Software so bediene, dass sie den Code erzeugt, den ich brauche – warum nicht gleich den Code direkt erzeugen? Das schafft Flexibilität, Unabhängigkeit und ist deshalb nachhaltiger.

3. Es entsteht besseres Design

Es ist ein Problem in einem statischen Design-Programm Entscheidungen für ein dynamisches Medium zu treffen. In Photoshop, Illustrator oder Sketch simulieren wir für unser Webdesign den Browser. Wir können hier aber nur bedingt die Dynamik erleben, die gutes Webdesign oft ausmacht. Seien es:

• Verschiedene Inhaltsarten und -längen
• Interaktionen (Hover, Animationen, Übergänge)
• Verschiedene Bildschirmgrößen und Geräte

Designer kennen den ernüchternden Moment, in dem man das in Photoshop entworfene Webdesign auf einmal im Browser mit echten Inhalten auf echten Geräten sieht. Und man merkt auf einmal welche Design-Entscheidungen nicht funktionieren. Wer mit einem Prototyp diese Dynamiken schon im Entwicklungsprozess am Design beachten kann, wird bessere, flexiblere und nachhaltigere Designs erstellen. Denn die Design-Entscheidungen werden im Browser getroffen – am echten Ding und nicht in der Photoshop-Simulation.

4. Photoshop spielt weiterhin eine Rolle

Für Design-Entscheidungen im Web Design sind Grafik-Programme nicht ideal. Doch sie haben immer noch ihren Platz – nämlich beim Entwicklen einer Design Richtung. Denn Designen im Browser funktioniert nicht. Zumindest nicht für mich. Vielleicht ist das so eine linke/rechte Hirnhälfte-Sache, aber um eine visuelle Idee zu entwickeln ist Adobe Illustrator für mich immer noch unschlagbar. Früher war es Photoshop, dann Fireworks, morgen ist es vielleicht etwas anderes – im Wesentlichen geht es darum ein Tool zu haben bei dem man noch nicht an den technischen Aufbau denken muss. In dem man frei und schnell herumprobieren kann. Sobald dann eine ungefähre visuelle Richtung da ist, setze ich diese als Prototyp in HTML und CSS um und entwickle das Design im Browser weiter.

5. Es erleichtert die Zusammenarbeit

Designer, die mit Design-Code einen HTML-Prototyp ihres Webdesigns erstellen können erleichtern sich das Leben in dreierlei Hinsicht:

Die Abstimmung mit Kundinnen und Kunden wird leichter

Es kann zu einem Problem werden, wenn Kundinnen und Kunden auf Basis eines Photoshop-Entwurfs ein Webdesign freigeben. Machen fällt es schwer zu abstrahieren, andere abstrahieren zu viel. Es entsteht jedenfalls Spielraum für falsche Annahmen. Diese können den Prozess gefährden, da sie unerwartete Änderungen nach Freigabe mit sich ziehen können, die wiederum höhere Kosten und Unmut verursachen können. Mit einem interaktiven Prototyp kann man vieles davon bereits am Weg abwenden und erzeugt keine falschen Erwartungen von Kundenseite.

Die Kommunikation mit Developerinnen und Developern wird leichter

Ein Prototype ist ebenso ein wunderbares Briefing für die Technik. Funktionalität, Interaktion und Aussehen bei verschiedenen Bildschirmgrößen sind darin bereits abgedeckt und müssen nicht lange erklärt oder beschrieben werden. So sinkt die Anzahl möglicher Fehlerquellen. Oft können Teile vom Code übernommen werden, was die technische Entwicklung effizienter und günstiger macht.

Die Feinabstimmung und Finalisierung der Website wird leichter

Mit der Übergabe des Prototypen an die Technik muss die Arbeit des Designers oder der Designerin mit HTML und CSS nicht enden. Feinabstimmungen können direkt im Code durchgeführt werden und die Feedbackschleife wird dadurch kürzer. Auch wenn man sich das am Anfang vielleicht nicht gleich zutraut, mit der Zeit werden die persönlichen Verantwortungen und Kompetenzen im Code steigen. Und da die meisten Developer ohnehin mit Git arbeiten, braucht man sich auch nicht fürchten etwas unwiderruflich kaputt zu machen.

Noch einmal kurz und bündig: es geht nicht darum aus Grafikdesignern top Front End Developer zu machen. Es geht darum mit HTML und CSS einfachen „Design-Code“ zu schrieben mit dem man einen funktionalen Prototyp erstellen kann. Dadurch kann man bessere Design-Entscheidungen treffen, sich leichter mit Kunden abstimmen und in der Umsetzung der Website flüssiger zusammenarbeiten. Vielleicht motivieren euch diese Gründe ja den ersten Schritt zu tun. Hinterlasst gerne eure Gedanken (seinen sie von Kunden-, Designer- oder Developerseite) zu dem Thema in den Kommentaren.