Zo nu en dan zet ik een flinke boom op over de opmaak en indeling van zo’n blog(post). Ik heb bepaalde richtlijnen over wat zou moeten en ideeën over wat eigenlijk niet kan. In deze gastblog kan je lezen hoe een professional tegen de zaken aankijkt. In één moeite door vallen er wat cruciale grafische tips voor bloggers uit de kast. En wat blijkt? Ik kan nog wel wat bijleren!
Deze gastblog werd verzorgd door Grafischecursussen.nl.
Vorm versus inhoud, een thema zo oud als de mensheid. Je kunt het zo gek niet bedenken of deze tegenstelling dringt zich op: ziel versus lichaam, verhaal versus boekvorm, verpakking versus cadeautje. Dit thema kan ook worden toegespitst op blogsites: de vormgeving van blogs versus de inhoud ervan. Is het belangrijk om aandacht aan de vormgeving te schenken?
Een interessante vraag om dit thema mee te starten is: is het überhaupt mogelijk om géén aandacht aan vormgeving te besteden? Het antwoord op deze vraag is eenvoudig nee. De reden is dat zelfs de meest elementaire onderdelen (lettertype, lettergrootte (corps), tekstkleur, kapitalen of onderkast, spatiëring, marges en achtergrondkleur) een uiting zijn van grafische vormgeving. Zonder deze elementaire instellingen is er geen ‘inhoud’. Dus in dat opzicht ontkomt zelfs de meest obstinate blogger niet aan enige vormgeving.
Universal Principles of Design
Iedereen heeft wel een onbewuste notie van grafische ‘regels’. Zo zijn er maar heel weinig websites waarop teksten volledig in KAPITALEN zijn gezet. En daar is ook een goede reden voor. Zo duurt het lezen van teksten in kapitalen 40% tot 60% langer dan teksten in onderkast (kleine letters) waar uitsluitend de eerste letter van een zin (en van een eigennaam) een kapitaal is. Dit is iets wat de meesten van ons bewust of onbewust wel aanvoelen. Het mag dus wel, maar een complete tekst in kapitalen zetten is dus schadelijk voor het opnemen van de inhoud!
Het wordt complexer. Want titels en (tussen)koppen mogen volgens diezelfde grafische ‘regels’ wél in kapitalen staan, ondanks de langere leestijd. De reden hiervoor is dat titels en (tussen)koppen zich moeten onderscheiden van de broodtekst en daar zijn kapitalen een van de vele middelen voor. Naast bijvoorbeeld: letterfamilie, vet of cursief, groter corps, tekstkleur en letterspatiëring.
Naar de impact van alle ‘regels’ van (grafische) vormgeving is uitgebreid onderzoek gedaan. Dus onderzoek naar de mate waarin ze schadelijk of bevorderlijk zijn voor het opnemen van de inhoud. Het zijn dan ook geen ‘wetten’ maar eerder op empirisch onderzoek gebaseerde ‘regels’ of ‘aanbevelingen’ om de inhoud beter op te kunnen nemen. Deze grafische ‘regels’ of principes maken onderdeel uit van een omvangrijker geheel, wat algemeen bekendstaat als de ‘Universal Principles of Design’. Hier vallen ook productdesign, ergonomie, UX etc. onder. Voor wie deze principes beter wil leren kennen, is dit boek een uitstekend startpunt.
Hoe belangrijk zijn deze principes voor blogsites?
Het lijdt geen twijfel dat voor commerciële productsites een correcte toepassing van de grafische principes heel belangrijk is. Vage foto’s of ellenlange tekstpagina’s zonder tussenkoppen zullen de verkoop van modeartikelen niet bevorderen. Dergelijke websites moeten continu nieuwe klanten aantrekken en kunnen alleen overleven bij een goede eerste indruk, ook in grafisch opzicht.
Voor Blogsites is het belang wat minder groot. Vaak zijn de bezoekers trouwe volgers die voor de inhoud gaan en zich niet al teveel zullen storen aan kleine grafische overtredingen. Het wordt belangrijker als je gevoel voor de grafische principes ver te zoeken is of als je (meer) geld wilt verdienen met je blogsite. Of dat nu met affiliate links is of sponsored content. Bij affiliate links wil je je lezers verleiden tot aankoop van een product van een derde partij. Hoe ‘gelikter’ je artikel eruit ziet, hoe eerder je lezers op de gewenste link zullen klikken. Bij een sponsored artikel ben je weliswaar niet afhankelijk van lezersclicks, maar wel van indruk van de sponsor zelf. Alleen als deze een lekker gevoel bij je site krijgt, zal hij/zij geneigd zijn je te sponsoren in ruil voor een artikel.
Praktische verbeterpunten
Zelfs als je als blogger een trouwe schare fans hebt, doe je er goed aan de leesbaarheid van je teksten (dus de opname van de inhoud) te vergroten. Een aantal van de volgende aanbevelingen zul je zeker al toepassen, maar hopelijk zitten er ook een paar bij die je aanspreken en wilt uitproberen. Als je twijfelt over het nut, bedenk dan dat naar veel van deze aanbevelingen onderzoek is gedaan! Zoals jij weet te bloggen, zo weten grafisch vormgevers wat voor de meeste lezers aantrekkelijk is qua design!
Typografie
- Met 80-85% grijs (bijvoorbeeld #333333) als kleur voor de broodtekst geef je de ogen van je lezer meer rust en kom je ook veel verfijnder over! Gebruik dus geen100% zwart voor de broodtekst op je website met witte achtergrond.
- Gelieerd hieraan: zet geen witte tekst op een puur zwarte achtergrond. Gebruik dan donkergrijs als achtergrond.
- Gebruik bij voorkeur een schreefloze letterfamilie voor de broodtekst van je website. Afhankelijk van de letterfamilie vanaf corps 15 tot corps 17. Doe dit bij voorkeur met een iets minder bekend lettertype en niet met de fastfood-letterfamilies: Arial, Helvetica, Geneva of Verdana. Pas ook op voor extravagante letterfamilies. De leesbaarheid staat voorop.
- Gebruik maximaal twee letterfamilies op je website. Natuurlijk mag je wel meer varianten (lettertypen) toepassen, zoals bold, italic, narrow etc.
- Gebruik uitsluitend linkslijnende tekst, met uitzondering van titels, kopjes en gedichten: die mogen eventueel gecentreerd. Uitgevulde tekst voor websites is uit den boze.
- Zet de interlinie (regelafstand) van broodtekst op minimaal 1,5.
- Laat teksten niet knipperen! Dit staat namelijk garant voor het wegklikken van een aantal bezoekers van jouw blogsite. (Dit werkt psychologisch anders bij de aankoop van een product).
- Zet bij responsive websites een maximale breedte voor je tekstkaders. Bij meer dan 100 karakters op een regel wordt de leesbaarheid minder.
Afbeeldingen
- Houd de verhouding tussen tekst en afbeeldingen in de gaten. Nog steeds zijn teveel webpagina’s gortdroog door tekst, tekst, en alleen maar tekst. Maar pas wel op: beter een puur tekstueel stuk dan een nietszeggende stockfoto dat nauwelijks op de tekst slaat. Licht afgeronde hoeken voor illustraties maken je website verfijnder (de aanbeveling van afrondingen geldt overigens ook voor buttons).
- Gebruik af en toe ronde, aflopende of vrijstaande illustraties. We zijn zo gewend aan rechthoekige afbeeldingen, dat andere vormen ons al snel plezieren. En ja, om dit voor elkaar te krijgen, kan wat lastig zijn in HTML.
- Zet foto’s niet te klein. Ze mogen minimaal de helft van een tekstkader zijn.
- Als je al stockfoto’s gebruikt: kies de nieuwe lichting stockfoto’s: deze zijn casual, rustgevend en duidelijk anders dan de oudere generatie stockfoto’s.
Kleurtheorie
- Gebruik kleuren uit een kleurthema (3 tot maximaal 5). Kleurthema’s kun je gemakkelijk samenstellen op sites als Adobe Color. Je mag de hoofdkleuren uit je thema ook in percentages gebruiken.
- Zet teksten op een witte achtergrondpagina niet in in lichte pasteltinten. Dus je mag bepaalde teksten (bijvoorbeeld titels of (tussen)koppen) accentueren door ze donkerblauw of donkerrood te zetten, maar niet in een lichte tint. Net als foto’s moeten teksten voldoende contrast met de achtergrond bewaren.
- Gebruik geen onderstreping voor een link. Dit klinkt raar, maar het is aannemelijk dat bezoekers links zonder onderstreping (maar wel in een levendige kleur zoals oranje) het aangenaamst vinden.
- Koppel bepaalde kleuren aan bepaalde categorieën van je blog. Daardoor kan de lezer de categorie na verloop van tijd raden aan de hand van de kleur (bijvoorbeeld de achtergrondkleur van de pagina, of aan een kleurbalk bovenin).
Vlakverdeling
- Pas Ockham’s scheermes toe: kort gezegd komt dit principe neer op het schrappen van al het overbodige. Zowel in teksten, als afbeeldingen als versieringen.
- Geef ruimte, ruimte ruimte. Geef dus voldoende marge aan alle zijden en zo nodig tussen tekstkolommen. Geef ook 15 tot 20 px ruimte (H-space, V-space) voor de tekstomloop rond afbeeldingen.
- Geef voldoende ruimte boven een (tussen)kop.
- Zet witregels (extra harde return) tussen alinea’s!
Meer van dat?
- Originele header maken voor een professionele uitstraling
- Het kleurenpalet van je blog: nog belangrijker dan je denkt
- Nieuw blogdesign? Doe ook een gebruikerstest
Geef een reactie