To code or not to code

Warum Webdesigner an ihren Code-Skills arbeiten sollten
Kommentare

Sollte man als Designer programmieren können oder nicht? War diese Frage zu Beginn der 10er Jahre noch stark umstritten, kann sie heute klar mit Ja beantwortet werden. Aber warum ist das so? Die massenhafter Verbreitung mobiler Endgeräte, das responsive Design und die Rolle der User Experience sind wichtige Gründe, warum Webdesigner gegenwärtig an ihren Code-Skills arbeiten sollten – und letztlich profitieren sie am meisten davon!

2010 drückte sich der Unterschied zwischen Designern und Entwicklern prägnant in der Wahl ihrer Hose aus. Während Gestalter auf Skinny-Jeans in Kombination mit MacBook setzten, kamen Entwickler in Cargo-Pants und mit eigener Tastatur zur Arbeit. Die beiden Gruppen unterschieden sich nicht nur in ihrer Arbeitsweise, sondern waren auch zwei komplett verschiedene Typen von Menschen. So jedenfalls das gängige Klischee.

Doch in den letzten fünf Jahren ist die Entwicklung im Webdesign deutlich vorangeschritten; zudem sind eine Fülle neuer Geräte, Technologien und Werkzeuge hinzugekommen. Im Gegensatz zu 2010 sind heutzutage nicht mehr visuell überladende Designs in Mode, sondern aufgrund der massenhaften Verbreitung mobiler Endgeräte puristische Entwürfe gefragt. Die minimalistischen Ansätze von Flat- und Material Design können in erster Linie als visuelle Reaktionen auf die technischen Veränderungen gelten. Auf den Punkt bringt diese Entwicklung die zunehmende Bedeutung der User Experience im Webdesign.

Bei Designentscheidungen spielt heute die Steigerung der UX eine wichtige Rolle. Visuelle Elemente haben ihren eingeständigen Wert verloren und sind mittlerweile ein Mittel, um die Zufriedenheit der Nutzer zu steigern und ihre Wünsche zu erfüllen.

Aus Perspektive der Designer ist deshalb eine klare Trennung zwischen den Aufgaben von Gestaltern und Entwicklern im Jahr 2016 nicht mehr sinnvoll. Da im User-Experience-Design der Wert von optischen Objekten abhängig ist von der Meinung der User, überlappen sich die beiden Arbeitsbereiche immer mehr. Die optische Gestaltung muss funktionalen Ansprüchen genügen und nicht umgekehrt – ganz ohne Programmierkenntnisse ist das nicht zu leisten.

Stellen Sie Ihre Fragen zu diesen oder anderen Themen unseren entwickler.de-Lesern oder beantworten Sie Fragen der anderen Leser.

Code bildet die Grundlage des Designs

Wenn Webdesigner ihr Handwerk heute richtig anwenden wollen, müssen sie das Medium, mit dem sie arbeiten, besser verstehen lernen – und die Grundlage des Webs ist nun mal der Code. Die Frage lautet also nicht, ob Designer überhaupt Coden lernen sollten, sondern wie viel Code sie verstehen müssen.

Ein grundlegendes Verständnis ist ausreichend, um ein Gespür dafür zu entwickeln, wie Code funktioniert. Man muss nicht in der Lage sein, einen eigenen Quelltext zu schreiben, sondern „nur“ wissen, wie Einsen und Nullen den eigenen Designentwurf beeinflussen. Das macht den Einstieg in die Welt der Webentwicklung deutlich einfacher. Die Fülle an verschiedenen Programmiersprachen wie HTML, CSS, JavaScript, PHP, Ruby oder SQL wirkt ohne Vorwissen oftmals sehr abschreckend.

“Design is not just what it looks like and feels like. Design is how it works.”

Als Designer muss man kein Full-Stack-Entwickler sein und alle Sprachen gleichzeitig beherrschen. Um zu wissen, wie der eigene Entwurf in Code übersetzt wird, reicht es aus, sich über die Grundlagen der Frontend-Entwicklung zu informieren. Die Frontend-Entwicklung behandelt diejenigen Elemente, die die Nutzer sehen und mit denen sie interagieren. Die Backend-Entwicklung hingegen läuft im Hintergrund ab und konzentriert sich auf Kalkulationen, Datenbank-Interaktionen und Performance-Fragen.

In erster Linie kommen in der Frontend-Entwicklung HTML und CSS zum Einsatz. Aber aufgrund der zunehmenden Bedeutung der User Experience sollte man sich auch mit den Basics von JavaScript vertraut machen. Eine gute Einführung in HTML, CSS und JavaScript bietet beispielsweise das Angebot der W3Schools. Als Designer ist es von Vorteil, richtig beurteilen zu können, wie sich die drei Programmiersprachen auf den eigenen Workflow auswirken.

Arbeitserleichterung durch nützliche Tools

Ein großer Teil der Arbeit wird Gestaltern heutzutage durch nützliche Werkzeuge und Tools abgenommen, die so gut wie keine Programmierkenntnisse voraussetzen. Mit ihrer Hilfe lassen sich funktionale und responsive Webseiten leicht und einfach erstellen.

„An architect that only knows how to use the pen can still be a good architect, but one that also knows how to pick up a hammer tends to have better insight into the types of building solutions one can come up with”

Die Arbeit der Designer ist auf diese Weise nicht mehr auf die Erstellung von Mockups, Wireframes und Prototypen limitiert, sondern kann durch Werkzeuge wie Macaw im Drag-und-Drop-Verfahren auf die Erstellung komplett funktionstüchtiger Webseiten ausgebreitet werden. Hilfreich sind hierbei auch andere Tools wie zum Beispiel Webflow, das sauberen HTML- und CSS-Code generiert, der obendrein auf andere Plattformen exportiert werden kann.

Die eigenen Fähigkeiten stärken

Indem sich Designer die grundlegenden Basics der Programmiersprachen aneignen, verbessern sie automatisch ihre Fähigkeiten. Zu wissen, welche Sprache wie und wozu eingesetzt wird, hilft dabei, ein besser Verständnis dafür zu entwickeln, was aus technischer Sicht umsetzbar ist und was nicht. Das erspart nicht nur viel Zeit in der gestalterischen Konzeptionsphase, sondern ist ebenfalls für die praktische Umsetzung kreativer Ideen förderlich.

1. Frontend-Entwicklung

Sich mit der Frontend-Entwicklung auszukennen, eröffnet Designern somit neue und praktikable Gestaltungsmöglichkeiten. So können Elemente eigenständig in die Webseite implementiert und mit ihnen experimentiert werden. Als Freelancer etwa hat man nicht immer das nötige Kleingeld, um einem Entwickler für die Generierung des Quelltextes zu beschäftigen. Der geübte Umgang mit Code und Tools ist hilfreich, um den Kunden trotzdem einen konsolidierten Service anbieten zu können.

2. Kontrolle behalten

Darüber hinaus behalten Designer im sämtlichen Entwicklungsschritten die Kontrolle über ihr Werk. Oftmals gehen viele visuelle Ideen im Zuge ihrer binären Umsetzung verloren. Die Umwandlung von PSD- Dateien in HTML- und CSS-Code ist leider kein Eins-zu-eins-Umsetzungsprozess. Kennt man sich jedoch mit den Grundlagen der Programmiersprachen aus, kann man die eigenen Intentionen besser in Einsen und Nullen übersetzen. Außerdem ist man in der Lage, im Entwicklungsprozess auf kurzfristige Kundenwünsche einzugehen.

3. Entwickler mit einschließen

Zu guter Letzt eignen sich Gestalter durch den Ausbau ihrer Code-Skills ein brauchbares Vokabular zur barrierefreien Kommunikation mit Entwicklern an. Durch die verständliche Vermittlung von Designideen wird möglichen Konfliktpotenzialen von Anfang an der Wind aus den Segeln genommen und die Zusammenarbeit gestärkt. Beispielsweise kann man Entwicklern eine Menge Arbeit durch das eigenständige Testen des Frontends abnehmen. Vollständige Dokumentationen, hilfreiche Screenshots und klare Verbesserungswünsche helfen Developern dabei, sich auf das Backend konzentrieren zu können.

Fazit

Im Jahr 2016 ist die Wahl der Passform der Hose zur Nebensache geworden. Webdesigner sollten nicht nur wissen, wie man Elemente visuell gestaltet, sondern ebenfalls angemessene Code-Skills im Bereich der Frontend-Entwicklung besitzen. Das Programmieren von eigenen Codebausteinen ist zwar nicht notwendig, aber ein grundlegendes Verständnis über die Funktionalität von HTML, CSS und JavaScript ist elementar. Webdesigner stärken dadurch nicht nur ihre eigenen Fähigkeiten, sondern erleichtern sowohl ihre als auch die Arbeit der Entwickler – eine klassische Win-Win-Situation.

Aufmacherbild: Mobile web site application development via Shutterstock / Urheberrecht: Sentavio

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -