Colors

Ich möchte euch zeigen, wie wir Farben in unserem wordpress Design System vorbereitet haben und ich gehe als allererstes einmal in den Side Editor und zeige euch, welche Farbpaletten vorbereitet sind. Wir finden die Farben unter Design Editor und anschließend gibt es eben hier unter Stile den Abschnitt Farben.

Und hier haben wir die Möglichkeit, die Farbpalette zu wählen. Es gibt auch, ich gehe noch mal eine Ebene zurück, hier oben Stile durchstöbern, das kann dann auch eine Kombination von Farbe und Schrift und solchen Sachen sein, also wenn es wirklich nur um die Farben geht, dann werden wir hier in dem Bereich Paletten bearbeiten schon ganz richtig und ich gehe mal ganz kurz hier rein.

Standardmäßig, das bedeutet in unserem Parentsem aber auch standardmäßig in unserem Childsem, haben wir eine Farbpalette vorbereitet, die insgesamt aus 12 Farbfamilien besteht, also rot, orange, gelb und so weiter und einer 13 Graustufen basierten Farbfamilie. Wenn man die so nennen kann und dann innerhalb jeder Farbfamilie gibt es Abstufungen in 9 Helligkeitsgraden von ganz hell bis ganz dunkel.

Das hat den Hintergrund, dass wir nach Möglichkeit im Code, also jede Farbe hat ja von wordpress eine SS variable im Code zugewiesen bekommen, dass wir nach Möglichkeit die bestehende Systematik lieber überschreiben wollen, als dass wir eine neue Systematik aufbauen. Das kann nämlich dann durchaus mit vorbereiteten Pattern oder mit anderen Dingen gerne mal so ein bisschen mehr Aufwand erzeugen. Hinten raus im Projekt, wenn man das dann plötzlich alles ordentlich machen möchte.

Deswegen ist sozusagen ein möglicher Startpunkt, den wir vorbereitet haben. Es gibt eine vollumfängliche Farbpalette, und wenn ich die benutzen möchte, dann hat das eigentlich wahrscheinlich 2 Gründe. Entweder hat das Projekt selber noch überhaupt gar keine Farbpalette, das heißt, ich benutze WORDPRESS eigentlich eher so als Design Tool und benutze direkt hier diese Farben oder ich gehe eben hin und passe diese Farben auf die Farbsystematik, die ein Kunde zum Beispiel im Corporate Design hat, entsprechend an.

Zeig mal ganz kurz, was ich damit meine. Also wenn ich jetzt diese Farbpalette hier habe und ich gehe einfach noch mal raus auf die Startseite, ich habe hier mal standardmäßig hier oben so ein Pattern eingebaut für so ein Intro und dann hier noch ein zweites Pattern für so ein Featured Content Bereich und ich möchte jetzt hier diese Box einfärben und hier oben diesen Hintergrund, dann wäre ein sehr einfacher weg, dass ich einfach in den Editor rein gehe und mir dann die entsprechenden Bereiche schnappe und dann natürlich hier.

Die Farben überschreibe, also wenn es jetzt zum Beispiel hier um diese Petrolfarben werden soll und hier unten diese Box, dann diese Farbe hier bekommen soll, dann wäre das halt relativ schnell gemacht und auch hier kann ich natürlich dann hingehen und zum Beispiel so einen ganz ganz hellen Hintergrund mal nehmen. Ich nehme mal jetzt hier diesen zum Beispiel als nicht ganz so schön, so vielleicht okay und wenn ich das dann speichere, dann habe ich natürlich da ziemlich schnell.

Ich sag mal einen Farbeindruck drauf. Ich nenne es jetzt mein Design schon sehr sehr gut angedeutet. Ich bin persönlich auch eher ein Freund davon, wenn man in so einem Wire Frame artigen, ich sag mal frühen Projektstatus ist, dass da auch durchaus schon Farben im Spiel sind, weil die halt einfach eine starke Wirkung haben und das wäre eben hier sehr sehr schnell umsetzbar.

