Vormgeving nieuwsbrief

Over de vormgeving van je nieuwsbrief. Er is op het web een heleboel geschreven over de effecten van kleurgebruik in je marketing. Sommige verhalen hiervan snijden hout, andere zijn niet goed onderbouwd waardoor de gevonden effecten ook andere oorzaken kunnen hebben,  maar dat kleuren effecten hebben, dat weten we allemaal ook zonder onderbouwing.

Ik wil het hier hebben over de vormgeving van je nieuwsbrief: kleurgebruik, contrasten en uitlijning en de effecten hiervan.

Vormgeving: contrasten

Er is heel veel geschreven over de “beste” kleur voor je call-to-action en dergelijke onderwerpen, maar vaak zijn die beweringen niet goed onderbouwd, dus daar wil ik het nu niet over hebben. Ik wil het in dit artikel hebben over de effecten van kleurgebruik op je ogen.

In het algemeen kun je zeggen dat het verstandig is om voor de vormgeving van je nieuwsbrief of van je website niet meer dan 3 kleuren te kiezen.

Vormgeving: tonaal kleurgebruik

‘Tonaal’ betekent dat er kleuren gebruikt worden die allemaal bij dezelfde kleursoort horen. Bijvoorbeeld allerlei tinten groen of allerlei tinten blauw.

tonaal kleurgebruik vormgeving nieuwsbrief

tonaal kleurgebruik groen

Als je in je nieuwsbrief uitsluitend kleuren gebruikt die bij dezelfde kleurgroep horen dan heb je een visueel rustige en misschien een beetje saaie nieuwsbrief gemaakt. Als je echter tonale kleuren gebruikt om binnen de 3 kleuren die je gekozen hebt te variëren, dan kun je erg mooie effecten bereiken.

Een kleurenpalet kun je samenstellen op Adobe.com.

Vormgeving: complementair contrast

De manier waarop je een kleur ziet wordt niet alleen bepaald door de kleur zelf, maar ook door de kleur die je naast die kleur plaatst. Sommige kleuren versterken elkaar. Als kleuren elkaar versterken noemen we dat complementair contrast.

Een complementair contrast is een contrast waarbij twee complementaire kleuren bij elkaar gebracht worden. Complementaire kleuren staan in het kleurenschema of de kleurencirkel tegenover elkaar.

De groentewinkel maakt hier gebruik van met het blauwe papiertje om de sinaasappel of mandarijn en de slager maakt hier gebruik van door een groen blaadje sla naast het rode vlees te leggen. Een aantal van die complementaire kleuren ken je dus al:

  • oranje – blauw
  • rood – groen

complementair contrast

Als verstandelijk gehandicapten tekenen of kleuren gebruiken ze graag primaire kleuren en complementair contrasten. Als je je er niet mee bemoeit, kiezen ze deze kleurencombinaties waardoor kunst van verstandelijk gehandicapten er vaak heel ruig uitziet.

Bij de vormgeving van je nieuwsbrief kun je complementair contrast gebruiken om een opvallende call-to-action te plaatsen.

Vormgeving: simultaan contrast

Een ander interessant contrast is het simultaan contrast.

Dit is een contrast waarbij een kleur onder invloed van een andere kleur als het ware ‘verandert’ ten opzichte van diezelfde kleur samen met een andere kleur.

Dat klinkt erg ingewikkeld, maar het gaat over bijvoorbeeld het verschil van wit op zwart ten opzichte van zwart op wit. Simultane kleuren lijken zich soms te gedragen als complementaire kleuren.

Kijk eens naar onderstaand voorbeeld. Links een witte stip op een zwarte achtergrond, rechts een zwarte stip op een witte achtergrond. Het linker beeld geeft een totaal andere visuele indruk dan het rechter beeld:  simultaan contrast.

simultaan contrast

En kijk dan eens naar de manier waarop impressionisten schaduwen in hun werk aanbrengen.

Als je in je nieuwsbrief een blok Boxed Text gebruikt waar je niets aan verandert dan maak je gebruik van simultaancontrast om de aandacht van de lezer te richten op de tekst die je in het blok Boxed Text geplaatst hebt.

