Pixel-perfect

Na het lezen van deze instructies weet ik:

  • Werken met vectoren: rijksiconen dienen ontworpen te worden in vectorformaat, wat zorgt voor schaalbaarheid en flexibiliteit.
  • Pixelniveau-optimalisatie: plaats alle ankerpunten van de horizontale en vertikale lijnen exact op hele pixels, om scherpe en heldere weergave op beeldschermen te garanderen. Beoordeel daarnaast van alle individuele ankerpunten de plaatsing ten opzichte van het pixelgrid om tot een optimale digitale voorvertoning te komen.
  • Scherpte: voorkom onnodige en onregelmatig kleurverloop en onscherpe randen in het ontwerp.
  • Visuele eenvoud: vereenvoudig het icoon om overbodige elementen en complexiteit te vermijden. Kies een sterke visuele metafoor.
  • Testen en vergelijken: vergelijk de voorvertoning in vectorformaat met de technische pixelweergave om ervoor te zorgen dat het ontwerp zowel vloeiende vectoren als pixelnauwkeurigheid behoudt.
  • Softwarematige beperkingen: begrijp dat deze optimalisatie niet automatisch kan worden uitgevoerd door software; elk detail moet handmatig worden beoordeeld en aangepast.
  • Uniformiteit: zorg voor consistentie binnen de rijksicoonenset door dezelfde ontwerpprincipes toe te passen op alle iconen.

Pixel-perfect is een methode waarbij iconen worden gemaakt in vectorformaat terwijl ze tegelijkertijd geoptimaliseerd worden voor gebruik op het internet. Het belangrijkste principe hierachter is dat alle ankerpunten van horizontale en verticale lijnen exact op hele pixels geplaatst worden. Maar pixel-perfect gaat verder dan alleen dit.

Deze aanpak voorkomt onnodige kleurovergangen en onscherpe randen. Daarnaast zorgt het ervoor dat het icoon, wanneer het op een beeldscherm wordt weergegeven op een veelvoud van 100%, altijd scherp is. Naast het technische aspect van het goed functioneren van een icoon, heeft deze methode nog een even belangrijk effect. Vanwege het beperkte formaat van 64 x 64 pixels is het noodzakelijk om bewuste visuele keuzes te maken om de eenvoud te behouden.

Technisch complex

Technisch gezien is dit een complex proces. Tijdens het ontwerpproces moeten de plaatsing van alle verbindingspunten individueel worden beoordeeld. Door deze ankerpunten strategisch te plaatsen ten opzichte van het pixelraster, kunnen zowel de binnen- als buitenkant van de vormen geoptimaliseerd worden voor digitale toepassingen.

Dit is een technische handeling waarbij de pixelweergave leidend is voor het ontwerp, met behoud van vloeiende en organische lijnen in vectoren. Ter illustratie, hieronder zie je twee afbeeldingen van hetzelfde icoon. Aan de linkerkant is de voorvertoning (vector) van het bestand te zien, en aan de rechterkant zie je de technische opbouw en pixelniveau-voorvertoning van hetzelfde icoon.

Afbeelding met verschillende voorbeelden van pixel perfect

Zoals je kunt zien, is het kleurverloop in de pixelweergave zo geleidelijk en gelijkmatig mogelijk. In de pixelweergave zie je bijvoorbeeld dat de vingers perfect recht zijn, terwijl ze in vectorformaat enigszins taps toelopen om een organische uitstraling te behouden. De vingertoppen hebben een bolling, terwijl ze op pixelniveau recht en zuiver zijn opgebouwd. Om dit te bereiken, is elk verbindingspunt (in vector) individueel beoordeeld en optimaal geplaatst op pixelniveau. Hierdoor ontstaat een open vorm en een gelijkmatige verdeling van pixels, wat zowel in drukwerk als digitaal optimaal scherp oogt. Dit is geen automatische functie die softwarematig kan worden toegepast, bijvoorbeeld met de "pixel-perfect" functie in Illustrator. Elk verbindingspunt moet afzonderlijk worden beoordeeld, en dit bepaalt uiteindelijk hoe goed het icoon functioneert, hoe het kan worden toegepast en wat de kwaliteit is.

Voorbeeld pixel perfect van vector en pixel preview

Visuele eenvoud

Een even belangrijk aspect is dat deze methode vereist dat er keuzes worden gemaakt om de eenvoud te behouden en de juiste visuele metafoor te vinden. Met deze ontwerpprincipes in gedachten moet een icoon een sterk vereenvoudigde weergave van een onderwerp of thema zijn.

Deze werkwijze zorgt voor visuele kernwaarde, omdat het binnen het beperkte formaat van 64 pixels niet mogelijk is om te veel elementen perfect op pixelniveau te combineren. Hierdoor wordt voorkomen dat iconen te veel overbodige elementen bevatten en te gedetailleerd of illustratief worden.

Een afbeelding die visuele eenvoud illustreert

Conclusie

Samengevat is het uitgangspunt van de rijksiconenset dat er per thema of onderwerp slechts één icoon beschikbaar is voor zowel offline als online gebruik. Dit minimaliseert de kans op het gebruik van verkeerde icoonbestanden door anderen. Een consistente aanpak draagt ook bij aan de uniformiteit van de volledige collectie iconen.

Het doel van de pixel-perfect methode is om maximale helderheid en scherpte te bereiken, zelfs op kleinere schermen en oudere beeldschermen, door te voorkomen dat vormen te dicht op elkaar komen en daardoor minder goed leesbaar zijn. Dit draagt bij aan de toegankelijkheid en bruikbaarheid van de overheid voor iedereen.