So, da ich jetzt Farben aus der Farbpalette genommen habe, könnte ich die natürlich später auch anpassen. Also ich meine damit jetzt nicht, dass ich grün nehme und anschließend aus einem grünen Farbton roten Farbton mache, deswegen haben wir ja auch alle Farben vorbereitet, aber natürlich könnte es jetzt sein, dass ich, ich sag mal damit schnell geht, am Anfang erst mal loslege, schon mal so grob die Seite aufbaue und später bekomme ich dann vom Kunden.

Die echte Farbpalette und ich habe jetzt zum Beispiel hier als Farbe den Thiel 400 Wert genommen und mal angenommen, der Kunde würde später mir dann die richtige Farbpalette liefern, dann könnte ich natürlich hingehen, das mache ich jetzt mal und könnte diese Farbe hier überschreiben.

Ich habe also die bestehende Farbpalette geladen. Ich suche mir den T 400 wert raus, klicke ihn an und könnte jetzt sagen Naja, der Kunde hat jetzt aber einen etwas anderen Farbwert geliefert und zwar ich passe den hier sehen wir das jetzt gerade, ich versuche das gerade mal so nach Augenmaß so einigermaßen anzupassen, würde dann zum Beispiel sagen, Naja der ist jetzt aber beim Kundenprojekt ist ja so ein bisschen.

Bisschen grüner zum Beispiel so. Ja, ihr seht insgesamt mit 12 Farbfamilien, da ist eigentlich auch schon das Allermeiste dabei, aber natürlich muss es, wenn Corporate Design vorliegt, natürlich dann der exakte Farbwert sein, und den könnte ich jetzt hier überschreiben. Der Vorteil, wenn ich das so mache, ist ganz einfach.

Der Code, also die Farbvariable im Hintergrund, bleibt gleich. Wenn ich das jetzt also hier speichere und aktualisiere und mir die Seite noch mal angucke und noch mal neu lade, so, dann hat sich dieser Farbwert eben hier verändert und ich muss die Seite jetzt nicht händisch irgendwie noch mal aktualisieren, das wäre so ein möglicher Ansatz, nehme die bestehende Farbpalette und er arbeitet entweder direkt damit und.

Oder ich arbeite direkt damit und ändere aber später die Basis Systematik sozusagen noch mal auf spezifische Farben ab. Jetzt könnte es natürlich sein, dass ich diesen Workflow grundsätzlich schon gut finde, aber nicht mit so einer großen Menge an Farben und deswegen haben wir eben hier in unserem Design System nicht nur diese Farbpalette vorbereitet, sondern auch noch eine reduzierte Farbpalette, hier existiert dann, ich zeige das mal hier auf der rechten Seite jede Farbe dann in 3 helligkeitsstufen.

Das ist sozusagen der vollumfängliche Aufbau hier dann eben die reduzierte Farbpalette mit 3 Helligkeitsstufen pro Farbe und eben noch eine ganz reduzierte Farbpalette, die wirklich nur schwarz, weiß, Grau beinhaltet. Wenn ihr wirklich mehr oder weniger bei 0 starten wollt und die Farbpalette komplett von Hand aufbauen wollt, wenn ich die jetzt wählen würde, dann.

Passiert ja folgendes. Der Til 400 Farbwert den ich den ganzen Elementen zugewiesen hatte, der existiert jetzt nicht mehr, die Variable ist weg und damit fällt das Ganze dann jetzt hier natürlich auf eine schwarz weiß Version wieder zurück. So und jetzt könnte ich mir eigene Farben anlegen um sozusagen ein komplett eigenes System aufzubauen ist nicht.

Ganz meine Empfehlung, weil ich natürlich sage, wir haben ein Designsystem, weil wir dieses System nehmen und individualisieren wollen. Wir wollen nicht das System löschen und ein Neues aufbauen, dann ja, es ist den Zweck entfremde ich das so ein bisschen, aber technisch möglich ist das Ganze natürlich. Ein Vorteil wäre jetzt natürlich mal angenommen, ich weiß, im Hintergrund ist hier eigentlich t 400 verknüpft, t 400 existiert jetzt aber nicht mehr, deswegen ist es grau und.

Und ich lege jetzt eine neue Farbe an, dass ich, wenn ich eigene Farbpaletten anlege, mir auch diese Namensgebung angewöhne also dass ich die Variablen, die vorbereitet sind im Designsystem im Idealfall halt auch bediene. Das heißt, wenn ich jetzt eine neue Farbe anlegen würde und ihr den Namen gebe, Ziel 400, dann würde hier diese Sektion natürlich dann auch plötzlich wieder eingefärbt.

Okay ich gehe mal kurz zurück und stelle das wieder auf die volle Farbpalette um und aktualisiere das hier wieder und dann sind die Farben natürlich auch alle wieder da. So, das ist natürlich schon sehr schön, man kann also theoretisch auch durchaus schon selber für sich die Seite so ein bisschen farbig aufbauen, um so einen Eindruck zu bekommen und dann im ersten Gespräch mit dem Kunden beispielsweise stellt man mal eben kurz auf die Schwarz weiß Farbpalette um, damit man.

Dass sie einen Wireframe Artigeren Look bekommt und der Kunde nicht von falschen Farben vielleicht irritiert ist. Wir haben aber trotzdem schon so ein bisschen vorausgearbeitet okay. Gut, was gibt es noch in wordpress, was ich mit den Farben machen kann? Es besteht neben dem Überschreiben bestehender Farben, was definitiv meine Empfehlung wäre, hier unten natürlich auch immer noch die Möglichkeit eine individuelle Farbe hinzuzufügen.

Der Nachteil, wenn ich das mache, ich kann das mal kurz zeigen, ich würde jetzt hier eine Farbe anlegen, jetzt könnte ich mir irgendeine aussuchen, die hier oben nicht enthalten ist und könnte diese Farbe, ich mache das mal eben kurz und sage, jetzt gibt es hier pink, ich nehme das jetzt einfach mal pink so und speichere das ab, anschließend gehe ich auf die Startseite, ich lade die einmal neu und wähle jetzt hier diese Box mal in Pink aus.

Also hier steht jetzt natürlich diese zusätzliche Farbe noch mit zur Verfügung. Ich muss mal eben kurz ein bisschen zoomen, hier unten ist die jetzt so da und wenn ich die jetzt auswähle und speichere und mir das hier angucke so, dann funktioniert das natürlich alles. Ich kann diese Farbe auch nach wie vor global anpassen, also es ist.

Schon ganz praktisch, wenn mir dieser Pinkton jetzt nicht gefällt. Und ich sage jetzt, der soll halt noch ein bisschen pinker werden, so, dann habe ich die Möglichkeit das hier anzupassen, so und dann lade ich neu und jetzt wird sich ich lade jetzt neu, der Farbton natürlich auch noch mal verändern, aber im Code schreibt wordpress hier andere Variablen. Wenn ich mir also angucke, wie ist jetzt hier die Variable, die diese Farbe definiert, dann steht jetzt hier WP Preset Color Custom Pink und.

Und dieses Custom bekomme ich da so ohne weiteres nicht raus. Das bedeutet, dieser Wert steht jetzt in der Datenbank. Wenn ich aber später den gesamten Code in meinem Theme haben möchte, also alle Farben wirklich in dem Theme, dass das eigenständig installierbar ist und nicht die Farben dann verloren gehen, dann kann das mitunter ziemlich lästig sein.

Diese Farben im Nachhinein auf die Hauptpalette wieder anzuwenden, denn dann muss ich in jeder Unterseite überall die Elemente finden, die ich sozusagen mit diesen Custom Farben verknüpft habe und die sozusagen alle neu mit der neu ordentlich angelegten Farbe verknüpfen. Es kann also hinten raus im Projekt, aber nur in den Fällen, wo ich eben sage, ich möchte nicht, dass Farbanpassungen in der Datenbank stehen, hinten raus kann das dann plötzlich noch mal ziemlich zeitintensiv werden.

Ohne dass sich optisch auf der Website irgendwas verändert. Einfach nur weil ich merke, jetzt wird es irgendwie unordentlich im Code. Ich möchte, dass das alles in meiner Versionierung zum Beispiel drin ist. Dann müsste es im Theme stehen, also konkret in der Theme Json, wo WORDPRESS die Farben dokumentiert und dann müsste ich diese Farben eben alle übertragen und bei diesem übertragen wird sich eben der Name Custom.

Definitiv ändern das gerade eben noch ein großer Nachteil. Deswegen wäre es nicht meine Empfehlung aktuell hier mit Custom Colors zu arbeiten, weil es eben eigentlich nur empfehlenswert ist, wenn ich sage, es ist für mich völlig okay, dass alle Anpassungen in der Datenbank stehen und ich brauche das nicht in meinem Code oder in meiner in meinem Repository oder wo auch immer okay gut.

Ich zeige euch mal ganz kurz, was der Allerschlimmste weg wäre, mit Farben zu arbeiten. Ich habe diese Custom Color jetzt hier wieder weggenommen und lade die Seite hier neu und verwende jetzt hier wieder. Jetzt ist das ja wieder auf grau zurückgefallen, weil ich die Farbe gelöscht habe und ich ändere das jetzt hier noch mal ab, dass ich eben hier wieder einen schönen grünen Ton irgendwie verwende, also irgendwie sowas okay.

Das allerschlechteste Vorgehen wäre, wenn ich zum Beispiel jetzt diesen Button hier ändern möchte in der Farbe und ich ändere hier die Hintergrundfarbe, dass ich keine Farbe aus der Palette nehme, sondern hier oben den Color Picker verwende und jetzt zum Beispiel sage, ich möchte hier, dass hier so ein oranger Button entsteht oder so etwas, wieso vielleicht so jetzt habe ich eine Farbe, die ich später.

Die also die Custom ist aber die nicht mal als globale Farbe Custom angelegt worden ist. Wie ich das voll mit dem Pink gezeigt habe, sondern diese Farbe ist jetzt wirklich sehr sehr schwer wiederzufinden, die rutscht mir möglicherweise komplett durch, wenn ich das später auf meine Code Basis übertragen möchte, dann wird es richtig lästig, weil dann muss ich wirklich die Unterseiten durchgehen und gucken, wo ist sozusagen wirklich völlig außerhalb der Systematik gearbeitet worden.

Es gibt also eigentlich so 3 Ansätze, einmal 100% Systematik, so wie das Theme, also in unserem Fall das Design System es vorbereitet hat. Das kann ich dann überschreiben. Möglichkeit 2. Ich füge eigene Custom Farben hinzu, ist ein Ansatz, wenn ich in der Datenbank arbeiten möchte ansonsten ja ich fand es immer eher etwas unpraktisch hinten raus aber.

Ja und Möglichkeit 3 ist. Ich benutze wordpress wirklich wie ein Design Tool und bin fein damit, dass wenn ich den Button an 20 stellen mit dem Color Picker gestaltet habe, dass ich, wenn der die Farbe ändern soll, den auch an 20 stellen ändern muss. Funktioniert ist aber jetzt nicht unbedingt ein professioneller Ansatz mit einer Design Systematik zu arbeiten und dementsprechend auf keinen Fall meine Empfehlung okay.

Ich speichere das jetzt hier trotzdem noch mal, um euch kurz zu zeigen, wie das denn jetzt hier dann im Code aussieht. Wenn ich mir nämlich jetzt hier angucke, wo kommt die Farbe her, jetzt muss ich mal kurz schauen, wo die jetzt hier überhaupt ist. Wo haben wir sie denn jetzt hier, hier oben, dann steht die einfach hier inline im Style mit drin und jetzt überhaupt nicht über eine Variable zugewiesen okay.

Ja, dann sieht es natürlich so aus, dass wenn ich die Farbpalette verändern möchte oder zum Beispiel auch mit der reduzierten Farbpalette gestartet habe oder ich die Farben vom Namen her ändern möchte oder wenn ich eben sage, naja, diese ganzen 120 Farben der Hauptpalette, die sind grundsätzlich schon gut, aber ich brauche nicht alle 120. Es reicht mir, wenn ich irgendwie 5 Abstufungen pro Farbe habe, dann möchte ich euch natürlich zeigen, wo diese Anpassung denn grundsätzlich möglich wäre, das ist die Theme Jason.

Ich gehe hier raus und in Werkzeuge Theme Datei Editor rein, da kann ich die Theme json bearbeiten. Kann ich natürlich auch in meiner Codebasis machen, ich zeige euch das jetzt hier nur innerhalb von wordpress, weil das jetzt einfach leichter zu zeigen ist. Ich bin in meinem Child theme oder eben in meinem Haupt theme, ich zeige euch das mal kurz wie es im Parent umgesetzt ist. Hier habe ich eben die große Theme json, wo sozusagen alles drin steht und hier kommen jetzt die ganzen Farben, alle untereinander.

Und damit das leichter Customized werden kann, haben wir das eben im Child Theme. Ich wechsele jetzt rüber auf das Child Theme, so oft vorbereitet, dass es im Ordner Styles im Ordner coloss diese 3 farbpaletten sozusagen separiert gibt also einmal eben die volle Farbpalette, aber da steht jetzt eben nicht alles drin, was in der Theme json drin steht, sondern eben wirklich nur die Farben und ich zeige das jetzt hier am Beispiel der vollen Farbpalette, ich denke das ist klar, wenn ich dann die minimale wähle, dann sind es eben weniger Farben.

Das Prinzip ist das Gleiche. Die Farben sind in OK LC h definiert. Das ist eine moderne Farbnotation, die auch den P 3 Farbraum abdeckt, das heißt, die Farben können sehr sehr stark leuchten, wenn ich das möchte, und wir haben eben den Vorteil, dass wir hier, so wie wir die Farbpalette vorbereitet haben, das seht ihr auch in der Dokumentation, wo wir alle Farben einmal aufgelistet haben, die Farbpalette ist natürlich barrierefrei bedeutet.

Alle Farben können natürlich mit weiß oder schwarzem Text kombiniert werden und das, was uns eben wichtig ist beim Anlegen einer Farbpalette, dass alle Farben sozusagen an der gleichen Stufe, also zum Beispiel, ich sag mal, an einem gleichen Helligkeitswert vom Kontrastverhältnis kippen.

Das ist sozusagen eigentlich zwingend notwendig, dass wir dann OK lch benutzen, um sowohl im Code eine nachvollziehbare Struktur zu bekommen, also zum Beispiel hier seht ihr die Werte, die reduzieren sich immer sozusagen um glatte Zehnerschritte hier, und das passiert eben bei jeder Farbe, das heißt, die sind alle ganz systematisch aufgebaut.

Der Farbkreis dreht sich in einem einheitlichen Winkel, sozusagen immer von Farbe zu Farbe. Innerhalb jeder Farbe gehen wir immer sozusagen in 10% Schritten und am Ende noch mal in einem 5% Schritt durch die Helligkeit durch und so weiter und trotzdem kippt sozusagen das Kontrastverhältnis von schwarz zu weiß bei allen Farben an der gleichen Stelle, so dass eben der 500 er Farbwert beispielsweise eben noch mit Schwarz kombiniert werden kann und dann der 600 er Farbwert, der ein bisschen dunkler ist, eben mit weißem Text kombiniert werden muss.

Und das setzt eigentlich OK LC h zwingend voraus, dass wir sowohl sag ich mal so ein bisschen diese ordentliche Coach Struktur haben, als am Ende hinten raus eben auch eine barrierefreie Farbpalette, die eben unsere optische Wahrnehmung sehr sehr stark abbildet, das ist das was OK LC h eben macht.

Ja, und hier könntet ihr natürlich dann hingehen. Der Slug pro Farbe ist eben das, was im Code steht, das würde ich wie gesagt eben nicht ändern, sondern maximal überschreiben, aber natürlich könntet ihr auch hier den Farbton ändern oder ganze Farben rauslöschen oder eben den Namen ändern, also wenn dann da für den Kunden.

Ich sag jetzt mal eher hell und dunkel orange stehen soll als orange 100 und sowas. Dann ließe sich das hier natürlich anpassen, also die Beschriftung, die kann immer sehr sehr leicht customized werden, die Farbe natürlich auch. Die Slugs würde ich generell versuchen nicht unbedingt anzufassen, weil das gibt natürlich einen Grund, warum wir diese Systematik gewählt haben, ja.

Und ich denke, da haben wir eigentlich eine ganz gute Ausgangssituation geschaffen, um Projekte jeglicher Größenordnung und jeglicher Professionalität ganz gut starten zu können.