Bij de vormgeving van je nieuwsbrief biedt MailChimp je dus vanzelf al een mogelijkheid om gebruik te maken van simultaan contrast.

Andere contrasten

Dan zijn er ook nog allerlei andere contrasten die je eigenlijk “vanzelf” gebruikt in de vormgeving van je nieuwsbrief zonder dat je daar speciaal over hoeft na te denken.

  • Kleur-kleur contrast, dit is het gewone contrast tussen twee kleuren dat sterker wordt naarmate de kleuren zuiverder zijn. “Zuiver” betekent dat ze verzadigd zijn.
  • Warm-koud contrast, hiermee wordt bedoeld het contrast tussen een ‘warme’ kleur (alle tinten geel, oranje en rood) en een ‘koude’ kleur (alle tinten blauw en groen).
  • Licht-donker contrast, dit is het contrast tussen heldere kleuren en minder heldere kleuren (heldere kleuren zijn kleuren die meer licht weerkaatsen).
  • Kwaliteitscontrast: het contrast tussen een verzadigde kleur en een minder verzadigde kleur.
  • Kwantiteitscontrast: het contrast tussen twee kleuren waarbij de ene kleur een veel groter oppervlak in beslag neemt dan de andere kleur.

Vormgeving: vorm en perspectief

Kleuren kun je ook gebruiken om vormen te versterken of om vormen te fragmenteren, en kleuren kunnen gebruikt worden om perspectief aan te brengen.

Vormgeving: vormversterkend kleurgebruik

Een manier om kleuren vormversterkend te gebruiken is bijvoorbeeld ieder vlak van een kubus een andere kleur geven.

kubus

Een serie kubussen allemaal dezelfde kleur geven, werkt ook vormversterkend in de zin dat je daarmee de indruk versterkt dat al die kubussen hetzelfde zijn.

vormversterkend

Op deze manier worden saaie woonwijken ontworpen. Zie je het voor je?

In je nieuwsbrief kan een herhaling van dezelfde afbeelding echter een effect van “ritme” hebben.

Vormgeving: vormdoorbrekend

Je kunt al die zelfde huizen in die saaie woonwijk ook kakelbont schilderen, zonder rekening te houden met de functie van de onderdelen van zo’n huis.

Je schildert bijvoorbeeld een stukje van de muur rood en je neemt een daaraan grenzend een stukje van een kozijn mee dat je ook rood verft. En dat doe je bij ieder huis op een andere manier. Dat is vormdoorbrekend kleurgebruik.

In je nieuwsbrief kun je dit natuurlijk ook doen, maar dat is wel moeilijk en ik zie er in een nieuwsbrief ook niet zo snel een functie in.

Vormdoorbrekend kleurgebruik: camouflagekleuren

Camouflagekleuren zijn een bijzondere manier van vormdoorbrekend kleurgebruik, de vorm gaat dan als het ware in de achtergrond op.

camouflage kleuren

Dat kun je in je nieuwsbrief ook doen, door de ruimte om de nieuwsbrief heen en de achtergrond van de body dezelfde kleur te geven. Je nieuwsbrief ziet er dan uit als een schilderijtje.

Een andere, erg subtiele manier van het gebruik van camouflagekleuren in de nieuwsbrief is een nieuwsbrief die je helemaal niet opmaakt. Een nieuwsbrief die je helemaal niet opmaakt ziet tussen alle andere e-mails bijna uit als een heel gewone e-mail.

Ik heb eens ergens gelezen dat een nieuwsbrief die er hetzelfde uitziet als een gewone e-mail beter gelezen wordt dan een nieuwsbrief die je een mooie vormgeving meegeeft, maar ik heb hier geen cijfers van gezien, ik kan je dus niet vertellen of dit waar is.

En als je ervoor kiest om je nieuwsbrief eruit te laten zien als een gewone e-mail dan moet je er ook rekening mee houden dat je nieuwsbrief niet meer duidelijk visueel herkenbaar is als een uiting van jouw bedrijf.

Kleurperspectief

Kleurperspectief is een manier om met behulp van kleurgebruik diepte in je nieuwsbrief aan te brengen.

Een voorbeeld van kleurperspectief is een rood huisje  tegen een blauwe achtergrond. Visueel komt het huisje dan naar voren.

Dit principe zou je kunnen gebruiken om je call-to-action opvallender te maken.

Atmosferisch perspectief

Op dezelfde manier kun je perspectief aanbrengen door kleuren die ‘verder weg’ liggen te laten vervagen. Dat heet atmosferisch perspectief.

Doordat de lezer een nieuwsbrief niet als geheel ziet maar er doorheen scrolt, kun je van dit effect nauwelijks gebruik maken.

Repoussoir

En denk eens aan repoussoir, een donkere kleur op de voorgrond die al het andere als het ware ‘naar achteren’ duwt.

Een lichte nieuwsbrief met een donkere call-to-action.

Maar ook hier geldt: alleen als iemand je nieuwsbrief als geheel ziet, profiteer je echt van dit effect. Dat gebeurt echter alleen als je een erg korte nieuwsbrief maakt.

Vormgeving: uitlijning

Als je afbeeldingen in je nieuwsbrief of op je website gebruikt (doe dat vooral!) dan is de uitlijning ook heel erg belangrijk.

Een nieuwsbrief wordt heel erg onrustig als je afbeeldingen laat verspringen: sommige afbeeldingen links en stukje verderop afbeeldingen rechts, of allemaal door elkaar.

Een afbeelding breekt de tekst, waardoor de tekst rond een afbeelding minder “grijs” is en meer aandacht krijgt. Maar een enkele grote afbeelding brengt meer rust in je nieuwsbrief dan een heleboel kleine afbeeldingen.

Formaten

Over de formaten die je op MailChimp kunt gebruiken heb ik al een lijstje voor je geschreven maar is meer te vertellen over formaten op je website en in je nieuwsbrief.

Op je website worden vanzelf vaste formaten gebruikt. Klein, gemiddeld, groot en op ware grootte. Toch is het niet zo’n goed idee al deze formaten op dezelfde pagina te gebruiken.

In je nieuwsbrief staan formaten minder vast. Hierdoor is het risico dat je allerlei formaten door elkaar gaat gebruiken veel groter.

Bij de vormgeving van je nieuwsbrief  kun je beter niet allerlei verschillende formaten gebruiken voor je afbeeldingen. Je nieuwsbrief oogt prettiger als je de afbeeldingen allemaal op hetzelfde formaat aanbiedt.

Dus:

  • als je een zijbalk gebruikt maak je alle afbeeldingen die je in de zijbalk wilt plaatsen op een gelijk formaat
  • en je maakt alle afbeeldingen die je in de body wilt plaatsen op een gelijk formaat

Hierdoor houd je de rust in je nieuwsbrief.

Kleurenblinden

Houd er bij de vormgeving van je nieuwsbrief rekening mee dat 12% van de mannen aan een vorm van kleurenblindheid lijdt. Alles wat jij bedacht hebt op het gebied van kleuren gaat voor deze mensen verloren.

Ook de contrasterende kleur van je aanklikbare links …, daarom is het aan te raden je aanklikbare links te onderstrepen.

Meer over MailChimp

Als je het lastig vindt om een template te maken, doe bijvoorbeeld mee met een workshop Mailchimp. En hier kun je heel veel meer tips over Mailchimp vinden.

checklist voor nieuwsbrieven

Checklist voor Mailchimp nieuwsbrieven

Een checklist waardoor het maken van je nieuwsbrieven veel gemakkelijker gaat en je er zeker van kunt zijn dat je niets vergeet voor je op de verzendknop klikt.

In deze checklist noem ik de punten die je beslist moet controleren. En sommige van deze punten zouden wel eens nieuw voor je kunnen zijn.

Je kunt deze checklist hier gratis ophalen.

mailchimp logo

Vormgeving nieuwsbrief was last modified: by
Bronnen
  • Opleiding Creatieve Handvaardigheid, Stichting Kreatieve Edukatie
  • Opleiding Ontwerpen en Vormgeven, Stichting Kreatieve Edukatie
  • Ik ben een artiest, Max Timmerman
  • Beeldende begrippen, Bert Boermans
Vormgeving nieuwsbrief was last modified: by