Snijd een vierkante afbeelding rond bij en ongeveer 79 procent van het oppervlak blijft over. Het vijfde dat ontbreekt zit volledig in de hoeken, en daar bewaart een vierkant logo meestal precies wat het tot een vierkant logo maakt.
Bijna elk platform snijdt profielfoto’s tegenwoordig rond bij, en bijna elk merkbestand is vierkant getekend. Dat verschil is het hele probleem.
Op welke maat wordt hij echt getoond?
Veel kleiner dan de versie die je uploadt. Een profielfoto staat naast berichten en reacties op zo’n veertig pixels breed, en de grote versie op een profielpagina wordt veel minder vaak gezien.
| Waar | Ongeveer |
|---|---|
| Naast een reactie | 24–32 px |
| In de kop van een feedbericht | 32–48 px |
| In een volgerslijst | 48–56 px |
| Op de profielpagina | 100–180 px |
De bovenste rij is waarvoor je ontwerpt. Op dertig pixels is er ruimte voor één vorm of twee letters, en alles wat meer is wordt een vlek die leest als een standaardplaatje.
Op een veel grotere maat uploaden blijft goed, want het platform maakt de kleine versies daaruit. De ontwerpbeslissing gaat over wat het verkleinen overleeft, niet over het bestand.
Wat werkt voor een logo?
Alleen het beeldmerk, gecentreerd, met marge eromheen. De woordmerknaam weglaten voelt als verlies en is precies wat het beeld herkenbaar maakt op de maten waarop het echt verschijnt.
Eén letter in het merklettertype is het betrouwbare alternatief als er geen compact beeldmerk is. Die overleeft de cirkel, overleeft het verkleinen en is in een lijst meteen te onderscheiden van een foto.
Het loont om het beeldmerk hier een gevulde achtergrond te geven in plaats van transparantie. Een transparant logo staat op de kleur van de interface, en die verschilt tussen lichte en donkere modus en tussen platforms.
Wat werkt voor een gezicht?
Een krappe uitsnede. Een foto die als portret is gekadreerd wordt een klein ovaal met een onherkenbaar persoon erin, omdat het grootste deel van de cirkel door schouders en achtergrond wordt ingenomen.
Zo bijsnijden dat het gezicht het grootste deel van de cirkel vult lost het op; in de editor voelt het te strak en overal waar het gebruikt wordt klopt het. De test is het resultaat terugbrengen tot zo’n veertig pixels en kijken of je jezelf zou herkennen.
De achtergrond telt meer dan het lijkt. Een drukke achtergrond wordt op dertig pixels ruis rond het gezicht, en een rustige met contrast tegen het gezicht leest op elke maat helder.
Moet hij op beide thema’s werken?
Ja, want platforms wisselen hem niet. Eén afbeelding staat voor sommige kijkers op een lichte interface en voor anderen op een donkere, dus alles wat op de omringende kleur leunt, faalt voor de helft.
De praktische regel is dat de afbeelding een eigen, duidelijke rand heeft, een gevulde cirkel in zijn eigen kleur, in plaats van weg te lopen in wat erachter staat. Een wit logo op transparantie verdwijnt op een licht thema.
Het is dezelfde redenering als achter een favicon met een eigen gevulde vorm, en om dezelfde reden: de omgeving heb je niet in de hand.
Moet hij op alle platforms hetzelfde zijn?
Ja, en het is een van de goedkoopste herkenningswinsten die er zijn. Overal dezelfde afbeelding betekent dat iemand die je één keer zag, je ergens anders in één oogopslag herkent, op een maat die te klein is om een naam te lezen.
Hem vaak veranderen kost precies dat. In een lijst die voorbijschuift is de afbeelding het kenmerk dat mensen echt gebruiken, meer dan de naam ernaast.
Het artikel over banners behandelt de andere helft van een profiel, met het omgekeerde probleem: een banner is groot en wordt op breedte bijgesneden, en de avatar ligt erbovenop.
Hoeveel van het vierkant overleeft precies?
Ongeveer 79 procent. Het oppervlak van een cirkel in een vierkant is π gedeeld door vier van het oppervlak van het vierkant, net iets minder dan vier vijfde, dus ruwweg een vijfde verdwijnt, en dat allemaal uit de hoeken.
Dat is de rekensom achter het praktische advies. Een ontwerp dat zijn vierkant tot de randen vult, verliest aan elke kant zijn buitenste inhoud, en een ontwerp dat gecentreerd staat met marge verliest niets wat iets deed.
Hetzelfde deel geldt voor een vierkant met ruim afgeronde hoeken, en daarom werkt één ontwerp meestal voor beide uitsnedes.
Vragen die mensen stellen
Hoe vaak moet hij veranderen? Zelden. Het is het kenmerk dat mensen in een lijst herkennen voordat ze een naam lezen.
Werkt een geanimeerde avatar? Een paar platforms staan het toe en de meeste nemen het eerste frame. Ontwerp voor het stilstaande beeld.
Moet een team één stijl delen? Een consequente kadrering en achtergrond over een team leest op kleine maten als bewust, wat losse foto’s niet doen.
Zijn alle platforms rond? De meeste. Een paar gebruiken een afgerond vierkant, en een ontwerp dat in een cirkel werkt, werkt in beide.
Kan ik een transparante PNG uploaden? Ja, en hij wordt op een achtergrond gezet die je niet kiest. Geef hem een eigen achtergrond.
Op welke maat upload ik? Groter dan de grootste getoonde maat, vierkant, en laat het platform de rest maken.
Waarom oogt de mijne wazig? Hij is onder de weergavemaat van het profiel geüpload en opgeschaald.
Ontwerp voor de kleinste cirkel. Afbeelding bijsnijden zet het ronde masker zodat je ziet wat overleeft, foto verkleinen maakt de vierkante master, en afbeeldingsformaten voor sociale media, voorlopig in het Engels, geeft de maten die Instagram, Facebook en TikTok echt vragen.