De meeste moderne WordPress-websites hebben inmiddels wel een vorm van een designsysteem.
Misschien noem je het zelf niet zo. Misschien gebruik je gewoon een vaste set kleuren door de hele website heen: je belangrijkste merkkleur, een secundaire kleur, tekstkleuren, achtergronden en misschien een paar accentkleuren.
Maar WordPress-thema’s en pagebuilders stimuleren steeds meer om die kleuren één keer vast te leggen en vervolgens overal opnieuw te gebruiken.
Elementor heeft Global Colors. Divi 5 heeft Global Colors en Design Variables. Astra heeft zijn Global Palette. En WordPress zelf heeft Global Styles en kleurenpaletten binnen thema’s.
Dat is een veel betere manier om een website op te bouwen dan steeds opnieuw dezelfde hex-codes in te voeren.
En dat roept een interessante vraag op:
Als je WordPress-website al weet wat je merkkleuren zijn, waarom zou je die dan op je inlogpagina opnieuw moeten instellen?
Die vraag werd een belangrijk uitgangspunt bij de ontwikkeling van DP Websolutions – Login Branding, mijn gratis WordPress-plugin waarmee je een WordPress-inlogpagina volledig in de stijl van je website kunt vormgeven.
Van pagina’s stylen naar een designsysteem bouwen
Lange tijd draaiden visuele WordPress-builders vooral om het toegankelijk maken van CSS voor mensen die zelf geen CSS wilden schrijven.
In plaats van:
padding: 20px;
te schrijven, verschuif je een slider.
In plaats van zelf een border-radius-regel te schrijven, vul je een waarde in via een visuele instelling.
En in plaats van een kleur in CSS te definiëren, open je een kleurenkiezer.
Dat heeft webdesign enorm toegankelijk gemaakt. Maar er bleef één belangrijk probleem bestaan: herbruikbaarheid.
Als je dezelfde paarse kleur handmatig in twintig verschillende modules selecteert, heb je in feite twintig plekken waar exact dezelfde ontwerpkeuze opnieuw is vastgelegd.
Verander later je huisstijl, en je hebt een probleem.
Global Colors draaien dat principe om. In plaats van twintig losse elementen te vertellen dat ze #65398f moeten gebruiken, definieer je iets wat conceptueel veel dichter ligt bij:
Merkpaars
De afzonderlijke elementen gebruiken vervolgens allemaal die globale waarde.
Dat lijkt misschien een klein verschil binnen een pagebuilder, maar architectonisch is het behoorlijk belangrijk. Je bent niet langer alleen losse elementen aan het stylen. Je begint een systeem te definiëren.
In mijn eigen werk met WordPress-klanten zie ik Global Colors opvallend weinig gebruikt worden. Dat is geen wetenschappelijk onderzoek — het is simpelweg wat ik tegenkom op de websites waar ik aan werk. Kleuren worden vaak nog steeds handmatig opnieuw gekozen, terwijl het thema of de pagebuilder daar al een veel betere oplossing voor biedt.
Ik verwacht dat dat gaat veranderen.
Vooral Divi 5 laat die richting heel duidelijk zien. Een groot deel van de nieuwe architectuur draait om herbruikbare Design Variables: niet alleen kleuren, maar ook andere waarden die centraal beheerd kunnen worden in plaats van steeds opnieuw door de hele website heen te worden ingevoerd.
En zodra een website die informatie eenmaal bevat, kunnen plugins daar ook slimmer gebruik van maken.
Een inlogpagina zou geen tweede designsysteem nodig moeten hebben
De standaard WordPress-inlogpagina neemt een wat vreemde positie in.
Hij hoort bij je website, maar visueel staat hij er grotendeels los van.
Dat is precies waarom login-brandingplugins bestaan. Je vervangt het WordPress-logo, past de achtergrond aan, stylet het inlogformulier, verandert knoppen en links en zorgt ervoor dat de pagina daadwerkelijk bij de rest van de website past.
Maar daar schuilt ook een valkuil in.
Een login-brandingplugin kan per ongeluk weer een apart mini-designsysteem creëren.
Kies een primaire kleur.
Kies een accentkleur.
Kies een knopkleur.
Voer nog een hex-code in.
Selecteer nog een achtergrondkleur.
Voor je het weet ben je handmatig informatie opnieuw aan het invoeren die je website allang bevat.
Met DP Login Branding wilde ik juist de andere kant op.
Het uitgangspunt is simpel:
Bouw het bestaande designsysteem niet opnieuw na. Lees het uit.
De plugin detecteert het designsysteem dat al actief is op de website en maakt die kleuren beschikbaar wanneer je het ontwerp van de inlogpagina instelt.
Dat klinkt eenvoudig, maar het interessante is juist dat verschillende WordPress-ecosystemen hun designsystemen allemaal op een andere manier definiëren.
Elementor Global Colors
Elementor verdeelt zijn globale kleursysteem in System Colors en door de gebruiker aangemaakte Custom Global Colors.
Een website kan daardoor bekende waarden bevatten zoals Primary, Secondary, Text en Accent, naast projectspecifieke kleuren zoals Merk Groen, Lichte Achtergrond of Footer Blauw.
DP Login Branding leest deze daadwerkelijke Elementor Global Colors rechtstreeks uit de actieve Elementor Kit.
Dat onderscheid is belangrijk.
De plugin bepaalt niet zelf dat bijvoorbeeld alleen de eerste twee Elementor-kleuren belangrijk zouden zijn. Als de eigenaar van een website bewust twaalf Global Colors heeft aangemaakt, dan maken die twaalf kleuren deel uit van het designsysteem van die website.
Dan moeten ze dus ook beschikbaar zijn.
Dit was tijdens de ontwikkeling van de plugin ook een belangrijke verandering in mijn eigen denken.
Eerdere versies konden al nuttige themakleuren detecteren, maar onder die functionaliteit bleef eigenlijk een arbitraire vraag liggen:
Welke kleuren moet de plugin kiezen?
Het betere antwoord bleek te zijn: de plugin moet helemaal niet zelf kiezen.
Elementor heeft al een systeem waarmee bewust gekozen, herbruikbare kleuren worden vastgelegd. De plugin moet dat systeem respecteren.
Divi 5 Global Colors
Divi 5 maakt deze filosofie nog interessanter.
Divi biedt al jaren een uitgebreide visuele interface waarmee je in feite CSS maakt zonder dat je zelf in CSS-syntax hoeft te denken. Met Divi 5 zijn herbruikbare ontwerpwaarden een veel fundamenteler onderdeel van dat systeem geworden.
Global Colors vallen nu binnen het bredere concept van Divi Design Variables.
Voor DP Login Branding betekent dat dat de eigen Global Colors van Divi als bron kunnen dienen voor het kleurenpalet van de inlogpagina.
Ook hier probeert de plugin het variabelensysteem van Divi niet opnieuw na te bouwen.
Dat zou de verkeerde abstractie zijn.
Divi beheert zijn eigen designsysteem. DP Login Branding leest de ondersteunde Global Colors uit, zet die om naar veilige statische kleurwaarden en maakt ze beschikbaar bij het vormgeven van de inlogpagina.
Daar zit ook bewust een grens aan: geavanceerde of dynamisch afgeleide kleurwaarden van Divi kunnen niet altijd worden herleid tot een statische kleur die geschikt is voor de inlogpagina. In dat geval slaat de plugin die waarde over, in plaats van te proberen de interne rendering van Divi na te bootsen.
Dat is een bewuste keuze.
Integraties zijn betrouwbaarder wanneer ieder systeem verantwoordelijk blijft voor waar het zelf goed in is.
Astra Global Palette
Astra kiest met zijn Global Palette voor weer een iets andere aanpak.
Het actieve Astra-palet bevat een vaste set herbruikbare kleuren die vervolgens aan verschillende thema-instellingen kunnen worden gekoppeld.
DP Login Branding leest dit actieve palet rechtstreeks uit.
Daardoor weerspiegelt het Website Palette binnen de plugin de kleuren die Astra zelf als onderdeel van het huidige designsysteem beschouwt.
De afzonderlijke semantische kleurinstellingen van Astra — bijvoorbeeld kleuren die voor specifieke onderdelen van de interface worden gebruikt — blijven eveneens nuttig, maar zijn conceptueel iets anders dan het palet zelf.
Dat onderscheid tussen beschikbare designtokens en waar die tokens daadwerkelijk worden gebruikt is belangrijk.
WordPress Global Styles
Ook het native blocksysteem van WordPress heeft met Global Styles zijn eigen laag voor het beheren van een designsysteem.
Thema’s kunnen een kleurenpalet aanbieden en gebruikers kunnen daar zelf kleuren aan toevoegen of bestaande kleuren overschrijven.
Ook hier is het niet de bedoeling om simpelweg iedere kleur die WordPress ergens kent in de loginplugin te stoppen.
WordPress bevat standaardkleuren, block-specifieke instellingen en andere stylinggegevens die niet noodzakelijk bedoeld zijn als bewuste merkkleuren voor de website als geheel.
DP Login Branding richt zich daarom op het actieve algemene thema- en gebruikerspalet: de kleuren die daadwerkelijk het herbruikbare Global Styles-palet van de website vormen.
Of een website nu is gebouwd met Elementor, Divi, Astra of native WordPress: het uitgangspunt blijft hetzelfde, ook al werken de onderliggende systemen technisch heel verschillend.
Eén plugin, vier verschillende designsystemen
Technisch gezien vind ik dit misschien wel het interessantste onderdeel van deze functionaliteit.
De vier systemen slaan kleuren namelijk niet op dezelfde manier op en beschrijven ze ook niet op dezelfde manier.
DP Login Branding gebruikt daarom een kleine normalisatielaag tussen deze systemen.
De plugin probeert Elementor niet om te vormen tot Divi, of Astra tot WordPress Global Styles. Hij haalt alleen de informatie op die de inlogpagina daadwerkelijk nodig heeft: de identiteit van de kleur, de leesbare naam ervan en een veilige, herleide kleurwaarde.
Het resultaat is een consistent Website Palette binnen DP Login Branding, terwijl het oorspronkelijke thema of de pagebuilder de bron van de waarheid blijft.
En als twee Global Colors toevallig exact dezelfde hex-waarde hebben maar verschillende namen, kunnen ze toch als afzonderlijke kleuren behouden blijven.
Een website kan bijvoorbeeld bewust deze twee kleuren hebben:
Primary Brand
en
Footer Green
Op dit moment kunnen die allebei exact dezelfde tint groen gebruiken.
Visueel zijn ze dan identiek, maar ze vertegenwoordigen twee verschillende ontwerpkeuzes. De plugin behoudt dat onderscheid in plaats van ervan uit te gaan dat twee gelijke hex-waarden automatisch uitwisselbaar zijn.
Waarom de plugin een statisch resultaat opslaat
Achter deze functionaliteit zit nog een andere architectonische keuze die minstens zo belangrijk is.
DP Login Branding leest het huidige designsysteem van de website uit terwijl je de inlogpagina configureert.
Maar nadat je het ontwerp publiceert, blijft de inlogpagina niet permanent afhankelijk van Elementor, Divi, Astra of Global Styles.
De gekozen styling wordt opgeslagen als herleide, statische waarden.
Daardoor verandert je inlogpagina niet onverwacht wanneer iemand later een Global Color hernoemt, een designtoken verwijdert, van thema wisselt of een pagebuilder uitschakelt.
Met andere woorden:
Gebruik het designsysteem om de juiste keuze te maken.
Sla daarna een stabiel ontwerp voor de inlogpagina op.
Voor een inlogpagina vind ik dat de juiste balans tussen integratie en betrouwbaarheid.
Betere branding met minder keuzes
De nuttigste automatisering is vaak niet de automatisering die je méér instellingen geeft.
Het is automatisering die instellingen wegneemt die je eigenlijk nooit twee keer had hoeven configureren.
Je website kent zijn logo al.
Hij gebruikt al bepaalde lettertypen en kleuren.
En misschien heeft hij zelfs al een zorgvuldig opgebouwde set globale designtokens.
Een login-brandingplugin zou die informatie moeten benutten, in plaats van te doen alsof hij met een leeg canvas begint.
Dat is inmiddels een van de belangrijkste uitgangspunten achter DP Websolutions – Login Branding.
De plugin blijft volledig aanpasbaar. Je houdt zelf controle over het eindresultaat. Maar waar WordPress, je thema of je pagebuilder al een duidelijke ontwerpkeuze heeft vastgelegd, kan de plugin die gebruiken als logisch uitgangspunt.
Voor mij is dat het verschil tussen simpelweg het uiterlijk van wp-login.php veranderen en ervoor zorgen dat de inlogpagina echt als onderdeel van de website aanvoelt.
DP Websolutions – Login Branding
DP Websolutions – Login Branding is gratis beschikbaar via de officiële WordPress.org plugin-directory.
De plugin kan automatisch brandinginformatie detecteren uit ondersteunde WordPress-thema’s en pagebuilders, terwijl je het uiteindelijke ontwerp van de inlogpagina nog steeds volledig zelf kunt aanpassen.
De huidige Website Palette-integratie ondersteunt Elementor Global Colors, Divi 5 Global Colors, Astra Global Palette en WordPress Global Styles, naast de bestaande login-branding- en automatische detectiefuncties van de plugin.
En belangrijk: het doel is niet om nóg een designsysteem binnen WordPress te bouwen.
Het doel is om beter gebruik te maken van het designsysteem dat er al is.
Je website kent je merk al. Je inlogpagina zou dat ook moeten doen.