Möbel und Objekte aus massivem Holz und gebranntem Ton. Keine Kompromisse bei Material und Handwerk — hergestellt nach Maß, für ein Leben lang.
Werkstatt Holz & Ton macht die schönsten Dinge in Ottensen — aber die Website könnte genauso gut ein Kurskalender-PDF sein. Das Handwerk ist sichtbar im Raum. Online: nicht.
Ein digitaler Auftritt, der zeigt was hier wirklich passiert: Rohholz, Ton, Prozess, Entscheidung. Die Website wird zur Werkstatttür — offen, ehrlich, einladend.
Alles sichtbar gemacht. Kein Verstecken des Prozesses — Schaverspäne, Töpferscheibe, Werkzeugwand gehören ins Bild genauso wie das fertige Objekt.
Holz und Ton als sensorische Erfahrung, nicht nur als Produktkategorie. Herkunft, Textur, Eigenheit jedes Stücks — das sind die eigentlichen Argumente.
Der Kursraum ist Begegnungsort, nicht Dienstleistung. Werkstatt Holz & Ton verbindet Menschen über das gemeinsame Machen — das unterscheidet sie von reinen Shops.
Was wir nicht sind: Kein Massenversand, keine Serienproduktion, kein "Lieferung in 24h". Jedes Stück entsteht in Hamburg, dauert so lange wie es dauert — und ist dafür das genaue Gegenteil von austauschbar.
„Werkstatt Holz & Ton braucht keine Hochglanz-Ästhetik. Wer sein Handwerk wirklich beherrscht, kann es sich leisten, es zu zeigen — unbearbeitet, mit Spänen auf dem Boden."
Organic Minimal zeigt den Werkstoff — nicht versteckt ihn. Viel Weiß, wenig Dekoration, starke Typografie. Das Design gibt dem Produkt Raum zu sprechen.
Viel Weißraum ist kein Fehlen von Inhalt. Er gibt den Objekten Atem — wie ein Museum, das nur 12 Exponate zeigt.
Fraunces Italic ersetzt Schmuckelemente. Kein Icon-Overload, keine Illustrationen — die Schrift ist das visuelle Persönlichkeitsmerkmal.
Grün und Terrakotta sind abgeleitet aus dem tatsächlichen Material, nicht aus einem Trendreport. Sie verschieben sich mit der Holzart.
7:3 und 3:1-Grids statt 50/50. Symmetrie wirkt maschinell — Asymmetrie wirkt handgemacht.
Alle Transitions langsamer als Standard (600ms statt 300ms). Organisches Tempo statt digitaler Effizienz.
Der Holzart-Selektor zeigt, dass Farbe und Charakter variabel sind — genauso wie jedes gefertigte Stück individuell ist.
Das Farbsystem atmet die Materialien selbst: das Waldgrün der Eiche (Akzent) und das Warmbraun des Tons (Terrakotta) sind keine Designentscheidungen — sie sind Abbilder. Der Hintergrund bleibt reines Weiß, damit das Material, nicht das Design, die Hauptrolle spielt. Kein Grau-Noise, kein Off-White-Kitsch.
| Vordergrund | Hintergrund | Ratio | Status |
|---|---|---|---|
| Text #1e1e1c | Weiß #ffffff | 15.5 : 1 | ✓ AAA |
| Grün #3d5a30 | Weiß #ffffff | 6.9 : 1 | ✓ AA |
| Muted #6a6760 | Weiß #ffffff | 5.0 : 1 | ✓ AA |
| Terrakotta #c4643a | Weiß #ffffff | 3.7 : 1 | ⚠ nur ≥24px |
⚠ Terrakotta nur für große Texte (Headlines, Buttons ≥18px). Für Fließtext: Grün oder Text-Dunkel verwenden.
| Grade | clamp() | Familie / Gewicht | Tracking | Verwendung |
|---|---|---|---|---|
| Display | clamp(44px, 7vw, 92px) | Fraunces 700 Italic | −1% | Cover-Headline |
| H1 | clamp(28px, 4vw, 52px) | Fraunces 600 Italic | −0.5% | Seitenüberschriften |
| H2 | clamp(18px, 2.5vw, 26px) | Fraunces 300 Italic | 0 | Sektionsüberschriften |
| Body | clamp(13px, 1.2vw, 15px) | Source Sans 3 300 | 0 | Fließtext |
| Label | 10px (fix) | Source Sans 3 600 | +12% | Kategorien, Preise |
Fraunces Italic ist die einzige Variable-Webschrift, die gleichzeitig nach historischem Buchdruck und handgemachtem Objekt aussieht — nicht kalligrafisch, nicht nostalgisch, aber mit Charakter. Die Optical-Size-Achse (9–144pt) erlaubt minimale Details in kleinen Graden und maximale Geste in Headlines. Source Sans 3 sichert im Lauftext Lesbarkeit ohne den organischen Charakter zu brechen.
Die Beziehung zwischen einem Handwerker und seinem Material ist eine Sprache, die man nicht übersetzt — man lernt sie. Holz reagiert auf Feuchtigkeit, Jahreszeiten, Licht. Ton auf Temperatur und Druck. Wer damit arbeitet, hört nach einer Weile zu reden auf und fängt an zuzuhören.
Jedes Stück, das in der Werkstatt Ottensen entsteht, trägt die Spuren seiner Entstehung. Das ist kein Fehler — es ist das Argument. Ein maschinell produziertes Regal hat keine Geschichte. Das hier schon.
Source Sans 3 · 15px / 13px · 300 · line-height 1.8 / 1.75 · max-width 580px ≈ 70 Zeichen/Zeile
Hände am Hobel, Finger auf der Töpferscheibe, Pinsel beim Glasieren. Das Handwerk soll sichtbar sein — roh, ehrlich, mit Spänen und Tonresten. Kein Styling, keine Handschuhe.
Extreme Nahaufnahmen der Oberflächen: Eichenmaserung, Tonstruktur vor und nach dem Brand, Ölpatina auf Massivholz. Makroschärfe auf 2–5cm Abstand. Natürliches Seitenlicht, kein Blitz.
Esstisch im eingerichteten Raum, Keramikschüssel auf dem Küchentisch, Regal mit Büchern. Echter Wohnkontext, nicht Showroom. Objekte sollen bewohnt wirken, nicht ausgestellt.
Werkzeugwand, Schaverspäne auf dem Boden, Töpferscheibe mit Tonresten, Regal mit unfertigen Stücken. Staub und Licht. Die Werkstatt ist kein Büro — sie soll auch nicht so aussehen.
Werkstatt Holz & Ton lebt vom sensorischen Erlebnis — Rohmaterial, Prozess, fertige Objekte. Empfohlen wird eine Halbtages-Session in der Werkstatt Ottensen (3–4 Std.): Schwerpunkte auf Detailaufnahmen im bestehenden Werkstattlicht sowie atmosphärischen Wohnkontext-Aufnahmen für 2–3 Hauptprodukte. Idealerweise während eines Kursabends für authentische Menschen-Momente.
Mobile-RegelnAsymmetrische Grids (7:3, 3:1) werden auf Mobile zu Single-Column gestapelt. Reihenfolge: Hauptinhalt zuerst, Sidebar/Tags danach. Cover rechts (Stats) erscheint als horizontales Strip unter Cover links. Section-padding reduziert sich auf 40px vertikal. Font-Größen skalieren per clamp() automatisch.
| Kategorie | Element | Dauer / Easing | Begründung |
|---|---|---|---|
| Productive | Nav-Hover Link-Farbe | 200ms ease | UX-Feedback: Orientierung im Menü |
| Productive | Button-Hover Background | 200ms ease | Bestätigt Klick-Bereitschaft |
| Productive | Service-Karte Aufklappen | 400ms cubic-bezier(.4,0,.2,1) | Natürliche Bewegung, nicht mechanisch |
| Productive | Sticky Nav Einblenden | 300ms ease | Kontextueller Übergang nach Cover-Scroll |
| Productive | Material-Button active State | 200ms ease | Bestätigt die Materialauswahl visuell |
| Expressive | Scroll fade-in Sektionen | 600ms / threshold 4% | Schichtweise Offenbarung — wie das Abtragen von Holz |
| Expressive | Cover-Stats Counter | 1100ms / 16ms step | Zahlen als Ergebnis von Arbeit — nicht sofort sichtbar |
| Expressive | Material-Selector Farbwechsel | instant (bewusst) | Materialwechsel ist eine Entscheidung, kein Fließen |
prefers-reduced-motion: Alle Scroll-Animationen und Counter werden deaktiviert. Layout und Farben bleiben vollständig erhalten. Material-Selector funktioniert weiterhin (instant).
„Neues Stück fertig: ein Esstisch aus Walnuss, 220 × 90 cm. Die Maserung auf der Tischplatte ist ein Zufallsfund — so ein Stück sehen wir einmal alle paar Jahre. Wer Interesse hat: am besten direkt schreiben, bevor er weg ist."
→ Du durchgehend. Der Kurskontext und die direkte Werkstatt-Atmosphäre sind per se persönlich. Bei Kursbuchungen, Produktanfragen und Social Media: Du. Ausnahme: Gewerbliche Anfragen (Gastronomie, Hotels, Corporate-Geschenke) können im Kontaktformular die "Sie"-Variante aktivieren — technisch als optionales Select-Feld gelöst.
Markenname immer ausgeschrieben: Werkstatt Holz & Ton. Nicht: WHT, Holz+Ton, HolzTon, "die Werkstatt". Soziale Medien: @werkstatt.holzundton. Kursbeschreibungen in Du-Form, Produkttexte können neutral formuliert sein ("ein Tisch aus Eiche"). Maßangaben immer als "× " mit Leerzeichen: 200 × 90 cm.
„Das hier hat sich gezogen. Sechs Wochen für einen Esstisch — weil die Walnussplatte gewartet hat bis sie bereit war. 220 × 90 cm, Tischbeine aus Roheisen. Wer sich für Walnuss interessiert: schreib uns einfach, wir haben noch Material für zwei weitere Stücke."
Möbel und Keramik nach Maß.