Als het om grafische vormgeving gaat, ken ik mijn grenzen als blogger.

Ik heb geen grafische opleiding, en volgens mij heb ik nou ook niet bepaald een natuurtalent voor grafisch werk. Als ik heel eerlijk ben, ‘doe ik maar wat,’ waarbij ik me laat leiden door mijn gevoel.

Dat is één van de redenen dat ik houdt van blog themes die goed ‘voorgekookt’ zijn. Ik vertrouw liever een professioneel designer de opmaak en layout van een blog toe, dan mezelf. Als een professioneel designer een blog maakt, dan weet ik tenminste dat het goed in elkaar zit. Als ik zelf ga zitten knutselen met de vormgeving is dat sterk de vraag. Ik heb immers de kennis niet.

Gebrek aan grafische kennis is ook meteen de reden dat ik zo dol ben op Canva. Je vindt daar gratis templates voor mooie afbeeldingen in blogposts. Je kunt ze aanpassen als je dat wilt, maar ik houd me meestal braaf aan de vormgeving van de afbeelding vanuit de gedachte: ‘Wie ben ik om te gaan sleutelen aan een vormgeving die is gemaakt door een expert?’

Tegelijkertijd heb je als blogger wel degelijk te maken met grafische zaken.

Daarom verwelkom ik deze week van harte Angelo Spiler van Grafische Cursussen. Hij schreef voor Bloggen en loggen een artikel over zogenoemde grafische randvoorwaarden!

Wat zijn de grafische randvoorwaarden voor een website?

Door Angelo Spiler van Grafische curssusen

Op het gebied van online marketing zijn er veel (goede) artikelen te vinden over de leesbaarheid van webpagina’s, de positie van call-to-action-buttons of het nut van popup-boodschappen.

Heel belangrijk, maar de grafische principes waaraan een website moet voldoen, gaan echt wel een stap verder.

Daarom staan we in dit artikel expliciet stil bij de grafische randvoorwaarden op het gebied van typografie, kleurgebruik, uitvulling, tekst-beeldverhouding etc. Helaas gaat het bij websites van ZZP-ers en zeker ook MKB-bedrijven nog bijzonder vaak mis, en niet een beetje. Lees dus verder om je website vrij eenvoudig (grafisch) aantrekkelijker te maken door de “Universal Principles of Design” in acht te nemen.

Universal Principles of Design

Naar vormgevingsprincipes in het algemeen is uitgebreid onderzoek gedaan. Dus onderzoek naar de principes die ervoor zorgen dat ‘de meerderheid van de mensen’ informatie bijvoorbeeld beter opneemt. Of de principes waardoor ‘de meerderheid’ adequater navigeert (op de openbare weg of op een website). Of de grondslagen waardoor ‘de meerderheid’ een website simpelweg aantrekkelijker of lelijker vindt. ‘De meerderheid’ geeft al aan dat hier geen sprake is van universele wetten, maar eerder van op empirisch onderzoek gebaseerde ‘principes, ’regels’ of ‘aanbevelingen’. Deze aanbevelingen staan algemeen bekend als de ‘Universal Principles of Design’. Grafische vormgevingsprincipes maken hier onderdeel van uit. Voor wie al deze principes beter wil leren kennen, is dit boek een uitstekend startpunt.

Bewust versus onbewust

Iedereen heeft wel een notie van grafische vormgevingsprincipes zoals het principe om broodtekst niet in KAPITALEN te zetten. De reden is dat het lezen van teksten in kapitalen ongeveer de helft langer duurt dan het lezen van teksten in onderkast (kleine letters). Een leek gaat bij die principes meestal af op zijn intuïtie, niet op bewuste kennis. Een grafisch vormgever daarentegen is bewust van de principes en zal ze dus consequenter en stringenter toepassen.

Als je de regels door en door kent, durf je er ook van af te wijken. Zo zetten vormgevers titels en kopjes (ondanks de langere leestijd) soms wel in kapitalen, maar alleen als deze niet teveel woorden bevatten. De reden is dat titels/kopjes visueel moeten opvallen en dus moeten verschillen van de broodtekst. Kapitalen zorgen voor dat verschil. Ook een andere letterfamilie, gebruik van vet of cursief, een groter corps, een andere tekstkleur en letterspatiëring kunnen het visuele verschil met de broodtekst benadrukken.

Grafische aanbevelingen voor websites

Wie de principes kent, kan ze bewust toepassen. Met een professioneel resultaat als gevolg. In de volgende alinea’s wordt een aantal grafische principes praktisch uitgewerkt in vier categorieën (typografie, afbeeldingen, kleurenleer en vlakverdeling), zodat ze eenvoudig kunnen worden toegepast op elke website.

