coastdigitalgroup/coastai-skills

Logo-Raster-System

Zweck

Das Logo-Raster-System bietet eine Methodik zur Organisation und Präsentation von „Social-Proof“-Logos – wie Kundenmarken, Technologiepartner oder Medienzitate. Im Gegensatz zu Standard-Bildergalerien erfordert ein Logo-Raster eine optische Normalisierung, um sicherzustellen, dass Logos mit unterschiedlichen Seitenverhältnissen (hoch, breit, quadratisch) und visuellen Dichten ausgewogen und gleich „schwer“ erscheinen. Dieses Skill stellt sicher, dass die sekundären Vertrauenssignale der Marke das primäre Design unterstützen, ohne visuelles Chaos zu erzeugen oder die Integrität externer Marken zu verletzen.

Anwendungsfälle

• Die „Logo-Cloud“: Eine horizontale Reihe von Kundenlogos unterhalb eines Hero-Bereichs.
• Die „Press-Leiste“: Medienerwähnungen (z. B. „Wie gesehen in …“) in einer Fußzeile oder Seitenleiste.
• Integrations-/Partnerverzeichnisse: Raster, die Technologie-Ökosysteme zeigen.
• Sponsoring-Bereiche: Beitragende zu Veranstaltungen oder Projekten am unteren Ende einer Seite.
• Marquee/Ticker: Unendliche horizontale Bildläufe von Markenzeichen.

Wann NICHT zu verwenden

• Primäre Markenidentität: Für das Design des eigenen Logos der Website (verwende professionelle Branding-/Identitäts-Skills).
• Ikonografie: Für kleine, funktionale UI-Symbole (verwende iconography-system).
• Produktlisting-Seiten (PLP): Wenn der primäre Inhalt das Produkt selbst ist, nicht sein Markenzeichen.
• Navigationsmenüs: Verwendung von Logos anstelle von Text für die primäre Seitennavigation.

Eingaben

1. Asset-Inventar: Eine Sammlung von Logos in verschiedenen Formaten (SVG bevorzugt).
2. Markenintegritätsregeln: Kenntnis der Anforderungen an „Schutzraum“ und Farbverwendung für die Partnermarken.
3. Elternkontext: Die Abschnittsbreite und Hintergrundfarbe, in der das Raster platziert wird.
4. Visuelle Hierarchie-Priorität: Sollen die Logos prominent (vollfarbig) oder dezent (einfarbig/gedämpft) sein?

Ausgaben

1. Normalisierungsmatrix: Definierte Begrenzungsrahmen-Regeln für quadratische, breite und hohe Logos.
2. Visuelle Behandlungsspezifikation: Regeln für Farbe (Graustufen, Aussparung oder Original), Deckkraft und Hover-Zustände.
3. Responsiver Raster-Plan: Ein Plan für Spaltenanzahlen (z. B. 2 Spalten auf mobilen Geräten, 6 auf dem Desktop).
4. Optischer Größenleitfaden: Spezifische prozentuale Skalierungsregeln zum Ausbalancieren des visuellen Gewichts.

Workflow

1. Auditieren und Standardisieren von Asset-Formaten

Sammle alle Logos und priorisiere das SVG-Format. Falls nur Rastergrafiken (PNG/JPG) verfügbar sind, stelle sicher, dass sie hochauflösend (mindestens 2x die Anzeigegröße) sind. Entferne unnötige Abstände aus den Quelldateien, um sicherzustellen, dass der „Begrenzungsrahmen“ die Abmessungen des Logos genau widerspiegelt.

2. Erstellen des Normalisierungscontainers

Erstelle einen „Normalisierungscontainer“ (eine Box mit festem Seitenverhältnis, normalerweise quadratisch oder 3:2) für jedes Logo.

• Platziere jedes Logo innerhalb dieses Containers mit object-fit: contain.
• Die optische Anpassung: Fülle die Box nicht einfach aus. Ein breites Logo sollte mehr Breite, aber weniger Höhe einnehmen; ein quadratisches Logo sollte weniger Breite und Höhe einnehmen als sein breites Gegenstück, um eine gleiche „Farbdichte“ zu erhalten.

3. Definiere die visuelle Behandlung

Wähle einen Stil, der die Ästhetik der Website mit der Markenwiedererkennung in Einklang bringt:

• Gedämpft/Einfarbig (Standard): Konvertiere alle Logos in eine einzelne Farbe (normalerweise ein dunkles Grau oder die „Aussparung“ der Hintergrundfarbe), typischerweise über filter: grayscale(1) plus eine reduzierte opacity oder color-mix() bei der Arbeit mit einfarbigen SVG-Masken. Dies verhindert einen „Regenbogeneffekt“, der vom primären CTA ablenkt.
• Hover/Enthüllen: Logos standardmäßig gedämpft lassen und ihre ursprünglichen Markenfarben nur bei Hover anzeigen.
• Volle Farbe: Nur verwenden, wenn die Logos selbst der primäre Anziehungspunkt sind (z. B. eine hochkarätige Sponsoring-Seite).

