Nachdem im letzten Beitrag stark theoretisch die Problematik von Design Thinking im Bauhaus-Kontext eruiert wurde, soll es im vierten Teil dieser Reihe etwas praktischer zugehen.
Inspiriert vom Bauhaus-Manifest [GRO 18], dem Philosophie-Beitrag von ARTE zur »Berührung« [ENT 10] sowie der Aussage »[...] aspects of doing the work by hand somehow make it a little bit more personal and organic.« von Shepard Fairey im Podcast von gestalten.tv [FAI 11] soll der Frage nachgegangen werden, inwiefern Webdesign einen handwerklichen Anspruch hat.
Anders gefragt: Wie viel »Bauen« steckt im Webdesign?
Der Hauptunterschied zwischen Bauenden des Bauhaus und Webdesignern besteht wohl darin, dass Erstere mit greifbarer Materie zu Werke gehen und Letztere mit abstraktem Code Vorlieb nehmen müssen.
Zieht man sich Gropius‘ Manifest zu Gemüte, fällt auf, dass im Bauhaus Kunst nicht das Ziel sei. Vielmehr sollte sich auf das Handwerk besonnen werden und Kunst darauf aufbauend etabliert werden. Daraus kann geschlossen werden, dass Webdesigner sich zunächst auf den stabilen Bau konzentrieren sollten, um anschließend und schließlich einen künstlerischen Anspruch geltend machen zu können.
Sprich: Ohne ein handwerklich sauberes Fundament gibt es keine Basis für Kunst. Auf die Praxis bezogen heißt das, dass zunächst eine wohlgeformte und valide HTML-Struktur gebaut wird, um anschließend Layout, Ästhetik (CSS) und Verhalten (JavaScript) hinzuzufügen. Letztere Beschreibung ist ein gängiges Paradigma im Webdesign.
Was ist der handwerkliche Anspruch eines Webdesigners?
Typische handwerkliche Interaktionen im Webdesign finden von Finger zu Tastatur sowie von der Hand zur Maus statt. Diese Art von handwerklichem Anspruch kann wohl nicht gemeint sein.
Geht man einen Schritt zurück, um sich die Prinzipien des Bauhauses anzuschauen, stößt man auf die Ausführungen von Mr. Simon Collison [COL 10]. Er wirft einen Bauhaus-Blick auf das heutige Web (März 2010).
Laut Collison gibt es fünf Prinzipien, die im heutigen Webdesign greifen:
- »Acknowledge the machine«
- »Standardise Production«
- »Encourage experimentation and synthesis«
- »Form follows function«
- »Economy and simplicity«
Acknowledge the machine
Gemeint ist der Vorteil der Maschinennutzung, unsere Ideen und Inhalte in Massenproduktion herzustellen. Die Grenzen liegen dabei im ästhetischen Sinn, die die Maschine von Hause aus nicht mitbringt. Insofern sind auch die Eigenheiten und Einschränkungen zu akzeptieren und zu berücksichtigen. Nicht vergessen werden darf der individuelle Charakter (Stil), der im Bauhaus trotz maschineller Massenproduktion für das ganze Volk (vgl. [GRO 18]), stets wichtig war.
Standardise Production
Nicht nur in der werkstofflichen Bau-Produktion sind Standards vonnöten. Anders als in den Gefilden von industriellen DIN-Normen leben Webstandards von Organisationen wie dem W3C, Arbeitsgruppen wie der WHATWG, Zusammenschlüssen wie »The Web Standards Project«, kleineren Initiativen wie die deutschen »Webkrauts« sowie Kickstarts (z.B. HTML5 Boilerplate), Best Practices (z.B. der »CSS Sticky Footer« von Ryan Fait oder der »CSS reset« von Eric Meyer) und Frameworks (z.B. jQuery) von einzelnen oder mehreren (lose zusammenarbeitenden) Individuen.
Die Vielzahl von Elementen drückt aus, worum es im Web und Webdesign geht: JedeR trägt etwas demütig bei, ohne dass eine große Instanz führt, den Ton angibt und sich in den Vordergrund spielt. Das Web ist die Summe seiner Elemente. Letztere ergeben sich aus praktischen Erkenntnissen, Reviews, Bilanzen und Iterationen.
Encourage experimentation and synthesis
Neben der Weiterentwicklung ist es natürlich auch nötig, bestehende Konventionen zu hinterfragen. Insofern ist das Experimentieren und Zusammenführen im Webdesign auch in Zukunft höchst wünschenswert. Entwicklungen wie AJAX, RSS und Mash-ups demonstrieren dies eindrucksvoll.
Form follows function
Auch wenn dekorative und ornamentale Formen die User Experience (UX) bereichern, stehen sie bei Entwicklung von Webseiten doch nicht an erster Stelle. Nie würde in diesem Kontext die funktionale Komponente aufgrund von beeindruckenden optischen »Erweiterungen« benachteiligt werden. Collison
[COL 10] formuliert es so:
The modernists admired steel water towers, and we admire beautifully crafted JavaScript function for their simple integrity.
Economy and simplicity
Einfach und ökonomisch soll eine Webseite von heute daherkommen. Einfach bedeutet, dass jeder Besucher angenehm und im besten Fall mit Freude mit der Webseite interagiert. Ökonomisch ist sie als Kommunikationsinstrument, weil man mit relativ geringem Mitteleinsatz in der Lage ist, Botschaften effizient, verständlich und anschaulich zu vermitteln.
Dies waren nur fünf von vielene anderen denkbaren Handwerksassoziationen in Bezug zum Webdesign. Im Folgenden soll eine selbst erdachte handwerkliche Herangehensweise genauer betrachtet werden: »Greifbarer Code« (»Tangible Code«).
Wie sieht also greifbarer Code aus?
![]()
Nehmen wir als Beispiel die Struktur eines einfachen HTML-Dokuments. Bekannterweise baut sich ein solches Dokument aus Schlüsselwörtern («Tag«) zusammen. Die folgende Liste zeigt dies auf einfache Weise:
html
– head
–– title
–– meta
–– link
– body
–– div
––– section
––– header
–– footer
/html
Auf die schließenden Tags wurde der Einfachheit halber verzichtet - mit Ausnahme von »/html«. Je länger der Strich »–«, desto tiefer die Verschachtelung in der HTML-Hierarchie.
So oder so ähnlich könnte greifbares Programmieren ablaufen
Eine formbare Masse (z.B. Lehm oder Ton) wird benötigt, in die man per Hand bzw. mit einem Objekt, das in der Hand liegt, drücken kann. Je nachdem wie tief man drückt - hier ist Fingerspitzengefühl gefragt - landet man tiefer in der Hierarchie der besagten HTML-Struktur.
Um dem jeweiligen Element in der Hierarchie einen Namen zu geben, werden vorproduzierte »Stempelartige« zu Rate gezogen. Letztere sind dann mit HTML, HEAD, BODY usw. bedruckt (bzw. eingestanzt). Da auch individuelle Variablennamen u.ä. möglich sein müssen, gibt es auch eine sinnvolle Auswahl an Einzelbuchstaben und Zeichen des kompletten UTF8-Zeichensatzes (+ 1.000.000).
Die Stempelartigen sind deshalb wichtig, weil sie von Lesemaschinen erfasst werden müssen - später beim Lesen bzw. Parsen des greifen HTML-Codes. Dies erfordert eine gewisse Standardisierung bei der Zeichendarstellung.
Positiv ist in dem Zusammenhang, dass der Code - zumindest strukturell - auch von blinden Menschen gelesen werden kann. Insofern handelt es sich um ein Derivat des bekannten Braille-Systems - ein Prinzip, bei dem Blinde durch Erhöhungen und Vertiefungen einer Oberfläche Texte lesen. Für die Beschriftung der Elemente per Stempelartige müsste man - um die Blinden nicht zu überfordern - wohl auf die klassische Brailleschrift setzen.
Für nichtblinde Menschen sieht man in der Frontalansicht der obigen Abbildung, dass auch mit Hilfe von Farbcodes gearbeitet werden kann. Je nach Tiefe in der Hierarchie (Struktur) wird der Farbton dunkler (gen #000).
Die Grautöne stellen aber auch die visuelle Tiefe dar (bezogen auf eine vor Einem liegende formbare Masse), die für jede Hierarchieebene benötigt wird, z.B. ist das HTML-Tag auf der obersten Ebene - also direkt auf der Oberfläche der Masse. Das TITLE-Tag hingegen ist zwei Hierarchiestufen darunter - also zwei Nuancen dunkler.
Für das Erlernen von z.B. HTML kann das Prinzip des greifbaren Codes nützlich sein. Er bedeutet »direkten Kontakt«, »Unmittelbarkeit, Nähe, ohne das Vermittlung nötig wäre« [ENT 10]. Statt eine Entfernung zu überwinden (vgl. [ENT 10]), wie es beim Schauen auf den Monitor und die Eingabe über Maus und Tastatur geschieht (Entfernung in dem Sinne, weil die Eingabe an einem anderen Ort als die Ausgabe stattfindet), wirken Ein- und Ausgaben am gleichen Ort.
Die Interaktion - also das Zusammenspiel von Ein- und Ausgaben - garantiert sofortiges Feedback: Drücke ich die formbare Masse mit den Stempelartigen, verformt sich diese bestimmte Stelle ohne Verzögerung. Webdesign kann also auch, setzt man die interdisziplinäre Brille auf, mit handwerklichen Mitteln gelöst werden - auch wenn der Aufwand hierfür ungemein höher wäre.
Als Anregung inwiefern Handwerk und Webdesign nicht miteinander zu vereinen sind, soll der folgende Abschnitt dienen.
Die Inkompatibilität von Handwerk (Realität) und Webdesign
Collison [COL 10] führt in seinem subjektiv gefärbten Artikel aus, dass Screendesign nicht der Realität entspricht:
This is not a reality. We’re creating a fake environment.
Als Beispiel nennt er die Unmöglichkeit, eine Tasse Tee auf einem vertikalen Computerbildschirm zu platzieren, auch wenn es derlei Abbildungen zu Genüge im Screendesign gibt. Daraus ergibt sich das folgende Fazit: Das Bauhaus-Handwerk ist Realität, analog, greifbar und handwerklich - es wird mit der Hand angepackt. Webdesign ist (im besten Fall) Realitätsnachahmung, abstrakt, binär, digital - man arbeitet pixelbasiert.
Weitere (In)Kompatibilitäten sollen im letzten Artikel dieser Reihe aufgegriffen werden. Insofern ist dieser Abschnitt als Denkanstoß gedacht.
Gibt es Perspektiven, die hinsichtlich des handwerklichen Anspruchs im Webdesign nicht betrachtet wurden? Wenn ja, dann wären Kommentare, Tweets, u.ä. sehr willkommen.
Literatur
[COL 10] Simon Collison (2010), Bauhaus Ideology and the Future of Web Design => http://colly.com/comments/bauhaus_ideology_and_the_future_of_web_design/
[ENT 10] Raphaël Enthoven und Clara da Silva (2010), Arte »Philosophie« zum Thema »Berührung« => http://videos.arte.tv/de/videos/philosophie_beruehrung-3489832.html
[FAI 11] Shepard Fairey (2011), gestalten.tv => http://www.gestalten.tv/motion/shepard-fairey
[GRO 18] Bauhaus-Manifest (1918), Walter Gropius => http://www.uni-stuttgart.de/kg1/mitarbeiter/people/personal_downloadindex/overdick/GropiusI.pdf
