§ WERKSTATT — DESIGN-PRINZIPIEN WIE WIR BAUEN SECHS PRINZIPIEN

Werkstatt. Wie wir bauen.

Nicht jede Entscheidung muss laut sein. Manche dürfen es. Sechs Prinzipien, ein Akzent, drei Schriften, vier Motion-Primitive — die Werkbank hinter jedem Projekt.

06 PRINZIPIEN · 05 FARB-TOKEN · 03 SCHRIFTEN · 04 MOTION-PRIMITIVE
§ MANIFEST — 06 PRINZIPIEN BAU-REGELN SECHS BEATS

Sechs Bau-Regeln. Kompromisslos.

Die Prinzipien sind nicht alle für alle Situationen. Sie sind Grenzpfähle — wenn wir sie übertreten, gibt es einen Grund. Wenn wir keinen finden, halten wir uns daran.

  1. 01 / 06

    Erst die Geschichte.
    Dann die Pixel.

    Eine Seite ohne klare Geschichte ist Möbeldesign ohne Wohnung. Wir starten mit der Frage, wer was warum sucht — und welche Entscheidung am Ende stehen soll. Layout, Typografie und Motion folgen dieser Antwort, nicht umgekehrt.

  2. 02 / 06

    Eine Farbe reicht.
    Wenn sie sitzt.

    Markenakzente verlieren ihre Energie, sobald sie sich vermehren. #FF3C00 bekommt jede Bühne — alles andere lebt in warmen Neutraltönen. Ein einziger Hit pro Bildschirm ist der Maßstab.

  3. 03 / 06

    Type ist Information,
    nicht Dekoration.

    Schrift trifft Entscheidungen, bevor das Auge anfängt zu lesen. Bricolage Grotesque für Aussagen, DM Sans für Argumentation, JetBrains Mono für die Maschinenebene. Drei Stimmen — keine vierte, kein Schnörkel.

  4. 04 / 06

    Motion erklärt,
    was statisch nicht kann.

    Wir animieren keine Buttons, weil es schick aussieht. Wir animieren, wenn eine Bewegung eine Idee schneller erklärt als ein Satz — Übergang, Hierarchie, Status. Sonst Stille.

  5. 05 / 06

    Kein Muster ohne Grund.
    Kein Grund ohne Muster.

    Wiederholung baut Vertrauen. Wenn die §-Kapitel, die REC-Punkte, die Shutter-Linien immer auf die gleiche Weise auftauchen, lernt das Auge die Sprache der Seite. Brechen wir das Muster, hat das einen Grund — und nur dann.

  6. 06 / 06

    Schnelle Seiten gewinnen.
    Langsame verlieren.

    Ladegeschwindigkeit ist nicht „auch noch wichtig". Sie ist die erste Entscheidung, die ein Besucher trifft. Largest Contentful Paint unter 2,5 Sekunden auf Mobile — sonst war alles andere umsonst.

§ CHROME — VOCABULARY JETBRAINS MONO · 10-12 PX UPPERCASE · 0.18 EM

Chrome ist die Maschinen-Stimme der Seite.

Klein, technisch, immer in Großbuchstaben. Erzählt nicht — registriert. So weiß die Seite, wo sie ist.

REC-MARKER
REC · § 04 — PROJEKTE

Pulsiert. Markiert die aktive Sektion oder das aktive Panel. Pulsschlag-Frequenz: 1,4 s.

SECTION-CHROME
§ 02 — LEISTUNGEN SECHS GEWERKE · EINE HAND

Drei-Spalten-Strip oben in jeder Sektion. Links: §-Kapitel. Mitte: Untertitel. Rechts: Status.

TIMECODE
00:03:42 / 00:08:14

REC-Clock. Zeigt verbrachte vs. geschätzte Lesezeit auf Blog-Artikeln, Roll-Position auf Hero/§04.

KOORDINATEN
N 50.0667° · E 8.5333°

Kelsterbach. Erscheint im Viewfinder-Chrome auf Hero und §04 — Standort als Beweis, nicht als Dekoration.

SHUTTER-LINE

