5 graphic motion trends van 2023

De wereld van motion is altijd in beweging. En in een tijdperk waarin digitalisering, experience, marketing en tech steeds meer samenkomen speelt motion een steeds grotere rol. Benieuwd welke motion trends in 2023 tevoorschijn komen? Je leest het in deze blog. 

Kom alles te weten over motion design:

Wat is motion?

Motion design laat grafische elementen bewegen. Denk bijvoorbeeld aan een bewegend logo op een website, een op-en-neer deinende grafieken tijdens een explainer of een Digital Out Of Home waar een leeuw uit springt. Motion laat stilstaand design tot leven komen.

Trend 1. De wereld van 2D en 3D komen samen 

Digitalisering biedt ons steeds meer mogelijkheden. Meer beeld, meer beweging, dus meer motion!  Een manier om meer uit motion te halen in 2023, is door 2D en 3D te combineren. Creëer grafische inhoud die nóg realistischer en meer meeslepend is, om zo echt indruk te maken op de kijker. Zo maak je je animatie uniek, fascinerend en intrigerend én kijkt de kijker ongetwijfeld tot het eind!

Trend 2. Mind blowing motion experience

In 2023 wordt de rol van experience steeds belangrijker. Motion sluit hier perfect op aan! Een interessante manier om motion en experience te combineren is met een 3D projectie. Hierbij gebruik je een beamer om een hele ruimte te vullen met beeld, om zo de kijker (letterlijk) mee te nemen in het verhaal. Je staat als kijker namelijk werkelijk ín het beeldscherm!

Trend 3. Kinetische typografie, a.k.a. bewegende tekst

Naast bewegend beeld, bestaat er ook bewegende tekst! De technische term hiervoor is ‘kinetische typografie’. Bij kinetische typografie gebruik je dus bewegende tekst om de aandacht van de kijker te trekken. Je maakt jouw animatie dynamisch, opvallend en toepasbaar op elk medium. Van apps tot websites en van billboards tot video. Deze trend is al langere tijd erg populair onder designers, maar zal nog meer aandacht trekken in 2023. 

Trend 4. Seamless scrolling 

Smooth bewegingen in je animatie zijn super belangrijk! Dit houdt in dat beelden in je animatie een naadloze overgang hebben die niet te zien is. Als ontwerper gebruik je verschillende grafische componenten om dit effect te creëren. Denk aan vervorming van een element, of een in- of uitzoom om twee scènes op een natuurlijke manier met elkaar te verbinden. Zo’n onzichtbare overgang tussen twee of meer clips houdt de aandacht van de kijker vast en voegt een extra dimensie  van dynamiek toe. Daarnaast kun je dit effectief toepassen op elk medium! Bijvoorbeeld deze website van Spotify

Trend 5. Gepersonaliseerde motion

Niet te vergeten: gepersonaliseerde motion, ook wel profiling genoemd. Technologieën als artificial intelligence zorgen dat bedrijven content kunnen maken die helemaal is afgestemd op het publiek! Denk bijvoorbeeld aan een video die in real-time elementen toevoegt die specifiek bij jou passen! Waarom dit belangrijk is? Content spreekt zo de kijker meer aan, wordt interessanter én memorabeler.  

Trend 6. Chat GPT gebruiken in After Effects

Last but not least: Het gebruik van AI in animatie. Een voorbeeld hoe we dit toepassen is het integreren van Chat GPT in After Effects. Dit biedt de mogelijkheid om niet alleen automatisch gegenereerde teksten en zinnen te gebruiken, maar ook Expressions en code te genereren en te integreren, waardoor ontwerpers en animatoren meer creatieve controle en flexibiliteit hebben bij het maken van tekst-gebaseerde animaties. Dit proces bespaart tijd, vermindert fouten en biedt nieuwe creatieve mogelijkheden voor het creëren van complexe animaties en effecten.

Graphic motion trend 2023: conclusie

Motion is het soort animatie dat zich voortdurend blijft ontwikkelen en binnen elk medium steeds belangrijker wordt. Het is voor  motion designers dus belangrijk om zich te blijven ontwikkelen en aanpassen aan actuele trends. Wat vorig jaar minder aandacht trok, kun je dit jaar slim uitbreiden als je weet wat je publiek wilt zien!

Kortom, er liggen dit jaar enorm veel kansen op het gebied van motion. Ik ben erg benieuwd hoe we aan het eind van 2023 terugkijken op deze trends. Wil jij één van deze trends terugzien binnen jouw eigen merk? Neem dan contact op met Eveline. Zij kijkt graag welke trending animatie het beste bij jouw merk past!

digitale toegankelijkheid: in 5 stappen jouw website WCAG-proof maken

Online boodschappen bestellen, een betaalverzoek sturen of je belastingaangifte doen. De wereld om ons heen blijft zich digitaliseren. Dat klinkt heel praktisch en fijn, maar het wereldwijdeweb is niet voor iedereen altijd even toegankelijk. Denk aan mensen met een visuele, motorische of cognitieve beperking. Gelukkig is er steeds meer aandacht voor web accessibility. Hoe zorg jij er nou voor dat jouw website of app toegankelijk is voor iedereen? Wij leggen het uit!

Kom alles te weten over digitale toegankelijkheid:

wat is digitale toegankelijkheid?

Digitale toegankelijkheid verwijst naar de ontwikkeling van digitale producten en diensten op een manier waarop het voor iedereen toegankelijk is. Dus ook voor mensen met een beperking. 

Maar wat maakt een website nou digitaal toegankelijk? Denk aan contrastrijke kleuren, een voorleesfunctie of alternatieve tekst voor een afbeelding. Het zit ‘m niet alleen in het design, maar ook in de tekst! Zorg dat de tekst leesbaar en begrijpelijk is voor iedereen. 

web content accessibility guidelines: dit houdt het in

Om digitale content voor iedereen toegankelijk te maken zijn er een aantal richtlijnen ontwikkeld. Oftewel: de Web Content Accessibility Guidelines. De WCAG heeft drie verschillende niveaus: A, AA en AAA. Elk niveau stelt specifieke eisen aan de toegankelijkheid van digitale content. 

3 niveau’s wcag:

Niveau A: 

Dit is het laagste niveau. Je hebt 30 richtlijnen waar de content aan moet voldoen. Je mag bijvoorbeeld geen knipperende elementen gebruiken of alleen met kleur ergens naar verwijzen. 

Niveau AA: 

Niveau AA vereist 20 regels extra. Dat zijn in totaal dus 50 regels waar jouw content aan moet voldoen. Deze richtlijnen zijn bijvoorbeeld gericht op het ontwerp van een formulier of kleurcontrast. Overheidsorganisaties zich verplicht om aan dit niveau te voldoen. 

Niveau AAA: 

In totaal moet jouw content aan 78 succescriteria voldoen om het laatste niveau te behalen. Video’s moeten bijvoorbeeld een uitgebreide audiodescriptie bevatten en de contrastverhouding tussen tekst en achtergrond moet minimaal 7:1 zijn. 

Naast de verschillende niveaus zijn er vier elementen die ALTIJD terugkomen. 

verplichte onderdelen wcag:

Waarneembaar

Gebruikers kunnen de content waarnemen ongeacht hun beperking. 

Bedienbaar

Gebruikers kunnen de content bedienen ongeacht hun beperking en de gebruikte technologie. 

Begrijpelijk

Gebruikers kunnen de content begrijpen ongeacht hun beperking en het niveau van hun leesvaardigheid. 

Robuust

De content blijft toegankelijk ongeacht de technologie die wordt gebruikt om deze te bekijken of te interpreteren. 

waarom is een digitaal toegankelijke website belangrijk? 

Omdat het bijdraagt aan gelijke kansen en inclusiviteit. Het vermindert namelijk digitale uitsluiting en discriminatie. En In veel verschillende landen zijn organisaties zelfs wettelijk verplicht om hun digitale producten en diensten voor iedereen toegankelijk te maken. Naast dat het dus helpt bouwen aan een inclusieve samenleving heeft het ook commerciële voordelen. Bingo!

  1. Je spreekt wellicht een nieuwe groep klanten aan die je eerst misschien links had laten liggen. 
  2. Het optimaliseren van jouw website op basis van accessibility wordt zeker gewaardeerd door Google. 
  3. Wanneer jouw merk tijd en aandacht besteed aan digitale toegankelijkheid worden veel mensen daar blij van. Je doet iets goeds voor de wereld en jouw merknaam staat in een positief daglicht! 

5 stappen om jouw digitale toegankelijkheid te verhogen

Stap 1: begrijp de Web Content Accessibility Guidelines

We hebben hierboven al het een en ander verteld over de WCAG, maar zorg er voor dat je de regels ook daadwerkelijk begrijpt. Zo kan je bepalen welke richtlijnen het belangrijkst zijn voor jouw digitale product of dienst. 

Stap 2: focus op de doelgroep van jouw website

Wanneer je een duidelijk beeld hebt van de functie van jouw website kan je aan de slag gaan met het bepalen van de doelgroep. Ligt jouw doelgroep bijvoorbeeld boven de 60+? Dan is het verstandig om gebruik te maken van een groot lettertype. Pas jouw website dus zo veel mogelijk aan op de bijpassende doelgroep. 

Stap 3: analyseer de huidige toegankelijkheid van jouw website

Wat valt er te verbeteren en wie is daar verantwoordelijk voor? Analyseer jouw website en zet alle dingen die beter kunnen op een rij. 

Dit zijn een aantal belangrijke punten:

  • hoog kleurcontrast
  • leesbare typografie
  • een gestructureerde en logische opmaak
  • meerdere manieren om te navigeren (muis, screenreader en toetsenbord)
  • begrijpbare tekst en beeld
  • alternatieve beschrijvingen voor afbeeldingen

Stap 4: aan de slag met het toegankelijk maken van jouw content

Hier komt een hoop bij kijken. Denk aan het designen van de website, het herschrijven van teksten maar ook een hoop codetaal aan de achterkant van jouw site. En dat klinkt precies als iets waar wij jou bij kunnen helpen! Benieuwd wat wij voor jou kunnen fixen? check het hier

Stap 5: testen, testen, testen

Heb je alle belangrijke punten toegepast en denk je dat jouw pagina digitaal toegankelijk is? Test het! Vraag om feedback en houd jouw site up to date. 

wat kunnen wij voor jou doen?

Aan de hand van tekst, video, afbeeldingen, vormgeving en structuur maken wij jouw website digitaal toegankelijk. We gaan samen in gesprek over de doelgroep die aansluit op jouw site. Zo stippelen we de beste customer journey uit die voor iedereen toegankelijk is!

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. 

Component libraries bouwen in Figma: een handleiding voor UX-designers

Voor het eerst aan de slag met het opbouwen van een component library in Figma? We got your back! In deze blog leg ik je precies uit wat een component library is en hoe je met een component library als UX-designer een goede basis legt voor al jouw projecten.

Ga snel naar:

  • Wat is een component library?
  • Componenten ontwikkelen met atomic design?
  • Een component library opbouwen in 5 stappen
  • Meer weten over component libraries?

Wat is een component library?

Een component library is een digitale bibliotheek waarin je UI-componenten kunt aanmaken. Denk hierbij aan text styles, buttons, icons, formulieren; noem maar op. Als je je component library goed opzet, kun je al  deze componenten heel gemakkelijk hergebruiken in jouw design projecten. Het grote voordeel? Je werkt met one single source of truth: de componenten uit je component library zijn de bron en als je deze aanpast in je library, zullen deze wijzigingen in alle hergebruikte componenten worden doorgevoerd. Handig!

Componenten ontwikkelen met atomic design

Eh, atomic wat? Ik leg het je uit! 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. Zo bouw je heel consistent een soort bibliotheek met componenten op. Handig! Kortom, atomic design gebruik je op deze manier om complexe interfaces voor websites en apps op te bouwen. 

Een component library opbouwen in 5 stappen

Allemaal leuk en aardig, maar hoe máák je nou een component library? Ik neem je mee in een stappenplan dat gebaseerd is op het atomic design-principe. Persoonlijk werk ik graag in Figma: wat mij betreft dé ideale design software om mee te werken als je aan de slag wil met UX/UI-design en het opbouwen van een strakke component library. De volgende stappen zijn dus gebaseerd op Figma als tool met een premium account.

  1. Zet jouw Figma file structure op
    Als je helemaal from scratch start, begin je met het aanmaken van een team. Hierin kun je je collega-designers toevoegen. Binnen dat team start je een project met daarin twee bestanden: één bestand waarin je je product gaat ontwerpen en één bestand waar je je component library in opzet. Het idee is dat je dit laatste bestand publiceert en koppelt aan je werkbestanden.

    Tip 1: Heb je nou geen premium account? Dan kun je dit niet doen. Een alternatief is dan om een aparte pagina aan te maken binnen je werkbestand en hierin je componenten op te bouwen.

  2. Starten met het bouwen van componenten
    Ik start mijn component library altijd met kleur en typografie. Voeg de primaire kleuren toe en vul deze eventueel aan met secundaire kleuren en neutrale grijstinten. Geef text-styles alvast de juiste benaming (H1 t/m H6 + body tekst) zodat developers direct snappen hoe jouw designs zijn opgebouwd.

    Daarna kun je aan de slag met de ‘atoms’, zoals buttons, tags en cards. Ik begin vaak met veelgebruikte componenten als formuliervelden, dialog boxes, list items of notificaties. Kijk goed naar het type product dat je wil opbouwen en bedenk welke componenten daarvoor nodig zijn.

    Ben je tevreden met hoe je component eruit ziet? Tijd voor het echte werk! Door je design te selecteren en op je rechtermuisknop te klikken, maak je er met “create component” van een werkbaar component van.

    Heb je de basics vastgelegd? Dan kun je met deze ‘moleculen’ ‘organismen’ gaan opbouwen, geheel volgens het atomic design principe. 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.

  3. Voeg interactie toe aan je componenten
    Figma biedt een aantal handige mogelijkheden om interactie toe te voegen. Zo kun je bijvoorbeeld met ‘variants’ verschillende versies van jouw buttons uitwerken en laten zien wat hover- en active states doen. Met deze interactieve componenten komen jouw prototypes ook tot leven!

    Tip 3: Zorg ervoor dat jouw component library er net en overzichtelijk uitziet: alle betrokken collega’s moeten er namelijk lekker in kunnen werken. Geef alle componenten een duidelijke naam, dat helpt om de boel overzichtelijk te houden.

  4. Koppelen van jouw component library
    Heb je je eerste componenten af? Dan is je component library ready to publish! Dit doe je door links in je menu op het icoon van het boekje te klikken. Een pop-up venster verschijnt waarin je je components library kunt publiceren.

    Vervolgens koppel jouw component library aan je werkbestand door in je werkbestand wederom in het linkermenu naar ‘assets’ te gaan, en vervolgens op het icoon van het boekje te klikken. Je krijgt dan een overzicht te zien waarin je jouw components library kunt activeren. Als je dat gedaan hebt, verschijnen jouw gemaakte componenten in de assets links in je Figma menu.

  5. Design & improve
    Een component library is een dynamisch document en eigenlijk nooit echt af. Heb je bijvoorbeeld midden in een designproces toch een extra button nodig, of moet alle tekst in een ander font? Als je je component library netjes hebt gekoppeld, worden je aanpassingen met één klik op de knop in al je designs doorgevoerd.

Meer weten over component libraries?

Alle stappen gevolgd? Lekker bezig! Doe dit een paar keer en in no-time ben jij echte Figma pro. Wil je nou meer weten over dit onderwerp of wil je jouw component library naar het volgende level tillen? Lees dan verder in de blog: “Design systems: alles wat je als UX-designer moet weten”. Vragen of opmerkingen? Stuur ze naar UX lead Ruby (ruby@goldfizh.nl).

Design system: alles wat je als UX-designer moet weten

Design systems zijn een hot topic. Niet gek, want ze helpen UX-, UI- en visual designers wereldwijd om op een consistente, snelle en gemakkelijke manier interfaces op te bouwen. In deze blog leg ik je uit wat deze term precies inhoudt, waarom designers hier zo’n fan van zijn én hoe je zelf 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 soort bibliotheek waarin de bouwstenen staan beschreven die je nodig hebt om jouw website, app of ander communicatiemateriaal op te bouwen. Denk bij deze bouwstenen aan kleur en typografie, maar ook aan componenten als buttons, forms of footers. Om een design system compleet te maken, wordt elk component aangevuld met coding-guidelines en regels voor gebruik. Bovendien is een design system is een dynamisch document. Het kan namelijk worden aangevuld en aangepast, zodat het meebeweegt met de organisatie.

Waarom zou je als UX-designer een design system opzetten?

Een design system kan enorme toegevoegde waarde hebben voor jouw design team. Ik leg je uit waarom een design system een must is voor jou én je mede-designers, marketeers en developers.

  • Sneller interfaces ontwerpen
  • Beter samenwerken als design team
  • Consistentie voorkomt discussie

Sneller interfaces ontwerpen

Waarom zou je elk component opnieuw ontwerpen als deze al eens eerder gemaakt is? Een design system zorgt ervoor dat je componenten opslaat in één biobliotheek en dat andere designers deze kunnen hergebruiken. Zo kun je interfaces steeds sneller opbouwen. Dat scheelt tijd én geld.

Beter samenwerken als design team

Als je samenwerkt aan een product in een team met andere designers, is een design system ideaal. Iedereen gebruikt dezelfde ‘legosteentjes’ om interfaces op te bouwen en kan bijdragen om het design system uit te breiden met nieuwe componenten.

Consistentie in alle designs

One single source of truth: met een design system heb je nooit meer discussie over designs. Iedereen gebruikt immers dezelfde kleuren, typografie en componenten, ook als je aan verschillende producten of diensten werkt. Fijn!

Wat is het verschil tussen een design system en een  component library?

