Diese Datei definiert den visuellen Gesamtstil für alle Design-Runs. Sie ist verbindlich und wird zusammen mit dem jeweiligen Briefing an jedes Tool übergeben.
Gesamtstil
Die Seite soll wie ein eigenständiges, preisverdächtiges Interface wirken: sehr reduziert, aber mit starker Typografie und wohlplatzierten Microanimations, damit sie hochwertig und lebendig wirkt.
Grundprinzip: Radikal aufräumen, wenige, starke Elemente, klare Hierarchie. Jede Bewegung und jeder grafische Akzent hat eine Funktion (Feedback, Orientierung, Fokussierung).Farbwelt & Flächen
- Hintergrund: Durchgängig weiß, großzügige Weißräume, damit Typografie und wenige grafische Elemente „atmen" können.
- Text: Reines Schwarz oder sehr dunkles Anthrazit.
- Akzentfarbe: Maximal 1 dezente Akzentfarbe (z.B. Petrol oder warmes Rot) – nur für CTAs, Hover-Zustände und kleine grafische Marker.
- Layout: Viel Negativraum, klare Ränder und großzügige Innenabstände. Sektionen wirken wie „Plakate" untereinander, nicht wie klassische Template-Blöcke.
Typografie
Keine Serifen. Moderne Sans-Serif-Kombination:
Headline-Font
Geometrisch oder grotesk, leicht „charaktervoll" (z.B. eng laufende Versalien, leicht kondensiert). Große Schriftgrade, teilweise Zeilenumbrüche, die wie Plakattypografie funktionieren.
Fließtext-Font
Ruhige, sehr gut lesbare Sans-Serif mit klarer Strichführung und ausreichend x-Höhe für mobile Lesbarkeit.
Einsatz
- Wenige Schriftschnitte (z.B. Regular, Medium, Bold).
- Deutliche Kontraste zwischen Headline, Subheadline, Body und Meta-Infos (Label, Kleinsttext).
Stilmittel
- Übergroße, teils zweizeilige Headlines, die den Screen dominieren.
- Teilweise „gebrochene" Zeilen (z.B. ein Wort sehr groß, der Rest in kleinerem Grad in der nächsten Zeile).
- Kombination von Versalien (Sections-Labels) mit gemischter Schreibweise im Body, um Struktur und Eigenständigkeit zu erzeugen.
Layout & Raster
Grid
12-Spalten-Grid auf Desktop, breite Margins links/rechts. Inhalte selten full-width; bewusst unterschiedlich breite Spalten-Kombinationen, um das Template-Gefühl zu brechen.
Sektionen
- Hero: Starke Typo-Fläche mit einer klaren Hauptheadline links und kompaktem Copy + CTA rechts oder darunter.
- Feature-Abschnitte: Horizontale Bänder mit unterschiedlicher Höhe, teils zweispaltig (Text / minimalistisches Icon oder Zahl), teils einspaltig über die Breite.
- Kein „Card-Landingpage-Einheitsbrei". Stattdessen: variierende Blockhöhen, bewusste Leerflächen und vereinzelt asymmetrische Anordnungen.
Navigation
Sticky Top-Nav, sehr schlank, Logo typografisch, rechts ein klarer CTA-Button. Beim Scrollen minimal schrumpfende Höhe oder subtiler Schatten als Feedback.
Microanimations & Interaktionen
Philosophie: Microinteractions nur dort, wo sie Orientierung, Feedback oder Fokus geben – keine verspielt-langsamen Effekte.Hover-Zustände
Feine Unterstreichung von links nach rechts, leichte Farb- oder Hintergrundänderung, aber ohne harte Bewegungen.
Scroll-Entrys
Sehr dezente Fade/Slide-Ins (kurz, mit geringer Distanz), um den Lesefluss zu unterstützen, nicht zu inszenieren.
CTA-Buttons
Leichter Scale-Effekt (z.B. 1.02) und Schatten beim Hover, Fokus-Styling für Tastaturbedienung.
Formulare
Labels oder Placeholder verschieben sich smooth nach oben beim Fokus, kleine farbige Linie unter dem aktiven Feld.
Signature-Effekt (optional)
z.B. feine Underline unter „Stimme. Präsenz. Wirkung.", die beim Page-Load elegant ins Bild „gezeichnet" wird – kurz, snappy, nicht loopend.
Bild- und Grafikeinsatz
Primär typografisch und grafisch. Bilder können ergänzt, aber nicht als Hauptgestaltungsmittel geplant werden.
Statt vieler Fotos
- Einfache Linien, Kreise oder Balken als grafische Marker, die Text betonen oder Sektionen trennen.
- Große, typografische Zahlen für Leistungsbereiche („01 Stimmtraining", „02 Präsentation", „03 Keynotes").
Wenn Bilder/Video eingesetzt werden
Eher monochrome oder entsättigte Motive, damit sie die Klarheit der Seite nicht stören. Möglichst in klaren Rahmen oder als zurückhaltende, großflächige, aber helle Hintergründe.
Mobile-Design & Responsiveness
- Mobile zuerst konsequent mitdenken: Layouts stapeln sich vertikal, aber die plakative Typografie bleibt erhalten (z.B. Headlines, die fast die gesamte Breite einnehmen, mit großzügigen Abständen).
- Navigation: Burger-Menü mit Fullscreen-Overlay oder Slide-in-Panel, darin große, leicht klickbare Links und ein prominenter CTA („Erstgespräch buchen").
- Animations mobil zurückhaltender: Kurze, performante Transitions (GPU-freundlich, z.B. transform/opacity), keine langen Parallax- oder Scroll-JS-Effekte, um Core Web Vitals und Akku zu schonen.
Performance & technische SEO
Performance
- Schlanke Typo-Integration (z.B. variable Fonts oder wenige Schnitte,
font-display: swap). - Minimierung externer Skripte.
- Keine schweren Video-Heroes, nur leichtgewichtige SVGs und optimierte Bilder (WebP, Komprimierung).
- Animations nur via CSS / transform / opacity, so kurz wie möglich (200–300ms), um LCP, FID und CLS sauber zu halten.
Struktur & SEO
- Saubere semantische Überschriften-Hierarchie (ein H1, klare H2/H3-Struktur), logische Section-Elemente.
- Klare interne Verlinkung zu Kernseiten („Stimmtraining", „Präsentation", „Keynotes", „Über mich", „Kontakt").
- Mobile-first, Core Web Vitals im grünen Bereich, keine kritischen Layout-Shifts durch nachträglich ladende Fonts oder Medien.
- Prägnante, keyword-relevante Überschriften ohne Keyword-Stuffing – Fokus auf Lesbarkeit und Nutzerintention.
Anti-Template-Charakter
Kein typischer „Hero-Bild + Drei-Icon-Boxen + Testimonials-Karussell"-Aufbau. Stattdessen:
- Individuell gestalteter Hero mit starker Typo-Botschaft.
- Abwechselnde Sektionen (breit/schmal, links/rechts, ein-/zweispaltig).
- Einzelne, gut gesetzte „Signature"-Elemente (z.B. Linien-System, markante Section-Labels, plakative Zahlen).
- Navigation und Footer reduziert, klar und „ruhig", ohne Overload an Links und Badges.