Best Practices für White Label-Markenmaterial

White Label Lite bietet getrennte Felder für ein helles Logo, ein dunkles Logo, das Favicon, die Primärfarbe und die Akzentfarbe. Dieser Leitfaden hilft Ihnen, ein klares Markenpaket vorzubereiten, zulässige Dateien zu verwenden und das Ergebnis vor der Freigabe für Kunden zu testen.

Logos hochladen

Es gibt zwei Logo-Uploads: ein helles Logo für helle Hintergründe und ein dunkles Logo für dunkle Hintergründe. Laden Sie nach Möglichkeit beide hoch und prüfen Sie in der Branding-Vorschau, ob jedes Logo im vorgesehenen Design lesbar bleibt.

Unterstützte Dateitypen:

• PNG: beste Wahl für Transparenz und für die meisten Fälle empfohlen.
• JPG / JPEG: geeignet für Logos mit einfarbigem Hintergrund; Transparenz wird nicht unterstützt.
• SVG: derzeit nicht unterstützt, da wir an der sicheren Darstellung eingebetteter Skripte arbeiten.

Maximale Dateigröße: 1 MB pro Upload. Komprimieren Sie größere Dateien mit TinyPNG oder pngquant. Übliche Logos lassen sich ohne sichtbaren Qualitätsverlust auf weniger als 50 KB komprimieren.

Empfohlene Ausgangsgröße: Verwenden Sie eine klare Quelle mit angemessen hoher Auflösung statt eines winzigen Symbols. Ein quadratisches oder nahezu quadratisches Logo ist ein sicherer Ausgangspunkt. Eine breitere Wortmarke funktioniert ebenfalls, wenn sie in der Vorschau lesbar bleibt.

Hintergründe:

• Ein transparentes PNG wird dringend empfohlen. Der Dashboard-Hintergrund und die Kopfzeile gebrandeter E-Mails sind möglicherweise nicht reinweiß. Ein harter farbiger Hintergrund am Logo wirkt dort unpassend.
• Bei einem Monogramm oder Symbol lässt Transparenz das Logo auf jedem Hintergrund sauber wirken.
• Hat Ihr Logo einen fest eingebauten farbigen Hintergrund, stimmen Sie ihn auf die Primär- oder Akzentfarbe des Dashboards ab.

Favicon

Das Favicon ist ein eigener separater Upload und wird nicht automatisch aus Ihrem Logo erzeugt. Verwenden Sie ein einfaches quadratisches Symbol im Format PNG, JPG oder ICO mit höchstens 1 MB. Ein Monogramm oder Symbol funktioniert in der Größe eines Browser-Tabs meist besser als eine vollständige Wortmarke.

Halten Sie das Favicon quadratisch. Nutzen Sie für Ihre vollständige Wortmarke die Felder für das helle und dunkle Logo, nicht das Favicon.

Farben auswählen

Es gibt zwei Farbfelder:

• Primärfarbe: die Hauptfarbe für Schaltflächen, Links und aktive Zustände.
• Akzentfarbe: eine ergänzende Farbe für Hervorhebungen.

Geben Sie hexadezimale Farbwerte wie #3b82f6 ein. Prüfen Sie das Ergebnis vor dem Speichern in der Live-Vorschau.

Primärfarbe auswählen

Die Primärfarbe sehen Besucher am häufigsten. Beachten Sie drei Punkte:

• Testen Sie sie auf hellen und dunklen Hintergründen. Das Dashboard unterstützt beide Designs. Eine auf Weiß auffällige Farbe kann auf Dunkel verschwinden.
• Halten Sie Statusfarben erkennbar. Vermeiden Sie eine Markenfarbe, die Warnungen, Erfolgszuständen oder destruktiven Aktionen zu ähnlich ist. Ein klares Blau, Violett, Petrol, Anthrazit oder eine andere deutliche Markenfarbe ist meist besser lesbar.
• Solide, mittelstark gesättigte Töne sind besser als fast Weiß oder Schwarz. Fragen Sie sich, ob die Farbe auf weißem Hintergrund wie eine anklickbare Schaltfläche auffällt. Wenn sie kaum auffällt, ist sie zu blass.

Akzentfarbe auswählen

Die Akzentfarbe ergänzt die Primärfarbe. Sie sollte:

• Sich sichtbar von der Primärfarbe unterscheiden, also nicht zwei fast blaue Töne verwenden
• Die Primärfarbe ergänzen, ohne mit ihr zu konkurrieren
• Neben der Primärfarbe klar erkennbar sein

Ein bewährtes Muster: Primärfarbe ist eine tiefe, gesättigte Markenfarbe, Akzentfarbe ein hellerer ergänzender Ton. Beispiel: Primärfarbe #2563eb (indigo-600), Akzentfarbe #10b981 (emerald-500).

Kontrast und Barrierefreiheit

Die Oberfläche kann hellen Text über Ihrer Primärfarbe platzieren. Wählen Sie einen Ton, bei dem Schaltflächenbeschriftungen lesbar bleiben. Ein sehr heller Pastellton wirkt im Farbmuster attraktiv, verliert aber auf einer echten Schaltfläche oft an Kontrast.

Ein Kontrastprüfer wie der von WebAIM hilft beim Prüfen der Kombination aus Text und Hintergrund. Verwenden Sie die Vorschau als letzte Kontrolle, da auch die umgebende Oberfläche die Farbwahrnehmung beeinflusst.

Fast immer geeignete Farben: tiefes Blau, tiefes Violett, Anthrazit, dunkles Petrol und dunkles Bordeaux. Häufig ungeeignet: helle Pastelltöne, mittleres Grau, mittleres Gelb und Neonfarben.

Anzeigename

Der Anzeigename erscheint im gebrandeten Dashboard, im Webmail und auf unterstützten E-Mail-Flächen. Drei bewährte Muster:

• „IhreMarke E-Mail“: macht deutlich, dass dies der E-Mail-Dienst ist. Professionell und gut für Wiederverkäufer geeignet.
• „IhreMarke“: nur der Markenname. Aufgeräumter und geeignet, wenn E-Mail Teil einer größeren Produktsuite ist.
• „IhreMarke Dashboard“: betont die Oberfläche. Sinnvoll, wenn Sie mehrere Markenprodukte klar kennzeichnen möchten.

Halten Sie den Namen kurz genug, um ihn auf einen Blick zu erfassen. Prüfen Sie die Vorschau auf einem schmalen Bildschirm und in beiden Designs, statt sich auf eine Zeichenbegrenzung zu verlassen.

Der Anzeigename erscheint in:

• Dashboard- und Webmail-Navigation
• Gebrandeter Anmeldung und Browser-Titeln
• Unterstützten Flächen für Transaktions-E-Mails

Vor dem Speichern

Prüfen Sie vor einem Klick auf Save changes, ob die Dateien unter 1 MB groß sind, beide Logos in ihrer jeweiligen Vorschau lesbar sind, das Favicon ein einfaches quadratisches Symbol ist, die Primärfarbe ausreichenden Kontrast bietet und der Anzeigename als Absendername natürlich klingt.

Öffnen Sie nach dem Speichern den aktiven gebrandeten Host in einem privaten Browserfenster. So verwechseln Sie ein zwischengespeichertes Bild oder Favicon nicht mit der aktuellen Version.

Einfacher Ablauf zur Vorbereitung

1. Beginnen Sie mit den ursprünglichen Logo-Dateien, nicht mit einem Screenshot oder einer von einer Website kopierten Datei.
2. Exportieren Sie eine Version für helle und eine für dunkle Hintergründe.
3. Erstellen Sie aus dem erkennbarsten Teil der Marke ein separates quadratisches Favicon.
4. Fügen Sie Markenname und Farben in Branding hinzu und vergleichen Sie die E-Mail- und Webmail-Vorschau.
5. Speichern Sie, testen Sie den aktiven Host auf einem Smartphone und Desktop-Browser und bewahren Sie die Quelldateien für spätere Aktualisierungen auf.

Später aktualisieren

Sie können Markenmaterial später ändern, ohne den DNS-Eintrag eines vorhandenen gebrandeten Hosts zu ersetzen. Prüfen Sie den aktiven Host nach jeder visuellen Änderung erneut.

Wenn Sie die falsche Datei hochladen oder eine unleserliche Farbe wählen, korrigieren Sie dies in Branding und speichern Sie erneut. Berücksichtigen Sie bei der Kontrolle den üblichen Browser-Cache.

Automatisierung mit API und MCP

Mit den erforderlichen Berechtigungen kann Ihre Integration Markeneinstellungen und Ressourcen über die REST API oder MCP verwalten. Es gelten dieselben Dateitypen und das Limit von 1 MB. Nutzen Sie Dashboard und Vorschau für die abschließende Sichtprüfung.

Unterstützte Vorgänge finden Sie im White Label Branding API- und MCP-Leitfaden.

Häufige Situationen

„Mein Logo sieht in der Seitenleiste gut aus, auf dem Smartphone aber unscharf.“ Laden Sie eine klarere Quelle mit höherer Auflösung hoch, speichern Sie und testen Sie den aktiven Host auf dem Smartphone. Verlassen Sie sich nicht nur auf die Desktop-Vorschau.

„Meine Primärfarbe funktioniert im Dashboard, aber der Schaltflächentext ist schwer lesbar.“ Wählen Sie einen dunkleren oder stärker gesättigten Ton und prüfen Sie ihn in Vorschau und aktivem Host.

„Mein Logo hat einen farbigen Hintergrund, der nicht zum Dashboard passt.“ Exportieren Sie nach Möglichkeit eine transparente PNG-Version. Vergleichen Sie helle und dunkle Version auf dem jeweiligen Hintergrund.

„Kann ich für E-Mail und Dashboard unterschiedliche Logos verwenden?“ Verwenden Sie die von Branding bereitgestellten hellen und dunklen Varianten. Testen Sie die unterstützte E-Mail-Vorschau und aktive Kundenflächen, bevor Sie ein bestimmtes Erscheinungsbild zusagen.

„Was ist mit dem dunklen Modus?“ Das Dashboard unterstützt helle und dunkle Designs und für jedes laden Sie ein separates Logo hoch. Das helle Logo erscheint auf hellen, das dunkle auf dunklen Hintergründen. So können Sie dunkle Schrift auf Hell und ein weißes oder helles Logo auf Dunkel verwenden.

„Kann ich ein vom Logo getrenntes Favicon hochladen?“ Ja. Das Favicon hat einen eigenen Upload (PNG, JPG oder ICO, höchstens 1 MB) und wird nicht aus dem Logo abgeleitet. Laden Sie ein einfaches, unverwechselbares Symbol für den Browser-Tab hoch.

Nächste Schritte

• White Label Lite einrichten: Aktivierung und DNS-Einrichtung.
• Was weiterhin die TrekMail-Marke trägt: was Ihre Kunden möglicherweise weiterhin von TrekMail sehen.
• Häufige Fragen zu den Preisen von White Label Lite: Fragen zu Abrechnung und Währung.
• White Label Branding API- und MCP-Leitfaden: Logos hochladen und die Marke über REST oder MCP festlegen.