Web accessibility: digitale producten die toegankelijk zijn voor iedereen

Boodschappen bestellen, een hotel boeken of je bankzaken regelen. De wereld om ons heen digitaliseert in rap tempo, maar hoe ga je daarmee om als je een beperking hebt? Voor mensen met een visuele, motorische of cognitieve beperking kan het wereldwijde web een enorm doolhof zijn. Gelukkig is er steeds meer aandacht voor accessibility: het toegankelijker maken van websites en apps voor mensen met een beperking zodat ook zij alles digitaal kunnen fixen. Maar hoe zorg je dat je eigen website of app ‘accessible’ is? Wij leggen het uit. Let’s go!

Ga snel naar:

Wat is web accessibility?

Web accessibility of: ‘digitoegankelijkheid’ gaat om het toegankelijk maken van websites, apps of andere digitale producten voor iedereen. Dat doen we door digitale producten zo te ontwerpen dat mensen met een visuele, motorische of cognitieve beperking er ook gebruik van kunnen maken. Je kunt dan denken aan gebruikers die doof of blind zijn, mensen met dyslexie of kleurenblindheid of gebruikers met een tijdelijke beperking, zoals een gebroken arm waardoor je niet meer goed je muis of touchpad kunt gebruiken.

Door in het design of in de code al rekening te houden met accessibility, maak je jouw digitale product toegankelijk voor iedereen. Hoe je dat doet? Denk bijvoorbeeld aan ondertiteling bij video’s, teksten vergrootbaar maken om deze makkelijker leesbaar te krijgen of afbeeldingen optimaliseren zodat deze voorgelezen worden door screenreaders.

Waarom is web accessibility belangrijk?

In Nederland hebben meer dan 4 miljoen mensen een beperking. Wereldwijd zijn dat zelfs één miljard mensen. Dat is zo’n 15% van de wereldbevolking! Bij het ontwikkelen van digitale producten zoals websites en apps wordt er met deze grote groep mensen niet altijd rekening gehouden. Tijd voor actie! Hieronder zetten we op een rijtje waarom accessibility belangrijk is.

  1. Bouwen aan een inclusieve samenleving

Als we willen dat iedereen op een gelijkwaardige manier toegang heeft tot digitale middelen, moet web accessibility veel meer aandacht krijgen. Op straat willen we niemand uitsluiten, dus waarom besteden we er niet dezelfde aandacht aan online? Deze ethische reden vind ik als UX-designer één van de redenen waarom accessibility hoger op de agenda moet worden gezet.

  1. Nieuwe groep klanten aanspreken

Naast ethiek heeft het toepassen van accessibility ook commerciële voordelen. Zo kan accessibility ervoor zorgen dat je een nieuwe groep potentiële klanten aanspreekt die je nu misschien links laat liggen. Zonde! Ennehh, een kleine tip: aanpassingen die je design toegankelijker maken worden vaak ook gewaardeerd door klanten zonder beperking. Want heb je ooit iemand horen klagen dat een tekst te makkelijk was om te lezen? Precies! Ik ook niet.

  1. Goed voor je SEO

Daarnaast wordt het optimaliseren van jouw website op basis van accessibility ook zeker gewaardeerd door Google. Een website die voldoet aan de richtlijnen voor accessibility wordt namelijk beloond met een hogere ranking dan websites die in mindere mate voldoen aan deze richtlijnen voor webtoegankelijkheid. Ooohh, daarom werken SEO-specialisten en UX-designers bij Goldfizh graag samen!

  1. Geliefder merk

Bewijst jouw merk dat je aandacht hebt voor accessibility? Dan wordt je sneller gezien als een likeable brand. Natuurlijk moet je dit soort dingen vooral doen omdat je zelf graag het verschil wilt maken, maar hey, als het goed is voor je imago is dat alleen maar mooi meegenomen toch?

Hoe maak je jouw digitale designs toegankelijk?

Richtlijnen voor digitale toegankelijkheid vind je in de Web Content Accessibility Guidelines (WCAG) van het W3C. Binnen die richtlijnen heb je succescriteria op verschillende niveaus: A, AA en AAA. Daarbij is niveau AAA het hoogst haalbare niveau waarbij de succescriteria het hoogst en grootst zijn. 

Websites van de (semi-)overheid moeten altijd voldoen aan toegankelijkheidsnorm WCAG 2.1, niveau A + AA. Commerciële websites zijn vrij om te bepalen aan welk niveau ze willen voldoen. Niveau AAA is natuurlijk niet haalbaar voor elke website, maar zoals ik in de vorige alinea al kort benoemde: hoe toegankelijker je website, hoe fijner deze te gebruiken is door jouw gebruikers (mét en zonder beperking).

Dus, hoe maak je jouw website of app toegankelijk? Stel een accessibility-doelstelling op en neem een deepdive in de WCAG-richtlijnen. Door jouw design of code aan te passen op basis van de bijbehorende succescriteria, heb je jouw website of app in no-time helemaal webtoegankelijk.

Wat zijn de basisrichtlijnen van webtoegankelijkheid?

Ik moet toegeven, de WCAG-richtlijnen zijn een beetje taaie kost. Daarom verveel ik je in deze blog niet met alle succescriteria. Wel laat ik zien wat de belangrijkste uitgangspunten zijn waarop de richtlijnen zijn gebaseerd. 

Waarneembaar 

Hierbij zorgen we ervoor dat informatie waarneembaar is op meer dan één manier. Denk bijvoorbeeld aan tekstalternatieven bij afbeeldingen voor mensen die niet goed kunnen zien of ondertiteling bij video’s voor gebruikers die niet goed horen.

Bedienbaar 

Voor zoveel mogelijk mensen moet het mogelijk zijn om door een website te navigeren, ook als je daarvoor geen muis kan gebruiken. Denk aan mogelijkheden waarbij je navigeert met een toetsenbord. 

Zorg er ook voor dat de copy in buttons niet te algemeen is. Als je een website waarneemt met een screenreader die tekst voorleest, snapt de bezoeker niet waar de knop voor is als er alleen ‘klik hier’ of ‘meer informatie’ staat. 

Begrijpelijk 

Probeer je digitale product zo te ontwerpen dat deze voor zoveel mogelijk mensen te begrijpen is. Schrijf teksten daarom in simpele, begrijpelijke taal (verdiep je hiervoor bijvoorbeeld eens in verschillende taalniveaus) en zorg ervoor dat je op een voorspelbare wijze door je website navigeert. 

Daarnaast moeten gebruikers snel begrijpen hoe ze navigeren. UI Design Patterns helpen hierbij. Een klassiek voorbeeld van zo’n UI Design Pattern is de navigatie: gebruikers verwachten namelijk dat een menu altijd bovenaan of aan de zijkant van een website staat. Dan kan je als ontwerper wel een héél kunstzinnig menu verzinnen, maar als deze niet wordt begrepen heb je er niks aan en wordt je design echt minder toegankelijk. Keep it simple!

Hulp nodig bij het toegankelijk maken van jouw website?

Wij helpen je graag op weg om jouw website of app toegankelijker te maken. Hoe we dat doen?

Stap 1: Get in touch!

Stuur een mailtje naar UX-lead Ruby met jouw accessibility-vraagstuk. Wij nemen zo snel mogelijk contact met je op om een keer kennis te maken. Samen stellen we een accessibility-doel op om mee aan de slag te gaan.

Stap 2: Analyse en voorstel

Eerst gaan we kijken naar jouw huidige website of app. Deze vergelijken we met de WCAG-richtlijnen en we checken in welke mate je website al voldoet aan de succescriteria. Op basis van deze score maken we een planning. Zo werken we samen naar jouw doelstelling toe. 

Stap 3: Uitvoeren plan

Vervolgens zetten we ons plan om in actie! We gaan aan de slag met UX-research, -design én -copy om jouw website of app helemaal accessible te maken.

Stap 4: Test & improve

We zijn nooit uitgeleerd. Daarom blijven we testen en verbeteren. Let’s go!

Helemaal overtuigd van het belang van accessibility? Nice! Stuur een mailtje naar ruby@goldfizh.nl of vul het formulier hieronder in. Dan gaan we samen aan de slag. 

Design systems: wat zijn het en hoe gebruik je ze?

Als je iets met design hebt, heb je deze term sowieso al weleens gehoord! Niet gek, want ze helpen UX-, UI- en graphic designers wereldwijd om op een consistente, snelle en gemakkelijke manier interfaces op te bouwen. In deze blog neem ik je -vanuit mijn perspectief als UX lead bij Goldfizh- mee in de wondere wereld van, jawel: design systems. Ik leg je uit wat deze term precies inhoudt, waarom we hier zo’n fan van zijn en vertellen je hoe je aan de slag kunt met je eigen design system. Let’s go!

Ga snel naar:

Wat is een design system?

Een design system is een centrale plek waarin de bouwstenen staan beschreven waarmee je jouw digitale producten opbouwt. Je kunt het zien als een soort bibliotheek waarin verschillende visuele componenten zijn opgeslagen die je gebruikt voor jouw website, app of social media content. Kleur en typografie zijn in een design system – net als in een huisstijlhandboek – hoofdonderdelen, maar ook buttons, forms, footers en andere componenten staan in een design system beschreven. Vervolgens maken coding-guidelines, tone of voice en voorbeelden van toegepaste designs een design system compleet. 

De term design system hoor je vaak in combinatie met de term ‘atomic design’. Logisch, want een design system is in de basis opgebouwd uit kleine blokjes, ook wel ‘atoms’* genoemd. Met deze atoms kun je grotere componenten opbouwen. Digitale lego voor gevorderden dus!

*The definition of Atomic Design

Atomic Design is een designmethode die is geïnspireerd op de scheikunde. Deze methode gaat ervan uit dat interfaces volledig afgebroken en opgebouwd kunnen worden vanuit kleine stukjes: atomen. Met deze atomen kun je steeds grotere componenten vormen: van atomen maak je moleculen en van moleculen maak je organismes. Atomic Design gebruik je op deze manier om complexe interfaces voor websites en apps op te bouwen.

Afbeelding I: voorbeeld Atomic Design

In de afbeelding hierboven zie je een voorbeeld van hoe we atomic design hebben toegepast bij het opbouwen van een design system voor de nieuwe corporate website voor Arts en Zorg, één van onze klanten. Op het eerste niveau bepalen we bijvoorbeeld hoe functionele iconen eruitzien, maar ook wat de border radius en dropshadow bij een standaard ‘card’ zijn. Met deze ‘atomen’ kun je vervolgens je eerste ‘moleculen’ opbouwen. In het voorbeeld hierboven zie je hoe je met een card, een icoon en een text styling een list-item kunt samenstellen. Door verschillende moleculen te combineren, bouw je steeds grotere ‘organismen’ op. Zo vul je op een hele consistente manier jouw components library. Handig! 

Kortom, met een design system gebaseerd op Atomic Design weet iedereen uit jouw team -van designer tot communicatiemedewerker en van product-owner tot developer- precies hoe ze elementen hetzelfde op moeten bouwen. En laat dat nou net de sleutel zijn tot een succesvolle branding.

Waarom is een design system belangrijk?

Een design system heeft verschillende voordelen. Hieronder kort op een rijtje:

  • Consistentie
  • Snelheid
  • Gemak

🧬 Consistentie

Hét belangrijkste ingrediënt voor een sterke branding? Dat is consistentie. Herhaling van keuzes op basis van jouw merkidentiteit, dragen in mijn ogen altijd bij aan een sterke branding. Toch kan het als organisatie best lastig zijn om consistentie te waarborgen. Je wil immers zichtbaar wil zijn op zoveel mogelijk online kanalen en bovendien zijn er vaak meerdere medewerkers, externe bureaus of freelancers die werken aan de visuele uitingen van jouw merk. Een wildgroei aan steunkleuren, afwijkende typografie en random UI componenten kan een gevolg zijn en hebben direct invloed op de user experience van jouw klanten. Een echte no-go!

Gelukkig kan een design system een organisatie helpen bij een consistente merkbeleving. Zodra je een design system ontwikkeld hebt, is dit de “single source of truth”. Dit is de basis van jouw visuele identiteit. Omdat iedereen gebruik maakt van precies dezelfde legosteentjes die zijn vastgelegd in jouw design system, zorg je ervoor dat al jouw design-uitingen dezelfde look & feel behouden. En dat wil je!

💨  Snelheid

Bij Goldfizh bouwen we design systems altijd op in Figma. Deze design-software geeft je de mogelijkheid om supersnel nieuwe componenten op te bouwen op basis van bestaande atomen. Handig! Denk maar even terug aan de iconen en cards uit het verhaal van Arts en Zorg. In het voorbeeld hierboven gebruikten we deze atomen voor een list-item, maar deze legoblokjes kun je natuurlijk ook gebruiken om een navigatiebalk of een productcard te ontwerpen. Op die manier ben je als designer in staat om in topsnelheid interfaces op te bouwen. En wat ik het allerfijnste vindt hieraan? Als er dan een wijziging wordt doorgevoerd in één van deze componenten (als bijvoorbeeld iemand besluit dat dropshadows echt een no-go zijn en niet meer gebruikt mogen worden), veranderen de componenten op elke pagina vrolijk mee. Dan hoef je dus nooit meer alles één voor één aan te gaan passen. Snelheid dus!

🕺 Gemak

Heb je een eenmaal jouw design system up and running? Dan kan iedereen uit jouw team hiermee aan de slag. Zo kunnen ook collega’s die minder ervaring hebben met UX- of UI-design bijdragen aan het ontwerpen van strakke interfaces.

Wat maakt een design system anders dan een styleguide? 

Een design system lijkt op een online styleguide, maar is in feite meer dan dat. Een design system is een levend document dat kan worden aangevuld en geoptimaliseerd. De vorm van een design system is altijd digitaal. Het voordeel hiervan is dat alle componenten automatisch mee veranderen, mits het design system goed is opgebouwd vanuit de hierboven besproken ‘atomen’. Dus stel dat er op een bepaald moment wordt besloten dat de tint grijs niet #e2e2e2 moet worden, maar #e4e4e4, kun je dat aanpassen en zullen alle components waarin deze kleur voorkomt meeveranderen. Omdat jouw design system jouw single source of truth is, zorgen we ervoor dat bij iedereen die meewerkt aan jouw project dit doet vanuit dezelfde basis. Alle neuzen dezelfde kant op!

Kortom, een design system is de basis voor iedereen die aan de slag gaat met design elementen. Web- en UX-designers halen gemakkelijk UI-componenten uit de componenten-library om nieuwe pagina’s mee samen te stellen. Software ontwikkelaars en front-end developers zien direct welk stukje code ze kunnen pakken om herhalende componenten te bouwen en contentmakers weten precies welke tone of voice ze kunnen gebruiken als basis voor hun short copy. Op die manier werk je aan die fantastische brand experience waar iedereen blij van wordt.

Voorbeelden van design systems

Voordat je aan de slag gaat met een eigen design system, is het handig om te weten dat er verschillende design systems bestaan die je kunt gebruiken als template. Waarom zou je immers het wiel opnieuw proberen uit te vinden als er al hele uitgebreide designs voor datzelfde wiel bestaan? 

De techreuzen in de wereld van het internet – ik noem een Google, Apple en Microsoft – hebben elk hun eigen design library vrij beschikbaar gemaakt voor iedereen. Zo heeft Google bijvoorbeeld Material Design: een enorm uitgebreid en gedetailleerd design system met allerlei herbruikbare componenten. Zo vind je lay-outs, text styles, kleur en componenten in één overzichtelijke omgeving. Gooi hier je eigen branding sausje overheen en je bent al een heel eind met je eigen design system.

Hoe maak je een design system?

Allemaal leuk en aardig, maar hoe maak je nou een design system? Where to begin? Ik neem je mee in een stappenplan dat gebaseerd is op het atomic design-principe. Hierbij gaan we uit van Figma als tool waarin je je design system gaat uitwerken. Figma is namelijk dé ideale design software om interactieve componenten vast te leggen en de uitwerking van interface designs op te bouwen. We recommend!

  1. Zet jouw Figma file structure op.
    In Figma maak je een team aan waarin je alle betrokkenen toevoegt. Hierin maak je een project aan. Binnen dit project maakt Figma automatisch een file aan waarin je kunt starten met jouw design system. Ideaal! Ook als je daarna andere files aanmaakt waarin je je designs gaat maken, kun je uit deze design system file componenten halen.

  2. Basics first: start met kleur, typografie en atoms.
    Deze elementen zijn meestal al vastgelegd in een huisstijlhandboek. In Figma leg je deze vast op hoofdniveau. Ik start altijd met kleur en typografie: deze twee zijn echt de basis voor alles. Vul primaire kleuren eventueel aan met ondersteunende tinten en neutrale grijstinten. Geef text-styles alvast de juiste benaming (H1 t/m H6 + body tekst). Zo weten developers direct hoe jouw designs zijn opgebouwd.

    Daarna kun je aan de slag met atomen zoals buttons, tags en cards. In Figma kun je heel eenvoudig varianten maken. Zo kun je primaire en secundaire buttons maken en voeg je zelfs hover states toe.

    Tip 1: Zorg ervoor dat jouw design system file er netjes en opgeruimd uitziet: alle betrokken collega’s moeten er namelijk lekker in kunnen werken. Werk met documentatie en uitleg om een compleet beeld te vormen. Geef ook alle componenten een duidelijke naam, dat helpt om de boel overzichtelijk te houden.

  3. Leg de eerste moleculen vast in jouw design system.
    Op basis van de atomen die je hebt vastgelegd kun je aan de slag met moleculen. Ik begin vaak met componenten als formuliervelden, dialog boxes, list items of notificaties. Kijk goed naar het type product dat je wil opbouwen en bedenk welke componenten daarin handig zijn. Heb je de basics vastgelegd? Dan kun je met deze moleculen organismen gaan opbouwen. Zo werk je bijvoorbeeld een heel formulier of een complete top-bar navigatie met drop-down menu uit.

    Tip 2: Wil je gebruik maken van een standaard design system zoals Material Design van Google? Dan is dit hét moment om hier alvast een template voor te downloaden. In de Figma community vind je talloze templates die je gratis kan gebruiken.

  4. Interactie.
    Figma biedt een aantal handige mogelijkheden om interactie vast te leggen. Zo kun je bijvoorbeeld met ‘variants’ verschillende versies van jouw buttons uitwerken en laten zien wat hover- en active states doen. Met deze interactieve components worden jouw prototypes ook direct super realistisch.

  5. Design & improve.
    Met jouw nieuwe design system bouw je in no-time nieuwe interfaces op. Zoals al eerder gezegd: een design system is een dynamisch document en is eigenlijk nooit af. Parallel aan het design proces kun je componenten toevoegen en verbeteren.

Hulp nodig bij het opbouwen van jouw design system?

Ja, een design system ontwikkelen kost tijd. Toch zou ik elke organisatie aanraden om deze tijd te investeren! Op de lange termijn draagt een design system namelijk bij aan het ontwikkelen van een sterke brand experience en helpt het designers bij het supersnel en gemakkelijk opbouwen van gestroomlijnde user experiences. 

Als UX Lead bij Goldfizh help ik onze klanten dagelijks bij het uitdenken van user experience flows en het ontwerpen van gelikte interfaces. Ik denk graag mee met jouw design vraagstuk en wie weet heb jij dan straks een design system ontwikkeld waarmee je de user experience van jouw klanten een boost geeft! Geïnteresseerd? Neem contact op met mij of vul het formulier hieronder in. 🚀🔥

Van huisstijl naar campagnestijl: 5 do’s en don’ts

Hoe houd je een huisstijl herkenbaar in een campagne? Veel bedrijven weten zich vaak geen raad met deze vertaalslag. Gelukkig zijn hier verschillende manieren voor! In deze blog legt onze designer Ruby uit hoe we bij GoldfiZh van een huisstijl een campagnestijl maken.

Don’t: vasthouden aan ‘Het heilige schrift’

De grootte van het logo, de dikte van een lijntje of de keuze om te tutoyeren of niet: drie zaken met een gemene deler. Ze dragen alle drie bij om de identiteit van een merk visueel te maken. Niet gek dus, dat deze zaken – zeker bij grote bedrijven – zorgvuldig zijn vastgelegd in een dikke styleguide.

Als visual designer heb ik de hele dag door te maken met styleguides. Ik maak ze zelf en als onderdeel van een digitaal marketingbureau gebruik ik ook regelmatig bestaande huisstijlen als basis voor andere middelen. Als klanten bij ons komen voor een nieuwe website, drukwerk of campagne is het immers belangrijk dat deze naadloos aansluiten bij de look & feel van de rest van het merk.

Die campagnes zijn vaak een uitdaging. Want: welke elementen uit de huisstijl kun je gebruiken om een knallende online campagne neer te zetten? En in hoeverre mag je dan afwijken van dat “heilige schrift”?

Do: campagne uitdenken

Als je een online campagne uitdenkt, is het belangrijk om jezelf en je team een aantal vragen te stellen.

  • Wie is je doelgroep?
  • Wat is het doel van de campagne?
  • Wat willen we daarmee bereiken?

Op basis daarvan kun je namelijk een strategie opstellen, de boodschap formuleren, een concept uitdenken, bepalen via welke kanalen je dit wilt communiceren en welke middelen zich daar het beste voor lenen.

Stel je voor: jouw klant wil scholieren uit Amsterdam aanspreken om deze te laten solliciteren op een bepaalde functie binnen het bedrijf. Uit je onderzoek is gebleken dat deze doelgroep veel tijd doorbrengt op Instagram en YouTube. Dat brengt je op een idee: je gaat een gezellige video maken om deze groep aan te spreken. En dan wordt het moeilijk: de huisstijl is niet gericht op jongeren en er zit geen videohandleiding in de stijlgids. What to do?

Do: extra kleur toevoegen aan huisstijl

Komt ‘ie: ‘een campagnestijl mag best afwijken van de huisstijl, zolang het maar dezelfde look & feel behoudt en het merk goed representeert’.

Bevat een huisstijl maar één of twee kleuren? Dan kun je best een derde accentkleur kiezen. Hetzelfde geldt voor lettertypes: een subtiele toevoeging van een handgeschreven font kan net dat verschil maken om een andere doelgroep aan te spreken.

digital infrastructure
Campagnebeeld Incentro door GoldfiZh

Case: knalcampagne voor Incentro

Zo kregen wij de vraag van IT-bedrijf Incentro of wij een campagne kunnen draaien op innovatie, om zo de coole dingen die ze doen onder de aandacht te brengen van hun doelgroep.

Incentro’s huisstijl is vrij clean en strak: wit met knallend oranje en een cirkel als belangrijkste stijlelement. Een stijl die zich goed leent voor bijvoorbeeld de website, alleen weinig ruimte tot variatie biedt, waardoor je posts op den duur minder goed opvallen in de feed van mensen. Met een goede campagne wil je dat Incentro er juist extra uitspringt, zodat het mensen verrast en triggert over Incentro na te denken.

Daarom hebben we even flink buiten de lijntjes gekleurd.

Om de campagne te laten knallen tussen alle social-bulk op je timeline, hebben we echt iets gek gedaan. We hebben gekozen voor fotografie waarin het thema en de copy van de advertentie letterlijk uitgebeeld wordt.

We slice data into fabulous smart solutions’ is verbeeld als doorsnede van een ananas, waarbij de binnenkant uit cd’s bestaat en ‘We clean up you dirty digital infrastructure’ werd een gameboy-schoonmaakmiddel. Door dit te combineren met herkenbare elementen uit de huisstijl, zoals het font en de gekleurde ‘o’, past het toch bij Incentro en levert het ook nog eens hoge conversies op.

