# Corporate Design professionell entwickeln > Arbeitsanleitung für MZAI / MarkenzeichenAI und zukünftige Markenprojekte ## 1. Was Corporate Design wirklich ist Corporate Design ist **nicht nur ein Logo**. Es ist das visuelle Betriebssystem einer Marke. Ein professionelles Corporate Design beantwortet in jedem Medium dieselben Fragen: - Wer ist die Marke? - Wofür steht sie? - Wie wirkt sie auf den ersten Blick? - Woran erkennt man sie ohne den Namen zu lesen? - Wie funktioniert sie auf einer Website, einem Angebot, einem Smartphone und im Druck? Zum Corporate Design gehören mindestens: - Markenpositionierung und Tonalität - Logo-Familie und Wortmarke - Farben mit klaren Rollen - Typografie und Hierarchie - Bild- und Illustrationssprache - Layout, Raster und Abstände - Icons, Formen, Linien und Oberflächen - Anwendungen und Vorlagen - technische Dateien und Nutzungsregeln **Grundregel:** Ein schönes Einzelbild ist noch kein Corporate Design. Ein Corporate Design ist ein wiederholbares, belastbares System. --- ## 2. Die wichtigsten Grundsätze ### 2.1 Erst Bedeutung, dann Dekoration Nicht mit Farbverläufen, Effekten oder einem zufälligen Symbol anfangen. Zuerst muss klar sein, welche Aufgabe die Marke erfüllen soll. ### 2.2 Logo und Key Visual trennen Ein Logo muss klein, einfach, reproduzierbar und langfristig stabil sein. Ein Key Visual darf komplex, erzählerisch und emotional sein. Ein Bergischer Löwe, eine Schwebebahn oder eine Robotik-Verwandlung kann ein starkes Kampagnenmotiv sein. Das bedeutet nicht automatisch, dass die komplette Szene ins Primärlogo gehört. ### 2.3 Stilistische Einheit vor vermeintlicher Realitätsnähe Ein echtes Foto mit einem unpassenden AI-Element wirkt schlechter als eine konsistente Illustration. Referenzbilder dienen zur Prüfung von Geometrie, Proportionen und regionalen Details – nicht dazu, beliebige Stile zusammenzukleben. ### 2.4 Jede Entscheidung muss eine Anwendung bestehen Ein Entwurf ist erst belastbar, wenn er mindestens in diesen Situationen funktioniert: - Website-Header - dunkler und heller Hintergrund - Favicon oder App-Icon - Social-Avatar - Angebot oder Rechnung - einfarbiger Druck - sehr kleine Darstellung ### 2.5 Wenige starke Regeln statt hundert Ausnahmen Ein gutes System lässt sich in wenigen Sätzen erklären. Wenn jede Anwendung eine Sonderregel braucht, ist das System noch nicht sauber genug. --- ## 3. Phase 0: Bestand und Rahmen prüfen Vor dem ersten neuen Entwurf den vorhandenen Bestand erfassen. ### 3.1 Bestehende Dateien inventarisieren Prüfen: - vorhandene Logos und Varianten - Wortmarken und Symbole - SVG-, PNG- und Favicon-Dateien - alte HTML-Previews - Key Visuals und Bildquellen - verwendete Schriften - vorhandene Farben und CSS-Variablen - Lizenz- und Quellenangaben Nichts ungeprüft löschen. Alte Entwürfe können als Archiv, Referenz oder Vergleich wichtig sein. ### 3.2 Technische Einschränkungen notieren Vorab klären: - Wo wird das Logo eingesetzt? - Muss es auf dunklen Flächen funktionieren? - Gibt es Print, Stickerei, Gravur oder Beschilderung? - Welche Dateiformate werden benötigt? - Muss das System ohne externe Fonts funktionieren? - Gibt es bereits Website-, Produkt- oder Plattformvorgaben? ### 3.3 Ergebnis der Phase Am Ende existiert eine kurze Bestandsliste: ```text Primärlogo: vorhanden / fehlt Wortmarke: vorhanden / fehlt Kompaktlogo: vorhanden / fehlt Inverse Version: vorhanden / fehlt Monochrom: vorhanden / fehlt Favicon: vorhanden / fehlt Key Visual: vorhanden / fehlt Brand Preview: vorhanden / fehlt Lizenzen: vollständig / offen ``` --- ## 4. Phase 1: Markenbrief schreiben Der Markenbrief ist die Grundlage für jede Designentscheidung. Er muss kurz genug sein, um benutzt zu werden, und konkret genug, um beliebige Gestaltung auszuschließen. ### 4.1 Pflichtfragen 1. Wie heißt die Marke vollständig? 2. Was verkauft oder ermöglicht sie? 3. Wer soll ihr vertrauen? 4. Welches Problem löst sie? 5. Was soll jemand nach drei Sekunden fühlen? 6. Welche drei Eigenschaften soll die Marke ausstrahlen? 7. Was soll sie ausdrücklich **nicht** ausstrahlen? 8. Welche Wettbewerber oder Vorbilder gibt es? 9. Welche regionale oder historische Herkunft ist relevant? 10. Wo wird die Marke zuerst sichtbar? ### 4.2 Beispiel für eine brauchbare Positionierung > MZAI / MarkenzeichenAI entwickelt präzise digitale Systeme und individuelle Automatisierung. Die Marke verbindet technische Kompetenz, Verlässlichkeit und regionale Verwurzelung mit einer erwachsenen, modernen Gestaltung. Das ist brauchbarer als: > Wir machen coole KI-Sachen mit einem futuristischen Logo. ### 4.3 Tonalität festlegen Beispiele für Gegensatzpaare: | Erwünscht | Nicht erwünscht | |---|---| | präzise | beliebig | | erwachsen | kindlich | | technisch | überladen | | regional verwurzelt | folkloristisch | | hochwertig | billig wirkend | | zugänglich | verspielt-chaotisch | --- ## 5. Phase 2: Visuelle Richtungen entwickeln Nicht zehn fast gleiche Entwürfe erzeugen. Besser sind drei bewusst getrennte Richtungen. ### 5.1 Die drei Richtungen 1. **Sicher / reduziert** – maximal klar, langfristig stabil, gut für B2B. 2. **Starker Markenfit** – die Richtung, die Strategie und Zielgruppe am besten verbindet. 3. **Experimentell / emotional** – mutiger Ansatz für Key Visuals oder Kampagnen. Jede Richtung braucht: - einen Namen - eine klare Idee - ein Formprinzip - eine Farbrolle - eine Typografie-Idee - mindestens eine konkrete Anwendung - eine kurze Begründung ### 5.2 Was eine Richtung nicht ist Keine Richtung ist nur: - eine andere Farbpalette - derselbe Schriftzug mit einem anderen Glow - ein zufälliges AI-Bild - eine Collage aus fremden Referenzen ### 5.3 Entscheidungskriterien Jede Richtung auf einer Skala von 1–5 bewerten: | Kriterium | Frage | |---|---| | Wiedererkennung | Bleibt das Zeichen im Gedächtnis? | | Passung | Passt es zur Positionierung? | | Skalierung | Funktioniert es bei 16 px und auf einem Schild? | | Eigenständigkeit | Könnte es zu jeder beliebigen AI-Firma gehören? | | Systemfähigkeit | Lassen sich daraus Varianten und Anwendungen bauen? | | Haltbarkeit | Wirkt es in drei Jahren noch professionell? | --- ## 6. Phase 3: Logo-System konstruieren Ein professionelles Logo-System besteht aus mehreren kontrollierten Varianten. ### 6.1 Pflichtvarianten - **Primärlogo:** Symbol plus Wortmarke - **Kompaktlogo:** Symbol oder Monogramm ohne langen Text - **Inverse Version:** für dunkle Hintergründe - **Monochrome Version:** nur schwarz oder nur weiß - **Favicon/App-Icon:** für 16–64 px - **Wortmarke:** separat, wenn der Name ohne Symbol benötigt wird ### 6.2 Konstruktionsregeln - Symbol und Wortmarke müssen als Einheit funktionieren. - Buchstabenabstände optisch, nicht blind mathematisch, ausgleichen. - Keine zu dünnen Linien für kleine Größen. - Keine Details verwenden, die bei 16–24 px verschwinden. - Nicht jedes Key-Visual-Detail ins Logo übernehmen. - Generative Bildmodelle nicht für finale Schriftzüge verwenden. Text immer sauber als Text/SVG setzen. ### 6.3 Schutzraum und Mindestgröße Definieren: - Mindestabstand rund um das Logo - kleinste sinnvolle Breite - kleinste sinnvolle Symbolgröße - Verhalten bei quadratischen und sehr schmalen Flächen Beispiel: ```text Schutzraum: mindestens 1× Höhe des Symbols rund um das Logo Primärlogo digital: nicht kleiner als 120 px Breite Kompaktlogo digital: nicht kleiner als 24 px Print: Mindestgröße abhängig von Druckverfahren testen ``` Die Werte müssen am konkreten Zeichen geprüft werden; sie dürfen nicht nur aus einer Vorlage kopiert werden. ### 6.4 Verbotene Anwendungen Dokumentieren: - Logo nicht strecken oder stauchen - keine unkontrollierten Schatten oder Verläufe - keine fremden Farben - keine Kontur aus einer Vollfläche erzeugen - keine Platzierung auf unruhigen Bildern ohne Kontrastfläche - keine veränderten Proportionen von Symbol und Wortmarke --- ## 7. Phase 4: Farben als System definieren Eine professionelle Palette besteht aus Rollen, nicht aus einer langen Liste schöner Hex-Codes. ### 7.1 Farbrollen Mindestens definieren: - `background` - `surface` - `surface-elevated` - `text-primary` - `text-muted` - `border` - `brand-primary` - `brand-secondary` - `success` - `warning` - `danger` ### 7.2 Farbpalette prüfen Für jede Farbe dokumentieren: - HEX - RGB - HSL oder OKLCH, falls verwendet - CMYK-Näherung für Print - Einsatzgebiet - zulässige Kombinationen Nicht jede digitale RGB-Farbe lässt sich im Druck identisch reproduzieren. Für wichtige Anwendungen einen realen Proof prüfen. ### 7.3 Kontrast Prüfen: - normaler Fließtext auf Hintergrund - kleine Beschriftungen - Logo auf hell/dunkel - Fokuszustände und Buttons - Monochrom auf Papier Ein Logo darf charaktervoll sein. Lesetext und Bedienelemente müssen trotzdem ausreichend Kontrast haben. --- ## 8. Phase 5: Typografie festlegen ### 8.1 Schriftfamilie Eine primäre Schriftfamilie reicht oft aus. Dazu können gezielte Akzente kommen: - Sans für Fließtext und UI - Display-Schnitt nur für große Headlines - Mono nur für technische Labels oder Daten Keine Sci-Fi-Schrift verwenden, nur weil die Marke technisch ist. Eine klare, gut lesbare Wortmarke ist meistens professioneller. ### 8.2 Hierarchie dokumentieren Beispiel: ```text Display: clamp(3rem, 7vw, 7rem), Gewicht 700 H1: 3rem, Gewicht 700 H2: 2rem, Gewicht 650 H3: 1.2rem, Gewicht 650 Body: 1rem / 1.6 Meta: .7rem, uppercase, letter-spacing .16em ``` Die konkreten Werte sind projektabhängig. Wichtig ist, dass die Hierarchie konsistent und responsiv ist. ### 8.3 Wortmarke Die Wortmarke muss separat geprüft werden: - Kerning bei problematischen Buchstabenpaaren - Lesbarkeit in klein - Abstände zum Symbol - helle/dunkle Version - Export als sauberes SVG - keine automatisch generierten Buchstabenfehler --- ## 9. Phase 6: Bild- und Illustrationssprache ### 9.1 Einen Stil auswählen Entscheiden, ob die Marke überwiegend arbeitet mit: - Fotografie - flacher Illustration - 3D/Renderings - technischer Diagrammatik - Editorial-Illustration - einer bewusst gemischten, aber dokumentierten Sprache Nicht innerhalb eines einzelnen Key Visuals ohne Absicht zwischen Foto, Cartoon und 3D wechseln. ### 9.2 AI-Bilder sicher einsetzen AI kann Konzepte, Texturen und Key Visuals unterstützen. Es darf aber nicht ungeprüft die Markenrealität definieren. Vor der Verwendung prüfen: - stimmen Wahrzeichen und technische Geometrie? - stimmen Anzahl, Anatomie und Perspektive? - ist die Typografie korrekt? - gibt es ungewollte Doppelungen oder Artefakte? - passt das Bild stilistisch zum Rest? - ist der Bildnachweis oder die Lizenz geklärt? **Wichtig:** Einen realen Hintergrund nicht automatisch mit einem unpassenden AI-Vordergrund kombinieren. Eine stimmige stilisierte Gesamtillustration ist oft die bessere Lösung. ### 9.3 Regionale Motive Bei regionalen Motiven zuerst die Geometrie recherchieren, dann den Stil wählen. Für Wuppertal-/Schwebebahn-Motive bedeutet das: - zwei parallele Spuren - Laufwerk und Räder oben - kurze Hänger - Wagen knapp unter der Spur - U-/Dreiecks-Tragportale nahe der Trägerspitze - Wupper direkt darunter - kein Löwe zwischen zwei Wagen - kein Löwe aus der Frontscheibe - kein normaler Zug auf gewöhnlichen Schienen Die Fakten werden als Referenz genutzt. Das finale Motiv darf trotzdem vollständig stilisiert sein, wenn dadurch eine bessere Gesamtkomposition entsteht. --- ## 10. Phase 7: Anwendungen bauen Ein Corporate Design wird nicht anhand von Moodboards freigegeben, sondern anhand echter Anwendungen. ### 10.1 Mindestumfang Erstellen: 1. Website-Header mit Primärlogo 2. Hero-Bereich mit Bildwelt 3. helle und dunkle Oberfläche 4. Favicon/App-Icon 5. Social-Avatar oder Profilbild 6. Angebot, Briefkopf oder Rechnung 7. E-Mail-Signatur 8. einfarbige Print-Anwendung 9. kleines Logo bei 16–32 px 10. Key Visual in einer realistischen Kampagnenfläche ### 10.2 Anwendungskarten Jede Richtung sollte mindestens eine echte Karte enthalten: ```text Anwendung: Website-Header Hintergrund: dunkel Logo: kompakte inverse Variante Akzent: Primärfarbe CTA: Sekundärfarbe Problem: Wortmarke bleibt bei 320 px lesbar? Ergebnis: freigegeben / überarbeiten ``` ### 10.3 Brand Preview Eine lokale HTML-Preview ist besonders nützlich, weil sie folgende Dinge zusammenbringt: - Variantenvergleich - dunkle/helle Flächen - Farbrollen - Anwendungsszenarien - Downloads - Hinweise zur Verwendung Die Preview ist ein Entscheidungswerkzeug, kein Ersatz für die finalen Assets. --- ## 11. Phase 8: Dateien und technische Qualität ### 11.1 Empfohlene Ausgaben ```text brand/ ├── DOCS/ │ └── Corporate-Design-Anleitung.md ├── logo-primary.svg ├── logo-light.svg ├── logo-dark.svg ├── logo-monochrome.svg ├── logo-icon.svg ├── logo-wordmark.svg ├── favicon.svg ├── favicon-16.png ├── favicon-32.png ├── social-preview.png ├── key-visual-01.png ├── brand-preview.html └── README.md ``` ### 11.2 SVG-Prüfung Prüfen: - Datei öffnet in Browser und Vektorprogramm - keine fehlenden externen Referenzen - ViewBox vorhanden - keine unnötigen eingebetteten Schriften - keine zufälligen Editor-Metadaten, die den Export beschädigen - korrekte Farben in hell/dunkel - Symbol bleibt bei kleiner Größe erkennbar ### 11.3 PNG-Prüfung Prüfen: - erwartete Dimensionen - transparenter Hintergrund, falls vorgesehen - keine grünen/weißen Freistellungsränder - korrektes Farbprofil - keine unnötige Kompression - Dateigröße für Webanwendungen angemessen ### 11.4 Namenskonvention Dateinamen beschreiben Inhalt und Variante: ```text mzai-logo-dark.svg mzai-logo-light.svg mzai-logo-monochrome.svg mzai-icon.svg mzai-favicon.svg mzai-keyvisual-wuppertal-01.png ``` Keine Namen wie `final-final-2-neu.png` verwenden. --- ## 12. Phase 9: Qualitätsprüfung vor Freigabe ### Strategisch - [ ] Die Positionierung ist in einem kurzen Satz verständlich. - [ ] Das Design passt zur Zielgruppe. - [ ] Das Design ist von Wettbewerbern unterscheidbar. - [ ] Logo und Key Visual haben getrennte Aufgaben. ### Visuell - [ ] Primärlogo, Kompaktlogo und Wortmarke funktionieren zusammen. - [ ] Helle, dunkle und monochrome Variante funktionieren. - [ ] Farben haben definierte Rollen. - [ ] Typografie ist lesbar und konsistent. - [ ] Bildsprache ist stilistisch geschlossen. - [ ] Keine Artefakte, Doppelungen oder ungewollten Maskottchen-Anmutungen. ### Technisch - [ ] SVGs öffnen ohne Fehler. - [ ] PNGs haben korrekte Größe und Transparenz. - [ ] Favicon ist bei 16–32 px erkennbar. - [ ] Lokale Preview lädt alle Assets. - [ ] Keine fehlenden relativen Links. - [ ] Keine Console-Fehler. - [ ] Layout funktioniert mobil und mit Tastaturfokus. ### Realitätscheck - [ ] Website-Header getestet. - [ ] Dokument/Print getestet. - [ ] Social-Avatar getestet. - [ ] monochrom getestet. - [ ] ausreichend Kontrast geprüft. - [ ] Quellen und Lizenzen dokumentiert. --- ## 13. Freigabe und Pflege Nach der Entscheidung: 1. Eine Richtung als Hauptsystem auswählen. 2. Nicht ausgewählte Richtungen als Archiv behalten. 3. Nur geprüfte Assets als `primary` oder `approved` markieren. 4. Brand Preview und README aktualisieren. 5. Änderungen im Git-Repository nachvollziehbar halten. 6. Neue Anwendungen gegen die Regeln prüfen. 7. Veraltete Inhalte gezielt ersetzen, aber nicht ungefragt löschen. Eine Corporate Identity lebt. Neue Anwendungen dürfen das System erweitern, aber nicht jede Grundregel neu erfinden. --- ## 14. Kurz-Checkliste für den nächsten Entwurf ```text [ ] Markenaufgabe in einem Satz klar [ ] Zielgruppe und Tonalität festgelegt [ ] drei wirklich unterschiedliche Richtungen [ ] Primärlogo und Key Visual getrennt [ ] Symbol funktioniert klein [ ] Wortmarke sauber gesetzt [ ] helle/dunkle/monochrome Variante vorhanden [ ] Farbrollen dokumentiert [ ] Typografie dokumentiert [ ] echte Anwendungen gezeigt [ ] Bildwelt stilistisch konsistent [ ] AI-Artefakte und regionale Fakten geprüft [ ] SVG/PNG technisch kontrolliert [ ] Quellen/Lizenzen dokumentiert [ ] Brand Preview aktualisiert [ ] Entscheidung und Status im README festgehalten ```