Een profielbanner is niet één afbeelding op één plek. Het is één afbeelding die anders wordt bijgesneden op een telefoon, een tablet, een desktopbrowser en op sommige platforms een televisie, en het enige deel dat in al die gevallen zichtbaar is, is een band door het midden.
Voor het hele doek ontwerpen en dan ontdekken dat het logo op mobiel is afgesneden, is de standaardervaring. Het doek is de uploadmaat; het ontwerpgebied is kleiner.
Waarom is het veilige gebied zoveel kleiner?
Omdat de breedste en de smalste weergave meer dan een factor twee verschillen. Een desktopbrowser toont een brede, lage strook; een telefoon toont een veel smallere plak van hetzelfde bestand, zonder de zijkanten.
De afbeelding wordt niet voor elke weergave opnieuw passend gemaakt. Hij wordt vanuit het midden naar buiten bijgesneden, dus inhoud schuift over de randen naarmate het venster smaller wordt. Alles binnen de middenband is overal veilig, en alles daarbuiten is decoratie die sommige kijkers nooit zien.
Het praktische gevolg is dat een banner twee keer moet werken: als compositie over de volle breedte voor desktop, en als de middenband alleen voor iedereen anders.
Testen kost niets en bijna niemand doet het. Een browservenster van volle breedte terugbrengen naar telefoonbreedte terwijl je naar een profielpagina kijkt, laat de uitsnede live gebeuren, en binnen tien seconden weet je welke delen van een ontwerp overleven.
Waar staat de profielfoto?
Bovenop de banner, en zijn plek verschuift met de weergave. Die overlap is het tweede waar een ontwerp rekening mee moet houden, want de avatar bedekt op desktop een hoek van de banner en op mobiel een ander deel.
Een banner met het onderwerp precies waar de avatar valt, is een banner met het onderwerp in één weergave voorgoed verborgen. Dat gebied bewust leeg laten is de oplossing, en het kost niets.
| Onderdeel | Wat er verandert |
|---|---|
| Bannerbreedte | wordt vanuit het midden bijgesneden als het scherm smaller wordt |
| Plek van de avatar | in een hoek op desktop, vaak gecentreerd op mobiel |
| Vorm van de avatar | rond op de meeste platforms, vierkant op een paar |
| Tekst erover | sommige platforms zetten een naam over het beeld |
De ronde uitsnede is degene die logo’s te pakken neemt. Een vierkant logo in een rond kader verliest zijn hoeken, dus het beeldmerk moet gecentreerd staan met marge eromheen in plaats van het vierkant te vullen.
Waarom verschillen covers en banners?
Omdat ze iets anders doen. Een cover staat boven een pagina en heeft meestal een vaste vorm; een banner is een strook die zich aanpast. In gesprekken worden de twee door elkaar gebruikt en ze gedragen zich verschillend.
Evenementcovers zijn het meest beperkt, omdat het platform datum en titel over een deel van het beeld zet en die tekst niet optioneel is. Elk ontwerp daar concurreert ermee.
Panelafbeeldingen op streamingplatforms zijn het omgekeerde: klein, vast en in een raster getoond, dus ze zitten dichter bij iconen dan bij banners en hebben er baat bij in één oogopslag leesbaar te zijn in plaats van gedetailleerd.
En albumhoezen voor audio?
Die zijn het strengst van allemaal, omdat ze heel klein en vaak vierkant getoond worden. Podcast- en albumhoezen worden vaker op thumbnailformaat gezien dan op volle grootte, en dat maakt fijn detail en kleine tekst waardeloos.
De test is hem verkleinen tot ongeveer het formaat van een vingernagel en kijken of hij nog herkenbaar is. De meeste ontwerpen zakken voor die test en bijna allemaal zijn ze te redden door iets weg te halen.
Staande formaten voor een muziekapp zijn het andere uiterste: een korte, herhalende visual schermvullend staand, waar het ontwerp moet overleven dat de afspeelknoppen onderaan eroverheen liggen.
Hoe vaak veranderen ze?
Af en toe, en zelden veel. Platforms passen maten aan als ze een weergave herontwerpen, en de verhouding overleeft meestal ook als het aantal pixels verandert.
Dat is het argument om voor de verhouding te ontwerpen en naar het huidige getal te exporteren, en niet andersom. Een ontwerp rond een verhouding is in een minuut opnieuw geëxporteerd als een platform verandert; een ontwerp rond specifieke pixels moet opnieuw gebouwd worden.
Het bronbestand bewaren met royale marges rond het veilige gebied dekt de rest. Een banner die opnieuw bij te snijden is zonder hertekenen, overleeft het volgende herontwerp.
Vragen die mensen stellen
Heb ik een aparte banner voor donkere modus nodig? Platforms wisselen ze niet, dus die ene afbeelding moet op beide werken. Vermijd achtergronden die van het een of het ander uitgaan.
Moet de banner mijn logo herhalen? Eén keer, klein, buiten het avatargebied. Het staat al op de pagina als profielfoto.
Kan ik een URL in een banner zetten? Die is niet klikbaar en wordt vaak afgesneden. Daar is het linkveld van het profiel voor.
Waarom oogt mijn banner wazig? Hij is onder de breedte van het platform geüpload en opgeschaald. Upload op de opgegeven maat of groter.
Werkt een transparante PNG? Transparantie wordt meestal platgeslagen op een achtergrond die je niet kiest. Exporteer met de achtergrond die je wilt.
Ontwerp het midden, versier de randen. Afbeelding bijsnijden zet het ronde masker zodat je ziet wat overleeft, en foto verkleinen maakt de vierkante master. De maten zelf staan in één tabel, voorlopig in het Engels: afbeeldingsformaten voor sociale media bevat de avatars voor Instagram, Facebook en TikTok en de banners voor X, LinkedIn, Twitch en zijn panels, Discord, Reddit, Facebook-evenementen, Pinterest-borden, podcasthoezen en een Spotify Canvas. YouTube-banners en Facebook-omslagfoto’s hebben een eigen pagina.