smart solutions
Campagnebeeld Incentro door GoldfiZh

Campagnestijlen van McDonald’s en Appie Today

Sommige (grote) merken gaan hier nog veel verder in. Denk maar aan de wervingscampagne van McDonald’s of aan Appie Today: het online kanaal van Albert Heijn. Zij laten hier hun huisstijl een beetje los, zodat ze een andere doelgroep aanspreken.

Een video van Appie Today

Bovendien gebruikt McDonald’s User Generated Content in hun campagne (of tenminste: zo ziet het eruit). Ze hebben de doelgroep voor deze campagne zelf stukjes laten filmen met hun smartphone. Mooi? Mwoah. Past het binnen de stijl van McDonald’s? Neh. Effectief? Waarschijnlijk wel! Een typisch gevalletje form follows function.

Een speciale campagnevideo van McDonald’s

Don’t: alles veranderen voor de definitieve campagnestijl

Hoe voorkom je dan dat dat je iets totaal randoms gaat maken? Daar zijn een aantal manieren voor. Sowieso probeer ik mijn creatieve vrijheid iets te beperken. Dus niet én een extra font én drie nieuwe kleuren én allemaal gekke illustraties, maar één van die toevoegingen. Welke elementen sluiten het beste aan bij het DNA van het merk? Die kun je gebruiken.

Daarnaast zorg ik ervoor dat ik kijk naar andere herkenbare stijlelementen uit het huisstijlhandboek en zorg dat ik die laat terugkomen. Als je een lijn gebruikt, hoe ziet die lijn er dan uit? Is het een stippellijn, een dikke lijn, heeft een een rafelig randje of ziet ie eruit als een marker? Ook dit zijn eigenschappen die bijdragen aan de look & feel van een merk.

Tenslotte kijk ik bij video goed naar de manier hoe kleine animaties aan kunnen sluiten bij het merk. Wobbly-tekeningetjes passen goed bij een merk dat blijheid en vrijheid in het vaandel heeft staan, terwijl minimalistische geanimeerde teksten goed passen bij een corporate-uitstraling.

Do: online campagne via GoldfiZh

Bij GoldfiZh proberen we bedrijven online zichtbaar te maken door slimme marketing. We lopen vooruit en proberen onze klanten hierin continu uit te dagen. Een nieuwe campagnestijl is best spannend. Door uit te leggen waarom we bepaalde beslissingen nemen leveren we uiteindelijk het beste resultaat.

Is jouw bedrijf op zoek naar die knalcampagne? Of ben je designer en heb je behoefte aan een paar extra ogen? Mail mij dan!

Typografie: wat is het en hoe zet je lettertypes in voor jouw design?

Hoe maak je een lettertype, wat komt er allemaal kijken bij het ontwerpen van typografie, wat is een font precies en hoe bedenk je een lettertype voor een bepaald merk of bedrijf? Ruby weet alles over letters, tekst en design en legt het je uitgebreid uit!

Ik vind typografie fascinerend. Op de basisschool had ik al door dat comic-sans “not done” was en op middelbare school kon ik urenlang besteden aan de opmaak van mijn werkstuk… (Twee woorden: Word. Art.) En nog steeds vind ik gepriegel met letters heerlijk. 

Typografie is niet alleen leuk, maar voor communicatie ook belangrijk. Toch wordt typografie bij het uitwerken van een huisstijl vaak onderschat. Kleur, vorm en fotografie verdelen al snel het erepodium, terwijl er verwacht wordt dat een lettertype “ook wel even wordt uitgekozen”. Toch zijn typografie – de opmaak van tekst en het gebruik van (leesbare) lettertypes – van essentieel belang voor je merkidentiteit. Een merk met een sterke visuele identiteit kun je vaak zelfs herkennen aan enkel het font.

In deze blog zet ik de basis van typografie in de volgende onderwerpen uiteen:

Even een disclaimer vooraf: sommige stukken zijn gefundeerd op feiten en sommige stukken zijn een beetje subjectief. We hebben het immers over een stukje esthetiek. Onthoud de basis en lap vervolgens de regels soms lekker aan je laars. Let’s go!

Betekenis typografie

Wat is typografie? Typografie is alles wat hoort bij het opmaken van teksten. Denk aan: de keuze van lettertypen, regelafstand en witruimte. De keuze van deze aspecten zijn van invloed bij het bereiken van en het zetten van de juiste toon voor een bepaalde doelgroep.

definitie typografie betekenis

Typefaces: Serif, Sans-Serif (en Slab-Serif)

Binnen de typografie kennen we verschillende typefaces. Daarin onderscheiden we globaal twee soorten.

Serif typeface

Een serif typeface is een lettertype met een schreef. Dit noemen we ook wel ‘roman’. Bekende serif fonts zijn bijvoorbeeld Times New Roman, Georgia of Garamond. Deze lettertypes hebben door de schreef een klassieke look en zijn over het algemeen meer geschikt voor print.

Sans-serif typeface

En een sans-serif typeface is een lettertype zonder schreef. Dit noemen we ook wel ‘grotesk’. Bekende sans-serif fonts zijn bijvoorbeeld Arial, Roboto of Helvetica en zijn over het algemeen meer geschikt voor digitaal.

verschil serif typeface en sans-serif lettertype

Wat is een schreef?

Een schreef is het lijntje dat bij serif fonts dwars op het uiteinde van de letterlijnen van de letters staat. Bij de sans-serif fonts ontbreekt deze dus. Een schreef geeft de letter een klassieke uitstraling, maar heeft ook een belangrijke functie. Een schreef zorgt er namelijk voor dat langere teksten makkelijker leesbaar zijn, omdat 1) de letters beter van elkaar te onderscheiden zijn en 2) je ogen als het ware over de regels worden begeleidt. Niet gek dus dat je in boeken en kranten eigenlijk altijd serif fonts ziet.

Side note: Vroeger, toen de boekdrukkunst nog in de kinderschoenen stond, hadden drukkers slechts een paar lettertypes om uit te kiezen. Tegenwoordig zijn er duizenden fonts beschikbaar op het internet. Logisch dat veel fonts op elkaar lijken. Wil je jezelf hierin trainen of je collega’s/designer-friends op de proef stellen? Daag ze dan eens uit voor een potje Arial vs. Helvetica! Een grappig spelletje waarbij je teksten in Helvetica van Arial moet onderscheiden.

slab serif

Slab serif typeface

Globaal gezien hebben we dus twee typefaces. Toch wil ik daar graag een derde aan toevoegen: de slab-serif. Oftewel: de Egyptienne. Waarom Egyptienne? Volgens mij iets met Napoleon in Egypte, maakt verder eigenlijk ook niet uit. De slab serif heeft een schreef, maar deze is anders dan bij een normale serif typeface. Bij een slab serif font is de schreef namelijk vaak vierkant en net zo dik als de letterlijnen zelf. Ik moet altijd denken aan chocoladeletters (of dat aan de slab-serif ligt, laten we even in het midden). Daarnaast zie je de slab serif ook veel in kranten. Op dun papier waar de inkt snel uitloopt, blijft de Egyptienne namelijk beter leesbaar. Bovendien een mooi compromis voor twijfelaars die niet kunnen kiezen tussen een roman en een grotesk.

Font pairing: zo kies je fonts die bij elkaar passen

Font pairing, oftewel: het combineren van lettertypes, is mijn favoriete onderdeel bij het ontwerpen van een huisstijl. Soms is één font voldoende om een sterke identiteit neer te zetten, maar vaak heb je meer dan één lettertype nodig. Zeker als je een social- of campagnestijl meeneemt in het voorstel van je huisstijl. Een extra lettertype kan net wat meer ruimte geven om te spelen. Maar hoe weet je welke fonts goed bij elkaar passen? Ik volg dan het onderstaande stappenplan.

Stap 1: Een sterke basis

Voordat je font gaat combineren, ga je terug naar de basis: de identiteit van jouw opdrachtgever. Je stelt jezelf vragen. Wie is de doelgroep? Wat zijn de kernwaarden van dit bedrijf? Wat wil dit merk uitstralen? Op basis daarvan kies je een lettertype dat dient als basis voor de huisstijl.

Stap 2: Contrast of geen contrast

Je hebt nu een lettertype als basis. Eentje die je bijvoorbeeld gebruikt voor langere teksten. Nu wil je een extra font voor koppen. Dit kan natuurlijk ook andersom. Dan vraag je jezelf het volgende: moet dit extra font een contrast vormen met het basisfont – of juist niet? Met de juiste combinatie kun je balans aanbrengen in je huisstijl.

Bijvoorbeeld: heb je een klassiek font met schreef voor langere teksten en heb je het gevoel dat het te ouderwets wordt? Dan kan je daar juist een modern lettertype tegenover zetten om de balans te herstellen. Je creëert dan contrast. Als je een lettertype nodig hebt dat juist een beetje lijkt op je basisfont, kies je een ‘matching font’. Dan heb je juist weinig contrast.

Side note: vraag je dan wel af of je dat extra font echt nodig? Kan ik niet beter één hetzelfde font gebruiken? Ik maak daarin altijd een keuze. Als je in het midden blijft hangen, wordt het hem namelijk nét niet en dat is zonde.

Stap 3: Kiezen!

Als je start met het combineren van je fonts, contrast of niet, let ik op een aantal aspecten: de breedte van de letters, de hoogte van de letters, wel of geen schreef en de vorm van de schreef. Ga je voor contrast? Combineer dan bijvoorbeeld een lekker breed font met een heel smal, condensed font, een handgeschreven font met een sans serif font of een klassieke roman met een strakke grotesk. Wat ik wel altijd “match”, is de afronding van de hoeken. Daarmee zorg je dat de fonts mooi aansluiten. Hieronder een aantal voorbeelden.

Hieronder zie je een paar voorbeelden van hoe het wel én niet moet:

voorbeeld font pairing
voorbeeld van lettertypen combineren
font pairing: lettertypen die goed bij elkaar passen

Zoek bij font pairing vooral naar balans. Zo kun je de perfecte uitstraling neerzetten voor jouw opdrachtgever.

Basisregels typografie

Bij het ontwerpen van een leesbare tekst zijn een aantal dingen belangrijk: fontgrootte, interlinie, kerning en uitlijning. Er zijn een aantal basisregels die je kunt gebruiken, maar het gebeurt ook vaak genoeg dat je hier vanaf wijkt.

Fontgrootte: de size van het lettertype

Font size spreekt voor zich: de grootte van je lettertype. Hoe groot je de tekst maakt, hangt erg af van het gekozen font en van het middel waarop je tekst verschijnt. Maak je een boek of een brochure op? Dan gebruik ik vaak 9pt of 10pt. Bij 12pt tot 14pt ga je echt richting kinderboeken. Ontwerp je digitale uitingen, zoals een website of een app? Dan mag je tekst een stuk groter! Denk hierbij aan 15pt tot 20pt. De tekst die je nu leest op onze Goldfizh website is 16pt.

Interlinie: de afstand tussen de regels

Interlinie is de ruimte tussen de regels van je tekst, ook wel ‘leading’ genoemd. Een goede interlinie zorgt ervoor dat je tekst goed leesbaar blijft. Ook kan het echt invloed hebben op je design. Een tekst met een te kleine interlinie ziet er propperig uit, terwijl een tekst met een grote interlinie een beetje uit elkaar kan vallen. Belangrijk om hierop te letten dus.

Ook hierin zie je veel verschil tussen print en web. Op school heb ik ooit geleerd: interlinie = font size + 4. Meestal komt dit wel uit, maar als je tekst groter wordt, vervalt deze regel. Een tekst van 50pt zou dan een interlinie krijgen van 54pt. Ziet er niet mooi uit, vind ik. Daarom gebruik ik altijd: interlinie = font size x 1,35. Dan blijft de boel wat meer in verhouding. Voor web maak ik mijn interlinie vaak iets ruimer. Een andere uitzondering op de regel geldt voor teksten in all caps (alleen hoofdletters). Daar wil je de interlinie juist kleiner.

voorbeelden van interlinie bij typografie

Kerning: de ruimte tussen de letters

Bij het maken van een font, zorgt de ontwerper dat de letters over het algemeen netjes achter elkaar staan. Maar sommige letters wijken zo af, dat er te veel of te weinig ruimte tussen lijkt te zitten. Kijk maar eens naar de afbeelding en deze A en een V. Door de letters te “kernen”, zorg je ervoor dat deze mooi op elkaar aansluiten. Bij lopende teksten is dat meestal niet zo relevant (en bovendien véél te veel werk), maar bij het maken van een logo des te meer. De enige manier om dit goed onder de knie te krijgen, is door het veel te oefenen. Dit kerning-spelletje is daar perfect voor!

voorbeeld van kerning bij typografie

De uitlijning van je tekst

Linkslijnend, gecentreerd of rechtslijnend. En vul je je tekst uit of niet? Over het algemeen geldt: linkslijnend leest het lekkerst. Toch je tekst wil centreren? Op een poster of een flyer is dat prima. Let dan op de andere teksten in je document en probeer hier een beetje consistent in te zijn.

Extra tip: ga voor langer lopende teksten voor max. 10 woorden op een regel. Dat leest het lekkerst.

Typografie voorbeelden, inspiratie en trends

In mijn zoektocht naar inspiratie kan ik soms verdwalen in de wondere wereld van het internet. Ik sla alles op wat ik interessant vind op mijn Pinterest typografie-board, zodat ik het later nog een keer kan terugkijken. Nu zien we daarin een aantal dingen vaker terugkomen. Trend alert! Deze trends moet je echt in de gaten houden.

voorbeelden typografie in logo's

Trend 1: Geen hoofdletters

Logo aan het ontwerpen? Alle tekst in kleine letters. Dat lijkt een ‘must’ te zijn als je in het rijtje van hippe bedrijven wil thuishoren. Airbnb, Asos, de Dutch Design week: ze hebben allemaal een logo waar geen hoofdletter aan te pas komt.

Trend 2: Fluid Type

Fluid type betekent: vloeibare typografie. Een tikje artistiek, maar wel heel erg vet. Bij Fluid type lijkt het alsof je letters bijna wegsmelten in je designs. We zien dit terug bij o.a. Down the Rabbit Hole.

fluid type: typografie en lettertype mailchimp

Trend 3: Serif type for web

Oké oké, niet heel nieuw meer, maar wel interessant omdat het tegen het principe ingaat dat serif typefaces alleen geschikt zijn voor print. Niet dus! De Google library staat vol met serif web fonts die juist online goed werken. MailChimp heeft dit helemaal eigen gemaakt, net als platform Medium en kledingmerk & Other Stories. Ook opvallend: veel koppen met schreef!

example serif type for web
serif sans for web

Trend 4: Contrast in typografie

Wat je nu ook heel veel ziet, is contrast in typografie. En dan vooral in de breedte van de letters. Super wide vs. super narrow, het liefst gecombineerd in dezelfde regel of zelfs hetzelfde woord. Go bold! Go wild! I like it.

Hulp nodig met typografie?

Mocht je nou behoefte hebben aan een kritische blik op jouw huisstijl, denk je dat jouw typografie wel een opfrisser kan gebruiken of wil je gewoon eens kletsen? Neem dan even contact met mij op via ruby@goldfizh.nl.

Lees ook:

LinkedIn Stories: zó haal je meer leads uit LinkedIn!

Brand new: LinkedIn Stories! Na Instagram, YouTube en Facebook kan het zakelijke platform LinkedIn niet achterblijven. Waarom is het belangrijk en wat kan je er als merk mee? Wij zetten alle voordelen, do’s en don’ts en inspiratie op een rij, zodat jij straks nieuwe leads binnenhaalt!

Leuk feitje: Nederland is het eerste land met LinkedIn-stories. Dat betekent dat je buitenlandse connecties nog niet direct jouw stories kunnen zien. Dus zorg ervoor dat je snel expert bent op dit gebied en voorsprong pakt op je buitenlandse concurrenten!

