Ok, das mit den Farben kann kompliziert sein – oder ganz einfach. Je nach dem, wie man es anpackt. Wir sind für die einfache Variante. Deshalb nutzen wir für unsere TYPO3-Installationen etwas, das sich «Bootstrap» nennt. Und wie Bootstrap sich das mit den Farben zurechtgelegt hat, erklären wir dir auf dieser Seite.
Mehr ist nicht immer besser – besonders nicht bei Farben
Damit deine Website nicht wie ein Kinderzimmer nach 5 Tagen Grippe der Eltern aussieht, wenn der Schrank zu den Fingerfarben offen war, empfiehlt es sich, die Anzahl der zu verwendenden Farben zu begrenzen.
Wenn du oder deine Firma über ein «Corporate Design» verfügt, dann ist das soeben geschriebene ja eh klar!
Wie viele Farben sollen es denn sein?
Wir empfehlen
- 2 bis 4 Hauptfarben
- je eine Farbe für «Helll» und «Dunkel»
- sowie zusätzlich Zweck-Farben
Die Hauptfarben
Die Haupt-Farben benennen wir mit den englischen Begriffen: «primary», «secondary», «tertiary» und «quaternary». Zu Deutsch würden wir sie schlicht «erste», «zweite», «dritte» und «vierte» nennen.
Schau dir mal unser Logo oben links an! Was denkst du sind unsere Haupt-Farben?
Bei den Hauptfarben lohnt es sich, Überlegungen aus der Farbenlehre mit einzubeziehen.
Auch lohnt es sich so genannte «Komplementär-Farben» (dt. «ergänzende Farben») zu definieren.
Die Hell- und die Dunkel-Farbe
Hierbei handelt es sich meist um Grau- bzw. Schwarz-Töne, welche später für Schatierungen verwendet werden.
Die Zweck-Farben
Diese Farben dienen dazu, etwas zu bezwecken. Sie sollen dem Betrachter etwas mitteilen bzw. eines Aussage unterstützen.
| Active / Ausgewählt | etwas ist markiert und somit spezieller als das Andere |
| Erfolg | etwas hat geklappt, etwas wird gefördert |
| Information | etwas dient als Information, es soll auf etwas hingewiesen werden |
| Warnung | es soll vor etwas gewarnt werden, das «mehr» als eine Information ist aber «weniger» als eine Gefahr |
| Gefahr | «Gefahr, Will Robinson!» |
OK, und was war das mit dem «Bootstrap» nochmal?
Unsere TYPO3-Setups verwenden etwas, dass sich «Bootstrap» nennt. Es macht auch in puncto Farben das Leben viel sorgenfreier.
Sind einmal die oben beschriebenen Farben definiert, stellt Bootstrap viele verschiedene Inhaltselemente in den unterschiedlichen Farben zur Verfügung. Als Betreiber brauchst du also nur noch auszuwählen, was du gern verwenden möchtest.
Z.B. Text in unterschiedlichen Bedeutungen
- gedämpft
- primär
- sekundär
- Info
- Warnung
- Erfolg
- «Gefahr, Will Robinson!»
Oder entsprechende Buttons
Das Geniale dabei: Bootstrap entscheidet selbst, ob der Text auf einem Button hell oder dunkel sein soll. So kannst du dich ums Wesentliche kümmern und brauchst nicht dauernd irgendwelche Farben ein- und umzustellen.