4. Wende Abstände und Rhythmus an

Verwende das fluid-spacing-system, um den Abstand zwischen den Logos zu definieren:

• Rinnenbreite: Stelle sicher, dass genügend „Schutzraum“ um jedes Logo herum vorhanden ist, um die Markenrichtlinien zu respektieren (normalerweise mindestens 50 % der Höhe des Logos).
• Ausrichtung: Richte die Normalisierungscontainer an ihren Mittelachsen (sowohl horizontal als auch vertikal) aus, um eine stabile Horizontlinie zu erzeugen.

5. Gestalte für responsives Umfließen

Plane, wie das Raster für kleinere Bildschirme zusammenbricht:

• Desktop: 5–8 Logos pro Reihe.
• Tablet: 3–4 Logos pro Reihe.
• Mobil: 2 Logos pro Reihe (oder ein horizontaler „Marquee“-Scroll, wenn der Platz extrem begrenzt ist).
• Verkleinern: Stelle sicher, dass Logos auf mobilen Geräten lesbar bleiben; wenn ein Logo zu einem „Fleck“ wird, wechsle zu einer „Nur-Marke“-Version dieser Markenidentität.

Entscheidungsregeln

• Die „Farbdichte“-Regel: Ein sehr „schweres“ oder solides Logo (wie ein gefüllter Kreis) sollte 10–15 % kleiner skaliert werden als ein „leichtes“ oder luftiges Logo (wie ein dünnes Wortmarke), um gleich schwer zu erscheinen.
• Die Graustufen-Voreinstellung: Beginne immer mit einfarbigen Logos. Füge nur dann Farbe hinzu, wenn der Kunde ausdrücklich „Markenauthentizität“ für alle Partner verlangt.
• Zentrierter Horizont: Richte Logos in ihren Reihen immer vertikal mittig aus. Eine obere Ausrichtung von Logos unterschiedlicher Höhe erzeugt einen „Treppeneffekt“, der unprofessionell wirkt.
• Maximale Breite/Höhe: Definiere eine max-height für den Normalisierungscontainer (z. B. 40px bis 60px), um zu verhindern, dass ein einzelnes Logo den Abschnitt dominiert.

Einschränkungen

• Barrierefreiheit: Jedes Logo muss ein alt-Attribut mit dem Namen des Unternehmens haben (z. B. alt="Acme Corp Logo"). Wenn der Abschnitt eine Überschrift wie „Unsere Partner“ hat, können die Logos als dekorativ markiert werden (alt=""), um Redundanz zu vermeiden.
• Markenintegrität: Ziehe oder verzerre niemals ein Logo. Ändere niemals die internen Proportionen eines Logos.
• Responsivität: Das Raster muss fließend sein. Vermeide feste Pixelbreiten für das gesamte Raster; verwende 100% Breite mit einer max-width-Einschränkung.

Häufige Fehlermuster

• Das „Riesenquadrat“: Ein quadratisches Logo, das die gleiche Höhe wie ein breites Logo einnimmt, wodurch es 3x größer aussieht.
• Farbchaos: Mischen von bunten Logos mit verschiedenen Paletten, was die Website wie eine „Linkfarm“ aussehen lässt.
• Quell-Padding: Unterschiedliche Mengen an „weißem Raum“ innerhalb der Logodateien, was eine automatisierte Ausrichtung unmöglich macht.
• Mobile Überfüllung: Versuch, 4 Logos in einer Reihe auf einem mobilen Bildschirm unterzubringen, wodurch sie alle unleserlich werden.
• Treppenausrichtung: Obere Ausrichtung von Logos unterschiedlicher Höhe, was eine unebene und ablenkende Unterkante erzeugt.

Validierungskriterien

• Logos sind optisch ausbalanciert (kein einzelnes Logo wirkt signifikant „schwerer“).
• Alle Logos teilen eine einheitliche visuelle Behandlung (z. B. alle in Graustufen).
• Die Ausrichtung ist innerhalb der Zellen sowohl horizontal als auch vertikal zentriert.
• Quelldateien sind SVGs oder hochauflösende Rastergrafiken ohne internes Padding.
• Die mobile Ansicht vermeidet Überfüllung und erhält die Lesbarkeit.
• Barrierefreiheit: Alle Logos haben angemessenen alt-Text oder dekorative Markierungen.
• Die „Schutzraum“-Anforderungen für jede Marke werden respektiert.