Markenidentität (brand-identity)

Markenidentität

Eine Markenidentität ist ein kleiner Satz von Entscheidungen, die überall Bestand haben: eine Idee, ein Zeichen, das sie trägt, Farben und Schriftarten, die danach klingen, und Regeln, die sie konsistent halten. Der häufige Fehler ist Dekoration ohne Idee: ein Farbverlaufsblob, eine generische serifenlose Schrift, eine nach Stimmung ausgewählte Palette und ein Logo, das in Favicon-Größe oder in einer Farbe stirbt. Diese Fähigkeit erzeugt die Entscheidungen als Dateien und prüft sie in einem echten Renderer.

Wende die abgestuften Prinzipien der interface-guidelines an (jeder kann es nutzen > es sagt die Wahrheit > es sagt, was es bedeutet > die Antwort kommt zuerst > Fehler sind überlebbar > es bleibt an seinem Platz > das Mögliche ist sichtbar > Konvention > Feinschliff), wo immer die Identität auf eine Benutzeroberfläche trifft. Wenn diese Fähigkeit installiert ist, prüft ihr Audit-Skript die von dieser Fähigkeit erstellte Richtlinienseite.

Briefing

Beantworte diese Fragen, bevor du etwas zeichnest. Wenn der Benutzer abwesend ist, nimm Annahmen in brand.json an und fahre fort.

• Was ist es, für wen und gegen wen? Kategorie, Zielgruppe, zwei oder drei Wettbewerber. Die Identität muss sich von diesen unterscheiden, nicht von Marken im Allgemeinen.
• Die eine Idee. Ein einziger Satz darüber, was die Marke ist, den ein Symbol tragen kann ("Ein Brennofen verwandelt weichen Ton in etwas Beständiges"). Nimm sie aus dem Thema selbst, seinem Material, Prozess, Ort oder Versprechen, nicht aus einem Stil. Siehe references/strategy.md.
• Persönlichkeit: drei Eigenschaften, jede mit dem, was sie in der Praxis bedeutet und was sie ausschließt. "Warm: Erdtöne und schlichte Worte, niemals glatt."
• Wo es funktionieren muss: Favicon und App-Symbol, Telefonbildschirme, Beschilderung, Druck, Stickerei, Social-Media-Avatare, dunkler Modus, E-Mail. Der schwierigste Kontext setzt die Komplexitätsobergrenze.
• Einschränkungen: bestehendes Eigenkapital, das erhalten werden muss (eine Farbe, die Kunden kennen, ein Name), Budget für lizenzierte Schriftarten, kulturelle Märkte (Farb- und Symbolbedeutungen variieren).
• Komplexitätsstufe für das Zeichen (references/logo.md Abschnitt 2): nur Wortmarke, einfaches geometrisches Zeichen oder ein vielschichtiges symbolisches Zeichen. Wähle nach Kontext und Idee, nicht nach Ehrgeiz. Komplexe Zeichen benötigen eine vereinfachte Version für kleine Größen.

Arbeitsablauf

1. Richtungen, dann eine Entscheidung

Entwickle drei Richtungen, die sich in der Idee unterscheiden, nicht nur in der Farbe. Für jede: die Idee in einem Satz, die Logokonzeptmethode (references/logo.md Abschnitt 3), ein Palettenskizze (zwei oder drei Seeds), eine Schriftartenkombination und ein Satz dazu, wie es sich anfühlt. Schreibe sie auf und zeige sie, wenn der Benutzer anwesend ist; wähle eine aus und begründe die Wahl, wenn nicht. Mische keine Richtungen; eine Mischung verliert normalerweise die Idee, die jede einzelne zum Funktionieren gebracht hat.

2. Schreibe brand.json

Es ist die einzige Quelle der Wahrheit, die jedes Skript liest. Minimale Form:

{
  "name": "Brennofen", "tagline": "Kleinchargen-Keramik, gebrannt in Leipzig.", "url": "https://brennofen.example",
  "idea": "Ein Satz, den das Zeichen trägt.",
  "personality": [{ "trait": "Warm", "means": "Erdtöne und schlichte Worte, niemals glatt." }],
  "voice": { "is": ["Schlicht", "Spezifisch"], "isnt": ["Kitschig", "Verkäuferisch"], "examples": [{ "say": "Gebrannt bei 1.260 °C.", "not": "Liebevoll handgefertigt!" }] },
  "colors": { "primary": "#d9480f", "accent": "#0b7285", "neutral": { "chroma": 0.01 } },
  "type": { "display": { "family": "Fraunces", "weights": [400, 700] }, "text": { "family": "Inter", "weights": [400, 600] }, "scale": { "base": 16, "ratio": 1.25 } },
  "logo": { "primary": "logo/lockup.svg", "mark": "logo/mark.svg", "story": "Warum das Zeichen so aussieht.", "minSizePx": 16 }
}

3. Farbe

Wähle zwei oder drei Seeds mit Bedeutung (references/color.md), dann:

node <skill-dir>/scripts/palette.mjs brand.json

Es erzeugt wahrnehmungsgerechte OKLCH-Rampen, behält jeden Seed exakt auf seiner nächstgelegenen Stufe, tont Neutrale in Richtung der Marke, hält Statusfarben (Erfolg, Warnung, Gefahr, Info) getrennt von der Marke, sodass Gefahr immer als Gefahr erkennbar ist, ordnet semantische Rollen für Hell und Dunkel zu und prüft jedes sichtbare Paar gegen WCAG 2.2. Behebe Fehler, indem du Seeds oder Rollen änderst, nicht indem du sie ignorierst. Öffne tokens/palette.html und betrachte die Hell- und Dunkel-Demos.

4. Typografie

Wähle eine Display-Schrift und eine Text-Schrift (oft reicht eine Schriftfamilie), mit einer Begründung, die mit der Idee und dem Lesekontext verbunden ist (references/typography.md). Prüfe Lizenz, Sprachabdeckung, Schriftschnitte, Tabellenziffern, falls Zahlen wichtig sind, und wie sie bei 14 bis 16 px rendert. Bevorzuge frei lizenzierte Familien (SIL OFL), es sei denn, der Benutzer besitzt eine Lizenz.

5. Logo

Zeichne das Zeichen von Hand als SVG: plane die Geometrie auf einem Raster, schreibe Pfade mit Absicht und mache Ausschnitte zu echten Löchern (fill-rule="evenodd" oder kombinierte Pfade), niemals weiße Formen, die darüber gemalt sind. Verwandle die Wortmarke in Konturen, damit sie nicht von installierten Schriftarten abhängt:

node <skill-dir>/scripts/logo.mjs outline --text "Brennofen" --google "Fraunces:700" --tracking -0.01 --out logo/wordmark.svg
node <skill-dir>/scripts/logo.mjs check logo/*.svg
node <skill-dir>/scripts/logo.mjs sheet logo/lockup.svg --mark logo/mark.svg --colors tokens/tokens.json --out logo/sheet.png

Betrachte das Blatt. Bei 16 und 24 px muss das Zeichen immer noch als es selbst erkennbar sein; in einer Farbe schwarz, invertiert und auf einem unruhigen Bild muss jeder Teil bestehen. Wenn Details verschwinden, vereinfache oder zeichne ein separates Zeichen für kleine Größen. Iteriere: Die meisten guten Zeichen durchlaufen mehrere Runden der Reduktion. Baue das Lockup (Zeichen plus Wortmarke) mit optischer, nicht mathematischer Ausrichtung und definiere einen Freiraum und eine Mindestgröße. Details und SVG-Handwerk: references/logo.md.

6. Assets und System

node <skill-dir>/scripts/assets.mjs brand.json    # Favicons, ICO, Apple Touch, PWA- und maskierbare Symbole, Open-Graph-Karte, Manifest, Head-Tags
node <skill-dir>/scripts/book.mjs brand.json      # Markenrichtlinien-Seite + type.css

Füge dann hinzu, was das Briefing darüber hinaus benötigt: Social-Media-Avatare, E-Mail-Header, ein Muster oder eine Textur, die vom Zeichen abgeleitet ist, ein Symbolstil, Illustration oder Fotografie-Richtung (references/system.md). Jedes Asset verwendet die Tokens, nicht kopierte Hex-Werte.

7. Verifizieren und übergeben

• Führe das Audit der interface-guidelines auf der Richtlinienseite aus, falls verfügbar: node <interface-guidelines>/scripts/audit.mjs brand-book.
• Lies dir das Logoblatt, die Palettenseite, die Open-Graph-Karte und die Symbole selbst an. Korrigiere, was falsch aussieht.
• Teste die Identität im Kontext: platziere das Logo und die Tokens auf einem echten Bildschirm des Produkts (mindestens eine Kopfzeile und ein Button), hell und dunkel.
• Übergib: die Idee, was jede Datei ist, was du verifiziert hast, was du nicht verifiziert hast (Markenrecherche, kulturelle Überprüfung in Zielmärkten, Druck-Proofs) und alle akzeptierten Kontrastausnahmen mit Begründung.

Fallstricke

• Keine Idee, nur Stil. Die Wahl von "modern, sauber, fett" ist keine Idee. Wenn du nicht in einem Satz sagen kannst, was das Zeichen bedeutet, bedeutet es noch nichts.
• Generische Zeichen: ein Blitz, ein Swoosh, ein Funke, ein Sechseck, ein Gradienten-Orb, ein Initial in einem Kreis ohne weitere Bearbeitung. Verwende sie nur, wenn die Idee es verlangt und etwas an ihnen eigenständig ist.
• Aufgemalte Ausschnitte. Weiße Formen auf einem farbigen Zeichen werden in einer Farbe, auf Fotos und beim Invertieren zu festen Blöcken. logo.mjs check markiert sie.
• Details, die klein sterben. Dünne Striche und Innendetails verschwinden bei 16 px. Das Blatt zeigt es; sorge für ein Zeichen für kleine Größen.
• <text> in einem Logo-SVG. Es wird in einer Fallback-Schriftart gerendert, wo immer die Schriftart fehlt. Konturiere es.
• Markenfarbe als Gefahr, oder Gefahr als Marke. Eine rote Marke benötigt dennoch eine eindeutige, erkennbare Gefahrenfarbe, und ihr Fehlertext muss den Kontrast bestehen.
• Farbbedeutung als Tatsache. "Blau bedeutet Vertrauen" ist eine schwache, kulturell gebundene Assoziation, kein Gesetz (references/color.md Abschnitt 1). Wähle wegen der Unterscheidungskraft in der Kategorie und für die Idee.
• Kopieren. Erstelle nicht das Zeichen, den Namen oder das Erscheinungsbild einer bestehenden Marke neu oder imitiere es eng. Beachte, dass eine echte Markenrecherche der Schritt des Benutzers vor dem Launch ist.
• Nachahmung einer realen Organisation für einen Benutzer, der nicht diese Organisation ist, ist kein Branding; lehne ab.

Referenzen

Datei	Lese, wenn
references/strategy.md	Die Idee, Persönlichkeit finden, den Vibe benennen, Richtungen schreiben
references/logo.md	Jegliche Logoarbeit: Typen, Komplexitätsstufen, Konzeptmethoden, Konstruktion, SVG-Handwerk, Lockups, Tests
references/color.md	Seeds auswählen, Nachweise zur Farbbedeutung, OKLCH, Rollen, dunkler Modus, Barrierefreiheit
references/typography.md	Schriftarten auswählen und kombinieren, Lizenzierung, Skalierung, Ziffern, Web-Laden
references/system.md	Symbole, Muster, Bilderwelt, Bewegung, Stimme, Assets, Tokens, Richtlinien