Wie hinterlege/ändere ich das Branding für die App?

💡 Dunkler Modus

Für die Mitarbeiter App steht nun die Funktion des dunklen Modus (Dark mode) zur Verfügung! 

Der dunkle Modus muss einmalig aktiviert werden. Je nach Geräteeinstellungen des Nutzers kann die App dann im dunklen Design angezeigt werden.

Die Funktion ist derzeit nur im neuen Desktop-Design verfügbar. Alle Informationen zur Aktivierung und Nutzung des neuen Desktop-Designs findest du hier.

Das eigene Logo sowie die Firmenfarben sind essenziell für das Erscheinungsbild der eigenen Mitarbeiter App. Mit dem Branding Feature geben wir die Möglichkeit, das Erscheinungsbild der App direkt zu verändern und nach eigenen Wünschen zu gestalten.

Du findest das Feature in der Admin Console unter Einstellungen > Branding.

Brading-DE.png

Angepasst werden können Logos, Icons und Farben. Alle Änderungen, welche auf der linken Seite vorgenommen werden, können in der Vorschau auf der rechten Seite überprüft werden.

Zusätzlich kann neben dem hellen Modus auch der dunkle Modus konfiguriert werden. Der dunkle Modus wird in der zweiten Registerkarte angezeigt und funktioniert analog wie der helle Modus.

Achte darauf, dass sowohl im hellen als auch im dunklen Modus die Logos und Farben gut erkennbar sind, bzw. den nötigen Kontrast aufweisen. Der dunkle Modus muss einmalig aktiviert werden. Je nach Geräteeinstellungen des Nutzers kann die App dann im dunklen Design angezeigt werden.

Frame 823 (1).png

Um die Änderungen zu speichern, drücke in dem jeweiligen Abschnitt unten auf „Änderungen speichern“.

Save-Changes-DE.png

Assets

Favicon

Das eingestellte Favicon wird lediglich in der Browser-Version in der Tab-Leiste angezeigt. Beachte das Datei-Format, Seitenverhältnis und Mindestgröße, die für das Favicon in der Admin Console angegeben sind.

FAV-Icon-DE.png


Unternehmens-Logo

Das Unternehmens-Logo wird auf der Login Seite, in der mobilen App im Menü, sowie in der Webversion in der Kopfzeile angezeigt. Beachte die angegebenen Datei-Formate, Seitenverhältnis und Mindestgröße in der Admin Console.

Desktop:Desktop-Logo-DE.png

Smartphone:Mobile-Logo-DE.png

Beispiel für das passende Bildformat:

Frame 834.png
B
randing-Farben

Primärfarbe

Die Primärfarbe ist die Farbe der Buttons: Zum Erstellen eines neuen Beitrags oder Chats und auch dem Absenden von Nachrichten.

Dazu kann eine Farbe für die Schrift oder Symbole auf den Buttons eingestellt werden. Diese Farbe sollte einen hohen Kontrast zur Primärfarbe aufweisen, um gute Lesbarkeit zu gewährleisten und kann über das angegebene Kontrastverhältnis überprüft werden. Wir empfehlen weiß (#ffffff) für dunkle Primärfarben und schwarz (#000000) für helle Primärfarben.

Primary-color-DE.png


Primärtext

Weist die Primärfarbe ein geringes Kontrastverhältnis zum Hintergrund auf, kann hier eine zusätzliche Primärtext-Farbe eingestellt werden. Diese wird in der Desktop-Version unter anderem auf Namen von Nutzern und Channels angewendet. In der Smartphone-App wird die Primärtext-Farbe auf den Text neuer Nachrichten und auf das Menü in der Fußleiste angewendet.

Wir empfehlen die Primärtext-Farbe gleich der Primärfarbe zu setzen oder bei Bedarf einen leicht dunkleren Farbton zu wählen.

Primary-text-DE.png

Sekundärfarbe

Die Sekundärfarbe wird auf größere Flächen, wie den Hintergrund von Chatnachrichten angewandt. Hier empfehlen wir eine helle Farbe.

Die zweite einstellbare Farbe beeinflusst den Text, welcher sich möglichst gut von der darunter liegenden Sekundärfarbe abheben sollte. Dazu sollte das Kontrastverhältnis nicht zu niedrig sein.

Secondary-color-DE.png

Kontrastverhältnis

Bei allen einstellbaren Farben wird das Kontrastverhältnis angezeigt. Das Kontrastverhältnis ist die Stärke des Kontrastes beider eingestellten Farben zueinander (bei Primärfarbe und Sekundärfarbe). Ist nur eine Farbe einstellbar, wie bei der Primär- und Sekundärtext-Farbe, bezieht sich der Wert auf den Kontrast der Farbe zum Hintergrund.

Grundsätzlich gilt die Regel: Je höher das Kontrastverhältnis, desto besser. Dies bezieht sich insbesondere auf die Lesbarkeit von Text und das Erkennen von Symbolen.

Ist das Kontrastverhältnis zu niedrig, wird ein Warnhinweis angezeigt

Contrast-Ratio-DE.png

War dieser Beitrag hilfreich?

0 von 0 fanden dies hilfreich

Haben Sie Fragen? Anfrage einreichen

Kommentare

0 Kommentare

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.