Ein Lernspiel lebt nicht nur von Inhalt und Mechanik – sondern auch vom Design. Bei WebLab war von Anfang an klar: Kabel, Router, Server, CO₂-Anzeigen oder Energiequellen müssen so gestaltet sein, dass sie schnell verstanden werden. Denn vieles davon bleibt im Alltag unsichtbar. Im Spiel wird diese Infrastruktur sichtbar – und begreifbar.

Vom Interface zur didaktischen Landkarte


Die grafische Gestaltung verbindet klassische Spielelemente mit klarer Informationsstruktur. Spieler*innen sehen jederzeit:

• wie viel Energie gebraucht wird
• wie viele Ressourcen eingesetzt wurden
• wie weit das Level abgeschlossen ist

Farben und Symbole geben dabei direkt Rückmeldung. Wird eine Verbindung gesetzt, reagiert das Spiel sofort. So wird Lernen zu einem aktiven Prozess.

Die Komponentenbibliothek – Ordnung schafft Verständnis

Alle Spielelemente wurden in einer klaren Komponentenbibliothek zusammengeführt. Das bedeutet: Alle Icons folgen derselben Formensprache. Linien, Größen und Proportionen sind einheitlich gestaltet. Dadurch sind die Elemente auch in kleiner Darstellung gut erkennbar – egal ob auf Tablet oder im Browser.

Für die Spieler*innen heißt das: Sie erkennen schneller, was ein Kabel ist, was Energie liefert und was ein Gebäude darstellt. Das Spiel wirkt ruhiger und klarer.

Das Farbsystem – Orientierung auf einen Blick

Farben spielen in WebLab eine wichtige Rolle. Die Hintergrundwelt ist bewusst entsättigt gestaltet. Spielelemente und wichtige Informationen heben sich mit klaren Signalfarben ab. Jede Kategorie hat ihre eigene Farblogik:

• Energie
• Verbindungselemente
• Funktionsgebäude
• Hinweise
• Interface-Elemente

Das Farbsystem wurde an das Branding der Ausstellung "Materialwelten" angepasst. So entsteht eine visuelle Verbindung zwischen Spiel und Ausstellungsraum. Gleichzeitig hilft die klare Farbstruktur dabei, Informationen schneller zu erfassen.

Panels und Progress Bars – Fortschritt sichtbar machen

Panels zeigen an: 

• Komponenten Infrastruktur
• Komponenten Kabel
• Materialverbrauchsanzeige

Zusätzlich gibt es ein Pop-up mit den Spielregeln zu Kabelverbindungen. Ein einblendbares Info-Panel erklärt alle Elemente, die im jeweiligen Level vorkommen. Dort können Spieler*innen:

• Spielregeln nachlesen
• Dialoge wiederholen
• Hilfetexte ansehen
• Videos erneut abspielen

Gerade für jüngere Spieler*innen sorgt diese klare Struktur für Sicherheit und Orientierung.

Feedback, das wirkt


Emojis, Ausrufezeichen und Sterne sind einfache, aber wirkungsvolle Werkzeuge.

• Lachende oder traurige Gesichter zeigen sofort, ob eine Entscheidung nachhaltig war.
• Gelbe Ausrufezeichen markieren fehlende Verbindungen.
• Das Sterne-System (1–3 Sterne) motiviert dazu, effizient zu bauen.

So wird abstraktes Ressourcenmanagement emotional verständlich.

Kabel als Schrift – Das WebLab-Logo

Für den Titel „WebLab“ wurde ein eigener Display-Font entwickelt. Die Buchstaben leiten sich direkt aus den grafischen Kabel-Elementen ab.

Das Logo ist damit nicht nur ein Schriftzug, sondern Teil des Spiels selbst. Branding und Gameplay greifen ineinander und stärken die Wiedererkennbarkeit des Projekts.

Verbindung zur Ausstellung

Die Icons und Materialdaten stammen aus der Ausstellung Materialwelten.
So entsteht ein durchgängiger visueller Code zwischen Spiel und Museum.

Was in der Ausstellung als reales Material gezeigt wird, taucht im Spiel als Infrastruktur-Komponente wieder auf.

Fazit

Die Grafik hatte das Ziel zu einer klaren visuellen Hierarchie und einem flüssigen Spielfluss zu führen. WebLab zeigt:

Gutes Design macht komplexe Technik verständlich. Und manchmal braucht es starke Farben, klare Formen und einfache Symbole, um das Unsichtbare sichtbar zu machen.