Technische Systemgrafiken für Websites planen und zugänglich erklären

Vor dem Zeichnen sollte ein Satz festhalten, was Leser nach der Grafik besser verstehen sollen. Eine Systemgrenze, ein Datenfluss und ein Betriebszustand sind unterschiedliche Fragen. Werden sie vermischt, wächst die Komplexität schneller als der Erkenntnisgewinn.

Eine fokussierte Grafik kann später Teil einer Serie werden. Übersicht und Vertiefung verwenden dieselbe visuelle Grammatik, beantworten aber jeweils nur eine Aufgabe. So bleibt die Website scanbar und die technische Tiefe verfügbar.

Formen, Linien, Punkte und Flächen brauchen stabile Bedeutungen. Ein Modul sollte nicht auf einer Seite eine Komponente und auf einer anderen einen Prozessschritt darstellen. Labels müssen verständlich sein und dürfen sich nicht nur auf interne Abkürzungen verlassen.

Farbe unterstützt Hierarchie, trägt aber keine Information allein. Kontrast, Muster, Position und Text ergänzen sie. Bewegung kann einen Ablauf verdeutlichen, darf jedoch keine Inhalte verstecken und muss bei reduzierter Bewegung vollständig entbehrlich sein.

Ein kurzer Alt-Text benennt Zweck und Kernaussage einer Grafik. Komplexe Beziehungen gehören zusätzlich in den sichtbaren Seitentext, weil ein einzelnes Alt-Attribut kein vollständiges Diagramm ersetzen kann. Dekorative Ebenen erhalten einen leeren Alt-Text und werden von assistiven Technologien ignoriert.

Die VORQON-Visuals trennen diese Rollen. Bedeutungstragende SVGs besitzen beschreibende Alt-Texte, während Raster und Lichtsignale dekorativ bleiben. Texte befinden sich im HTML und sind unabhängig vom Bild erreichbar.

Eine präzise Grafik kann überzeugender wirken als ihr fachlicher Stand. Reale Websites brauchen deshalb eine Quelle, Version, Verantwortlichkeit und einen Freigabeprozess. Änderungen an Systemen oder Begriffen müssen auch in den Visuals nachvollzogen werden.

VORQON besitzt keine realen Systemdaten. Seine geometrischen Grafiken sind ausdrücklich illustrative Originale. Sie zeigen Gestaltungsmethoden und dürfen nicht als technische Zeichnung, Kompatibilitätsnachweis oder Anlagenzustand gelesen werden.

Auf kleinen Bildschirmen reicht es nicht, ein großes Diagramm zu verkleinern. Prioritäten müssen neu geordnet werden: erst Kernaussage, dann Module, danach Beziehungen und optionale Tiefe. Touch-Ziele, Fokusführung und Lesereihenfolge bestimmen die mobile Verständlichkeit.

Ein alternatives Kartenmodell kann auf Mobilgeräten geeigneter sein als eine dichte Fläche. Entscheidend ist die semantische Parität: Desktop und Mobil dürfen unterschiedliche Kompositionen nutzen, müssen aber dieselbe wesentliche Aussage bereitstellen.