PORTAL und PPS Knowledge Base

Portalfarben

Für ein konsistentes Look-and-feel wird eine definierte Farbpalette von allen aktivierten Modulen des PORTALs verwendet.

Die PORTALfarben der jeweiligen Installation können in der Kitchen Sink (/admin/seitenverwaltung/kitchensink) sowie in den https://peiq.atlassian.net/wiki/spaces/PUPKB/pages/78348424 abgerufen werden.

Funktionalitäten der PORTALfarben

  • Vereinheitlichung des User Interfaces

  • Gestaltung der Farbauswahl im PORTAL

Inhaltsverzeichnis

Allgemeine Beschreibung

Insgesamt können fünf verschiedene PORTALfarben (primary, secondary, action, contact, meta) sowie ggf. drei Hinweisfarben (success, warning, alert), fünf verschiedene Schwarz-, Grau- und Weißtöne (white, light gray, medium gray, dark gray, black) sowie eine Admin-Farbe (admin) definiert werden. Für ein konsistentes Look-and-feel wird eine definierte Farbpalette von allen aktivierten Modulen des PORTALs verwendet.

Die PORTALfarben der jeweiligen Installation können in der Kitchen Sink (/admin/seitenverwaltung/kitchensink) sowie in den https://peiq.atlassian.net/wiki/spaces/PUPKB/pages/78348424 abgerufen werden.

PORTALfarben

primary-Color

Die primary-Color ist die “Hausfarbe” und wird im PORTAL in der Standardkonfiguration dominant verwendet (z. B. im Header, für die Navigationsleiste und standardmäßig auch für alle Links).

secondary-Color

Die secondary-Color ist eine weitere Basis-Farbe und kommt bei zahlreichen Hintergründen und Boxen zum Einsatz. Sie wird in der Standardkonfiguration dezenter verwendet. Idealerweise handelt es sich dabei um einen Farbwert aus dem hellen Grau-Spektrum.

action-Color

Die action-Color soll Aktionsmöglichkeiten hervorheben. In der Standardkonfiguration wird sie für Buttons wie “Beitrag erstellen”, “Mitmachen”, “Kommentar verfassen” etc. verwendet. Die action-Color muss sich nicht von der primary-Color unterscheiden – je nachdem, wie sehr die Mitmachmöglichkeiten im PORTAL hervorgehoben werden sollen.

contact-Color

Die contact-Color soll Kontaktinformationen (hauptsächlich im Kleinanzeigen- und Stellenanzeigen-Modul hervorheben. Die contact-Color muss sich nicht von der primary-Color unterscheiden – je nachdem, wie sehr die Kontaktmöglichkeiten im PORTAL hervorgehoben werden sollen.

milkglass-Color

Die milkglass-Color ist durchscheinend und kommt als Hintergrund bzw. zur Abdunklung zum Einsatz. Beispielsweise bei geöffnetem Benutzermenü oder dem Teaser-Text, der sich auf Bildern befindet. Best Practice ist hierbei ein dunkler Farbton. Neben dem Farbton an sich kann hier auch der Alphakanal – also der Grad der Transparenz – gewählt werden (Standardmäßig: 0,75).

meta-Color

Die meta-Color ist meist in einem dunkleren Anthrazit gehalten und wird häufig für erklärende Hinweisschriften in User Interfaces (deutsch: Benutzeroberflächen) sowie standardmäßig für die Metadaten der Beitragsteaser verwendet.

Hinweisfarben

Im Folgenden werden die Hinweisfarben (success, warning, alert) definiert, welche hauptsächlich für Rückmeldungen auf Nutzeraktionen (z. B. Erfolgsmeldungen, Warnhinweise und Fehlermeldungen) verwendet werden. Hier sind bereits Standardwerte hinterlegt, diese können jedoch auch kundenspezifisch überschrieben werden.

Farbklasse

Hexadezimalcode

Farbklasse

Hexadezimalcode

success-Color (Erfolgsmeldungen)

Standardwert: #0ede4d

warning-Color (Warnhinweise)

Standardwert: #ffe066

alert-Color (Fehlermeldungen)

Standardwert: #f25f5c

admin-Color (Adminfunktionen)

Die admin-Color hebt alle Verwaltungsfunktionen im PORTAL hervor. Dieser Wert soll bewusst im starken Kontrast zur restlichen Seite stehen.

Standardwert: #e40066

Schwarz-, Grau- & Weißtöne

Schwarz-, Grau- und Weißtöne dienen im PORTAL hauptsächlich für Infokästen, Formulare, Verwaltungen, Schriftfarbe etc. Hier sind bereits Standardwerte definiert, diese können jedoch kundenspezifisch überschrieben werden.

Farbklasse

Hexadezimalcode

Farbklasse

Hexadezimalcode

black (Schwarzton)

Standardwert: #0a0a0a

white (Weißton)

Standardwert: #fefefe

light-gray (Helles Grau)

Standardwert: #e6e6e6

medium-gray (Mittleres Grau)

Standardwert: #cacaca

dark-gray (Dunkles Grau)

Standardwert: #8a8a8a

Anleitung zum Set-up

Jedes PEIQ-PORTAL greift auf eine Farbpalette von 15 Farben zurück. Insgesamt können sechs verschiedene PORTALfarben (primary, secondary, action, contact, meta, milkglass) definiert werden. Für ein konsistentes Look-and-feel wird die unten definierte Farbpalette von allen aktivierten Modulen des PEIQ PORTALs verwendet. Damit müssen diese nur einmalig global definiert werden. Unten stehend ist die Auflistung der verschiedenen Farben sowie eine kurze Erläuterung zu finden. 

Die Hinweisfarben sowie darüber hinaus die im PORTAL verwendeten Schwarz-, Grau- und Weißtöne (verwendet v. a. für Infokästen, Formulare, Verwaltungen, Schriftfarbe etc.), haben einen Standardwert hinterlegt, der jedoch kundenspezifisch überschrieben werden kann.

PEIQ-seitig wird an dieser Stelle um einen Abgleich dieser Farben mit der Corporate Identity gebeten. Hinweis: Alle Farben müssen im Hexadezimalwert angegeben werden. Falls nur RGB bzw. CMYK-Werte zur Verfügung stehen, kann der entsprechende Hex-Wert hier ermittelt werden: http://www.farbtabelle.at/farben-umrechnen/  

Farbe

Hex-Code der CI

Beschreibung

Defaultwert
(falls keine Angabe)

Farbe

Hex-Code der CI

Beschreibung

Defaultwert
(falls keine Angabe)

Portalfarben / CI

primary

#

Dominante “Hausfarbe”, verwendet v.a. im Header, für die Navigationsleiste und standardmäßig auch für alle Links

-

secondary

#

Weitere “Hausfarbe”, dezenter verwendet als die primary color

-

action

#

Aktionsmöglichkeiten: Buttons, wie “Beitrag erstellen”, “Mitmachen”, “Kommentar verfassen” etc. Die action-Color muss sich nicht von der primary-Color unterscheiden, je nachdem, wie sehr die Mitmachmöglichkeiten im PORTAL hervorgehoben werden sollen

-

contact

#

Kontaktinformationen (hauptsächlich im Kleinanzeigen- und Stellenanzeigen-Modul relevant)

-

meta

#

Die meta-Color ist meist in einem dunkleren Anthrazit gehalten und wird für erklärende Hinweisschriften in User Interfaces sowie standardmäßig für die Metadaten der Beitragsteaser verwendet.

-

milkglass

#

Die milkglass-color ist durchscheinend und kommt als Hintergrund bzw. zur Abdunklung zum Beispiel bei geöffnetem Benutzermenü oder dem Teaser-Text, der sich auf Bildern befindet zum Einsatz. Best Practice ist hierbei ein dunkler Farbton. Neben dem Farbton an sich kann hier auch der Alphakanal - also der Grad der Transparenz - gewählt werden (Default: 0,75).

-

Hinweisfarben

success

#

Hinweisfarbe für Erfolgsmeldungen

#0ede4d

warning

#

Hinweisfarbe für Warnhinweise

#ffe066

alert

#

Hinweisfarbe für Fehlermeldungen

#f25f5c

admin

#

Die admin-Color hebt alle Verwaltungsfunktionen im PORTAL hervor. Dieser Wert soll bewusst im starken Kontrast zur restlichen Seite stehen.

#e40066

Schwarz-, Weiß- & Grautöne

white

#

Die Schwarz-, Grau- und Weißtöne werden hauptsächlich für Infokästen, Formulare, Verwaltungen, Schriftfarbe etc. verwendet. Hier sind bereits Standardwerte definiert, diese können jedoch kundenspezifisch überschrieben werden.

#FFFFFF

light-gray

#

#e6e6e6

medium-gray

#

#cacaca

dark-grey

#

#8a8a8a

black

#

#222222

 

Verwandte Seiten

 

Nur für PEIQ-Mitarbeiter:innen
https://peiq.atlassian.net/wiki/x/DICRAw