De ultieme designer hack om tekst op afbeeldingen vorm te geven header image

De ultieme designer hack om tekst op afbeeldingen vorm te geven

zondag 28 juni 2020 ·Leestijd: 3 minuten
contacteer auteur:

Hoe kun je leesbare tekst op een drukke afbeelding leesbaar houden? Dit is een veelvoorkomend 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 meer over onze diensten op het gebied van design.


Andere blogartikelen

B2B E-commerce… Wakker worden!
Geschreven door
op dinsdag 28 juni 2022
Veel B2B-bedrijven in blijven hangen in; nauwelijks vindbare, verouderde B2B e-commerce websites met minimale conversiemogelijkheden en een betreurenswaardige gebruikerservaring. Zonde!
B2B Leadgeneratie: Alles wat je altijd al wilde weten!
Geschreven door
op maandag 27 juni 2022
B2B online leadgeneratie is het proces van het identificeren van de ideale klanten voor uw product of dienst, en hen vervolgens overhalen tot aankoop. Het is een essentiële activiteit voor B2B sales- en marketingteams.
Wat maakt een B2B webshop succesvol?
Geschreven door
op zondag 26 juni 2022
De opmars van de B2B webshop neemt toe. Regelmatig krijgen wij de vraag of er een groot verschil is tussen een consumentgerichte webshop en een puur B2B gedreven webshop. In deze blog leggen wij u uit hoe een B2B webshop succesvol kan zijn en worden.
Open Nieuwsbrief Inschrijving Footer

E-book

Zo wordt uw website een lead generator 
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book â€º