# Skeuomorphismus

Auch bekannt als: skeuomorphes Design, realistisches UI, iOS-6-Stil, Leder-und-Leinen-UI, Skeuomorph-Revival  
Ära: 2007-2013 (iPhone bis iOS 6); erneutes Interesse ab 2023  
Seite: https://designforai.dev/de/style/skeuomorphism

## Merkmale

- Interfaces imitieren physische Materialien: Leder, Leinen, gebürstetes Metall, Holz, Glas, Papier
- realistische Beleuchtung: Verläufe, die ein Licht von oben modellieren, Glanzlichter und Drop-Shadows
- genähte Ränder, geprägter Text, abgeschrägte Buttons, Knöpfe und Toggles, die mechanisch aussehen
- Texturen über sich wiederholende Bilder oder SVG-Rauschen; nichts ist flach
- Objekte verhalten sich physisch: Seiten rollen sich, Schalter gleiten, Regler drehen sich
- starke Tiefenordnung mit mehreren Schattenebenen
- warme, haptische Farben: Hellbraun, Dunkelbraun, Stahlgrau, Filzgrün

Palette: #3b2a1e Lederbraun, #d9c8a9 Naht, #b8b8b8 gebürstetes Metall, #f4efe4 Papier, #1f1f1f Text, #2f6b3a Filzgrün

Schrift: Helvetica-artig (Arimo, Work Sans) für UI, Marker-Felt-Stil ist kommerziell; nutze Lora oder Georgia für "Papier"-Inhalte; Größen 15-17px UI, 20px Papier; Text oft geprägt mit einem 1px weißen text-shadow darunter

## Do

- modelliere eine Lichtquelle oben links und halte jeden Verlauf, jedes Glanzlicht und jeden Schatten damit konsistent
- nutze Texturen aus SVG-Rauschen oder kleinen kachelbaren Bildern; jede unter 20KB
- lass Bedienelemente wie ihr physisches Gegenstück aussehen (ein echter Toggle, ein echter Drehregler) und animiere sie physisch

## Don't

- misch keine Materialmetaphern auf einem Panel; Leder-Nav mit Metallbuttons ist okay, Lederbuttons auf Metall nicht
- nutze keine flachen Icons; Icons brauchen dieselbe Beleuchtung wie die Oberflächen
- nutze es nicht seitenweit für Leseinhalte; reserviere es für Controls und Chrome, halte Text auf schlichtem Papier

Bekannt dafür: iOS 6 (Notizen, Game Center, Freunde suchen), Apple Podcasts 2012, Things 2, GarageBand

## CSS-Seed

```css
:root{--bg:#3b2a1e; --paper:#f4efe4; --fg:#1f1f1f; --metal:linear-gradient(#e6e6e6,#a8a8a8); --stitch:#d9c8a9; --radius:10px; --shadow:0 2px 4px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.4); --font:'Work Sans',sans-serif}
```

## Prompt

Baue die Seite im skeuomorphen Stil. Nav und Footer sind dunkles Leder: Hintergrund #3b2a1e mit einer SVG-Rauschtextur (feTurbulence baseFrequency 0.8, opacity 0.15), einer gestrichelten 1px #d9c8a9 Nahtlinie 6px vom Rand eingerückt und inset 0 1px 0 rgba(255,255,255,0.15) als oberes Glanzlicht. Inhaltspanels sind Papier #f4efe4 mit einer schwachen horizontalen Linientextur und box-shadow 0 3px 8px rgba(0,0,0,0.45). Buttons sind gebürstetes Metall: linear-gradient(#ececec,#a8a8a8), 1px Rand #6b6b6b, border-radius 10px, inset 0 1px 0 rgba(255,255,255,0.7), Text #1f1f1f geprägt mit text-shadow 0 1px 0 rgba(255,255,255,0.6); der aktive Zustand kippt auf inset-Schatten. Toggles sehen aus wie echte Schalter mit gleitendem Knopf (200ms ease-out). Schrift Work Sans bei 16px für UI, Lora bei 19px für Papierinhalte. Eine Lichtquelle oben links in jedem Verlauf. Keine flachen Icons; Icons bekommen eine Verlaufsfüllung und ein 1px Glanzlicht unten.