Het is daarbij goed te weten dat grafische vormgevingsprincipes voor drukwerk en websites deels verschillen.

Ook professionele vormgevers van drukwerk die voor het eerst een website ontwerpen, maken de fout om de principes voor drukwerk toe te passen op hun eerste website-project. Onderstaande aanbevelingen zijn dus in de eerste plaats gericht op websites.

Aanbevelingen in typografie

• Hoewel moderne monitoren een hoge resolutie hebben, is het nog steeds verstandig om schreefletters (als Times New Roman of Georgia) te mijden, zeker voor de broodtekst van je website. In de eerste plaats hebben veel lezers nog een lage-resolutie-scherm (tot 144 ppi), waardoor de schreven een letter niet goed afbakenen, althans niet zoals de letterontwerpers vanaf de 15^de eeuw (Garamond, Bodoni, Baskerville) het bedoelden. In de tweede plaats zijn schreefletters al langere tijd een beetje (of meer) uit de mode. Daarbij geldt ook: hoe minder tekst op een regel, hoe minder het nut van schreven. Overigens heeft voor drukwerk met veel tekst zoals romans, jaarverslagen etc. het gebruik van schreefletters wel nog steeds de voorkeur.
• Gebruik dus bij voorkeur een schreefloze letterfamilie, in ieder geval voor de broodtekst op je website. Het liefst een iets minder bekend lettertype en niet de afgezaagde letterfamilies: Arial, Helvetica, Geneva of Verdana. Misschien denk je dat alleen deze lettertypen veilig zijn om te gebruiken, maar de computerfabrikanten hebben niet stilgezeten. De lijst met lettertypen dat op alle platforms beschikbaar is, is de laatste 10 jaar flink uitgebreid. En ook de techniek (Google Fonts, Adobe Typekit Web Fonts) is nu zover dat je gerust minder bekende letterfamilies kunt gebruiken. Deze worden snel op de achtergrond gedownload op het moment dat de webpagina ze aanroept. Zorg wel dat de leesbaarheid gehandhaafd blijft: met schreeuwende lettertypen als Comic Sans of Brush Script bereik je het tegendeel. Zie ook Het meest gebruikte lettertype.
• Ben je van mening dat je gemiddelde lezer het verschil tussen een Geneva en een fraaiere variant als de Museo Sans niet zal opmerken, dan maak je een denkfout. Hij of zij zal het niet bewust opmerken, maar er zeker wel gevoelsmatig positief op reageren. En ja: hiermee wordt de lezer verleid, iets waar marketeers toch over het algemeen het grote belang van inzien.
• Zet de broodtekst in corps 15 tot 20 px, afhankelijk van de gekozen letterfamilie. Deze getallen zijn dus beduidend hoger dan voor drukwerk. Daar zijn meerdere redenen voor: drukwerk wordt uitgedrukt in punten (pt) in plaats van pixels. Daarnaast is de leesafstand voor monitoren gemiddeld groter dan bij drukwerk. En niet in de laatste plaats: bij drukwerk wordt vanuit kostenaspect vaak bespaard op papier, onder andere door een kleiner corps. Bij digitale publicaties is hier geen reden toe.
• Kies bij voorkeur twee letterfamilies voor je website. Natuurlijk zijn de varianten zoals bold, italic, narrow etc. wel toegestaan. Meer dan twee letterfamilies maakt je tekstonderdelen (titels, (tussen)koppen, inleidingen, broodtekst, bijschriften, citaten etc.) onsamenhangend. Het gebruik van slechts één letterfamilie is mogelijk, maar kan wat saai worden. Gebruik in dat geval een familie met veel varianten. Er is ook een technische reden om niet al teveel letterfamilies op websites toe te passen: de downloadtijd van diverse servers kan voor een langere paginalaadtijd zorgen.
• Zet broodtekst op je website linkslijnend. Het uitvullen van broodtekst op websites is geen goed idee: HTML is namelijk nog niet zover gevorderd dat uitvullen fraaie resultaten oplevert. Bovendien wordt uitvullen ervaren als ‘strak’, ’statisch’, ‘officieel’ en soms ‘saai’.

Bijschrift: Links: uitvullen op een webpagina zonder afbreking levert ‘rivieren’ op. Midden: uitvullen met afbrekingen is al beter, maar niet ideaal. Rechts: alleen software van drukwerk levert correct uitgevulde tekst op.

• Titels en koppen mogen linkslijnend of gecentreerd worden gezet, maar natuurlijk niet uitgevuld.
• Zet de interlinie (regelafstand) van broodtekst op minimaal 1,5. Hierdoor ervaart de lezer ‘ruimte’, ‘vrijheid’. In drukwerk is de interlinie meestal minder, ook vanwege kostenbesparing.
• Knipperende tekst is grafisch gezien ‘not done’! Vanuit marketing-oogpunt kan het wellicht zin hebben omdat je aandacht trekt. Maar vanuit grafisch oogpunt is ‘ordinair’ een passender omschrijving.
• Geef bij responsive websites een maximale breedte op voor je tekstkaders. Bij teveel karakters op een regel vermindert de leesbaarheid. Onze ogen (hersenen) weten in dat geval de volgende tekstregel minder goed te vinden. De onder- en bovengrens van het aantal karakters op een regel voor een goede leesbaarheid op monitoren is enigszins variabel, maar tussen 50 en 90 zit je veilig.
• Gebruik geen onderstreping voor een link maar wel een levendige tekstkleur zoals oranje of blauw. Vormgevers van drukwerk gebruiken evenmin onderstreping om woorden te benadrukken. In het eerste decennium van het internet was onderstreping een prima uitgangspunt, maar tegenwoordig doet het een beetje archaïsch aan.

Aanbevelingen voor afbeeldingen

• Let op een aangename verhouding tussen de hoeveelheid tekst en afbeeldingen. Dat is afhankelijk van je producten of dienstverlening. Bij veel websites slaat de weegschaal helaas door richting tekst en bij andere richting afbeeldingen.
• Afgeronde hoeken maken je website subtieler. Deze aanbeveling geldt zowel voor illustraties als voor call-to-action-buttons.
• Pas vaker cirkelvormige, aflopende of vrijstaande illustraties toe. Gezien het box-model leidt HTML (en trouwens elke computertaal) automatisch tot rechthoekige afbeeldingen. Dat wordt al gauw saai. Het kan dus nodig zijn om de afbeeldingen in een beeldbewerkingsprogramma als Photoshop of Gymp optisch cirkelvormig of vrijstaand te maken. Dat is meer en enigszins specialistisch werk, maar je websitebezoekers zullen het (onbewust) waarderen.
• Kijk uit met stockfoto’s. Bezoekers van je website voelen heel goed aan of je gebruik maakt van authentieke foto’s of stockfoto’s. Er is wel een positieve trend zichtbaar: de nieuwe lichting stockfoto’s is casual, rustgevend en de uitstraling is minder ‘stock’.

Aanbevelingen voor kleurgebruik

– Houd je aan de huisstijlkleuren. Zijn die er (nog) niet? Stel dan een kleurthema samen op sites als Adobe Color. Percentages van de huisstijlkleuren mogen natuurlijk ook.

• Zorg voor voldoende contrast tussen tekst en de achtergrondkleur. Dus een donkere tekst op een witte of pastelachtige achtergrond en omgekeerd: een lichte tekstkleur alleen op een donkere achtergrondkleur.
• Koppel je huisstijlkleuren aan bepaalde rubrieken van je website. Daardoor kan de lezer de rubriek na verloop van tijd raden aan de hand van de toegepaste kleur (bijvoorbeeld de achtergrondkleur van de pagina, of aan een kleurbalk bovenin).
• Zet je broodtekst in 80-85% grijs (bijvoorbeeld #333333). Daarmee kom je gedistingeerd over. Gebruik dus liever geen 100% zwart voor de broodtekst. In drukwerk is zwart wel de standaard. Plaats om dezelfde reden geen witte tekst op een puur zwarte achtergrond. Gebruik liever donkergrijs.

Vlakverdeling

• Schrap alle overbodige elementen uit je website. Zowel qua teksten als afbeeldingen als versieringen. Dit principe van ‘alleen noodzakelijke elementen’ heet ook wel ‘Ockham’s scheermes’.
• Houd voldoende witruimte aan voor marges en tussen tekstkolommen. Houd 15 tot 20 px ruimte (H-space, V-space) aan voor de tekstomloop rondom afbeeldingen.
• Geef voldoende ruimte boven en onder de titel en koppen.
• Plaats witregels tussen alinea’s door middel van extra harde returns. In HTML-code: <p></p>.

 

Nawoord

Dankjewel Angelo, voor deze interessante informatie! Ik heb meteen al even gecontroleerd of ik op Bloggen en loggen wel schreefloze letters gebruik! Ook de tip om vaker cirkelvormige, aflopende of vrijstaande illustraties te gebruiken was nieuw voor me.

Wat een prettig toeval dat mijn profielfoto al cirkelvormig is : )

Hoe pas jij grafische kennis en elementen toe op jouw blog?