VacatureRadar/docs/design/VISUAL_AUDIT_2026-07-26.md

Visuele audit en herstelroadmap

Datum: 26 juli 2026
Scope: alle tien primaire cockpitroutes, login en wachtwoordherstel; dark/light; 390, 768, 1280, 1440, 1920 en 3840 px.

Ontwerpoordeel

VacatureRadar heeft een onderscheidende, geloofwaardige dark-intelligencebasis. De cyan/emerald-signalen, technische typografie en datagedreven panelen passen bij het product. De vorige iteraties hebben echter lokale oplossingen op elkaar gestapeld. Daardoor zijn merkhiërarchie, informatiedichtheid en horizontale ankers niet overal één systeem. De premiumkans zit vooral in rust, reductie en voorspelbaarheid, niet in meer decoratie.

Bevindingen

Prioriteit	Bevinding	Gevolg	Herstel
P0	De roze conceptafbeelding was een beeldgeneratie-werkachtergrond en had nooit als logoresultaat gepresenteerd mogen worden.	Merkverwarring en vertrouwensverlies.	Alleen het lokaal gecontroleerde VacatureRadar-radarlogo wordt als productasset gebruikt; geen gegenereerde conceptplaat wordt geleverd of gedeployed.
P1	De bovenbalk en hoofdcontent hadden verschillende maximale breedtes op ultrawide.	Acties leken los te staan van de pagina en oogbewegingen werden te lang.	Eén gedeeld contentframe voor topbar en hoofdsecties, met een begrensde ultrawidevariant.
P1	Het dashboard toonde tot acht vrijwel gelijkwaardige vacaturekaarten en werd 2.399 px hoog op 1440×900.	Een dagoverzicht voelde als een tweede resultatenlijst.	Beperk het overzicht tot vijf besliskaarten; de verkenner blijft de volledige rangschikking.
P1	De activiteitstijdlijn gebruikte 256 px per gebeurtenis en werd 5.901 px hoog.	Lage informatiedichtheid, veel scrollen en zwakke scanbaarheid.	Compactere marker, kaart, detailzone en verticale tussenruimte zonder informatieverlies.
P1	De ITWorx-credit stond in een wit, omkaderd vlak met relatief groot woordmerk.	De ontwikkelaarscredit concurreerde visueel met het productmerk en oogde als advertentie.	Maak de credit randloos, kleiner, minder verzadigd en secundair; VacatureRadar blijft primair.
P1	Meerdere tekstlinks hadden een klikhoogte rond 26 px.	Zwakkere muis- en touchbruikbaarheid, ondanks semantisch correcte links.	Secundaire actielinks krijgen minimaal 38 px interactiehoogte; primaire controls blijven 44 px.
P2	Op 1440 px gebruikt de filterconsole twee functionele rijen, maar de visuele groepering is zwak.	Zoeken, verfijnen en toepassen lezen als losse velden.	Behoud responsieve wrapping, maar versterk consolekaart, vaste gaps en consistente controlhoogtes.
P2	Dashboardkaarten hadden veel interne verticale ruimte en sterke schaduwen.	De feed werd zwaarder dan de intelligence-rail.	Compactere kaartpadding en gaps; schaduw uitsluitend als elevatiesignaal.
P2	De profielpagina benut slechts circa 1.040 px van 1.121 px beschikbare content.	Een enkel profiel voelt onbedoeld klein.	Bewuste brede compositie behouden, met illustratie als ondersteunend element en duidelijke primaire actie.
P2	Systeemstatus en acht pipelinefasen zijn op laptopbreedte informatief maar erg dicht.	Kleine labels vertragen scanbaarheid.	Pipeline behoudt interne horizontale overflow op klein scherm; statusmetadata groepeert in consistente kolommen.
P2	De UI bevat veel uppercase labels van 8–10 px.	Technische sfeer, maar zwakkere leesbaarheid op compacte of geschaalde displays.	Uppercase alleen voor korte metadata; body- en actietekst blijven minimaal 12–15 px.
P2	Bewegingsreductie dekte de radarillustratie, niet alle transities en entreeanimaties.	Onvolledige reduced-motionervaring.	Globale gereduceerde motion voor animatie, transitie en smooth scrolling.
P3	De accountnaam verschijnt zowel in de sidebar als in het menu; de topbar herhaalt productnaam en paginacontext.	Lichte redundantie, vooral op smaller desktop.	Sidebar blijft identiteit en navigatie; topbar blijft context, zoeken en systeemacties met compactere lock-up.
P3	Lange beheerpagina’s zijn inhoudelijk correct maar hebben weinig lokale navigatie.	Gebruikers verliezen sneller hun positie in bronnen en activiteit.	Compacte rijen, sticky context waar aanwezig en paginering blijven leidend; geen verborgen inhoud.