Design systems en component libraries worden vaak door elkaar gehaald. Niet gek, want de twee hebben veel gemeen. Toch zijn ze niet helemaal hetzelfde. Een component library is enkel en alleen een overzicht van UI-components. Wat voor componenten dat precies zijn, hoeveel componenten er opgeslagen zijn en voor welke devices deze zijn ontworpen hangt af van de organisatie en de producten waarvoor deze componenten zijn ontwikkeld. Een design system is daarentegen een compleet overzicht van componenten, aangevuld met documentatie, regels en coding-guidelines. Met andere woorden: een component library is een (belangrijk) onderdeel van een design system, maar een design system bevat veel meer dan dat. Meer weten over het ontwikkelen van component libraries? Lees dan deze blog.

Design systemsComponent libraries
UI-components
Regels & documentatie
Coding-guidelines

Wat is het verschil tussen een design system en 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. Het voordeel hiervan is dat alle componenten automatisch mee veranderen, mits het design system goed is opgebouwd met ‘atomen’ (lees hier meer over in de vorige blog). Dus stel dat er wordt besloten dat de tint grijs niet #e2e2e2 moet worden, maar #e4e4e4, kun je dat in de bron aanpassen en zullen alle componenten waarin deze kleur gebruikt wordt, automatisch aangepast worden. Omdat een design system de single source of truth van het design team is, creëer je consistentie over alle designs heen.

Design systemsStyleguide
Digitale omgeving✔ (heel soms ook print)
Dynamisch document
Focus op digitale output

5x voorbeelden van amazing design systems

Zin om aan de slag te gaan? Snappen we! Laat je van tevoren nog even inspireren door merken die hun design system online hebben staan. We zetten onze favorieten voor je op een rijtje:

  • Audi
    Check design system hier
  • Google (Material Design)
    Check design system hier.
  • Apple
    Check design system hier.
  • Shopify
    Check design system hier.
  • Atlassian
    Check design system hier.

Meer weten over design systems?

Werk je voor een organisatie heb je hulp nodig bij het opzetten van een design system? Onze UX-designers helpen je graag! Stuur een mailtje naar ruby@goldfizh.nl en dan nemen we zo snel mogelijk contact met je op. 

Meer weten over wat een design system kan betekenen voor jouw organisatie? Lees dan verder in deze blog.

Waarom een design system een absolute must is voor jouw organisatie

Stel je voor: ontwikkelteams die sneller werken én betere producten opleveren waarbij de look & feel van jouw merk consistent en strak wordt doorgevoerd. Een sterk design system maakt dat binnen no-time realiteit. We vertellen je alles over één van de belangrijkste ontwikkelingen in UX-design de afgelopen jaren: design systems.

Ga snel naar:

Wat is een design system?

Een design system is als het ware een digitale bibliotheek waar je alle bouwstenen opslaat die je nodig hebt om de websites, apps of andere digitale producten voor jouw organisatie te bouwen. Denk hierbij aan kleur en typografie, maar ook volledige componenten als formulieren, notificaties of footers en zelfs hapklare brokken code waarmee je deze componenten kunt ontwikkelen. Een design system is dan ook dé plek waar UX-designers, UI-designers en front-end developers samenkomen.

Waarom een design system onmisbaar is voor jouw organisatie?

Het implementeren van een design system kan jouw organisatie flink vooruit helpen, zeker als er een team aan designers werkt aan verschillende websites of apps. We zetten de voordelen voor je op een rijtje.

  • Consistentie
  • Gemak
  • Snelheid

Consistentie

Het belangrijkste ingrediënt voor een sterke branding? Consistentie! Het herhalen van visuele elementen uit jouw huisstijl zorgt ervoor dat klanten of gebruikers van jouw product jouw organisatie gaan herkennen. Klinkt misschien logisch, maar toch kan het als organisatie best lastig zijn om consistentie te waarborgen. Zeker als je zichtbaar wil zijn allerlei sociale media of als er veel verschillende medewerkers, externe bureaus of freelancers meewerken aan de visuele uitingen van jouw organisatie. Voor je het weet is er een wildgroei aan steunkleuren, afwijkende typografie en random UI-componenten ontstaan. Dit doet af aan je visuele merkidentiteit, en heeft directe invloed op de user experience van jouw klanten.Een echte no-go, dus! 

Gelukkig kan een design system je organisatie helpen met een consistente merkbeleving. Zodra je een design system ontwikkeld hebt, is dit de “single source of truth”: dé basis voor jouw visuele identiteit. Omdat iedereen gebruik maakt van precies dezelfde bouwstenen die zijn vastgelegd in jouw design system, zorg je ervoor dat alle -merkuitingen dezelfde look & feel behouden. En dat wil je!

Gemak

Zodra je je design system up and running hebt, kan iedereen uit jouw team (bedrijf) 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. 

Snelheid

Waarom zou je elke keer dubbel werk doen als je hetzelfde component gemakkelijk kunt hergebruiken? Door één keer een goed design system op te bouwen, kunnen UX-designers en ontwikkelaars interfaces op te bouwen uit bestaande componenten. Zo kunnen ontwikkelteams veel sneller werken en worden er minder fouten gemaakt in de ontwikkeling van digitale producten.

Welke organisaties maken al gebruik van design systems? 

Oké, we weten nu wat een design system is en wat de voordelen zijn. Maar hoe ziet zo’n design system er dan uit? Hieronder vind je vijf organisaties die een uitgebreid design system opgezet hebben, online en voor iedereen toegankelijk. Laat je inspireren!

  • Audi
    Check design system hier
  • Google (Material Design)
    Check design system hier.
  • Apple
    Check design system hier.
  • Shopify
    Check design system hier.
  • Atlassian
    Check design system hier

Hulp nodig bij het implementeren van jouw design system?

All good things take time, zo ook het ontwikkelen van een design system. Toch zou ik elke organisatie aanraden om deze tijd te investeren! Binnen no-time is het design system dé steunpilaar voor een sterke brand experience en bouwen designers nog sneller en makkelijker gestroomlijnde user experiences.  Kortom, je helpt jouw organisatie om ‘UX mature’ te worden.

Als UX Lead bij Goldfizh help ik klanten dagelijks bij het uitdenken van user experiences en het ontwerpen van gelikte interfaces. Ik denk graag mee met jouw design vraagstuk en wie weet heb jij straks een design system waarmee je de user experience van jouw klanten een boost geeft! Geïnteresseerd? Let’s chat! Vul het formulier hieronder in, of neem direct contact met me op. ??

Dit is de impact van AI op het werk van designers en creatives

Het zal je niet ontgaan zijn: AI – ook wel kunstmatige intelligentie – is geëxplodeerd. ChatGPT, Midjourney, Stable Diffusion… de AI-tools schieten als paddenstoelen uit de grond en hebben een grote impact op marketing en design. Toch kan AI het werk van creatives nooit helemaal vervangen. Benieuwd hoe AI je kan helpen om tot betere designs te komen? Je leest het in deze blog.

Benieuwd naar de toekomst rond Generative AI?

Ontdek alles over het effect van AI op design:

Wat is AI?

AI (artificial intelligence, of dus kunstmatige intelligentie) is de manier waarop machines, software en apparaten zelf problemen gaan oplossen. AI-systemen herkennen patronen en nemen op basis daarvan zelf beslissingen. Door te oefenen worden ze daar steeds beter in. En dat biedt mogelijkheden!

Hoe AI het werk van designers verandert

De afgelopen tijd zijn steeds meer AI-tools ontwikkeld. Deze tools lijken bijna iets magisch: de eerste keren dat ik tools als ChatGPT en Dall-E gebruikte, stond ik versteld van wat ze opleverden. Vooral de text generators geven verbazingwekkend goede resultaten. 

Ik gebruik nu al een aantal maanden AI-tools tijdens mijn werk en kan ze niet meer wegdenken uit mijn workflow. AI geeft inspiratie, versnelt processen en werkt als scherpe brainstormpartner. Toch is de kracht van AI wel te nuanceren. Want er zit ook een minder positieve kant aan.

AI en ethiek

Wanneer je je verdiept in AI, en met name in image generators, kom je namelijk al snel artikelen tegen over rechtszaken tegen AI-producenten. Deze rechtszaken worden aangespannen door artiesten en afbeeldingenbanken zoals Getty Images, die claimen dat hun eigendom gebruikt wordt voor het genereren van nieuw beeld. En dat dit copyright schendt. 

Dit soort zaken bewijzen dat – ondanks dat AI al tientallen jaren bestaat – deze tools nog echt in de kinderschoenen staan. Daarom is het slim om ze echt alleen te gebruiken voor inspiratie of voor snelle productie van voorbeelden of storyboards. 

Hetzelfde geldt ook voor text generators. Tools zoals ChatGPT kunnen snel relevante en goede voorbeelden geven, maar het blijft belangrijk om de teksten altijd te herschrijven en te controleren op waarheid. AI-tekst herhaalt veel en schrijft soms zelfs dingen die niet helemaal kloppen met de waarheid. Ook hierbij geldt dus: gebruik het als inspiratiebron, put uit de eindeloze ideeën of gebruik het om nieuwe inzichten te creëren. Maar AI neemt het werk van je copywriters niet helemaal over.

Waarom AI creatives niet vervangt

De vraag of AI ooit designers en creatives volledig gaat vervangen is simpel te beantwoorden: nee, dat gaat niet gebeuren. Sterker nog, ik geloof dat de vraag naar creatives alleen maar groter zal worden. 

Dat zit zo. AI maakt het makkelijker voor organisaties om snel veel content te produceren en ideeën uit het verleden te herhalen. Het resultaat? Veel content die op andere content lijkt. En dat wordt straks niet alleen door Google, maar ook door gebruikers herkend. Terwijl je als organisatie juist onderscheidend wil blijven! 

Dit doe je door terug te gaan naar de basics, te focussen op je branding, het uitstralen van autoriteit en het creëren van je eigen identiteit. Hoe meer organisaties AI-tooling dus gaan omarmen en inzetten, hoe groter de vraag naar branding – en daarmee naar creatives – zal worden.

Conclusie: zo laat je AI voor je werken

AI-tools helpen creatives brainstormen, ze versnellen processen en maken onderzoek makkelijker, maar ze zullen nooit met écht onderscheidende ideeën komen. Omdat AI alleen kan genereren op basis van bestaande content, is niets origineel. Tegelijkertijd is echte originaliteit anno 2023 sowieso een schaarste. Een onderdeel van het creatieve proces bestaat altijd al uit voortborduren op ideeën die al bestaan. Maar die bestaande ideeën op een creatieve manier omzetten tot concepten die bij jouw organisatie of merk passen? Dat blijft mensenwerk.

AI is al enorm krachtig en zal met de bemoeienis van grote bedrijven als Google en Microsoft nog krachtiger worden. Dit is geen hype waar je volgend jaar niks meer over hoort, maar een technologische innovatie die allerlei werkvelden gaat veranderen. Dat betekent dus ook dat dit voor creatives, designers, engineers, developers, managers, organisaties en merken hét moment is om in te stappen en deze technologie te omarmen. Zodat je je processen versnelt, met de technologie leert werken en de concurrentie voor blijft. 

Benieuwd wat AI voor jouw creatieve proces of marketingstrategie kan betekenen? Ik geef je er graag advies over. Neem even contact met me op, dan gaan we samen aan de slag!

5x trending visual designs voor 2023!

Is alles niet al een keer gemaakt? Deze vraag krijg ik als designer bijna dagelijks te horen, maar het antwoord hierop is… nee! Natuurlijk lijkt veel typografie, 2D- en 3D-design op elkaar, maar af en toe springt er iets uit wat andere ontwerpers inspireert. Zo ontstaan trends! Benieuwd welke visual trends in 2023 de kop opsteken? Je leest het in deze blog.   

Ontdek alles over trending design in 2023:

Trend 1. Typografie met een uitgesproken karakter

Trend 2. Graphic motion wordt volwassen 

Trend 3. 3d graphics spatten van je scherm in 2023

Trend 4. AI says hi! 

Trend 5. Steeds meer keuze in designtools 

Trend design: conclusie 2023

Trend 1. Typografie met een uitgesproken karakter

Be bold and stand out! Grote typografie in felle kleuren zien we zeker terug in 2023. Wordt dat niet een beetje druk? Natuurlijk past het niet bij ieder merk, maar toch gaan we steeds vaker terugzien dat visual campagnes kiezen voor een bold statement. Denk bijvoorbeeld aan grote opvallende fonts met een uitgesproken karakter in plaats van kleine subtiele lettertjes die haast niet opvallen. 

Uiteraard gaat dit niet alleen over visuele aspecten. Ook de boodschap is niet te missen. IGen wil zich alleen verbinden aan bedrijven met een visie die aansluit bij die van hen, en merken haken hier op in. Ze spreken zich vaker uit tegen onrecht in de wereld en dat gaat samen met een krachtig statement in zowel vorm als visie. 

Trend 2. Graphic motion wordt volwassen

Motion is het toverwoord voor iedere designer in 2023. Om ons heen wordt alles digitaler. Hierdoor is er meer ruimte voor bewegend beeld. Waar bushokjes eerst werden volgeplakt met geprinte posters, zijn deze inmiddels vervangen door digitale schermen. Denk bij motion dan ook niet alleen aan videografische content, maar ook aan typografie, grafische of meer abstracte vormen. 

Webdesign anno 2023 bestaat dus niet meer uit alleen stilstaande afbeeldingen. De scroll-beleving van een website vertelt zo veel meer dan stilstaande visuals. Hierdoor wordt de gebruiker uitgenodigd om door te scrollen. Sites van VanMoof of Stark Shipping laten zien dat een site veel meer kan zijn dan een statisch platform en tillen de ervaring van de gebruiker naar een hoger level!

Trend 3. 3D-graphics spatten van je scherm in 2023 

2D is zóóó 2022… In 2023 gaan we steeds meer 3D-vormen zien in design. Zowel in animatie als in 2D-vormgeving. Renders van 3D-objecten shinen al vaker in de design wereld. Door een 3D-object in je vormgeving te verwerken ontstaat er ineens veel meer diepte en gelaagdheid. Grote merken in vooral de mode-industrie werken al vaker met 3D-objecten binnen 2D-designs. Tools die we steeds vaker gaan gebruiken zijn dan ook Blender, Maya of Cinema 4D. XK Studio laat zien dat we nog lang niet uit zijn geëxperimenteerd met 3D-vormen. 

Trend 4. AI says hi! 

Robots die de designwereld overnemen?! Waarschijnlijk niet. Toch zullen ze wel een hoop werk uit handen gaan nemen. We zien al dat software ontwerpbeslissingen kan maken, zoals het in elkaar zetten van display ads of social content. Maar hier zit nog altijd een vormgever voor, die als een chef de ingrediënten in de machine gooit. De software gaat vervolgens zelf aan de slag op basis van designregels. Deze regels worden door de ontwerper of developer opgesteld. 

Maar er zijn ook al ware AI-kunstenaars, die een stuk gedetailleerder werken dan eerder genoemde software. Denk aan een platform als Dall-e, maar ook verschillende apps hebben nu al de kennis om zelf beelden te genereren. Hoe werkt dit? Simpel! Je schrijft in een handomdraai je idee uit en AI gaat voor je aan de slag. Bijvoorbeeld: ‘een vliegende goudvis geschilderd door Vincent van Gogh’. Voila! Binnen een paar tellen is jouw idee gevisualiseerd.

Trend 5. Steeds meer keuze in designtools

 Design tools veranderen. Vroeger kon je alleen maar designen in Adobe Photoshop, maar inmiddels ontstaan er steeds meer platformen en tools waarin iedereen zijn eerste stappen in de designwereld kan zetten. Programma’s als Figma en Canva geven niet alleen de designer, maar ook de klant, de mogelijkheid om samen aan een design te werken. Natuurlijk werken niet alle tools hetzelfde en heeft iedereen zijn eigen voorkeur. Voor de meeste designers zal Adobe Photoshop nog altijd bovenaan het lijstje staan – myself included!  

Socialmediaplatformen zoals Instagram en TikTok geven steeds meer opties om jouw eigen design te maken. Met simpele apps of plugins kun je tegenwoordig veel meer dan een paar jaar geleden. Je ziet dat gebruikers complete kunstwerken maken in apps als Snapchat. In 2023 gaat dit nog meer groeien en wordt het steeds makkelijker om digitaal te knutselen. Toch zijn deze apps nog steeds beperkt en geven ze vaak geen mogelijkheid tot uitlijning, spatiëring, grids, en andere standaard design functies.

Software wordt ook steeds interactiever. Adobe CC (Creative Cloud) is daar een mooi voorbeeld van. Alle grafische software die zij hebben, reageert heel eenvoudig op elkaar. Als je iets in Adobe Photoshop maakt, snapt Adobe Indesign ook hoe de lagenstructuur eruitziet. Exporteren vanuit Adobe Photoshop is dus vaak niet meer nodig! Je ziet dat andere software hiervan leert en het steeds toegankelijker maakt om je bestanden ook in andere software te bewerken. Ik merk regelmatig dat de shortcuts en laagstructuren uit Adobe Illustrator óók werken in tools als Figma en Resolume. Deze software-melange staat pas in de kinderschoenen en gaat alleen maar toegankelijker worden.

Trends voorspellen is natuurlijk geen keiharde wiskunde, dus ik ben erg benieuwd hoe we aan het eind van 2023 terugkijken op dit design jaar. Wil je één van deze trends terugzien in de (re)-branding van jouw eigen merk? Neem dan contact op met Jordi. Hij kijkt graag welk trending design het beste bij jouw merk past!

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:

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!

Van Instagram stickers je werk maken?

Ben jij helemaal klaar om van Instagrammen je werk te maken? Solliciteer dan bij Goldfizh als content marketeer! Mensen die social media snappen, kunnen we er hier niet genoeg van hebben. Solliciteer dus snel en start met het maken van viral posts voor toffe klanten! Hier vind je alle openstaande marketing vacatures.

Meer Instagram-tricks? Lees dan ook: