# #031 Bastelrunde - Design System

> 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, Ve

- Type: Community update
- Community: [The Things Network Leipzig](https://www.thethingsnetwork.org/community/leipzig/)
- Author: André Lademann
- Published: 2026-01-13
- Web page: https://www.thethingsnetwork.org/community/leipzig/post/031-bastelrunde-design-system

## 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.