In diesem Artikel erklären wir, wie deine Marke überall auf den mobilen Apps und Webseiten erscheint, die deine Kunden und Fahrer verwenden
Überblick
Farben
Alle Farben werden über das HEX-Code-System festgelegt. Ein HEX (hexadezimal) Farbcode ist ein 6-stelliger alphanumerischer Wert, der eine bestimmte Farbe im RGB-Farbmodell darstellt. Er beginnt mit einem Raute- oder Hashzeichen (#), gefolgt von sechs Zeichen, wie zum Beispiel #FF5733.
Bitte stelle sicher, dass du immer sechs Zeichen eingibst und den Speichern-Button klickst, sobald du Änderungen vorgenommen hast.
Primärfarben Set
Eine Primärfarbe ist die Hauptfarbe, die die visuelle Identität eines Unternehmens repräsentiert. Es ist die dominante Farbe, die im Logo des Unternehmens, in Marketingmaterialien und in der gesamten Markenpräsenz verwendet wird. Wenn deine Branding von einer Agentur oder einem Mitarbeiter verwaltet wird, bitte sie um Hilfe, um die richtige Farbe zu identifizieren, die du hier verwenden solltest.
Die Primärfarbe, die du hier festlegst (z.B. #3F77F2), wird für wichtige Komponenten in der Benutzeroberfläche verwendet, wie hervorgehobene Buttons, Links und aktive Zustände. Es wird empfohlen, eine dunklere Primärfarbe zu verwenden, um sicherzustellen, dass Text in dieser Farbe auf weißem Hintergrund gut lesbar ist. Bitte verwende kein Schwarz oder Grau, da dies sich nicht vom Rest der Benutzeroberfläche in der Software abheben würde.
Stelle sicher, dass Text auf Buttons in deiner Primärfarbe gut lesbar bleibt. Verwende für hellere Primärfarben schwarzen Text (#000000); für dunklere Primärfarben weißen Text (#FFFFFF). In der Vorschau kannst du sehen, wie die Primärfarbe und die Primäre Textfarbe zusammen aussehen.
Als letztes legst du die Farbe bei Hervorhebung fest, die erscheint, wenn über primäre UI-Komponenten gehovert, fokussiert, hervorgehoben oder gedrückt wird. Du kannst diesen Effekt sehen, indem du mit der Maus über den Vorschau-Button fährst. Für dunklere Primärfarben wähle eine hellere Version dieser Farbe für den hervorgehobenen Zustand; für hellere Primärfarben wähle stattdessen eine dunklere Version.
Wenn du Hilfe bei der Erstellung dieser Farbe benötigst, kannst du Adobe Color verwenden. Gib einfach deine Primärfarbe ein und wähle die Farbharmonie "Schattierungen", um hellere und dunklere Variationen deiner Primärfarbe zu erstellen.
Sekundärfarben Set
Eine Sekundärfarbe ist eine ergänzende Farbe, die zusammen mit der Primärfarbe die visuelle Identität eines Unternehmens prägt. Wenn dein Branding von einer Agentur oder einem Mitarbeiter erstellt wurde, bitte sie um Hilfe, um die richtige Farbe zu identifizieren, die du hier verwenden solltest.
Die Sekundärfarbe, die du hier festlegst (z.B. #F2F2F2), wird für weniger auffällige Komponenten in der Benutzeroberfläche verwendet. Wenn du keine Sekundärfarbe hast, kannst du einfach das vorausgefüllte Grau beibehalten. Das wird mit jeder gewählten Primärfarbe gut aussehen.
Stelle sicher, dass Text auf Buttons in deiner Sekundärfarbe gut lesbar bleibt. Verwende für hellere Sekundärfarben schwarzen Text (#000000); für dunklere Sekundärfarben weißen Text (#FFFFFF). In der Vorschau kannst du sehen, wie die Sekundärfarbe und die Sekundäre Textfarbe zusammen aussehen.
Als letztes legst du die Farbe bei Hervorhebung fest, die erscheint, wenn über sekundäre UI-Komponenten gehovert, fokussiert, hervorgehoben oder gedrückt wird. Du kannst diesen Effekt sehen, indem du mit der Maus über den Vorschau-Button fährst. Für dunklere Sekundärfarben wähle eine hellere Version dieser Farbe für den hervorgehobenen Zustand; für hellere Sekundärfarben wähle stattdessen eine dunklere Version.
Wenn du Hilfe bei der Erstellung dieser Farbe benötigst, kannst du Adobe Color verwenden. Gib einfach deine Sekundärfarbe ein und wähle die Farbharmonie "Schattierungen", um hellere und dunklere Variationen deiner Primärfarbe zu erstellen.
Weitere Farben
Hier kannst du zusätzliche Farben festlegen, die für verschiedene UI-Elemente der Plattform verwendet werden. Für die Symbolfarbe empfehlen wir die Verwendung deiner Primärfarbe, und die Farbe für den Hintergrund von E-Mails kannst du so lassen.
Logos und Bilder
Eine Sekundärfarbe ist eine ergänzende Farbe, die zusammen mit der Primärfarbe die visuelle Identität eines Unternehmens prägt. Wenn dein Branding von einer Agentur oder einem Mitarbeiter erstellt wurde, bitte sie um Hilfe, um die richtige Farbe zu identifizieren, die du hier verwenden solltest.
Logo
Das Logo wird in mobilen Apps, Web-Dashboards, Rechnungen und Transaktions-E-Mails verwendet. Es muss im SVG-Format (Scalable Vector Graphics) sein, ein Dateiformat, das zur Anzeige von Vektorgrafiken im Web verwendet wird.
Favicon
Das Favicon wird in Browser-Tabs als Symbol für das Web-Dashboard angezeigt. Es muss im PNG-Format und quadratisch sein (z. B. 58px × 58px).
E-Mail-Kopfzeile
Das Header-Bild wird für Transaktions-E-Mails verwendet. Es muss im JPG- oder PNG-Format sein und eine Größe von 1160×168px haben. Wie im Beispiel gezeigt, könntest du deine Primärfarbe als Hintergrund verwenden und dein Logo in Weiß oder Schwarz darauf platzieren.
Dashboard-Anmeldebild
Dieses Bild wird auf den Onboarding-Seiten im Web-Dashboard angezeigt. Es muss im JPG- oder PNG-Format mit einer Mindestgröße von 3000×2000px sein. Wenn du keine Fotos von deinem Unternehmen oder deinen Operations hast, kannst du gute Bilder auf Stock-Foto-Websites finden, wie Unsplash oder Freepik.
Fahrer-Pin
Der Fahrer-Pin ist ein kreisförmiges Symbol, das auf Karten angezeigt wird, um den Standort eines Fahrers anzuzeigen. Es muss im SVG-Format sein. Du kannst das Beispiel herunterladen und in einem Grafikprogramm wie Illustrator öffnen, um die Farbe des Pins an deine Unternehmensfarbe anzupassen.