Uitgevoerde roadmap

1. Merkdiscipline — productlogo en favicon strikt scheiden van ITWorx-ontwikkelaarsbranding; credit visueel terugplaatsen.
2. Layoutfundament — één maximaal contentframe voor topbar en pagina, met voorspelbare ankers van laptop tot ultrawide.
3. Informatiereductie — dashboard terugbrengen tot vijf kernmatches en activiteit compacter maken.
4. Interactie en toegankelijkheid — secundaire klikdoelen vergroten en reduced-motion volledig maken.
5. Responsieve verfijning — alle kernroutes controleren op mobiel, laptop, desktop en ultrawide, in licht en donker.
6. Regressie en release — templatecontracten, volledige gate, live containerhealth en assetsmokes uitvoeren.

Acceptatiebewijs

• Browsermatrix: 50 combinaties over tien ingelogde routes op 390, 768, 1280, 1920 en 3840 px; geen documentoverflow of consolewaarschuwingen.
• Licht thema: dashboard en mobiele verkenner gecontroleerd; correcte thematokens, geen overflow en intacte filters.
• Authenticatie: login op 390 en 1440 px; één herstel-link, gescheiden labels, zelfstandig gerenderde lijniconen en correcte merkhiërarchie.
• Meetbare reductie: dashboard 2.399 → 1.838 px op 1440 px; kernmatches 7/8 → 5; activiteitgebeurtenis 268 → 242 px na cacheverversing.
• Repositorygate: Ruff, Django check, migratiecheck, 268 tests geslaagd, 2 optionele browsertests overgeslagen en 83,45% branch-aware dekking.
• Live release: image sha256:7e1688db80241813a04e27038ef5e4afb64748868b6a97e353346f077be50b70 is healthy; readiness, favicon, productlogo, ITWorx-wordmark en CSS 0.3.9 antwoorden met HTTP 200.

Vervolgcorrectie VR-223 — 27 juli 2026

De gebruikersscreenshot maakte zichtbaar dat de eerdere oplossing onderaan de sidebar nog te veel losse identiteitselementen stapelde en dat het productlogo door zijn donkere tegel zwaarder oogde dan de rest van de interface.

• het productlogo is teruggebracht tot vier transparante vectorvormen: open radarboog, scanwijzer, kern en kanssignaal;
• de sidebar bevat geen tweede accountkaart meer; profielstatus en ontwikkelaarscredit vormen één rustige footer en accountacties blijven in het topbarmenu;
• de ITWorx-wordmark heeft op dark mode geen witte stickerachtergrond meer maar een subtiele monochrome behandeling; light mode behoudt de officiële kleuren;
• het contentframe groeit gecontroleerd naar 2.200 px op widescreen en 2.480 px op 4K, zonder onbeperkte kaart- of leesregelbreedtes;
• 18 shellcombinaties over dashboard, verkenner en automatisering op 390, 1280, 1920, 2560 en 3840 px plus 1280×600 hadden geen overlap, overflow of consolemelding;
• login en sidebar zijn aanvullend in dark/light gecontroleerd: transparante logoachtergrond, één zichtbare accountlocatie en correcte themabehandeling.
• live release sha256:ea9e61a1febca59eb906bfdebcd9fd2b2c2b000189a8772f4abf09012722e921 is healthy; readiness, favicon, transparant productlogo en CSS 0.3.11 antwoorden met HTTP 200.