# Design-Briefing markemacht.de ### Übergabedokument für Entwickler & Designer **Projekt:** markemacht.de **Auftraggeber:** ADAMETZ.MEDIA / Kevin Adametz **Status:** Verbindlich **Version:** 1.0 **Zweck:** Vollständige Arbeitsgrundlage für Konzept, Design und Implementierung --- ## 1. Projektrahmen markemacht.de ist keine Agentur-Website, kein SaaS-Auftritt, kein Leistungskatalog. Die Seite ist ein **Denkraum** für Unternehmer und Geschäftsführer im Mittelstand. Sie verkauft keine Services, sondern erzeugt **Einsicht**: Besucher sollen erkennen, dass ihr Kommunikationsproblem in Wahrheit ein Markenproblem ist — und dass Klarheit baubar ist. Die Seite ist Teil eines Drei-Säulen-Systems: - **markemacht.de** — Denkraum und Diagnose (dieses Projekt) - **brandwork.io** — Marken-Infrastruktur (eigenständige Anwendung) - **adametz.media** — persönliche Autorität (eigenständige Seite) Dieses Briefing betrifft ausschließlich **markemacht.de**. --- ## 2. Markenhaltung (kompakt) Drei Kernsätze, die jede Design- und Inhaltsentscheidung bestehen müssen: > Marke ist die Fähigkeit eines Unternehmens, sich selbst eindeutig zu erklären. > Klarheit schlägt Kreativität. Struktur schlägt Maßnahmen. > Wir erklären nicht, warum wir gut sind. Wir erklären, warum das Problem existiert. Die Seite wirkt **ruhig, schwer, präzise**. Sie gefällt nicht — sie führt. --- ## 3. Referenzkorridor Zwei bestätigte Referenzseiten definieren den Zielkorridor. Beide **zusammen** ergeben das Zielbild. Keine einzeln. ### 3.1 pellonium.com — liefert Gewicht und Ruhe Was davon übernommen wird: - Editoriale Sektionsrhythmik mit großzügigen Abständen - Nummerierte Inhaltsblöcke ([01], [02], [03] …) - Dunkle, industrielle Grundanmutung - Klare typografische Hierarchie über die gesamte Seite - Zurückhaltung bei Illustrationen — Inhalt dominiert ### 3.2 anthropic.com — liefert typografische Haltung und Wärme Was davon übernommen wird: - Editoriale Typografie-Führung (Serif + Sans-Kombination) - Mut zu großen, textdominierten Flächen ohne Bildzwang - Souveräne Präsentation komplexer Inhalte ohne Feature-Sprache - Warmer Dunkelton statt technisch-kühlem Schwarz ### 3.3 Was **nicht** übernommen wird Explizit ausgeschlossen — auch wenn auf den Referenzseiten vorhanden: - SaaS-Dashboard-Ästhetik (linear.app, Vercel, Notion) - Produkt-Screenshots mit UI-Elementen - Gradient-Hintergründe, Glow-Effekte, Neon-Akzente - Feature-Grids mit Icon pro Kachel - Testimonials-Karussells - Logo-Leisten („Diese Unternehmen vertrauen uns") --- ## 4. Farbsystem Verbindlich. Keine Abweichung ohne Rücksprache. | Rolle | Hex | Einsatz | |---|---|---| | Primär (Basis) | `#0A0A0A` | Haupt-Hintergrund, dominante Flächen | | Flächen 1 | `#363636` | Sektionsflächen, Karten-Hintergrund | | Flächen 2 | `#474747` | Abgesetzte Blöcke, Trennelemente | | Signal-Primär | `#E8175D` | Akzent, Hervorhebung, Interaktion | | Signal-Sekundär | `#CC527A` | Hover, abgestufte Hervorhebung | | Neutral-Grau | `#A8A7A7` | Fließtext-Sekundär, Meta-Informationen | | Reinweiß | `#FFFFFF` | Primäre Typografie auf dunklem Grund | ### Regeln - Schwarz/Dunkelgrau dominiert die Gesamtfläche (mindestens 80 %) - Signal-Primär (`#E8175D`) maximal 5–10 % Flächenanteil — nur für: Akzentlinien, aktive Zustände, Marken-Signatur, singuläre Hervorhebungen in der Typografie - Keine Farbverläufe. Keine Transparenzen. Keine Schatten mit Farbstich. - Das Magenta ist kein Schmuck. Es ist ein **Schnitt**. Es markiert, wo Klarheit entsteht. --- ## 5. Typografie-System Die Typografie ist das zentrale Führungselement der Seite. Nicht das Bild. ### 5.1 Schriftfamilien | Funktion | Schrift | Fallback | |---|---|---| | Display / Headlines | **Outfit** (geometrische Grotesk) | system-ui, sans-serif | | Editorial / Zitate / Manifest | **Source Serif 4** oder **Instrument Serif** | Georgia, serif | | Fließtext | **Source Sans 3** | system-ui, sans-serif | | Meta / Code / Nummerierung | **JetBrains Mono** | ui-monospace, monospace | Die Serif ist **neu** im System und kommt aus der anthropic-Referenz. Sie wird sparsam eingesetzt: für Manifest-Passagen, Schlüsselzitate, Section-Intros. Sie trägt die Wärme ins System. ### 5.2 Typografische Hierarchie (Empfehlung) - **Hero-Headline:** Outfit, 72–96 px, font-weight 500, line-height 1.05, letter-spacing -0.02em - **Section-Headline:** Outfit, 48–56 px, font-weight 500, line-height 1.1 - **Sub-Headline:** Outfit, 24–28 px, font-weight 400 - **Manifest / Zitat:** Source Serif, 32–40 px, font-weight 400, line-height 1.3, kursiv erlaubt - **Fließtext:** Source Sans, 18 px, line-height 1.6 - **Meta / Section-Nummer:** JetBrains Mono, 13 px, uppercase, letter-spacing 0.08em ### 5.3 Typografische Regeln - Keine Verspieltheit, keine dekorativen Schnitte, keine Ligaturen als Effekt - Kein Wechsel zwischen mehr als drei Schriftgrößen in einer Sektion - Maximale Textbreite im Fließtext: 65 Zeichen pro Zeile - Überschriften dürfen den Bildrand schneiden, aber nie mittig zentriert stehen - Hervorhebungen innerhalb von Text: ausschließlich durch Magenta-Signalfarbe auf einzelnen Worten oder kurzen Phrasen — niemals durch Bold oder Kursiv --- ## 6. Layout-Prinzipien ### 6.1 Rasterlogik - 12-Spalten-Grid, aber **editorial interpretiert**: Inhalte dürfen 6–8 Spalten nutzen, niemals volle Breite bei Fließtext - Asymmetrische Anordnung bevorzugt: Überschriften links, Text rechts — oder umgekehrt - Großzügige vertikale Abstände zwischen Sektionen: mindestens 160 px Desktop, 96 px Mobile - Horizontale Seitenränder: 5–8 % der Viewport-Breite ### 6.2 Nummerierung Jede Hauptsektion trägt eine Nummerierung im Stil von pellonium: `[01]`, `[02]`, `[03]`. - Platzierung: links oben in der Sektion, Monospace-Schrift - Farbe: Neutral-Grau `#A8A7A7` - Wirkung: Ordnung sichtbar machen, Lesefluss strukturieren ### 6.3 Negativraum Negativraum ist Inhalt, nicht Leere. Mindestens 40 % jeder Sektion bleibt unbedruckt. Faustregel: Wenn eine Sektion „voll" wirkt, ist sie falsch. ### 6.4 Responsive - Mobile-First-Denken, aber Desktop-First-Inszenierung - Breakpoints: 640 / 768 / 1024 / 1280 / 1536 - Auf Mobile: Typografie-Hierarchie bleibt intakt, nur Skalierung angepasst - Nummerierungen bleiben auch auf Mobile sichtbar --- ## 7. Seitenarchitektur Die Seite folgt einer fünfteiligen Argumentationskette. Keine Funnel-Logik. Keine „Features / Pricing / About"-Struktur. ### 7.1 Startseite — Die Irritation **Funktion:** Konfrontation mit der Diagnose **Inhaltselemente:** - Hero mit einer einzigen Kernaussage (Beispiel): *„Wenn Sie Ihr Unternehmen nicht erklären können, haben Sie kein Marketingproblem — sondern ein Markenproblem."* - Kein Sub-Headline-Erklärungstext darunter. Die Aussage steht allein. - **Ein** nächster Schritt: Textlink zu „Warum Marke kein Marketingthema ist" (führt zu Sektion 7.2) - Keine CTAs, keine Formulare, keine Logo-Leiste **Keyvisual:** Monolith-Fragment, angeschnitten, nicht mittig ### 7.2 Das Manifest — Die Diagnose **Funktion:** Problem sprachlich präzise benennen **Inhaltselemente:** - Längerer Editorial-Text (Serif), strukturiert in 4–6 nummerierten Abschnitten: - Warum Produkte nicht mehr gewinnen - Warum Vergleichbarkeit entsteht - Warum Marketing scheitert - Warum KI das Problem verschärft - Ton: ruhig, sachlich, nicht missionarisch - Jeder Abschnitt mit Nummerierung und kurzer Section-Headline **Keyvisual:** Monolith-Detail oder Textur-Ausschnitt ### 7.3 Die Methode — Die Einordnung **Funktion:** Warum Brand Engineering notwendig ist **Inhaltselemente:** - Denklogik der Methode in 3–5 Kernsätzen - Keine Prozessgrafiken, keine Infografiken, keine Flowcharts - Einfache typografische Gliederung reicht aus ### 7.4 Das System — Die Lösung **Funktion:** Zeigen, dass die Lösung existiert **Inhaltselemente:** - Kurze Vorstellung der drei Säulen: - Denkrahmen (markemacht.de) - Infrastruktur (brandwork.io) - Autorität (adametz.media) - Pro Säule: 2–3 Sätze, kein Icon, keine Feature-Liste - Kernbotschaft prominent platziert: *„Klarheit lässt sich bauen — wenn man sie ernst nimmt."* ### 7.5 Der nächste Schritt — Die Entscheidung **Funktion:** Einen einzigen logischen Einstieg anbieten **Inhaltselemente:** - Vorstellung des Marken-Klarheits-Audits - Umfang, Dauer, Preisrahmen in klarer Form - **Ein** Kontaktweg (z. B. direkter Link zu Terminvereinbarung oder Formular) - Keine alternativen CTAs, keine Newsletter-Abfrage, keine Whitepaper-Downloads --- ## 8. Keyvisual — Der Monolith ### 8.1 Semantische Bedeutung Der Monolith ist das zentrale Bildmotiv der Seite. Er steht für: Marken-DNA, Regelwerk, Unverrückbarkeit. Er steht **nicht** für: Technologie, KI, Macht, Überlegenheit, Erlösung. ### 8.2 Bildregeln - **Materialität:** Beton, Basalt, mattes Metall, dunkler Stein — nie glänzend, nie futuristisch - **Licht:** hartes, gerichtetes Licht, klare Kanten, keine weichen Verläufe - **Perspektive:** frontal oder leicht orthogonal, Augenhöhe — keine Heldenperspektive - **Sichtbarkeit:** niemals vollständig, immer angeschnitten oder fragmentiert - **Platzierung:** nie mittig, bevorzugt links oder rechts im Raster, viel Negativraum - **Farbe:** dominant Schwarz/Dunkelgrau, Magenta nur als Kantenreflex oder Lichtlinie ### 8.3 Einsatz auf der Seite - Hero-Sektion: reduzierte Hero-Version mit maximalem Negativraum - Manifest-Sektion: Detail-Version (Textur, Kante, Ausschnitt) - Übrige Sektionen: typografisch geführt, kein Bildzwang Umsetzung möglich als: 3D-Rendering (Blender, Cinema4D), Fotografie realer Betonobjekte, oder kuratierte KI-Generierung. Alle drei Wege zulässig, solange die Bildregeln eingehalten werden. --- ## 9. Motion & Interaktion Bewegung dient der Orientierung, nicht der Unterhaltung. ### Erlaubt - Sanfte Scroll-Reveals bei Section-Übergängen (max. 400 ms, ease-out) - Zurückhaltende Hover-States auf Links (Farbwechsel zu Magenta, keine Transformationen) - Cursor-Responsivität bei interaktiven Elementen (subtiler Richtungsbezug) - Dezente Parallax-Tiefe beim Keyvisual (max. 5 % Versatz) ### Nicht erlaubt - Scroll-Hijacking - Mouse-Trail-Effekte - Animierte Gradient-Hintergründe - Auto-Play-Videos - „Magic Cursor"-Spielereien - Zoom-Effekte auf Sektionswechsel - Animierte Zahlen-Counter > Wenn Bewegung erklären muss, warum sie da ist — entfernen. --- ## 10. Visuelle No-Gos Absolut. Keine Ausnahme. - Stockfotos jeglicher Art - Menschen, Gesichter, Teams-in-Interaktion-Bilder - Icon-Gitter als Feature-Darstellung - Farbverläufe - Emojis - „Nebel-Drama" oder filmische Inszenierungen - Neon-Effekte oder Glow - Pastellfarben - Kreisdiagramme, Balkendiagramme, Infografiken - Abgerundete Container mit Schlagschatten - Glassmorphism - Testimonials mit Sprechblasen-Design --- ## 11. Sprachliche Leitplanken (für alle Textplatzhalter) Falls das Design mit Platzhaltertexten oder Lorem-Ipsum gefüllt wird, gelten folgende Regeln: - Kurze Sätze. Direkt. Feststellend. - Keine Fragen als Headlines („Suchen Sie nach …?") - Keine Buzzwords: *innovativ, ganzheitlich, maßgeschneidert, zukunftssicher, revolutionär* - Keine Motivationssprache: *„Gemeinsam zum Erfolg"* - Keine Wir-helfen-Ihnen-Sprache - Keine Superlative ohne Substanz Wenn echter Platzhalter nötig ist, lieber Struktur-Dummy verwenden: ``` Lorem ipsum dolor sit amet, consectetur adipiscing elit. ``` statt Marketing-Blabla. --- ## 12. Technische Anforderungen ### 12.1 Framework & Stack Offen — Empfehlung basierend auf Anforderungen: - **Next.js** (React) oder **Astro** für statische Performance - **Tailwind CSS** für konsistente Utility-Klassen - **Vercel** oder ähnlich für Hosting mit Edge-Performance - Headless-CMS optional (Sanity, Contentful, Payload) — wenn Redaktionspflege gewünscht ist ### 12.2 Performance-Ziele - Lighthouse Performance: ≥ 95 - Largest Contentful Paint: < 1.5 s - Cumulative Layout Shift: < 0.05 - Keine externen Fonts außerhalb self-hosted oder via next/font - Bilder als WebP/AVIF mit Lazy Loading ### 12.3 Accessibility - WCAG 2.1 Level AA als Mindestanforderung - Kontraste: Text auf Dunkelgrund mindestens 7:1 für Fließtext, 4.5:1 für größere Headlines - Magenta als Akzentfarbe nie als einziges Unterscheidungsmerkmal einsetzen (zusätzlich Unterstreichung oder Kontext) - Tastatur-Navigation vollständig nutzbar - `prefers-reduced-motion` respektieren ### 12.4 SEO-Grundlagen - Semantisches HTML (korrekte Heading-Hierarchie, `
`, `
`) - Meta-Descriptions handgeschrieben, keine Generierung - OpenGraph-Bild: Keyvisual-Hero, statisch - `sitemap.xml`, `robots.txt` vorhanden - Strukturierte Daten (schema.org) für Organisation ### 12.5 Tracking & Privacy - **Kein** Google Analytics - **Kein** Facebook Pixel - **Keine** Cookie-Banner mit Opt-in-Zwang, die den ersten Eindruck dominieren - Alternativ: Plausible, Fathom oder serverseitiges Analytics ohne Cookies - Datenschutz-konform ohne Einwilligungsbarriere beim Seitenaufruf --- ## 13. Domainstruktur & interne Links - Primärdomain: `markemacht.de` - Einzelne Content-Sektionen als separate URLs mit stabilen Pfaden: - `/manifest` - `/methode` - `/system` - `/audit` - Keine interne Verlinkung zu `brandwork.io` oder `adametz.media` ohne klaren Grund — diese Plattformen werden nur kontextgebunden genannt - Externer Link auf adametz.media in Footer erlaubt --- ## 14. Erfolgskriterium Die Seite ist erfolgreich, wenn: - Besucher **weniger** Fragen stellen (weil die Seite diese bereits beantwortet hat) - Anfragen **konkreter** werden (weil das Problem bereits benannt ist) - Geschäftsführer die Seite **weiterleiten** - Menschen die Begriffe der Seite in eigenen Diskussionen verwenden Die Seite ist **nicht** erfolgreich an: - Verweildauer - Seitenaufrufen - Scrolltiefe - Newsletter-Anmeldungen Diese Metriken werden nicht gemessen. --- ## 15. Abgabe & Iteration ### Erwarteter Ablauf 1. Erstentwurf als Figma-Datei mit Desktop- und Mobile-Ansicht für alle fünf Sektionen 2. Review mit dem Auftraggeber — ausschließlich gegen dieses Briefing 3. Überarbeitung auf Basis dokumentierter Feedbackpunkte 4. Technische Umsetzung 5. QA gegen Performance- und Accessibility-Ziele ### Entscheidungslogik bei Konflikten Wenn eine Design- oder Implementierungsentscheidung zwischen diesem Briefing und einer kreativen Idee abweicht: **Das Briefing gewinnt.** Wenn eine kreative Idee das Briefing übertreffen würde: dokumentiert vorlegen, Begründung angeben, Entscheidung beim Auftraggeber. --- ## 16. Ansprechpartner **Auftraggeber:** Kevin Adametz **Unternehmen:** ADAMETZ.MEDIA **Rolle:** Methodischer Urheber, inhaltliche Letztinstanz Alle inhaltlichen und strategischen Rückfragen gehen direkt an den Auftraggeber. Keine Delegation. --- ### Ende — Design-Briefing markemacht.de v1.0