Webdesign und UX-Design im Kunstunterricht behandeln

Wenn Jugendliche eine Website oder App öffnen, entscheiden sie in wenigen Sekunden, ob sie bleiben oder wieder wegklicken – und diese Entscheidung fällt fast immer unbewusst, aufgrund von Gestaltung. Genau hier setzt Webdesign und UX-Design (User Experience Design) als Unterrichtsthema an: Es macht sichtbar, dass hinter jeder digitalen Oberfläche bewusste gestalterische Entscheidungen stehen, die auf jahrhundertealten Prinzipien der Bildkomposition ebenso beruhen wie auf neuen, nutzerzentrierten Methoden. Damit ist Webdesign eine zeitgenössische Gestaltungsdisziplin, die sich hervorragend in den Kunstunterricht integrieren lässt – als direkte Fortführung klassischer Fragen nach Komposition, Farbe und Wirkung, nur eben auf einer neuen, interaktiven Fläche.

Was bedeutet: UX-Design?

UX-Design (User Experience Design) bezeichnet die Gestaltung des gesamten Nutzungserlebnisses eines digitalen Produkts – nicht nur, wie es aussieht, sondern wie es sich anfühlt, wie intuitiv es zu bedienen ist und wie zielgerichtet es Nutzerinnen und Nutzer durch eine Aufgabe führt. Webdesign wiederum umfasst konkret die visuelle und strukturelle Gestaltung von Websites: Layout, Typografie, Farbschema, Bildsprache und Navigation. Beide Disziplinen verbindet ein gemeinsames Grundprinzip: Gestaltung ist niemals neutral, sondern lenkt Wahrnehmung, Aufmerksamkeit und Verhalten der Betrachtenden – ein Gedanke, der unmittelbar an klassische Bildkompositionslehre anknüpft, wie sie bereits in der Renaissance mit dem Goldenen Schnitt systematisch entwickelt wurde.

Von der Bauhaus-Gestaltungslehre zum digitalen Interface

Die theoretischen Grundlagen des heutigen UX-Designs reichen erstaunlich weit zurück. Am Bauhaus entwickelten Lehrende wie Wassily Kandinsky und Johannes Itten in den 1920er-Jahren systematische Gestaltungslehren zu Fläche, Form und Farbe, die auf der Grundannahme beruhten, dass Gestaltung stets eine Funktion erfüllen und den Nutzen für den Menschen in den Mittelpunkt stellen sollte – der Leitsatz "form follows function" des Architekten Louis Sullivan wurde zur Bauhaus-Maxime. Genau dieses Prinzip lebt im heutigen UX-Design fort: Nutzerzentriertes Design (User-Centered Design) bedeutet, dass jede gestalterische Entscheidung von den Bedürfnissen und dem Verhalten der Nutzerinnen und Nutzer ausgehen muss, nicht von ästhetischen Vorlieben der Gestaltenden allein. Jakob Nielsen und sein Konzept der "Usability Heuristics" (1990er-Jahre) übersetzten diese Bauhaus-Idee erstmals systematisch in die digitale Welt und formulierten Kriterien wie Sichtbarkeit des Systemstatus, Konsistenz und Fehlervermeidung, die bis heute Grundlage professionellen Webdesigns sind.

Fallbeispiel: Die Startseite von Wikipedia im Wandel

Ein anschauliches Fallbeispiel für gelungenes UX-Design liefert die Startseite von Wikipedia. Seit ihrem Launch 2001 wurde das Layout mehrfach überarbeitet, doch das Grundprinzip blieb konstant: eine klare, hierarchisch gegliederte Fläche, die den Suchbalken prominent platziert, Inhalte in übersichtliche Module unterteilt und auf überflüssige visuelle Ablenkung verzichtet. Vergleicht man Wikipedia mit einer typischen kommerziellen Nachrichtenseite, die mit Werbebannern, Pop-ups und Autoplay-Videos arbeitet, wird der Unterschied zwischen nutzerzentriertem und aufmerksamkeitsökonomisch getriebenem Design sofort sichtbar. Dieser Vergleich eignet sich hervorragend, um Schülerinnen und Schülern zu verdeutlichen, dass Gestaltungsentscheidungen im Web nie neutral sind, sondern immer bestimmte wirtschaftliche oder kommunikative Ziele verfolgen – eine direkte Parallele zur Bildanalyse von Werbeanzeigen im klassischen Kunstunterricht.

Praxisbeispiel / Unterrichtsaktivität

Eine konkrete Unterrichtsaktivität ist der Entwurf einer eigenen Website-Startseite auf Papier oder mit einfachen digitalen Werkzeugen ("Low-Fidelity-Wireframing"). Die Schülerinnen und Schüler erhalten zunächst ein fiktives Projekt, etwa die Website eines Schulcafés oder einer Kunstausstellung, und entwerfen dazu ein Wireframe – eine einfache Skizze aus Rechtecken und Linien, die Layout, Navigation und Inhaltsbereiche festlegt, ohne sich bereits in Details wie Farbe oder Bildmaterial zu verlieren. Dabei wenden sie bewusst Gestaltungsprinzipien wie die Blickführung nach dem F-Muster (typisches Lesemuster auf Websites), visuelle Hierarchie durch Größe und Kontrast sowie ausreichend "White Space" zur Entlastung der Betrachtenden an. Im Anschluss präsentieren die Gruppen ihre Entwürfe und begründen ihre gestalterischen Entscheidungen aus Nutzerperspektive: Wo klickt eine Besucherin zuerst, welche Information muss sofort sichtbar sein, was kann in die zweite Ebene wandern?

Typische Missverständnisse

• Missverständnis: Webdesign ist reine Technik und gehört in den Informatikunterricht. Tatsächlich ist die visuelle und kompositorische Gestaltung einer Website eine genuin gestalterische Aufgabe, die auf denselben Prinzipien wie klassische Bildkomposition beruht.
• Missverständnis: Ein gutes Design ist vor allem ein schönes Design. Tatsächlich steht im UX-Design die Funktionalität und Nutzerfreundlichkeit im Vordergrund – ästhetisch ansprechende, aber unbenutzbare Interfaces gelten als gescheitertes Design.
• Missverständnis: UX-Design ist ein rein digitales, neuartiges Phänomen ohne historische Vorläufer. Tatsächlich greift es unmittelbar auf Gestaltungsprinzipien des Bauhauses und der klassischen Kompositionslehre zurück.

Grenzen der Betrachtung

Die Analyse von Webdesign im Kunstunterricht sollte nicht den Eindruck erwecken, gute Nutzerfreundlichkeit sei ein objektiv messbarer, universeller Standard. Tatsächlich unterscheiden sich Nutzungsgewohnheiten je nach Kultur, Alter und technischer Vorerfahrung erheblich, und was für eine Zielgruppe intuitiv ist, kann für eine andere verwirrend sein. Zudem folgt kommerzielles Webdesign häufig nicht ausschließlich dem Ziel der Nutzerfreundlichkeit, sondern wirtschaftlichen Interessen wie Verweildauer oder Konversionsrate, was zu bewusst manipulativen Gestaltungsmustern ("Dark Patterns") führen kann. Eine kritische Auseinandersetzung im Unterricht sollte diese Interessenkonflikte transparent machen, statt UX-Design unreflektiert als rein dienstleistende, neutrale Disziplin darzustellen.

Das Wichtigste auf einen Blick

• UX-Design gestaltet das gesamte Nutzungserlebnis eines digitalen Produkts, Webdesign konkret dessen visuelle Erscheinung.
• Bauhaus-Prinzipien wie "form follows function" prägen bis heute die Grundlagen des UX-Designs.
• Jakob Nielsens Usability-Heuristiken übersetzten diese Prinzipien systematisch in die digitale Welt.
• Wireframing eignet sich als praktische Methode, um Layout- und Nutzerprinzipien selbst anzuwenden.
• Kommerzielles Webdesign folgt oft wirtschaftlichen statt rein nutzerzentrierten Zielen ("Dark Patterns").

Passendes Unterrichtsmaterial

Wer dieses Thema direkt einsatzbereit im Unterricht behandeln möchte, findet hier fertig ausgearbeitetes Material:

• Webdesign im Kunstunterricht: UX-Design – eine komplette Unterrichtsreihe zu Grundlagen und Praxis von Webdesign und UX-Design.
• FachKomplett Kunst – das komplette Kunst-Fachpaket mit über 100 Unterrichtsreihen für die gesamte Oberstufe.

Weitere passende Beiträge

• Corporate Identity und Corporate Design im Kunstunterricht
• Grafik im Fach Kunst analysieren und verstehen
• SCAMPER-Methode: Kreativitätstechniken im Kunstunterricht
• Bildproduktion und Bildrezeption: Grundlagen
• Selbstinszenierung: Individuum und Ideal in der Kunst
• Medienbildung und Medienkompetenz im Kunstunterricht

Häufig gestellte Fragen

Was ist der Unterschied zwischen UX-Design und Webdesign?

UX-Design gestaltet das gesamte Nutzungserlebnis eines digitalen Produkts, während Webdesign konkret die visuelle und strukturelle Gestaltung einer Website meint.

Warum passt Webdesign in den Kunstunterricht?

Weil Webdesign auf denselben Gestaltungsprinzipien wie klassische Bildkomposition beruht – Layout, Farbe, Kontrast und Blickführung.

Was bedeutet "form follows function"?

Der Leitsatz besagt, dass die Form eines Objekts oder Interfaces sich aus seiner Funktion ableiten sollte – ein zentrales Prinzip des Bauhauses und des modernen UX-Designs.

Was ist Wireframing?

Wireframing ist eine einfache Skizzentechnik, mit der Layout, Navigation und Inhaltsbereiche einer Website ohne Details wie Farbe oder Bildmaterial festgelegt werden.

Was sind "Dark Patterns" im Webdesign?

Dark Patterns sind bewusst manipulative Gestaltungsmuster, die Nutzerinnen und Nutzer zu Handlungen verleiten sollen, die nicht in ihrem eigenen Interesse liegen, etwa versteckte Abo-Kündigungen.

Wer entwickelte die Usability-Heuristiken?

Der Nutzerforscher Jakob Nielsen formulierte in den 1990er-Jahren zehn Heuristiken, die bis heute als Grundlage professioneller Webgestaltung gelten.

Fazit

Webdesign und UX-Design sind keine rein technischen Disziplinen, sondern zeitgenössische Formen visueller Gestaltung, die unmittelbar an Prinzipien des Bauhauses und der klassischen Bildkomposition anknüpfen. Wer Schülerinnen und Schülern diese Verbindung im Kunstunterricht aufzeigt und sie eigene Interfaces entwerfen lässt, fördert sowohl gestalterische als auch kritische Kompetenzen im Umgang mit der digitalen Bildwelt, die sie täglich umgibt.