Grafisch ontwerp voor web & mobiel
- René Ameling
- 30 jul
- 5 minuten om te lezen
In de vorige post, Social media branding, heb ik het gehad over branding. In deze post ga ik het hebben over hoe je met behulp van grafisch ontwerp een consistente huisstijl kunt maken voor jouw (persoonlijke) merk.
Hoe ga je je online onderscheiden van de massa door tone of voice, kleurgebruik, opmaak en typografie?
Ik heb zelf een achtergrond in multimedia ontwerp en ik kan hier uren over doorgaan😉. Dus ik ga proberen het zo beknopt mogelijk te houden op hoofdzaken zodat je dit kunt toepassen op jouw blog, website en/of social media kanalen.
Waar bestaat een huisstijl uit?
logo
kleurenpalet
typografie
Grootte van lettertypes
foto's en/of illustraties
slogan/tagline
layout
Logo
Een logo is een beeldmerk bestaande uit jouw merknaam in jouw kenmerkende lettertype(s), kleuren en/of grafische onderdelen. Denk bijvoorbeeld aan de swoosh van Nike, de NB letters van New Balance of het logo van Starbucks. Als je een persoonlijk merk bouwt (influencer) is een logo niet perse belangrijk maar een consistent gebruik van kleuren en lettertypes wel. Het gaat er tenslotte om dat je in het oerwoud van posts snel herkent wordt zodat mensen interactie hebben met jouw merk.
Helaas staan bijvoorbeeld Instagram en Facebook je niet toe je eigen lettertypes te gebruiken. Zorg dan in ieder geval constistent bent met je beeldmateriaal waarin je wel de ruimte hebt om met je eigen lettertypes en kleuren te werken.
Kleurenpalet
Kleuren zijn heel belangrijk. Er bestaat namelijk zoiets als kleurenpsychologie. Een mens reageert of legt een link met een kleur en de emotie die dat oproept. Daarom zijn bijvoorbeeld verkeersborden die een gevaarlijke situatie aangeven altijd rood. Maar rood staat ook voor spanning en in marketing termen een caal to action. In online marketing is het dus ook belangrijk om de juiste kleuren te kiezen die een bepaald gevoel uitstralen over jouw merk of product. Klik op de link hieronder om meer te lezen over hoe kleurgebruik de acties van jouw doelgroep beïnvloeden:
Een handige tool om je kleuren te bepalen is Adobe Color. Klik op de link hieronder voor inspiratie:
Als regel gebruik je eigenlijk nooit meer dan drie kleuren voor je content. Je kunt nog maximaal twee kleuren toevoegen voor accenten maar gebruik deze spaarzaam. De regel is 60/30/10. Dus 60% hoofdkleur, 30% steunkleur en 10% voor accenten.
Praktisch vertaald naar een blog bestaat je pagina uit een hoofdkleur(de body), 30% uit een steunkleur(je tekst) en 10% uit accenten(links, koppen, call to actions).
Typografie
Typografie is ook een belangrijk onderdeel van de uitstraling van je merk. Gebruik maximaal twee lettertypes die elkaar aanvullen. Als regel gebruik je een wat expressiever lettertype voor je koppen om de aandacht te trekken en een wat conservatiever lettertype voor je broodtekst.
Zorg ook dat je lettertype klopt bij wat je uit wilt stralen. Een speels lettertype past niet bij een zakelijk product of dienst. En andersom een zakelijk lettertype niet bij een creatief product.
Ik kan persoonlijk uren bezig zijn met het vinden van het juiste font. Iets meer buiging, de afstand tussen de letters, de grootte en ga zo maar door. Het miniemste verschil daarin kan er voor zorgen dat ik voor een bepaald lettertype kies. Om je daar mee te helpen kun je op de link hieronder te klikken om goede font pairings te vinden:
Online typografie
Typografie voor het web en online is anders dan op papier. Omdat je niet van tevoren weet op welke drager (mobiel, laptop, desktop, iPad) je doelgroep jouw content bekijkt moet je bepaalde richtlijnen volgen. Zo voorkom je dat jouw content onleesbaar wordt.
Format
Voor web of mobiel gebruik je TTF (True Type Font) of OTF (Open Type Font). Beide formats zijn ook geschikt voor print mocht je in de toekomst nog besluiten een e-book te schrijven of ander drukwerk te maken. je kunt veel gratis lettertypes vinden op Google Fonts, DaFont en FontShare.
Om er voor te zorgen dat je gebruikers jouw lettertype zien als ze jouw site of blog bezoeken moet je er voor zorgen dat ze 'embedded' zijn. Dit kan met de regel @fontface in een CSS stylesheet of je kunt het lettertype uploaden in de service die je gebruikt zoals Wix of Wordpresss.
Grootte van lettertypes
Voor mobiel en web geldt dat je hoofdtekst minimaal 16px groot moet zijn. Zo blijft het op ieder scherm prettig leesbaar. Koppen zijn vanaf 1.3 x zo groot als je hoofdtekst. Ook een kwestie van persoonlijke smaak. Het mag groter maar zeker niet kleiner dan 21px. Zorg ervoor dat je koppen door de groote niet zorgen voor ongewenste verspringingen. Pas de grootte aan waar nodig.
Subkoppen kunnen weer iets groter dan je hoofdtekst. Houdt als regel aan dat je subkoppen 2px groter maakt dan je hoofdtekst. Zo blijf de visuele hiërarchie duidelijk tussen koppen, subkoppen en hoofdtekst.
Foto's en/of illustraties
Niet iedereen heeft een 1gb glasvezelaansluiting. En houdt er rekening mee dat jouw content voor het grootste gedeelte wordt bekeken op mobiel met een wifi, 5g of misschien zelfs 3g verbinding. In 2025 wordt content voor 60 tot 64% geconsumeerd op mobiel. Als je afbeeldingen of illustraties te groot zijn heeft dit gevolgen voor de laadtijden waardoor gebruikers weg kunnen klikken als dit te lang duurt. de gemiddelde aandachtsspanne op internet is 8,25 seconden. Als het dus langer duurt om jouw content te laden is de kans groot dat gebruikers wegklikken.
Als regel houdt je je afbeeldingen onder 1 MB grootte. Met Photoshop kun je je foto's optimaliseren voor gebruik online. Maar er zijn ook veel gratis tools online te vinden.
Slogan/tagline
Een slogan of tagline vertelt in het kort meer over je merk of zoals dat mooi heet de merkbelofte. Je kent de bekende wel:Nike's "Just do it," Apple's "Think different," and McDonald's "I'm lovin' it".
Een slogan of tagline helpt je met herkenning en vertelt wat jij meer of anders doet ten opzichte van anderen die in dezelfde niche zitten.
Layout
Layout is eigenlijk hoe je al het bovenstaande visueel presenteert. Speel je met typografie om je content te versterken of voeren foto's de boventoon? Is de opmaak speels met afwijkende vormen of is het strakker en zakelijker? De layout moet ook kloppen bij wat je als persoon of merk wilt uitstralen.
Deze regels kun je toepassen op om met de HBA funnel builder en GetResponse aantrekkelijke email campagnes op te zetten die converteren. In het komende artikel laat ik je zien hoe je de HBA funnel builder instelt zodat je stijlen overal gelijk zijn. Stay tuned!
Vond je dit een leuk of interessant artikel? Heb je nog vragen? Laat dan hieronder een like of een opmerking achter. En deel dit artikel met je vrienden met de social media knoppen!
Opmerkingen