ONLINE STYLEGUIDE

Met deze online styleguide zorgen we voor consistentie in onze communicatie en branding op alle online kanalen.



Kleuren
 | Typografie | Fotografie | Grafische elementen | Tone of voice | Design principes

 

KLEUREN

Warme kleuren gebaseerd op koffietonen.

#513d38

#a91314

#80605a 

#b9997e

#fcf4de

ACCENTKLEUREN

Met color pops, accentkleuren, geven we frisse en energieke accenten aan onze uitingen.

#bf5603

#75b166

#00a29b

#6f295d

#a91314

opmerking: verhouding van koffietinten versus color pops: (90:10)

TYPOGRAFIE

We gebruiken die kenmerkende fonts. Ze zijn modern en fris. De combinatie straalt autoriteit uit.

FOTOGRAFIE

Onze foto’s vertellen een verhaal. Dat betekent dat ze middenin het moment zijn. We kiezen voor echte mensen en echte situaties. Ze hebben een warme uitstraling.

GRAFISCHE ELEMENTEN

Deze elementen verrijken de look en feel en helpen ons verhalen te vertellen.

Buttons

Er zijn drie button types die we gebruiken op het platform. De primary button gebruik je als het om een harde call-to-action gaat. Denk aan: koop nu, vraag offerte aan. De secondary en tertiary buttons zijn hiërarchisch gezien gelijk, maar hebben wel een andere benaming in het CMS. Afhankelijk van de look en feel van de pagina, kiezen we één van deze twee buttons bij softe call-to-actions. Bijvoorbeeld: bekijk product of lees meer. 

Banners

Voor een banner gebruiken we een rechthoek met daarin een pijltje.
De rechthoek heeft een kleine drop shadow.

Icons

De volgende icons gebruiken we ter verduidelijking van categorieën op het platform.


toneofvoice

TONE OF VOICE

Woorden. Woorden hebben ontzettend veel impact. Ze kunnen een bezoeker in beweging zetten, of juist niet. Vele woorden samen vormen een tekst. Iedereen kan teksten schrijven, maar copy is een ander verhaal. Tekst heeft weinig richting; copy heeft een idee, heeft energie. Met dat idee (of concept) laten we zien wat we beloven. Het idee of concept is de cafeïne voor je tekst.

We delen copy op in twee onderdelen: de feitelijke regels en de mindset voor schrijven. 

 

Copy regels

  • Gebruik de u-vorm,
    maar wees niet formeel.
  • Schrijf vanuit de we-vorm,
    maar benoem Jacobs Douwe Egberts Professional waar dat logisch is.
  • Schrijf actief,
    maar niet kortaf.
  • Gebruik duidelijke taal,
    maar wees niet belerend.
  • Schrijf vol trots,
    maar wees niet zelfingenomen.
  • Schrijf menselijk,
    maar niet amicaal.
  • Vertel eerst het belangrijkste,
    maar besteed minstens zoveel aandacht aan de rest.
  • Gebruik relevante zoektermen (SEO keywords),
    maar sla niet door (synoniemen zijn ook leuk).
  • Schrijf foutloos,
    maar wees niet bang voor fouten.
  • Laat copy altijd nakijken,
    maar wel door iemand met een frisse blik.

Copy mindset

De visie van Jacobs Douwe Egberts Professional luidt:

Met de lekkerste koffie en thee maken we dagelijkse momenten waardevoller voor iedereen, overal en altijd.

Momenten op de site moeten eveneens waardevol zijn. Die waarde vinden we in het bieden van service, gemak, contact, opwinding, verrassing, inspiratie, proactief advies, een ontzorgd gevoel en duidelijkheid. Dit vertaalt zich in copy in een aantal principes: ‘schrijf voor mensen’, ‘helder, simpel en transparant’, ‘behulpzaam’ en ‘taakgericht’.

 

Schrijf voor mensen

Het allerallerallerbelangrijkste principe bij copy is dat je schrijft voor een mens. Dat betekent dat je:

  • Schrijft op een natuurlijke manier
  • Snel ter zake komt
  • Geloofwaardig bent
  • Betrokken bent en mensen betrekt
  • Een geweten hebt
  • Warm bent
  • Duidelijk bent
  • Uitnodigt tot actie

Helder, simpel & transparant

Denk inside-out: wat is belangrijk voor de bezoeker? Wat wil hij of zij weten? Waarom willen ze dat lezen? Wat verwacht je dat ze met de informatie doen? Probeer dit ook te valideren door user tests en data analyse (design principe: Hoe dieper iemand in de site terecht komt, hoe gedetailleerder de informatie. Het design principe 'We make it personal' pas je in copy toe door in open en duidelijk taal te schrijven. Houd het simpel en transparant. Een knipoog in je tekst mag zeker, leuk zelfs. Maar houd het wel netjes en begrijpelijk.  

Behulpzaam

Wees proactief behulpzaam. Eén van de design principes is Zorg dat de bezoeker alle informatie krijgt die hij of zij nodig heeft om zijn of haar websitebezoek voort te zetten en succesvol af te ronden. Geef de juiste inzichten, presenteer die op een vriendelijke wijze en leg uit waarom dingen zijn zoals ze zijn of werken zoals ze werken. 

Taakgericht

Alle bezoekers op onze site hebben een doel. Wellicht zoeken ze informatie, willen ze iets kopen of willen ze een storing oplossen. We zien dit als een taak. Bedenk welke taak je bezoeker uit wil voeren en hoe je hem of haar daar op eenvoudige wijze in kan begeleiden. De woorden die je kiest zorgen ervoor dat je bezoeker zich op de juiste manier door de site beweegt. Om met de design principes te spreken: We help people complete their goal.

DESIGN PRINCIPES

Geven richting in het maken van keuzes

We solve real problems

We aren’t solving stories or functionalities, we are solving problems. Each team member should know the problem and the struggles users have.

 

We help people complete their goal

People come to the website to complete a task. We guide them trough the site and give relevant next steps. Design in flows, not pages.

 

We make decisions based on real data

Use data to define real problems and opportunities. Make your solution measurable to validate and improve your work.

 

We provide meaningful feedback

Give response on interaction and progress. Let the user know that you’ve heard him. The platform is not a monologue, it’s a conversation

 

We validate with users to improve our work

Involve users to gather insights by prototyping and validating during the process to improve our work

 

We are consistent

Make things look and behave the same on the platform to make it predictable and reliable.

 

We make it personal

Focus on the contact person. Provide personal and relevant content, be open and clear in communication. 

 

We go beyond expectations

For a superior user experience we need go above and beyond user expectations.