|
|
|
---
|
|
|
|
title: Design
|
|
|
|
---
|
|
|
|
|
|
|
|
## Primärfarbe / Farbpalette
|
|
|
|
|
|
|
|
- _Kann konfiguriert werden durch: [wechange eG](Rollen-und-Berechtigungen#wechange-eg)_
|
|
|
|
- Das Design-Konzept für unsere Portale sieht vor, dass es eine Primärfarbe gibt, die in verschiedenen Helligkeitsstufen zum Einsatz kommt. Diese Primärfarbe kann für jedes Portal frei gewählt werden.
|
|
|
|
- Die Primärfarbe bildet ein Farbpalette mit 10 Abstufungen hinsichtlich Helligkeit/Deckkraft.
|
|
|
|
- Die Haupt-Stufe dieser Palette (Stufe 600) wird am häufigsten verwendet, und zwar als Schriftfarbe vor heißem Hintergrund bzw. als Hintergrundfarbe hinter weißer Schrift. Zwecks Barrierefreiheit muss diese Haupt-Stufe daher dunkel genug sein, dass der Kontrast zu weiß (`#ffffff`) mindestens 4.5 beträgt (entspricht WCAG AA).
|
|
|
|
- Mit dem Online-Tool [Color palette generator](https://palette.saas-ui.dev/) könnt ihr automatisch eine Farbpalette erstellen, die diesen Anforderungen entspricht. Gebt die Farbe, auf der die Palette basieren soll, als Primary color ein. Es wird automatisch eine 10-stufige Palette generiert, bei der die 600er-Stufe den Barrierefreiheis-Anforderungen an den Kontrast genügt.
|
|
|
|
- Alternativ könnt ihr unter https://v2.chakra-ui.com/docs/styled-system/theme eine Standard-Palette auswählen.
|
|
|
|
- Die Haupt-Stufe dieser Palette (Stufe 600) wird am häufigsten verwendet, und zwar als Schriftfarbe vor weißem Hintergrund bzw. als Hintergrundfarbe hinter weißer Schrift. Zwecks Barrierefreiheit muss diese Haupt-Stufe daher dunkel genug sein, dass der Kontrast zu weiß (`#ffffff`) mindestens 4.5 beträgt (entspricht WCAG AA).
|
|
|
|
- Mit dem [Colour contrast checker](https://colourcontrast.cc/) könnt ihr den Kontrast zwischen zwei Farben ermitteln.
|
|
|
|
- Mit dem [Color palette generator](https://palette.saas-ui.dev/) könnt ihr automatisch eine Farbpalette erstellen, die diesen Anforderungen entspricht. Gebt die Farbe, auf der die Palette basieren soll, als Primary color ein. Es wird automatisch eine 10-stufige Palette generiert, bei der die 600er-Stufe den Barrierefreiheis-Anforderungen an den Kontrast genügt.
|
|
|
|
- Alternativ könnt ihr eine der [Standard-Paletten unseres Design-Systems](https://v2.chakra-ui.com/docs/styled-system/theme) auswählen.
|
|
|
|
|
|
|
|
## Logo
|
|
|
|
|
| ... | ... | @@ -18,27 +18,25 @@ title: Design |
|
|
|
- Im Portal in der linken oberen Ecke
|
|
|
|
- Auf Portalen mit dem 2. Redesign-Paket (s. [Menüs](Menüs)) wird das Logo nur einige Sekunden angezeigt, bevor es durch das Spaces-Dropdown-Menü aus dem Bildschirm geschoben wird.
|
|
|
|
- In der [Nextcloud](Nextcloud) links oben
|
|
|
|
- Als Favicon (s. [Definition von Wikipedia](https://de.wikipedia.org/wiki/Favicon)) für alle Seiten
|
|
|
|
- Als Favicon (s. ggf. [Was ist ein Favicon](https://de.wikipedia.org/wiki/Favicon)) für alle Seiten
|
|
|
|
- In den E-Mails, die vom System versendet werden (bspw. Einladungs- und Benachrichtigungsmails)
|
|
|
|
- Für die verschiedenen Zwecke brauchen wir das Logo in verschiedenen Formaten
|
|
|
|
- Quadratisch; 72x72px; SVG oder PNG mit transparentem Hintergrund; meistens ein reines Logo ohne Schriftzug
|
|
|
|
- Optional: Breiteres, rechteckiges Logo; 72px Höhe, größere Breite; SVG oder PNG mit transparentem Hintergrund; meistens das volle Logo mit Schriftzug
|
|
|
|
|
|
|
|
|
|
|
|
## Schriftart
|
|
|
|
|
|
|
|
- _Kann konfiguriert werden durch: [wechange eG](Rollen-und-Berechtigungen#wechange-eg)_
|
|
|
|
- Als Standard-Schriftart bieten wir IBM Plex Sans an.
|
|
|
|
- Alternativ kann eine eigene Schriftart verwendet werden. Für diese müssen uns die Font Files zur Verfügung gestellt werden. Lizenzrechtliche Fragen sind ggf. zu klären.
|
|
|
|
|
|
|
|
|
|
|
|
## Illustrationen (optional)
|
|
|
|
|
|
|
|
- _Kann konfiguriert werden durch: [wechange eG](Rollen-und-Berechtigungen#wechange-eg)_
|
|
|
|
- Betrifft nur Portale mit dem 1. Redesign-Paket (s. [Registrierung und Profil–Setup](Registrierung-und-Profil–Setup)).
|
|
|
|
- Illustrationen sind rein optionale Dekorationselemente. Portale sind auch ohne Illustrationen voll funktionsfähig.
|
|
|
|
- Anmelde-Seite
|
|
|
|
- Unter portal-domain.de/login ist es möglich, halbseitig eine Illustration anzuzeigen. Auf dem Desktop entsteht dann ein Split Screen. Auf mobilen Geräten kann hier KEINE Illustration angezeigt werden.
|
|
|
|
- Unter `portal-domain.de/login` ist es möglich, halbseitig eine Illustration anzuzeigen. Auf dem Desktop entsteht dann ein Split Screen. Auf mobilen Geräten kann hier KEINE Illustration angezeigt werden.
|
|
|
|
- Anforderungen
|
|
|
|
- Mindestmaß: H640 x B800 px
|
|
|
|
- Grafiken sollten am Besten im SVG-Format gesendet werden, da es gut skalierbar und datensparend ist.
|
| ... | ... | @@ -46,7 +44,7 @@ title: Design |
|
|
|
- Beispiel:
|
|
|
|
- 
|
|
|
|
- Seite zwischen Registrierung und Profil-Setup
|
|
|
|
- Nachdem ein User die Registrierung abgeschlossen hat und bevor der Profil-Setup beginnt, wird die Info-Seite portal-domain.de/signup/welcome/ angezeigt. Hier kann ebenfalls eine Illustration angezeigt werden (ebenfalls nur auf Desktop, nicht auf mobil).
|
|
|
|
- Nachdem ein User die Registrierung abgeschlossen hat und bevor der Profil-Setup beginnt, wird die Info-Seite `portal-domain.de/signup/welcome` angezeigt. Hier kann ebenfalls eine Illustration angezeigt werden (ebenfalls nur auf Desktop, nicht auf mobil).
|
|
|
|
- Die Anforderungen sind dieselben wie an die Illustration auf der Anmelde-Seite. Es kann auch dieselbe Illustration verwendet werden.
|
|
|
|
- Beispiel:
|
|
|
|
-  |
|
|
\ No newline at end of file |