Zwei Pixel hoch, orange, mit Glow. Markiert den Übergang von Chrome zu Inhalt — wie der Auslöser einer Kamera.

FILMSTRIP
CNWSA

Per-Panel-Indikator auf §04. Kapitel-Buchstaben, aktiver Beat in Orange. Nicht klickbar — Lesezeichen, kein Menü.

§ FARBE — TOKEN EIN AKZENT · WARM-DUNKEL 05 TOKEN

Eine Farbe. Wenn sie sitzt.

Warm-dunkel als Bühne. Warm-hell für Aussagen. Ein einziger Akzent — #FF3C00 — und keine Tints. UI-States nutzen Neutraltöne, nicht aufgehellte Akzent-Varianten.

--bg-deep
#0F0B08
Bühne

Warmes Schwarz. Nie #000.

--dark-800
#1A120B
Erhöhte Flächen

Cards, alternierende Sections.

--dark-700
#2A1D12
Linien & Borders

Strukturraster, dezent.

--light-100
#FAF7F2
Aussagen

Warmes Off-White. Nie #FFF.

--accent
#FF3C00
Akzent

Ein einziger Akzent — kein zweiter, keine Tints.

§ TYPE — STACK BRICOLAGE · DM SANS · JETBRAINS MONO 03 STIMMEN

Drei Schriften. Drei Aufgaben.

Display sagt, Body argumentiert, Mono registriert. Keine vierte Schrift, kein Mix-and-Match, keine dekorative Variante. Wenn ein Text wichtig genug ist, hat er bereits eine dieser drei Stimmen.

Display 700 / 800
Bricolage Grotesque
Speed up. Stand out.

Aussage-Schrift. Headlines, Statements, Hero-Skala — überall, wo eine Idee laut werden darf.

Body 400 / 500
DM Sans
Wir bauen Plattformen, die Daten dort landen lassen, wo Entscheidungen fallen.

Argumentations-Schrift. Fließtext, Sub-Copy, alles, was der Leser tatsächlich liest.

Chrome 400 / 500
JetBrains Mono
§ 04 — PROJEKTE · LIVE BEI DACH · 02 / 05

Maschinen-Schrift. Labels, REC-Marker, Koordinaten. 10–12px, Letter-Spacing 0.18em, immer UPPERCASE.

§ MOTION — PRIMITIVES VIER BEWEGUNGEN · KEINE FÜNFTE 04 / 04

Motion erklärt, was statisch nicht kann.

Wir bewegen nicht, um zu beeindrucken. Wir bewegen, wenn eine Geste eine Idee schneller erklärt als ein Satz — und nie länger als nötig. Vier Primitive, jede mit klarer Zuständigkeit.

01 / 04
Shutter

Schwarze Klappe öffnet vertikal — Section-Übergang, hartes „Schnitt"-Gefühl.

Einsatz Zwischen kinematischen Sektionen (§01 → §08).
02 / 04
Slam

Element fliegt hart in seine Endposition, einmaliges Settle-Yoyo, dann Stille.

Einsatz Hero-Headlines, Akzent-Wörter — nie zweimal hintereinander.
03 / 04
Scrub

Bewegung an Scroll-Position gekoppelt; Lenis + GSAP ScrollTrigger mit niedrigem Lag (0.4).

Einsatz Horizontaler Pin (§04 Werk-Karussell), Daten-Diagramme.
04 / 04
Fade

Opacity + leichter Y-Offset, expo.out — der Standard-Reveal für alles, was data-reveal trägt.

Einsatz Karten, Listen, Listenelemente, Standard-Inhalt.

Jede Bewegung respektiert prefers-reduced-motion. Wer Animationen ausschaltet, sieht die statische Variante — gleicher Inhalt, kein Flicker, kein Schnitt.

§ CLOSE — KONTAKT BAU-GESPRÄCH 30 MIN · KOSTENFREI

Wir bauen so. Bauen wir auch deins?

Erstgespräch, 30 Minuten, kostenfrei. Brief → Storyboard → Launch — derselbe Prozess, derselbe Akzent, dieselbe Werkbank.

Projekt starten → oder direkt: info@webweezl.de