Beobachten, zuhören, Kontext und Einschränkungen erfassen.
GESTALTUNG ALS SYSTEM
Gutes Design macht Absicht erlebbar.
Dieser Leitfaden verbindet Form, Funktion, Nutzung, Marke und Inklusion. Er hilft dabei, Gestaltung nicht nach Geschmack, sondern anhand nachvollziehbarer Kriterien zu entscheiden.
Design
Wirkung entsteht im Zusammenspiel
01ZweckWelches Problem wird gelöst?
02MenschFür wen gestalten wir?
03FormWas wird wahrgenommen?
04SystemWie bleibt es konsistent?
05WirkungWas verändert sich?
SCHNELLORIENTIERUNG
Die richtige Frage zur richtigen Zeit
Ziele, Prioritäten und Qualitätskriterien gemeinsam festlegen.
Hierarchie, Verhalten, Material und Sprache zusammenführen.
Mit Menschen testen, messen, dokumentieren und verbessern.
02 · Grundlagen
Zehn universelle Designprinzipien
Sie gelten medienübergreifend. Ihre Gewichtung verändert sich – nicht ihre Bedeutung.
Zweck vor Form
Jede Entscheidung muss ein Nutzer-, Geschäfts- oder Wirkungsziel unterstützen.
Klarheit
Wichtiges wird zuerst erkannt; Bedeutung und nächste Handlung sind eindeutig.
Hierarchie
Größe, Position, Kontrast und Abstand ordnen Inhalte nach Relevanz.
Konsistenz
Gleiches sieht gleich aus und verhält sich gleich. Abweichungen sind bewusst.
Affordanz
Form, Beschriftung und Rückmeldung machen Nutzungsmöglichkeiten erkennbar.
Feedback
Das System zeigt sofort, verständlich und angemessen, was passiert ist.
Fehlertoleranz
Fehler werden verhindert, erklärt und möglichst leicht rückgängig gemacht.
Zugänglichkeit
Unterschiedliche Fähigkeiten, Situationen und Hilfsmittel werden mitgedacht.
Angemessenheit
Ton, Ästhetik, Material und Interaktion passen zu Kontext, Kultur und Marke.
Reduktion
Entferne alles, was Verständnis, Nutzung oder gewünschte Wirkung nicht verbessert.
03 · Vorgehen
Designprozess: iterativ statt linear
Frühe Unsicherheit wird durch Evidenz reduziert, spätere Qualität durch wiederholtes Testen.
Entdecken
Kontext, Menschen, Markt, Technologie und Barrieren verstehen.
- Desk Research
- Interviews & Beobachtung
- Stakeholder-Mapping
Definieren
Erkenntnisse verdichten und das relevante Problem präzisieren.
- Jobs & Bedürfnisse
- Problem Statement
- Erfolgskriterien
Entwickeln
Varianten erzeugen, bewerten und schnell erfahrbar machen.
- Ideation
- Prototypen
- Co-Creation
Liefern
Lösung validieren, spezifizieren, realisieren und beobachten.
- Tests & Freigabe
- Umsetzung
- Messung & Lernen
Qualitätstore
Problem-FitRelevanz belegt
Concept-FitLösung verstanden
Experience-FitNutzung gelingt
System-FitSkalierung gesichert
04 · Form & Wahrnehmung
Visuelle Gestaltung
Visuelle Qualität entsteht durch Beziehungen: Element zu Element, Inhalt zu Fläche, Botschaft zu Kontext.
Raster & Raum
- Ein Grundraster schafft Rhythmus und Anschlussfähigkeit.
- Abstände nach wenigen festen Stufen skalieren.
- Weißraum gruppiert, priorisiert und beruhigt.
- Kanten bewusst ausrichten; optisch statt nur mathematisch zentrieren.
Typografie
- Lesbarkeit vor Charakter; möglichst wenige Schriftfamilien.
- Zeilenlänge im Fließtext meist etwa 45–75 Zeichen.
- Ausreichende Zeilenhöhe und erkennbare Überschriftenstufen.
- Versalien sparsam; echte Auszeichnungen statt Unterstreichen.
AaÜberschriftText folgt einer ruhigen Leselinie.
Farbe & Kontrast
- Farbe trägt Bedeutung nie allein.
- Semantische Farben konsistent einsetzen.
- Kontrast für Text, Bedienelemente und Fokus prüfen.
- Paletten für helle, dunkle und gedruckte Medien validieren.
Gestaltgesetze
- Nähe: Zusammengehöriges steht beieinander.
- Ähnlichkeit: Gleiches signalisiert gleiche Funktion.
- Geschlossenheit: Das Auge ergänzt fehlende Teile.
- Kontinuität: Ausrichtung führt Blick und Handlung.
- Figur–Grund: Vordergrund bleibt eindeutig.
Bild & Ikonografie
- Bilder erklären, belegen oder emotionalisieren – nie nur füllen.
- Perspektive, Licht, Ausschnitt und Farbwelt konsistent halten.
- Icons nach Geometrie, Strichstärke und optischem Gewicht harmonisieren.
- Unbekannte Icons immer beschriften.
Komposition
- Ein klarer Fokus pro Fläche.
- Balance kann symmetrisch oder dynamisch sein.
- Wiederholung erzeugt Rhythmus; Variation setzt Akzente.
- Maßstab vermittelt Bedeutung, Nähe und Dringlichkeit.
DENKMODELLE AUS DER PRAXIS
Regeln werden verständlich, wenn sie sichtbar werden.
Die Motive von designstudio denkplatz übersetzen zentrale Gestaltungsfelder in eine konsistente Bildsprache.
05 · Physische Produkte
Produktdesign
Ein gutes Produkt verbindet Gebrauch, Herstellung, Material, Emotion, Sicherheit und Lebenszyklus.
Form followsuse · context · lifecycle
Ästhetik ist kein Abschluss. Sie ist die sicht- und fühlbare Konsequenz aus vielen abgestimmten Entscheidungen.
Gebrauch & Ergonomie
- Anthropometrie und Bewegungsräume
- Greifen, Sehen, Hören und Kraftaufwand
- Erkennbare Bedienlogik und Rückmeldung
- Fehlbedienung, Sicherheit und Reinigung
Material & CMF
- Color, Material, Finish als Gesamtsystem
- Haptik, Temperatur, Klang und Alterung
- Farbechtheit und Chargenstreuung
- Markenpassung und wahrgenommene Qualität
Konstruktion & Fertigung
- Bauteilzahl, Fügung und Toleranzen
- Herstellverfahren früh einbeziehen
- Reparatur, Montage und Demontage
- Kosten, Skalierung und Qualitätsprüfung
Nachhaltigkeit
- Bedarf vermeiden, Nutzungsdauer erhöhen
- Materialmenge und Energie reduzieren
- Reparierbar, modular und kreislauffähig
- Lebenszyklus statt Einzelmerkmal bewerten
Kann das Produkt ohne Erklärung sicher verwendet, gewartet und am Lebensende getrennt werden?
Oberflächen, Attrappen oder Funktionen, die eine falsche Bedienbarkeit oder nicht vorhandene Qualität suggerieren.
06 · Digitale Produkte
Software & Interface Design
Interfaces übersetzen Systemlogik in verständliche Entscheidungen, Handlungen und Rückmeldungen.
Absicht erkennen
Klare Ziele, passende Eingaben, sinnvolle Defaults und erkennbare Grenzen.
Handlung ermöglichen
Eindeutige Bedienelemente, gute Zielgrößen, Tastatur- und Touch-Nutzung.
Folge erklären
Sofortiges Feedback, verständliche Zustände, Fortschritt und Fehlermeldungen.
Kontrolle erhalten
Rückgängig, Abbruch, Wiederaufnahme und sichere Wiederherstellung.
Informationsarchitektur & Navigation
- Struktur folgt mentalen Modellen, nicht der Organisation.
- Standort, mögliche Wege und Konsequenzen bleiben erkennbar.
- Begriffe sind konkret, unterscheidbar und zielorientiert.
- Suche ergänzt, ersetzt aber keine verständliche Architektur.
Responsive Gestaltung
- Inhalt priorisieren statt Desktop nur zu verkleinern.
- Layouts an verfügbarem Raum, Eingabeart und Kontext ausrichten.
- Touch-Ziele großzügig; kritische Aktionen nicht dicht gruppieren.
- Zoom, Textvergrößerung und Geräteausrichtung unterstützen.
Formulare
- Sichtbare Labels, logische Reihenfolge, passende Feldtypen.
- Nur notwendige Daten abfragen und Grund erklären.
- Fehler am Feld konkret benennen und Korrektur anbieten.
- Eingaben erhalten; Formatbeispiele nicht als einzige Hilfe.
Zustände & Motion
- Default, Hover, Fokus, Aktiv, Deaktiviert, Laden, Leer, Erfolg, Fehler.
- Animation erklärt räumliche und kausale Zusammenhänge.
- Bewegung kurz, unterbrechbar und reduzierbar gestalten.
- Keine wichtigen Informationen nur zeitabhängig anzeigen.
07 · Nutzungserlebnis
UX Design & Research
UX ist die Qualität des gesamten Erlebnisses – vor, während und nach der eigentlichen Interaktion.
Nützlich×Nutzbar×Zugänglich×Vertrauenswürdig×Stimmig= Erlebnis
| Fragestellung | Geeignete Methoden | Typisches Ergebnis |
|---|---|---|
| Was brauchen Menschen wirklich? | Kontextinterview, Beobachtung, Tagebuchstudie | Bedürfnisse, Jobs, Barrieren |
| Wie ist das Problem strukturiert? | Journey Map, Service Blueprint, Task Analysis | Zusammenhänge, Brüche, Chancen |
| Wird die Idee verstanden? | Concept Test, Paper Prototype, Card Sorting | Mentale Modelle, Präferenzen |
| Kann die Lösung genutzt werden? | Usability-Test, Cognitive Walkthrough, Accessibility Audit | Probleme, Schweregrad, Ursachen |
| Wirkt sie im Betrieb? | Analytics, Befragung, Support-Analyse, Feldstudie | Verhalten, Ergebnis, Langzeitwirkung |
08 · Marke
Brand Experience
Eine Marke wird nicht durch ihr Erscheinungsbild allein stark, sondern durch wiederholt eingelöste Erwartungen.
Markenkern
Zweck, Haltung, Werte und ein glaubwürdiges Leistungsversprechen.
Identität
Name, Sprache, Zeichen, Farbe, Typografie, Bildwelt, Klang, Bewegung und Materialität.
Verhalten
Produkte, Services, Entscheidungen, Mitarbeitende und Reaktionen in kritischen Momenten.
Erlebnis
Die Summe aller Touchpoints – einschließlich Übergängen, Wartezeiten und Nachbetreuung.
Brand Experience über ZeitVersprechen → Erfahrung → Erinnerung
- EntdeckenRelevanz & Wiedererkennung
- ErwägenOrientierung & Vertrauen
- KaufenSicherheit & Wertigkeit
- NutzenQualität & Eigenständigkeit
- BleibenService & Beziehung
09 · Gedruckte Medien
Printdesign
Print verbindet Informationsdesign mit einem physischen Objekt. Format, Papier und Produktion sind Teil der Aussage.
Nutzung, Falzung, Versand, Lesedistanz und Papierausnutzung gemeinsam planen.
Endformat, Beschnitt, Sicherheitsabstand, Schnittmarken und korrekte Seitenreihenfolge prüfen.
Geeignetes CMYK-Profil, Sonderfarben, Schwarzaufbau, Überdrucken und Proof abstimmen.
Effektive Auflösung am Endformat, Schärfe, Tonwertumfang und Reproduzierbarkeit kontrollieren.
Schriften einbetten, Laufweite und Umbruch prüfen; sehr feine oder kleine Negativschrift vermeiden.
PDF/X-Vorgabe der Druckerei, Papierlaufrichtung, Veredelung, Bindung und Musterfreigabe klären.
Wichtig: Technische Vorgaben immer mit der ausführenden Druckerei abstimmen. Profile, Beschnitt und PDF/X-Variante hängen vom Produktionsprozess ab.
10 · Inklusion
Barrierefreiheit
Barrierefreiheit ist Qualitätsarbeit für unterschiedliche Fähigkeiten, Lebensphasen, Geräte und Situationen.
Informationen sind über mehr als einen Sinn zugänglich.
- Textalternativen
- Untertitel & Transkripte
- Kontrast & Vergrößerung
- Struktur statt nur Optik
Alle Funktionen sind unabhängig von einer bestimmten Eingabe nutzbar.
- Tastaturzugang
- Sichtbarer Fokus
- Ausreichende Zeit
- Große Ziele & keine Fallen
Sprache, Navigation und Verhalten bleiben vorhersehbar.
- Klare Sprache
- Konsistente Muster
- Hilfen bei Eingaben
- Konkrete Fehlermeldungen
Inhalte funktionieren mit Browsern, Geräten und Assistenztechnik.
- Semantischer Aufbau
- Korrekte Namen & Rollen
- Statusmeldungen
- Standardskonformes Markup
Sehen
Hoher Kontrast, skalierbarer Text, Alternativtexte, keine reine Farbcodierung, Zoom und Dark Mode.
Hören
Untertitel, Transkripte, visuelle Hinweise und keine Information ausschließlich über Ton.
Motorik
Tastatur, Sprache und Schalter unterstützen; großzügige Ziele, Abstände und Fehlertoleranz.
Kognition
Klare Sprache, kurze Schritte, erkennbare Struktur, Wiederholung, Pausen und Hilfe im Kontext.
Textkontrast4,5:1WCAG AA für normalen Text
Großer Text3:1ab 24 px oder 18,66 px fett
UI & Grafik3:1relevante Zustände und Komponenten
Kontrastwerte sind Mindestanforderungen. Schriftstärke, Umgebung, Display und Sehvermögen beeinflussen die tatsächliche Lesbarkeit.
11 · Skalierung
Designsystem & Governance
Ein Designsystem ist kein Komponentenarchiv. Es verbindet Entscheidungen, Bausteine, Regeln, Verantwortung und Feedback.
Entscheidungslogik und Qualitätsverständnis
Farbe, Typografie, Raum, Raster, Motion, Sprache, Material
Benannte, medienunabhängige Gestaltungswerte
Wiederverwendbare Elemente mit Verhalten und Zuständen
Bewährte Lösungen für wiederkehrende Aufgaben
Flexible Strukturen für definierte Nutzungssituationen
Ownership
Klare Verantwortliche für Produkt, Design, Code, Content und Accessibility.
Contribution
Transparenter Prozess für Vorschlag, Review, Test, Freigabe und Änderung.
Versionierung
Änderungen, Abhängigkeiten, Migrationen und veraltete Muster dokumentieren.
Messung
Nutzung, Abweichungen, Qualität, Geschwindigkeit und Beitrag zum Outcome beobachten.
12 · Praxistest
Design-Audit in 12 Fragen
Markiere, was im aktuellen Konzept bereits belastbar beantwortet ist. Die Auswahl wird nicht übertragen und beim Neuladen verworfen.
0%
Audit starten
0 von 12 Kriterien geprüft
- Alle Funktionen per Tastatur erreichbar
- Fokus sichtbar und Reihenfolge logisch
- Text auf 200 % vergrößerbar
- Labels und Fehlermeldungen verständlich
- Laden, Leer, Erfolg und Fehler gestaltet
- Mobile und große Viewports geprüft
- Greifräume und Kräfte validiert
- Bedienung ohne Spezialwissen verständlich
- Sicherheitskritische Fehler verhindert
- Materialalterung und Reinigung geprüft
- Montage, Wartung und Reparatur bedacht
- Demontage und Kreislauffähigkeit bewertet
- Endformat und Beschnitt korrekt
- Sicherheitsabstände eingehalten
- Farbprofil und Schwarzaufbau abgestimmt
- Effektive Bildauflösung ausreichend
- Schriften eingebettet und Umbruch geprüft
- Freigabe-PDF oder Proof kontrolliert
- Touchpoint zahlt auf das Versprechen ein
- Ton und Verhalten passen zur Haltung
- Wiedererkennung ohne starre Uniformität
- Übergänge zwischen Kanälen funktionieren
- Kritische Momente markengerecht gelöst
- Wirkung mit Kundenfeedback geprüft
13 · Vertiefung
Standards & Primärquellen
Richtlinien sind Startpunkte. Für Freigaben gelten stets die konkrete Produktkategorie, Region und aktuelle Normfassung.
Web
WCAG 2.2
Internationaler W3C-Standard für barrierefreie Webinhalte.
W3C WAI ↗ SoftwareARIA Practices
Semantik und Interaktionsmuster für zugängliche Web-Oberflächen.
W3C WAI ↗ ICTEN 301 549
Europäische Anforderungen an barrierefreie ICT-Produkte und -Dienste.
ETSI ↗ EUAccessibility Act
EU-Rahmen für die Barrierefreiheit ausgewählter Produkte und Dienste.
EU-Kommission ↗ ProzessISO 9241-210
Grundsätze für menschzentrierte Gestaltung interaktiver Systeme.
ISO ↗ PrüfungWAI Evaluation
Vorgehen, Werkzeuge und Beteiligung von Menschen bei Accessibility-Tests.
W3C WAI ↗Redaktioneller Stand: September 2026 · Dieser Leitfaden ersetzt keine rechtliche, normative oder produktspezifische Prüfung.