Wat zijn LinkedIn Stories?

LinkedIn Stories is dé nieuwste feature van LinkedIn. Hiermee kan je net als op andere sociale media snel updates geven via een foto of video. Een story staat 24 uur en verdwijnt daarna weer. Vooralsnog is deze feature alleen beschikbaar in Nederland voor persoonlijke profielen, al wordt de functie langzaamaan ook beschikbaar voor bedrijfsprofielen. 

Je hoeft dus niet meer voor elk nieuwtje dat je wilt delen een hele post te maken: je kunt dit nu snel en laagdrempelig delen. LinkedIn Stories zijn alleen te vinden en te delen in de app.

Hoe plaats ik een Story op LinkedIn?

Maar hoe werkt dat nou precies, het plaatsen van zo’n Story? Als je Instagram Stories al onder de knie hebt, heb je hier een voordeel: het werkt nagenoeg hetzelfde. Het enige waar je rekening mee moet houden is dat je de LinkedIn Stories alleen ziet én kunt uploaden op de mobiele app. Zorg dus dat je deze hebt gedownload voordat je van start wilt gaat.

Je plaatst een LinkedIn-Story in 6 stappen:

  1. Open de app
  2. Klik op je eigen profiel
  3. Kies je video of foto
  4. Voeg wat extra’s toe!
  5. Vergeet je stickers niet
  6. Deel je story!

Ik licht deze stappen hieronder uitgebreid toe.

LinkedIn Stories openen

Stap 1: Open de app

Open de LinkedIn app, meld je aan en klik links onderin op het ‘huis’ icoon. Zo ga je naar de homepage waar je Stories kunt uploaden en bekijken.

Stap 2: Klik op je eigen profiel

Bovenaan op de homepage zie je rondjes verschijnen. Dit zijn de Stories van mensen of bedrijven waar jij een connectie mee bent op LinkedIn. Het eerste rondje ben jij zelf. Klik daarop om je Story te uploaden.

Stap 3: Kies je video of foto

Je kunt hier kiezen om een foto of video te maken, maar je kunt er ook één uploaden vanuit je filmrol. Klik op het icoon links onderin om een beeld te uploaden dat je al eerder gemaakt hebt. 

Door op het tweede icoon links te klikken draai je je camera, om zo een selfie te kunnen nemen. Sta je in een donkere ruimte en kan jouw beeld wel wat licht gebruiken? Druk dan op het icoon rechts onderin om de flitser aan te zetten. Zelf een foto of video maken? Klik op het rondje om een foto te maken, houd het rondje ingedrukt om een video te maken. 

Bonustip: als je het geluid onder je video niet nodig hebt, zet deze dan uit door op het megafoonicoon linksboven te klikken. Zo voorkom je ongemakkelijk achtergrondgeluid of privégesprekken. 

Tekst toevoegen bij LinkedIn Stories

Stap 4: Add some extra dingen!

Je hebt je beeld gekozen, nu is het tijd om de extra’s toe te voegen! Laten we beginnen bij de tekst. Klik rechts bovenin op het ‘T’ icoon. Je kunt kiezen voor twee soorten vormgeving: witte achtergrond met gekleurde tekst of alleen gekleurde tekst. 

Je kunt dit kiezen met de iconen rechts bovenin. Wil je de tekst anders uitlijnen? Klik dan een aantal keer op het eerste icoon in de rechterbovenhoek om te kijken wat jij mooi vindt. Door de gekleurde rondjes aan te klikken verandert de kleur. 

Heb je je tekst getypt en wil je nog veranderen van vormgeving of kleur? Dat kan! Klik op de iconen rechts bovenin en op de gekleurde rondjes om je vormgeving naar jouw smaak te maken. 

Ook kun je de grootte en plaatsing van de tekst zelf bepalen. Door met één vinger op de tekst te klikken en te bewegen, verplaatst de tekst. Door met twee vingers de tekst aan te raken en naar binnen of naar buiten te trekken, pas je de grootte aan. De tekst toch verwijderen? Tik de tekst met één vinger aan en verschuif hem naar het prullenbak icoon onder in beeld. 

Stickers toevoegen bij LinkedIn Stories

Stap 5: Vergeet je stickers niet

Je bent helemaal tevreden met de tekst, maar vind je dat er nog wel iets mist? Dan kun je kiezen voor een sticker! Klik op het eerste icoon rechts bovenin en scroll tot je een geschikte sticker vindt. Wil je iemand taggen in jouw foto? Klik dan op het ‘@vermelding’ icoon boven de stickers. Het aanpassen of verwijderen van stickers werkt hetzelfde als bij de tekst.

LinkedIn story publiceren

Stap 6: Deel je story!

Je Story is af, compleet met stickers, gifjes en tekst. Nu kun je jouw Story delen! Klik op ‘artikel delen’ rechts onderin en je Story wordt 24 uur zichtbaar voor al je (Nederlandse) connecties. Wil je zien wie jouw Story allemaal bekeken heeft? Ga dan naar de homepage en klik op jouw rondje. Linksonder zie je hoeveel mensen je Story gezien hebben en door omhoog te swipen kun je zien wie het zijn. 

Good to know: je Stories zijn openbaar, dus er kunnen ook kijkers zijn waar je nog geen connectie mee bent. Je kunt ze vanuit jouw Story direct een connectie verzoek of bericht sturen. Wil je jouw Story verwijderen, downloaden naar je filmrol of doorsturen naar iemand in een privébericht? Klik dan op de drie bolletjes rechts bovenin. 

Tips: wat moet ik delen op LinkedIn Stories?

Je weet nu hoe je iets moet delen, maar wát moet je delen? Daar hebben wij, maar LinkedIn zelf ook, een aantal tips voor. De content die je hier gaat plaatsen is namelijk anders dan wat je bijvoorbeeld deelt op Facebook of Instagram.

Waar die platformen echt over jou gaan, je persoonlijke leven en alles wat je meemaakt, draait LinkedIn echt om je werk en je carrière. Het is dus niet de bedoeling om je #sundaybreakfast of #datenight content te gaan delen. Maar wat deel je dan wél?

Tip 1: deel huidige projecten

Foto’s van je kantoor, filmpjes van moodboards of een vlog waarin je vertelt waar je mee bezig bent. Voor je connecties heel interessant om te zien waar je nu mee bezig bent en of zij er zelf ook iets mee kunnen.

Tip 2. deel je tips and tricks

Heb je een leuke webinar gevolgd, een interessant artikel gelezen of heb je zelf misschien een ebook uitgebracht? Post dan af en toe wat tips die je graag met je connecties wilt delen. Niet alleen om ze iets bij te brengen, maar ook om te laten zien wat voor kennis jij allemaal bezit.

Tip 3. ‘Live’ reporting

Ben je op een tof evenement of sta je zelf bijvoorbeeld op een beurs? Dan is Stories de perfecte manier om live content hiervan te delen en mensen realtime op de hoogte te houden.

Tip 4: behind the scenes

Geef al je connecties een kijkje in de keuken! Met Stories kun je op een laagdrempelige manier mensen laten zien hoe jullie dagelijks aan het werk zijn, hoe gezellig vol de lunchtafel is en wat voor interessante workshops jullie allemaal volgen. 

Let hier wel op dat je niet te casual beelden gaat delen: dronken collega’s op een vrijmibo is niet altijd het beeld wat je af wilt geven.

Tip 5: plaats oproepen

Omdat de Stories bij iedereen bovenaan de homepage staan en de Stories blijven doorlopen wanneer je er eentje opent, is dit dé uitgelezen plek om de aandacht te krijgen. Ben je op zoek naar een nieuwe baan of zoek je juist een nieuwe collega? Heb je een presentator nodig, zoek je een geschikte locatie voor een evenement of ben je opzoek naar een freelancer? Dan is dit dé plek om de aandacht van je netwerk te trekken. 

Probeer het maar eens, je zult zien dat dit meer aandacht trekt dan een normale post!

Do’s and dont’s bij je LinkedIn-stories

We benoemden het al eerder, maar het is goed om jezelf te allen tijde af te vragen of het voordelig is om bepaalde content te posten. Dus voordat je nu fanatiek aan de slag gaat met LinkedIn Stories en foto’s van de pasgeboren baby van zus gaan delen, vraag jezelf af: wil ik dat mijn professionele netwerk deze content ziet?

LinkedIn heeft zelf ook duidelijk een aantal don’ts aan deze nieuwe feature verbonden, waarbij het delen van onprofessionele privémomenten op nummer 1 stond. Daarnaast stond spammen van diensten en producten of content die je carrière geen goed doet ook hoog in het lijstje. Kortom: probeer deze nieuwe feature zeker uit, maar houd het professioneel.

Aan de slag met LinkedIn-stories, maar nog wat hulp, creativiteit of inspiratie nodig? Mail me gewoon even → maartje@goldfizh.nl

Andere lazen ook:

Instagram stickers maken in 3 super easy stappen!

Stickers voor Instagram maken is supereasy en superleuk om mee op te vallen in je Stories! Stickers gebruik je om de inhoud van jouw posts te laten shinen. Als jij bijvoorbeeld iets post over marketing, dan plak je er een marketing-sticker bij. Maarrrrr je kan óók je eigen gepersonaliseerde Instagram-stickers maken én gebruiken! Whut?! We leggen je snel uit hoe jij je eigen Instagram-stickers maakt (die ook op Snapchat werken). Let’s go!

Wat zijn Instagram Stickers?

Stickers zijn icoontjes, al dan niet bewegend (gifjes), die je over je Instagram Story kunt ‘plakken’. Het is een simpele manier om de interactie met je volgers te vergroten en je Stories aantrekkelijker te maken. Je sleept een sticker gewoon rechtstreeks in je story via het stickericoon. Vervolgens kan je het formaat veranderen met je vingers, super easy dus!

Instagram Stickers vind je achter het sticker-icoontje als je een Story maakt
Instagram Stickers vind je achter het sticker-icoontje als je een Story maakt

Hoe voeg stickers toe aan je Insta Story?

Wanneer je een Story op Instagram plaatst, kun je via het sticker-icoontje bovenin de standaard stickers gebruiken die je in het begin ziet, zoals: een poll, je locatie of een plaatje. Daarnaast kun je er nog veel meer vinden als je zoekt via Giphy. Hier is op Instagram een zoekbalk voor.

Als je op het sticker-icoontje hebt geklikt zie je de meestgebruikte stickers
Als je op het sticker-icoontje hebt geklikt zie je de meestgebruikte stickers

Stickers zorgen voor interactie

Met stickers val je niet alleen op, ook voeg je zo extra informatie toe aan je post, zoals: locatie, een persoon of een passende hashtag! En dit zorgt voor meer interactie en engagement met je following.

In de zoekbalk kan je vervolgens zoek naar stickers. Hier vind jij straks ook je eigen Instagram Stickers!

Het is goed om interactie te hebben met je volgers. De ‘vragen’ en ‘poll’ -stickers zijn hier bijvoorbeeld handig voor. Zo kun je gemakkelijk hun mening achterhalen of reacties verzamelen, waar je vervolgens weer iets mee kunt doen. Dit zorgt voor meer engagement.https://giphy.com/embed/Jo0gq1KrZqhi3lNxk2

Dit kan je dus ook doen via je eigen gepersonaliseerde stickers! Dit geldt voor influencers, maar ook voor bedrijven. Je kunt hiervoor kijken wat voor soort content jullie vaak in je Stories zetten of willen zetten. De stickers kun je daarop laten aansluiten zodat je ze vaker kan hergebruiken.

Stappenplan: zó maak je jouw eigen Instagram Stickers!

Tijd om stickers te maken dus! Je eigen stickers maken voor Insta (en Snap) doe je met het volgende stappenplan!

Stap 1: ontwerp stickers in After Effects, Illustrator of Photoshop

Als je een sticker gaat ontwerpen, kun je dit in een ontwerpprogramma van Adobe doen. Een kleine beweging creëren in de afbeelding doe je door twee of drie verschillende tekengebieden te maken in Illustrator of Photoshop. Deze exporteer je vervolgens als .png-afbeeldingen.

  • 👉 Heb je geen Photoshop of vergelijkbaar programma? Google heeft een tooltje gemaakt waarmee je makkelijk gifjes maakt. Ook zijn er apps als Gif Me! om gifjes te maken. 

De ‘friyay’ sticker van hierboven zou bijvoorbeeld makkelijk in Photoshop zelf kunnen. Het enige dat beweegt is de ‘yay’, dus dat kan gemaakt worden met twee PNG’s. Maar wil je een animatie of een langere beweging maken als sticker, dan is dit handiger in After Effects, anders gaat de beweging heel schokkerig. Bijvoorbeeld de GoldfiZh ‘G’ met het visje: dit is een animatie die je dus moet exporteren als meerdere PNG’s. Hoe je dat doet lees je in de volgende stap.https://giphy.com/embed/fvxT7hGrzBep6odfCG

Stap 2: Exporteren als meerdere PNG’s en daarna als GIF

Als je animatie in After Effects eenmaal klaar is, is de volgende stap: exporteren. Dit is de meest ingewikkelde stap, dus let goed op. Je kunt een ontwerp namelijk alleen exporteren als GIF-bestand via Photoshop, als je een animatie hebt gemaakt in After Effects en hebt geëxporteerd in meerdere PNG’s.

Dit doe je via Adobe Media Encoder. Hierin kan je namelijk de animatie als allemaal losse PNG’s opslaan. Deze kan je vervolgens openen in Photoshop en daar als GIF exporteren.

Exporteren als PNG’s vanuit After Effects doe je als volgt:

Stickers exporteren met Encoder

Vervolgens open je deze PNG’s in Photoshop en exporteer je het als GIF:

De PNGs exporteren als GIF

Stap 3: Uploaden op Giphy

Allereerst moet jij (of jouw bedrijf) een Giphy-account hebben. Hier upload je alle stickers die je maar wilt. Je vult bij je stickers passende tags, ofwel zoekwoorden, in (denk er hierbij aan wat andere mensen veel zullen zoeken) en klikt dan op upload. Supersimpel dus!

Stickers en gifjes uploaden in Giphy

Nadat jij je sticker hebt geüpload, moet je toch nog eventjes geduld hebben. Giphy moet de sticker namelijk nog even controleren en in alle systemen zetten, dit kan wel een dagje duren. Maaaar daarna kun je wel je EIGEN sticker gebruiken op zowel Instagram als Snapchat!

Inspiratie nodig? Zie onze stickers!

Op onze Insta (volg ons gelijk even! 😘) plaatsen wij veel updates over wat er hier achter de schermen gebeurt. We zijn een digitaal marketing bedrijf dus stickers als ‘always online’ en ‘work mode on’ zijn vaak passend bij onze content.https://giphy.com/embed/l0itooAyvr6dmLdRil

Ook houden we bijvoorbeeld elke week een vrijdagmiddagborrel en hebben we een gaaf kantoor, dus daar hebben we ook een paar passende stickers bij gemaakt!https://giphy.com/embed/IaWbHDziExKR6JaOhs

Je kan ook voor een bepaalde periode wat extra stickers maken. Zo hebben wij vanwege corona de stickers ‘1,5 m’ en ‘working from home’ toegevoegd. Het is slim om mee te gaan met de actualiteit, want op dat moment is daar veel vraag naar en het laat ook zien dat jullie ‘on top of things’ zijn. Voor GoldfiZh is het geen enkel probleem om snel een aantal vette stickers te maken!https://giphy.com/embed/hULv72n1mOb7Jixc5Q

Waarom moet je stickers maken voor Instagram en Snapchat?

Er zijn 3 redenen waarom jij stickers moet maken voor Instagram en Snapchat:

  1. Val op!
    Het toevoegen van een aantal Instagram-stickers zorgt niet meteen tot een grote toename van de verkoop, maar het is wel een hele vette en vooral creatieve manier om jezelf te laten zien! Zeker als je bekendheid wil genereren bij jongere doelgroepen. Het wordt nog niet eens zo veel gedaan door bedrijven, dus je onderscheidt jezelf hier écht enorm mee!
  2. Groot bereik Giphy
    De stickers die jij op Giphy uploadt, kunnen mensen over de hele wereld gebruiken, dus het bereik is enorm! Het is dan wel handig om Engelse zoekwoorden in te vullen. Je kunt via het Giphy-account ook precies zien hoeveel views je stickers krijgen. Ook kunnen ze naast Instagram op Snapchat worden gebruikt, die andere razendpopulaire app onder jongeren. Als je er dan in het klein jouw logo of naam onder zet is dit een leuke manier van reclame maken.
Dashboard on Giphy
Sommige stickers van GoldfiZh zijn al ruim een miljoen (!) keer gezien

Mogelijkheden zijn eindeloos
Je kunt bij het bedenken van stickers zo creatief en gek zijn als je zelf wilt. Van een simpele knipperende tekst tot een animatie van een real life persoon of product, het is allemaal te maken! Bij dit proces kun je ook al je collega’s of werknemers betrekken, wat kan leiden tot een kleine creatieve sessie en teambuilding.

Bekijk al onze gepersonaliseerde stickers op Insta via het zoekwoord ‘GoldfiZh’ en laat ons weten wat je ervan vindt!

Hulp nodig bij het maken van jouw eigen Instagram Stickers? Of inspiratie nodig? We helpen je graag! Stuur gewoon een berichtje naar hello@goldfizh.nl!

Meer Instagram-tricks? Lees dan ook:

Instagram Stories! Maak leuke Instastories mét engagement

Instastories zijn een medium op zich geworden. Per dag maken 400 miljoen mensen gebruik van deze eindeloze swipefunctie op Instagram. Verslavend, maar het werkt dus! Driekwart van die gebruikers bezoekt namelijk de website van de afzender en 1 op de 3 personen raakt meer geïnteresseerd in een merk of product na het zien van een Story. Dus: hoe val je op met je account op Insta?

Wat zijn Instastories?

Instastories zijn losse of een reeks tijdelijke posts op Instagram, die na 24 uur verdwijnen. Het zijn staande foto’s en video’s die 5 tot 15 seconden zichtbaar zijn en die je kan pimpen met stickers en gifjes. Stories op Insta worden vooral gebruikt om snel en kort contact te leggen met volgers.

Het is ook een veel gebruikte social advertising-methode. Door middel van een swipe-up (omhoog vegen) kunnen volgers snel in een webshop terecht komen om zo snel tot een aankoop over te gaan.

5 tips voor succesvolle Instastories

Ik betrap mezelf er ook vaak op dat ik regelmatig omhoog swipe of op het profiel klik wanneer ik iets voorbij zie komen wat mij opvalt. Als bedrijf kun je het medium op zoveel verschillende creatieve manieren inzetten dat het een handige tool is geworden om op te vallen bij je doelgroep. Dit zijn wat mij betreft de 5 beste manieren.

#1 Ontwerp je eigen gifjes en filters voor je bedrijf

Gifjes zijn bewegende plaatjes en kreten die je op een foto of video kan plaatsen. Er zijn al vele gifjes die je op Instagram kan vinden door middel van de zoekbalk, maar het is ook mogelijk om zelfgemaakte gifjes te uploaden. Een voorbeeld van een organisatie die goed gebruik maakt van eigengemaakte gifjes is het festival Lowlands.

Zo waren er dit jaar bewegende gifjes van typische kledingitems die gedragen worden tijdens het evenement. Zo waren de Bucket Hat en Fanny pack terug te vinden in de lijst. 

Lowlands gebruikte naast gifjes ook filters in hun huisstijl. Filters zijn lagen die over een foto of video heen geplaatst kunnen worden.

Het gebruik van de gifjes en filters is win-win voor elk bedrijf. De gebruikers kunnen een creatieve draai geven aan hun foto’s en het bedrijf heeft bouwt hierdoor naamsbekendheid op.

#2 Zorg voor interactie met deze stickers

Insta stories heeft de tool Polls (foto 1) en Stel een vraag (foto 2). Met deze tools maak je als bedrijf makkelijk contact met je volgers. Met een ‘Poll’ laat je volgers kiezen tussen twee opties en met ‘Stel een vraag’ krijg je antwoord op je vraag. De resultaten van de antwoorden krijg je in een overzicht te zien, waardoor je makkelijk achterhaalt wat de mening van je publiek is. Het interieurbedrijf Westwing maakt vaak van deze opties gebruik.

westwing home stories instagram

Ook is er nog een derde manier om de mening van je volgers in kaart te brengen en dat is het schuifbalk (foto 3). Hier kan de volger zelf het balkje verschuiven naar zijn of haar antwoord. Westwing maakt hier op een creatieve manier gebruik van door de balk verticaal in te zetten en zo antwoord te krijgen op de vraag: wat is jouw favoriete kleur stoel?

#3 Lay-out: apps om creatief buiten de kaders te denken

Instagram biedt gifjes, filters en tools om je uit te dagen je foto’s meer creativiteit en leven in te blazen, maar er zijn ook vele apps die je hier een handje mee helpen.

Een voorbeeld is Unfold. Met deze app kun je op een makkelijke manier je foto’s in een template zetten en deze naar je fotobibliotheek exporteren.

Unfold Instagram

Ook is het mogelijk om interactie te krijgen met je volgers door middel van een lay-out. Wanneer je deze in je story hebt geplaatst, kunnen volgers hiervan een screenshot maken en ingevuld in hun eigen story plaatsen. In de opmaak kun je het logo van je bedrijf verwerken en de onderwerpen kun je laten aansluiten op voor jou relevante topics.

Lay out voor insta story

#4 Advertenties: hoe zorg je dat mensen blijven kijken?

Wanneer je als gebruiker de stories van je ‘volgend’ (de accounts die je volgt) bekijkt, komt er na elke drie stories een advertentie voorbij. Deze hoef je niet verplicht af te kijken om verder te kunnen kijken, maar als adverteerder wil je natuurlijk wel dat de aandacht er zo lang mogelijk bijblijft en eventueel vervolgstappen worden ondernomen.

Ondertiteling

Een simpele manier om toe te passen is ondertiteling. Doordat mensen niet verplicht hun geluid aan hoeven te zetten om de advertentie te bekijken, is de drempel lager om te blijven kijken. Zo kun je als kijker toch volgen wat er gebeurt en wordt er niet bij voorbaat verder geklikt.

Inspiratie

Een andere manier is juist om zo weinig mogelijk tekst te gebruiken en beelden zoveel mogelijk te laten spreken. Ook het gebruiken van een bekend gezicht zal iemand langer naar de advertentie laten kijken. Met andere woorden: inspireer je publiek!

instastories inspiratie
instagramstories inspiratie H&M

Bewegende tekst en animaties

Bewegend beeld valt op en dat heeft Ben & Jerry’s goed begrepen. Onderstaande advertentie is door hen gemaakt en zoals je ziet zijn er verschillende animaties die om het product heen vliegen die opvallen.

instastory ben & jerry's

#5 Benut je highlights goed

Wanneer je stories opslaat op je profiel wordt dit een Highlight genoemd. Deze Highlight kun je een omslagfoto en titel geven, zodat het duidelijk is wat er in de Highlight te zien is. NOS Stories maakt hier goed gebruik van. Zij gebruiken de Highlights om bewegende teksten en animaties.

Albert Heijn is ook een goed voorbeeld van een bedrijf dat video inzet in zijn Insta-stories. Zo heeft de AH nu de boodsgrap: een korte woordgrap over een van de producten van Albert Heijn.Op deze manier promoot de supermarkt zijn producten op een manier die blijft hangen bij de kijkers.

Albert Heijn Instagram

Lees ook: