Piktogramme – kurz & klar erklärt

Was sind Piktogramme?

Ein Piktogramm ist ein vereinfachtes, meist einfarbiges Bildzeichen, das Informationen ohne Worte vermittelt – schnell, eindeutig, international verständlich (z. B. WC, WLAN, Notausgang).

Wozu braucht man sie?

Orientierung & Leitsysteme (Schule, Bahnhof, Messe)
User Interfaces (App-Icons, Buttons, Status)
Verpackung & Produktkommunikation
Infografiken, Anleitungen, Sicherheitshinweise

Merkmale guter Piktogramme

Eindeutig: Ein Motiv, eine Botschaft – keine Doppeldeutigkeiten.
Reduziert: Nur die notwendigsten Formen; Details weglassen.
Konsistent: Gleiche Strichstärken, Eckenradien, Perspektive im ganzen Set.
Skalierbar: Funktioniert als 16–24 px Icon und als Plakat.
Kontrastreich: Klarer Hell-Dunkel-Kontrast; auch einfarbig lesbar.
Universell: Kulturbedenken prüfen; keine Insider-Symbole.

Gestaltungsprinzipien (How-to)

Grid festlegen: z. B. 24 px oder 32 px Arbeitsfläche; Schutzrand definieren.
Strichstärke & Radius: Feste Werte (z. B. 2 px Linien, 2–4 px Eckenradius) konsequent nutzen.
Grundformen: Kreis, Rechteck, Dreieck, simple Kurven; optisch ausgleichen (nicht nur mathematisch).
Silhouette zuerst: Negativräume testen (Schwarzfüllung/Outline-Test).
Ausrichtung: Auf dem Grid ausrichten; optische Mitte statt reiner Geometrie.
Varianten prüfen: Filled vs. Outline – eine Set-Regel wählen und durchhalten.
Barrierefreiheit: Mindestgröße, Kontrast, ggf. Textlabel als Zusatz (nicht stattdessen).

Semantik & Kultur

Ikonisch (Bild ähnlich zum Objekt: Messer/Gabel = Essen)
Indexikalisch (Hinweis/Spur: Rauch = Feuer)
Symbolisch (gelerntes Zeichen: Herz = „Like“)

→ Im Zweifel ikonisch + gelernt kombinieren und mit Zielgruppe testen.

Dateiformate & Export

Master: Vektor (SVG, AI, PDF).
Screen: SVG (vorzugsweise), PNG @1x/@2x; klare 1-px-Hinzählung bei 24/32 px Rastern.
Druck: Vektor (SVG/PDF); einfarbig anlegen, ggf. Spot-Color.
Farben: Primär einfarbig planen; Farbakzente nur, wenn das Set es vorsieht.

Typische Fehler

Zu viele Details/Innenlinien → Skalierung bricht.
Uneinheitliche Strichstärken/Ecken → Set wirkt zusammengewürfelt.
Perspektivenmix (isometrisch vs. frontal) → Stilbruch.
„Nur hübsch“, aber nicht lesbar → Funktion vor Form.
Sicherheitssymbole „frei interpretieren“ → Normen checken (offizielle Vorlagen nutzen!).

Workflow in 6 Schritten

Briefing klären: Kontext, Zielgruppe, Einsatzgröße(n), Stil (Filled/Outline).
Recherche: Bestehende Sets anschauen, Konventionen notieren.
Skizzen: 3–5 Varianten pro Motiv – Reduktion üben.
Vektorisieren: Auf Grid, feste Strichstärke/Radius, optische Korrekturen.
Testing: Mini-Size-Test (16–24 px), Kontrast invertieren, 5-Sekunden-Erkennung.
Dokumentation: Stylesheet (Grid, Stroke, Radius, Winkel, Do’s/Don’ts) beilegen.

Mini-Checkliste (Quick-Review)

Erkennbarkeit in 24 px?
Einheitliche Linie/Ecken im Set?
Silhouette klar ohne Innenlinien?
Kontrast stark genug (Hell/Dunkel)?
Kultur/Meaning getestet?
SVG-Master vorhanden?

Übung (30–45 Min.)

Aufgabe: Entwerfe 5 Piktogramme für euer Schul-Leitsystem: Sekretariat, Werkstatt, Bibliothek, Erste Hilfe, WLAN.
Vorgaben: 24 px-Grid, 2 px-Stroke, r = 2 px, Outline-Stil.
Abgabe: SVG-Set + 1-Seiter mit Regeln (Grid, Stroke, Radius, Beispiel-Anwendung).
Test: In 24 px, 48 px, 96 px prüfen; 3 Personen fragen: „Was siehst du?“