# Handgezeichnet / Skizze

Auch bekannt als: Sketchy UI, Doodle-Design, handgezeichnete Website, wackeliges UI, Excalidraw-Stil  
Ära: 2010 (Balsamiq-Wireframes), ab 2020 (Excalidraw, tldraw, Notion-Doodles)  
Seite: https://designforai.dev/de/style/hand-drawn-sketch

## Merkmale

- Linien, die wackeln: SVG-Pfade mit leichter Rauheit, doppelt gezeichnete Ränder
- Handschriften für Überschriften und Labels; eine klare Sans für langen Text
- Marker- oder Bleistifttexturen, Schraffuren statt solider Farbe
- Pfeile, Kreise, Unterstreichungen und Sternchen von Hand um Inhalte gezeichnet
- papierweißer oder hellgrauer Hintergrund, tintenschwarze oder dunkelblaue Linien
- ein paar Markerfarben: Rot, Blau, gelber Textmarker
- Motion: Linien zeichnen sich selbst (stroke-dashoffset), Elemente wackeln leicht bei Hover

Palette: #fffdf7 Papier, #1e1e1e Tinte, #1971c2 Markerblau, #e03131 Markerrot, #ffec99 Textmarker, #868e96 Bleistiftgrau

Schrift: Virgil (Excalidraw-Schrift, frei), Caveat, Patrick Hand, Architects Daughter oder Gochi Hand für Überschriften und Labels bei 24-48px; Nunito oder Karla bei 16-17px für Fließtext

## Do

- zeichne Ränder als Inline-SVG-Rechtecke mit einem Rauheitsfilter (feTurbulence + feDisplacementMap, scale 2-3) oder nutze rough.js-artige Pfade
- nutze Schraffur (diagonaler repeating-linear-gradient bei 45deg, 2px Linien) als Füllung für hervorgehobene Bereiche
- animiere stroke-dashoffset, damit wichtige Linien sich über 600-900ms zeichnen

## Don't

- setze keine Absätze in einer Handschrift
- nutze keine perfekt geraden CSS-Ränder neben skizzenhaften Elementen; das bricht die Illusion
- füge keine Drop-Shadows hinzu; nutze stattdessen einen zweiten versetzten Strich

Bekannt dafür: Excalidraw, tldraw, Balsamiq, Notion-Marketing-Doodles, XKCD

## CSS-Seed

```css
:root{--bg:#fffdf7; --fg:#1e1e1e; --accent:#1971c2; --accent2:#e03131; --highlight:#ffec99; --radius:8px; --stroke:2px; --font:'Nunito',sans-serif; --font-hand:'Caveat',cursive}
```

## Prompt

Baue die Seite im handgezeichneten Skizzenstil. Hintergrund #fffdf7, Tinte #1e1e1e, Markerblau #1971c2, Markerrot #e03131, Textmarker #ffec99, Bleistiftgrau #868e96. Schriften: Caveat 700 für Überschriften bei 48/34/24px und für alle Labels und Buttons, Nunito 400 bei 17px line-height 1.6 für Fließtext. Ränder auf Karten und Buttons sind Inline-SVG-Rechtecke mit 2px Tintenstrich, leicht gerundet (rx 8), durch einen SVG-Filter geschickt (feTurbulence baseFrequency 0.02 plus feDisplacementMap scale 3), damit die Kanten wackeln; zeichne einen zweiten Strich 2px versetzt bei 50 % Opacity für die Bleistift-Doppellinie. Hebe Schlüsselphrasen mit einer handgezeichneten #ffec99 Unterstreichung hervor (SVG-Pfad, 8px dick, leicht uneben). Ergänze handgezeichnete Pfeile und eingekreiste Anmerkungen in #e03131, die auf den Call-to-Action zeigen. Füllungen nutzen 45deg Schraffur (repeating-linear-gradient, 2px #1e1e1e Linien bei 20 % Opacity). Kein box-shadow, keine Verläufe. Motion: Linien zeichnen sich beim Scrollen über 800ms per stroke-dashoffset; Buttons wackeln bei Hover um 1deg.