Liste • Designprinzipien

01. Affordanz (Affordance)
Gestaltungselemente signalisieren ihre Funktion durch ihr Aussehen.
Beispiele: Ein hervorgehobener Button lädt zum Klicken ein; eine Türklinke deutet auf „Ziehen“ oder „Drücken“ hin.

02. Ähnlichkeit (Similarity)
Visuell ähnliche Elemente (Farbe, Form, Textur) werden als zusammengehörig wahrgenommen.
Beispiele: Buttons derselben Farbe gehören zur gleichen Kategorie; Icons mit einheitlichem Stil in einer App.

03. Ausgewogenheit (Balance)
Harmonische Verteilung von Elementen durch Symmetrie oder Asymmetrie.
Beispiele: Symmetrisches Logo-Design; asymmetrische Bild-Text-Anordnung in einem Magazinlayout.

04. Betonung (Emphasis)
Hervorhebung eines zentralen Elements, um Aufmerksamkeit zu lenken.
Beispiele: Fett gedruckte Überschrift; leuchtende „Jetzt kaufen“-Schaltfläche auf einer Website.

05. Dynamik
Bewegung und Spannung in der Komposition durch Linien oder Anordnung.
Beispiele: Diagonale Linien in einem Poster; Parallax-Effekt auf einer Webseite.

06. Einheit (Unity)
Zusammenhalt aller Elemente für ein harmonisches Gesamtbild.
Beispiele: Corporate Design mit einheitlichen Farben und Schriften; konsistente Icons in einer App.

07. Emotionale Resonanz (Emotional Design)
Gestaltung, die gezielt Gefühle anspricht (z. B. Vertrauen, Freude).
Beispiele: Warme Farben auf einer Babyprodukt-Website; dramatische Typografie in einem Filmplakat.

08. Fehlervermeidung (Error Prevention)
Gestaltung, die Nutzungsfehler minimiert (z. B. durch klare Hinweise).
Beispiele: Bestätigungsdialog vor Löschen einer Datei; farbliche Markierung falsch ausgefüllter Formularfelder.

09. Figur-Grund-Beziehung (Figure-Ground)
Klare Trennung zwischen Vordergrund (Figur) und Hintergrund.
Beispiele: Weißer Text auf dunklem Hintergrund; Logo mit negativem Raum (wie der FedEx-Pfeil).

10. Flexibilität (Flexibility)
Anpassungsfähigkeit an verschiedene Nutzungskontexte (z. B. responsive Design).
Beispiele: Website, die auf Desktop und Mobilgeräten funktioniert; modulare Möbel.

11. Fokus
Lenkung der Aufmerksamkeit auf ein Hauptelement.
Beispiele: Spotlight-Effekt auf einem Produktbild; unscharfer Hintergrund in der Fotografie.

12. Fortsetzung (Continuation)
Das Auge folgt natürlichen Linien oder Flussrichtungen.
Beispiele: Pfeile, die den Blick zur CTA führen; gewellte Linien in einem Infografik-Diagramm.

13. Geschlossenheit (Closure)
Das Gehirn ergänzt fehlende Teile zu geschlossenen Formen.
Beispiele: Gestrichelte Linien, die ein Dreieck andeuten; das WWF-Panda-Logo mit Lücken.

14. Gesetz der Erfahrung (Past Experience)
Nutzung bekannter visueller Konventionen für intuitive Nutzung.
Beispiele: Hamburger-Menü-Icon für Mobilnavigation; Diskettensymbol für „Speichern“.

15. Gesetz der gemeinsamen Region (Common Region)
Elemente in derselben abgegrenzten Fläche wirken zusammengehörig.
Beispiele: Karten in einem UI-Design mit farbigem Hintergrund; Gruppen in einer Infografik.

16. Gesetz der Nähe (Proximity)
Nahe Elemente werden als zusammengehörig wahrgenommen.
Beispiele: Bild und Beschreibungstext in geringem Abstand; Menüpunkte in einer Navigationsleiste.

17. Gesetz der verbundenen Elemente (Connectedness)
Verbundene Elemente (z. B. durch Linien) werden als Einheit gesehen.
Beispiele: Flowchart mit verbundenen Pfeilen; vernetzte Punkte in einem Mindmap.

18. Harmonie
Angenehme, stimmige Anordnung von Elementen.
Beispiele: Farbpalette mit analogen Farben; runde Formen in einem Logo-Design.

19. Interaktion
Beziehung zwischen Elementen, die auf Aktionen reagieren.
Beispiele: Hover-Effekt bei Buttons; Scroll-Animationen auf einer Website.

20. Juxtaposition
Gegenüberstellung von Elementen für Wirkungsverstärkung.
Beispiele: Schwarz-weiß vs. Farbe in einem Plakat; alt und neu in einem Architekturfoto.

21. Klarheit (Clarity)
Verständliche und eindeutige Gestaltung.
Beispiele: Piktogramme an Flughäfen; einfache Bedienungsanleitung mit Illustrationen.

22. Konsistenz (Consistency)
Einheitliche Gestaltung für Wiedererkennung und Nutzerfreundlichkeit.
Beispiele: Gleiche Schriftart in allen Headern; durchgängige Icon-Styles in einer App.

23. Kontrast
Gegensätze (Farbe, Größe, Form) für Hervorhebung oder Lesbarkeit.
Beispiele: Schwarzer Text auf weißem Hintergrund; großer Titel mit kleinem Fließtext.

24. Lesbarkeit (Readability)
Gute Erkennbarkeit von Text (v. a. in Typografie).
Beispiele: Hoher Kontrast zwischen Text und Hintergrund; ausreichender Zeilenabstand.

25. Maßstab (Scale)
Größenverhältnisse der Elemente zur Betonung oder Hierarchie.
Beispiele: Große Überschrift im Vergleich zum Body-Text; Miniaturansicht von Produkten.

26. Minimalismus (Minimalism)
Streng reduzierter Stil mit Fokus auf Funktionalität.
Beispiele: Apple-Produktdesign; Google-Homepage mit leerem Hintergrund.

27. Nähe & Distanz
Räumliche Anordnung zeigt Beziehungen zwischen Elementen.
Beispiele: Abstand zwischen Absätzen für bessere Lesbarkeit; Gruppenbildung in Galerien.

28. Narrativität (Storytelling)
Gestaltung, die eine Geschichte oder Abfolge vermittelt.
Beispiele: Comic-Strips; Schritt-für-Schritt-Anleitung mit Bildern.

29. Ordnung (Hierarchy)
Strukturierte Anordnung nach Wichtigkeit (visuelle Hierarchie).
Beispiele: Größe und Farbe von Überschriften; Platzierung des Call-to-Action-Buttons.

30. Parallaxe (Parallax)
Räumliche Tiefenwirkung durch Bewegungseffekte (z. B. im Webdesign).
Beispiele: Hintergrund bewegt sich langsamer als Vordergrund; Scroll-Animationen.

31. Proportion
Passende Größenverhältnisse für ästhetische Balance.
Beispiele: Goldener Schnitt in der Fotografie; harmonische Aufteilung einer Webseite.

32. Qualität (Craftsmanship)
Sorgfältige Ausführung und Detailtreue.
Beispiele: Hochwertiges Druckmaterial; präzise ausgerichtete UI-Elemente.

33. Redundanz (Redundancy)
Wichtige Informationen mehrfach oder auf unterschiedliche Weise darstellen.
Beispiele: Icon + Textlabel bei Buttons; mündliche und schriftliche Anweisungen.

34. Rhythmus
Wiederholung und Abfolge für visuelle Dynamik.
Beispiele: Gleichmäßige Abstände in einer Galerie; wiederkehrende Farbakzente.

35. Serifen vs. serifenlos (Serif vs. Sans-Serif)
Typografische Wahl für Stil (traditionell/modern) und Lesbarkeit.
Beispiele: Serifenschriften in Büchern; serifenlose Schrift für digitale Displays.

36. Sichtbarkeit (Visibility)
Wichtige Elemente sollten leicht auffindbar sein.
Beispiele: Helle „Notaus“-Schalter; hervorgehobene Suchleiste.

37. Symmetrie & Asymmetrie
Gleichgewicht (Symmetrie) oder gezielte Ungleichheit (Asymmetrie).
Beispiele: Symmetrisches Logo (McDonald’s); asymmetrisches Webdesign mit Großbild.

38. Transparenz
Durchscheinende oder überlagernde Effekte für Tiefe oder Verbindung.
Beispiele: Glas-Morphism-UI; überlagerte Textfelder auf Bildern.

39. Tiefe (Depth)
Räumliche Wirkung durch Perspektive, Schatten oder Überlagerung.
Beispiele: Drop-Shadows bei Buttons; 3D-Effekte in Illustrationen.

40. Unterbrechung (Disruption)
Gezielte Störung des Layouts für Aufmerksamkeit.
Beispiele: Plötzlicher Farbwechsel in einer Anzeige; ungewöhnliche Platzierung eines Elements.

41. Vereinfachung (Simplicity)
Reduktion auf das Wesentliche für bessere Nutzerführung.
Beispiele: Flaches Design; One-Page-Website.

42. Weißraum (White Space / Negative Space)
Bewusste Leerflächen zur Strukturierung und Entlastung.
Beispiele: Luxusmarken-Website mit viel Freiraum; klare Abstände zwischen Absätzen.

43. Wiederholung (Repetition)
Schaffung von Mustern und Konsistenz durch Wiederholung.
Beispiele: Hintergrundmuster; einheitliche Abstände in einem Grid-Layout.

44. X-Achse (Horizontale)
Grundlage für räumliche Anordnung entlang der Waagerechten.
Beispiele: Horizontale Navigationsleiste; untereinander angeordnete Bilder.

45. Y-Achse (Vertikale)
Strukturierung entlang der Senkrechten für Hierarchie.
Beispiele: Vertikales Menü; Scroll-Layout auf Webseiten.

46. Zentrierung
Ausrichtung von Elementen auf einen Mittelpunkt.
Beispiele: Zentral platzierter Logo-Titel; symmetrische Galerie.