#031 Bastelrunde - Design System

André Lademann

The Things Network User

Posted on 13-01-2026

Design System für IoT

Ein Design System für IoT ist kein Dribbble-Spielplatz. Es ist der Versuch, Ordnung in eine Welt zu bringen, in der Bildschirme winzig, Verbindungen wacklig und Nutzer*innen selten geduldig sind. Genau deshalb lohnt sich das Ganze.

1. Ausgangslage

IoT-Oberflächen leben überall und nirgends:

  • winzige Displays an Geräten
  • Mobile Apps
  • Web-Dashboards
  • gelegentlich ein Fernseher oder ein Embedded Browser aus der Steinzeit

Ohne Design System endet das zuverlässig in inkonsistenten Farben, kryptischen Icons und Texten, die niemand lesen kann, der nicht selbst am Code saß.

2. Ziele eines IoT-Design-Systems

Nicht Schönheit um ihrer selbst willen, sondern:

  • Konsistenz über Geräteklassen hinweg
  • Wiederverwendbarkeit statt Copy-Paste-Hölle
  • Robustheit bei schlechter Konnektivität
  • Verständlichkeit auch ohne Handbuch und Schulung

Oder anders gesagt: weniger Support-Tickets, weniger Fluchen.

3. Besondere Herausforderungen bei IoT

Hier wird es unangenehm, aber ehrlich:

  • Unterschiedliche Displaygrößen von „passt auf eine Briefmarke“ bis „Tablet im Schaltschrank“
  • Eingabemethoden: Touch, Tasten, Drehregler, gar nichts
  • Zustände: offline, halb-offline, völlig beleidigt
  • Langlebigkeit: Geräte bleiben Jahre im Feld, dein Design auch

Ein normales Web-Design-System lacht hier nervös und geht rückwärts wieder raus.

4. Bausteine des Design Systems

Visuelle Grundlagen

  • Farben mit klarer Bedeutung (Status > Deko)
  • Typografie mit Fokus auf Lesbarkeit, nicht Trend
  • Kontraste, die auch bei Sonnenlicht noch existieren

Komponenten

  • Statusanzeigen (ok, warn, kritisch, tot)
  • Lade- und Verbindungszustände
  • Formulare mit minimalem Frustfaktor
  • Alerts, die ernst genommen werden

Patterns

  • Geräteeinrichtung und Onboarding
  • Fehler- und Recovery-Flows
  • Update- und Wartungsszenarien

Content-Regeln

  • kurze, eindeutige Texte
  • keine Insider-Begriffe
  • klare Handlungsaufforderungen

5. Technik trifft Design

Ein IoT-Design-System lebt nicht nur in Figma:

  • Design Tokens als Brücke zu Code ️
  • Versionierung, weil Geräte nicht „mal eben“ updaten
  • Dokumentation für Menschen, nicht für Marketing

Wenn Dev und Design getrennte Realitäten pflegen, gewinnt niemand.

6. Ergebnis

Ein gutes IoT-Design-System:

  • skaliert von heute auf morgen
  • überlebt neue Gerätegenerationen
  • macht Produkte wartbarer
  • und respektiert die Zeit der Nutzer*innen

Nicht glamourös. Aber verdammt nützlich.