De ultieme designer hack om tekst op afbeeldingen vorm te geven

Geschreven door: op zondag 28 juni 2020

Leestijd: 3 minuten

Hoe kun je leesbare tekst op een drukke afbeelding leesbaar houden? Dit is een veelvoorkomende probleem dat ontwerpers vaak tegenkomen. Er zijn verschillende manieren om dit op te lossen: 

  • Je kunt de tekst een kleur geven die uitspringt van de achtergond. Dit is vaak lastig, omdat afbeeldingen vaak veel kleuren bevatten, en je niet altijd zo een kleur in je kleurenpalet hebt zitten. Ook zijn dit vaak geen fraaie kleuren. 
  • Je kunt de tekst op een plek in de afbeelding zetten die een vlakke achtergrond heeft. Vaak is dit niet aanwezig. Als je tekst op een vaste plek op veel afbeeldingen plaatst, dan is dit onmogelijk om voor te bepalen.
  • Je kunt de afbeeldingen uitkiezen die minder contrast bevatten, of de contrast uit afbeeldingen halen. Dit is vaak ook geen optie, omdat er specifieke beelden zijn uitgekozen met de klant.

Is het dan onmogelijk om leesbare tekst op afbeeldingen te tonen? Zeker niet, integendeel - bij Sigma Solutions gebruiken we vaak een simpele designer hack die jij ook kan toepassen.

De hack

De volgende stijlregels moet je toepassen op de tekst:

  • De tekst mag niet te klein zijn
  • De tekst mag niet in een te smalle lettertype-variant staan
  • De tekst moet wit zijn
  • De tekst moet groot genoeg zijn, maar niet té groot
  • Als laatste moet je een zwarte schaduw plaatsen om de tekst

Dat ziet er dan ongeveer zo uit:

Tekst op foto - leesbaar

Valt het je op dat de tekst goed leesbaar is, zelfs met deze drukke achtergrond?

Waarom werkt dit zo goed?

Om te begrijpen waarom deze hack zo goed werkt moeten we begrijpen waarom tekst slecht leesbaar is als we deze op foto’s plaatsen. Als mensen lezen we woorden als patronen. We lezen niet individuele letters, maar we zien woorden als pictogrammen. Om deze pictogrammen te kunnen ‘lezen’ moeten we ze kunnen herkennen. Als deze pictogrammen door contrasterende elementen worden verstoord, dan kunnen we ze slecht lezen.

Tekst op foto - Slecht leesbaar

Maar als we de contrasterende elementen die direct aansluiten op de letters wegnemen, door een schaduw te plaatsen, dan wordt het veel makkelijker om deze te herkennen! Je kunt hiervoor ook een donkere, contrasterende rand gebruiken in plaats van een schaduw. Maar in mijn ervaring werkt een schaduw beter. Dat is prettiger voor het oog. Daarnaast valt het veel mensen niet eens op dat je een schaduw gebruikt - de tekst is ‘gewoon’ leesbaar zonder dat de schoonheid van de vorm van de letters wordt weggenomen.

Je kunt experimenteren met de hoeveelheid schaduw die je toepast. sommige lettertypen of foto’s zullen meer of minder schaduw vereisen om leesbaar te worden.

Discussie

Deze hack is niet altijd wenselijk om te gebruiken. Als je tekst op foto’s plaatst, dan moet je rekening houden met het feit dat de tekst minder goed leesbaar wordt en dat de compositie van de foto wordt verstoord. Maar soms kan het juist wel een mooie manier zijn om content in te delen. Als je tekst op een foto plaatst, dan geef je aan dat deze tekst een nauwe relatie met de foto heeft.. 

In sommige ontwerpen kan deze hack ook ‘lelijk’ zijn; het past dan niet bij de vormgeving van de rest van de site of applicatie. Dan is het beter een andere oplossing te gebruiken. Je kunt bijvoorbeeld een vlak achter de tekst plaatsen of de tekst helemaal uit de afbeelding halen.


Hopelijk heb ik je een nieuwe, handige theorie kunnen leren die je kunt gebruiken om je ontwerpen in de toekomst nog verder te verbeteren. 

Ben jij benieuwd hoe Sigma Solutions jou kan helpen om deze geavanceerde vormgevingsprincipes toe te passen voor jouw redesign? Lees dan hier meer over onze diensten.


Andere blogartikelen

  • Overeenkomsten tussen Growth Hacking en UX design

    Geschreven door: op zondag 13 september 2020

    Laten we beginnen met wat Growth hacking is, Growth hacking zijn experimenten voor oplossingen die groeiproblemen moeten oplossen. Dit is een nieuwe marketing aanpak die met name wordt gedreven door d ...

    Bekijk het artikel »
  • B2B SEO en Geoptimaliseerde Afbeeldingen

    Geschreven door: op woensdag 12 augustus 2020

    In een tijd waarin 27% van het koopproces van B2B kopers met eigen online research wordt doorgebracht is het essentieel om een goed vindbare website te hebben. Afbeeldingen kunnen, indien geoptimalise ...

    Bekijk het artikel »
  • Prospects zoeken B2B

    Geschreven door: op woensdag 12 augustus 2020

    Het zoeken van B2B prospects is een uitdaging voor elk bedrijf. Met name kwalitatieve B2B prospects.Door vooraf onderzoek te doen naar bedrijven die voldoen aan je criteria en je marketing hierop aan ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
AOC is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten