Kompendium der Design-Grundsätze
Eine strukturierte Übersicht von der Funktion bis zur Emotion
Eine strukturierte Übersicht von der Funktion bis zur Emotion
1. Fundament & Funktion (Die Basis)
Das Design muss einen Zweck erfüllen und ehrlich in seiner Aussage sein.
Nr. | Grundsatz | Quelle | Jahr | Beschreibung | Beispiel 1 | Beispiel 2 | Beispiel 3 |
1.1 | Form follows Function | 1896 | Ästhetik dient dem Nutzen. | Ergonomischer Bürostuhl | Schlichte Teekanne | Werkzeuggriff | |
1.2 | Nutzwert (Utility) | ~25 v.Chr. | Löst ein echtes Problem. | Taschenrechner-App | Landkarte | Wasserflasche | |
1.3 | Langlebigkeit | 1970er | Überdauert Trends. | Leica Kamera | Rolex Submariner | Chemex Kaffeebereiter | |
1.4 | Ehrlichkeit | 1970er | Keine falschen Versprechen. | Sichtbare Schrauben | Echtes Holzfurnier | Transparente Gehäuse | |
1.5 | Minimalismus | 1947 | Weniger ist mehr. | Google Suche | Apple Pencil | MUJI Schreibwaren | |
1.6 | Nachhaltigkeit | 1971 | Ressourcenschonend. | Fairphone | Recycling-Papier | Modulare Möbel |
2. Wahrnehmung & Psychologie (Gestaltgesetze)
Wie das menschliche Gehirn visuelle Reize filtert und ordnet.
Nr. | Grundsatz | Quelle | Jahr | Beschreibung | Beispiel 1 | Beispiel 2 | Beispiel 3 |
2.1 | Gesetz der Nähe | 1923 | Räumliche Zusammengehörigkeit. | Menügruppen oben rechts | Formular-Label/Feld | Toolbar-Cluster | |
2.2 | Gesetz der Ähnlichkeit | 1923 | Gleiche Optik = Gruppe. | Alle Links in Blau | Navigations-Icons | Produktkacheln | |
2.3 | Prägnanz | 1920er | Einfache Formen bevorzugt. | Nike Swoosh | Apple Logo | Stoppschild (Achteck) | |
2.4 | Figur-Grund-Trennung | 1915 | Fokus vs. Hintergrund. | Modal-Fenster (Pop-up) | Text auf Bild (Overlay) | Schattenwurf bei Buttons | |
2.5 | Hick’s Law | 1952 | Weniger Auswahl = schneller. | Apple TV Fernbedienung | "One-Click"-Kauf | Landingpage mit 1 Call-to-Action | |
2.6 | Von-Restorff-Effekt | 1933 | Auffälliges wird gemerkt. | Farbiger "Kaufen"-Button | Markierter Textmarker-Satz | Badge "Neu" an Produkten |
3. Layout & Struktur
Die architektonische Ordnung der Information auf der Fläche.
Nr. | Grundsatz | Quelle | Jahr | Beschreibung | Beispiel 1 | Beispiel 2 | Beispiel 3 |
3.1 | Visuelle Hierarchie | Bauhaus | 1920er | Führung des Auges. | Große H1 Überschrift | Fettschrift für Key-Facts | Primärfarbe für Hauptbutton |
3.2 | Grid-Systeme | Müller-Brockmann | 1961 | Mathematische Ordnung. | 12-Spalten Web-Raster | Zeitungsspalten | Instagram Feed Grid |
3.3 | Weißraum | Jan Tschichold | 1928 | Raum für Fokus. | Apple Website | Luxusmagazin-Layout | Museale Wandpräsentation |
3.4 | Goldener Schnitt | Euklid | ~300vC | Harmonische Proportion. | Griechischer Parthenon | Twitter Logo Kreise | Visitenkarten-Format |
3.5 | Drittel-Regel | J. T. Smith | 1797 | Dynamik abseits Mitte. | Horizontlinie Foto | Portrait-Fokuspunkt | Film-Framing (Interview) |
3.6 | Lesemuster | Jakob Nielsen | 2006 | F- und Z-Scanning. | Logo oben links | Headline oben mittig | Kontakt unten rechts |
(Jeweils erstellt mit KI-Unterstützung durch Google.Gemini)
Zuletzt bearbeitet:
