Branding

Merkstem en beeld: laat je look klinken zoals jij

Een rustige boodschap in een luide look komt onoprecht over, en mensen merken het voordat ze kunnen zeggen waarom. Een praktische kaart van hoe je klinkt naar hoe je eruitziet.

GradientlyGeverifieerd Gradiently-account··5 min lezen
Cover: Ash Transit · GR·6HSK·V7

De korte versie

  • Merkstem is hoe een merk klinkt in woorden; het beeld moet hetzelfde karakter uitdrukken in kleur, typografie, textuur, beweging en opmaak.
  • Als stem en beeld het oneens zijn, zoals een zachte boodschap in een luide neonlook, voelen mensen de mismatch ook als ze hem niet kunnen benoemen.
  • Elke stemeigenschap koppelt aan concrete visuele keuzes: rustig suggereert zacht contrast en trage beweging, gedurfd suggereert hoog contrast en zware letters.
  • Schrijf elke stemeigenschap als “dit, niet dat”, zodat de visuele keuzes een grens hebben naast een richting.
  • Beweging heeft ook een stem: de snelheid en versnelling van een animatie kan rustig, gedurfd, speels of precies klinken.
Op deze pagina

Je merkstem is hoe je merk klinkt in woorden: rustig of gedurfd, speels of precies, warm of koel. Je beeld moet precies hetzelfde zeggen in kleur, typografie, textuur, beweging en opmaak. De praktische weg daarheen is elke stemeigenschap te koppelen aan specifieke visuele keuzes en elk ontwerp aan die kaart te toetsen. Als beide overeenkomen, voelt een post oprecht voordat iemand hem leest.

De meeste merken bepalen hun stem voor tekstschrijvers en hun look voor ontwerpers, los van elkaar. Zo krijg je een zacht, geruststellend bijschrift op een schreeuwerige neonachtergrond. Deze gids brengt de twee samen. Heb je je karakter nog niet bepaald, begin dan met merkpersoonlijkheid.

Waarom merkstem en beeld overeen moeten komen

Mensen nemen de look van een post op vóór de woorden. De look wekt een verwachting, en de woorden bevestigen die of spreken haar tegen. Een tegenstrijdigheid dringt niet altijd bewust door; het merk voelt gewoon een beetje scheef, als een vriend wiens toon niet past bij wat hij zegt.

Stem en look komen niet overeen

  • Een stil, bedachtzaam merk in verzadigd neon met stuiterende animatie
  • Een speels merk in grijs, dunne letters en strakke rasters
  • Een precies, technisch merk in handgetekende lettertypen en zachte vervagingen
  • Een warm, lokaal merk in koud blauw en zakelijke stockfoto’s

Stem en look komen overeen

  • Hetzelfde stille merk in diepe neutrale tinten, een fijne schreef en trage drift
  • Het speelse merk in heldere, onverwachte combinaties en afgeronde letters
  • Het technische merk in een strak schreefloos lettertype, scherp contrast en exacte spatiëring
  • Het warme merk in aardse tinten, papiertextuur en echte gezichten

Een kaart van stemeigenschappen naar visuele keuzes

Gebruik deze tabel als beginpunt, niet als wet. De meeste merken zijn een mengeling van twee of drie eigenschappen; kies de dominante voor kleur en laat de andere typografie en beweging vormen.

StemeigenschapKleurTypografieTextuur en bewegingOpmaak
RustigZacht contrast, verwante tinten, gedemptLichte of gewone gewichten, ruime spatiëringFijne korrel, trage driftVeel ruimte, weinig elementen
GedurfdHoog contrast, verzadigd, weinig kleurenZware gewichten, grote maten, krappe spatiëringScherpe oppervlakken, snelle snedenGrote letters, van rand tot rand
SpeelsOnverwachte combinaties, heldere pasteltintenAfgeronde vormen, gemengde matenZachte materialen, stuiterende versnellingLos, een tikje buiten het raster
PreciesIngetogen, één duidelijk accentStrak schreefloos, gelijkmatig ritmeGlad, minimale textuur, exacte timingStrak raster, uitgelijnde randen
WarmAardse en zonovergoten tintenVriendelijke schreef of humanistisch schreefloosPapier, korrel, daglichtRoyale marges, foto’s van mensen
Eén eigenschap leidt meestal. De andere passen de details aan.

Vier stemmen, vier looks

Hier zie je dezelfde soort keuzes voor vier verschillende stemmen. Merk op hoeveel alleen de kleur al vertelt, voordat er woorden bij komen.

Kleur bepaalt eerst de stem. Voor meer achtergrond over wat kleuren suggereren, zie kleurpsychologie.

Rustig: één korte regel, een licht gewicht, het meeste van het beeld leeg.

Gedurfd: één enorm woord, verder niets dat ermee concurreert.

Speels: een vraag, een uitnodiging, een lichtere hand.

Precies: een lijst, uitgelijnde randen, geen decoratie die geen informatie is.

Zo vind je je visuele stem

  1. 1

    Schrijf je eigenschappen als “dit, niet dat”

    “Zelfverzekerd, niet arrogant.” “Warm, niet suikerzoet.” De tweede helft geeft het beeld een grens naast een richting.

  2. 2

    Kies de leidende eigenschap

    Bepaal welke eigenschap de kleur stuurt. Twee leiders die tegengesteld trekken, zoals rustig en gedurfd, geven een rommelige look.

  3. 3

    Koppel elke eigenschap aan keuzes

    Gebruik de tabel hierboven om kleur, typografie, textuur, beweging en opmaak te kiezen. Schrijf de keuzes naast elke eigenschap.

  4. 4

    Zet dezelfde zin in twee looks

    Zet één echte regel uit je tekst in de look die je koos en in het tegenovergestelde. Voelt het tegenovergestelde waarachtiger, kijk dan opnieuw naar de eigenschappen.

  5. 5

    Schrijf het samen op

    Zet de regels voor stem en beeld op dezelfde pagina van je huisstijlgids, zodat schrijvers en ontwerpers vanuit één bron werken.

Beweging heeft ook een stem

De snelheid en versnelling van een animatie klinken als iets. Een lange, zachte uitloop voelt rustig. Een korte, scherpe beweging voelt beslist. Een lichte overshoot voelt speels. Verschijnt je merk in video of op een website, geef beweging dan dezelfde stem als de woorden. Easing legt de curven in detail uit.

css
/* Calm: slow, soft landing */
.calm { transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }

/* Bold: fast and decisive */
.bold { transition: transform 180ms cubic-bezier(0.2, 0, 0, 1); }

/* Playful: a small overshoot past the target */
.playful { transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Precise: short, even, no flourish */
.precise { transition: transform 200ms ease-out; }
Vier bewegingsstemmen. De overshoot in de speelse curve komt doordat het tweede controlepunt boven 1 komt.

Hetzelfde geldt voor typografie. Je kopletter is het luidste deel van je visuele stem, en lettertypecombinaties bepalen of hij alleen spreekt of in een gesprek. In Gradiently draagt elke Mark een letterstem naast zijn kleuren en materialen, dus look en letters komen al op elkaar afgestemd binnen.

Vragen die mensen stellen

Wat is merkstem?

Merkstem is het consistente karakter dat een merk in zijn woorden uitdrukt, zoals rustig, gedurfd, speels of precies. Toon past die stem aan de situatie aan.

Hoe drukt beeld merkstem uit?

Via kleur, typografie, textuur, beweging en opmaak. Zacht contrast en ruime spatiëring klinken rustig; hoog contrast en zware letters klinken gedurfd.

Wat is het verschil tussen merkstem en merkpersoonlijkheid?

Persoonlijkheid is het karakter van het merk; stem is hoe dat karakter overkomt in woorden. Beeld moet dezelfde persoonlijkheid uitdrukken als de stem.

Kan een merk meer dan één stemeigenschap hebben?

Ja, de meeste hebben er twee of drie. Kies er één die de kleur leidt en laat de andere typografie, beweging en opmaak vormen.

Beïnvloedt animatie de merkstem?

Ja. Trage, zachte versnelling voelt rustig, snelle bewegingen voelen beslist en een lichte overshoot voelt speels, dus beweging moet passen bij de stem van de woorden.

Deel deze gids

Geschreven door GradientlyGeverifieerd Gradiently-account

Het team achter Gradiently, een ontwerptool rond Marks: levende kleurverlopen die alles wat je ontwerpt op jou laten lijken.

Bekijk ons profiel