Zebrashop · huisstijl
Drie richtingen om te vergelijken
Elke richting wordt getoond zoals ze er echt zal uitzien: logo, kleurenpalet en het startscherm van de klantenapp, in het Frans en in het Arabisch, de twee hoofdtalen van de app. Richting 1 is onze aanbeveling en wordt voorlopig gebruikt, tot we samen een keuze maken.
Demonstratie: fictieve winkels, voorbeeldprijzen, geen echte foto's.
Richting 1 Aanbevolen
Passage
Het zebrapad is de zebra van de stad: strakke strepen die zeggen ‘hier steek je veilig over’. Zwart en wit voor betrouwbaarheid, een helder Atlantisch blauw voor Casablanca, de witte stad aan de oceaan.
De Z bestaat uit vijf strepen van een zebrapad, schuin gezet voor de snelheid.
Kleurenpalet
- Merk
#2443D6--brand - Merk, tekst
#1A319E--brand-ink - Merk, licht
#E4E9FF--brand-tint - Accent (decor)
#F0B43C--accent - Hoofdtekst
#121317--ink - Bijtekst
#5C606A--muted - Achtergrond
#F6F6F2--bg - Vlak 2
#EAEAE4--surface-2 - Nacht
#121317--night - Succes
#0B7A3E--good - Fout
#CC2F36--danger - In afwachting
#875900--amber
Sterke punten
- Blauw wekt vertrouwen, belangrijk wanneer je contant betaalt aan een koerier die je niet kent.
- Geen verwarring met de statuskleuren van de app (groen voor geleverd, rood voor een fout, amber voor in afwachting).
- De ruimste contrastmarges: witte tekst op een knop haalt 7,37:1.
Zwakke punten
- Ingetogener dan de andere twee: het karakter komt van het symbool, niet van de kleur.
- Blauw is zeldzaam bij buurtbezorging: eerst toetsen op de Marokkaanse markt voor we erop bouwen.
WCAG-contrasten33 combinaties gecontroleerd, minimum 4,52:1, allemaal AA
| Tekst / achtergrond | Verhouding | Niveau | |
|---|---|---|---|
| Aa | --ink op --bg | 17,13:1 | AAA |
| Aa | --ink op --surface | 18,56:1 | AAA |
| Aa | --ink op --surface-2 | 15,37:1 | AAA |
| Aa | --ink op --sunken | 16,24:1 | AAA |
| Aa | --ink-2 op --bg | 9,56:1 | AAA |
| Aa | --ink-2 op --surface | 10,36:1 | AAA |
| Aa | --ink-2 op --surface-2 | 8,57:1 | AAA |
| Aa | --ink-2 op --sunken | 9,06:1 | AAA |
| Aa | --muted op --bg | 5,81:1 | AA |
| Aa | --muted op --surface | 6,29:1 | AA |
| Aa | --muted op --surface-2 | 5,21:1 | AA |
| Aa | --muted op --sunken | 5,51:1 | AA |
| Aa | wit op --brand | 7,37:1 | AAA |
| Aa | wit op --brand-2 | 9,18:1 | AAA |
| Aa | wit op --brand-ink | 10,62:1 | AAA |
| Aa | --brand op --surface | 7,37:1 | AAA |
| Aa | --brand op --bg | 6,80:1 | AA |
| Aa | --brand op --brand-tint | 6,11:1 | AA |
| Aa | --brand-ink op --surface | 10,62:1 | AAA |
| Aa | --brand-ink op --bg | 9,80:1 | AAA |
| Aa | --brand-ink op --brand-tint | 8,80:1 | AAA |
| Aa | wit op --night | 18,56:1 | AAA |
| Aa | --brand-tint op --night | 15,38:1 | AAA |
| Aa | --good op --surface | 5,43:1 | AA |
| Aa | --good op --good-tint | 4,76:1 | AA |
| Aa | wit op --good | 5,43:1 | AA |
| Aa | --danger op --surface | 5,21:1 | AA |
| Aa | --danger op --danger-tint | 4,52:1 | AA |
| Aa | wit op --danger | 5,21:1 | AA |
| Aa | --amber op --surface | 6,07:1 | AA |
| Aa | --amber op --amber-tint | 5,37:1 | AA |
| Aa | wit op --amber | 6,07:1 | AA |
| Aa | --ink op --accent | 9,99:1 | AAA |
AA-drempel voor gewone tekst: 4,5:1. Alle combinaties die de apps gebruiken, halen die drempel.
Commerces près de chez vous
Paiement à la livraisonمتاجر بالقرب منكم
الدفع عند الاستلامRichting 2
Signaal
De zebra in zijn puurste vorm: zwart, wit en het geel van de verkeersborden om op te vallen. Een heel grafische identiteit, die je van ver herkent op een scooter, een tas of een etalage.
Een locatiepin met een kop die gestreept is als een zebra: de buurt, en de koerier die eraan komt.
Kleurenpalet
- Merk
#111111--brand - Merk, tekst
#111111--brand-ink - Merk, licht
#FFF0B8--brand-tint - Accent (decor)
#FFC629--accent - Hoofdtekst
#111111--ink - Bijtekst
#5F5C55--muted - Achtergrond
#F7F5EE--bg - Vlak 2
#ECE9DF--surface-2 - Nacht
#111111--night - Succes
#0B7A3E--good - Fout
#C9302C--danger - In afwachting
#855700--amber
Sterke punten
- De meest herkenbare en de meest ‘zebra’ van de drie.
- Heel goedkoop om te drukken (zwart op geel) voor tassen, stickers en helmen.
Zwakke punten
- In de app worden de knoppen zwart: doeltreffend, maar koeler en minder smakelijk.
- Geel is al heel aanwezig bij maaltijdbezorging: risico op gelijkenis, na te gaan.
WCAG-contrasten33 combinaties gecontroleerd, minimum 4,62:1, allemaal AA
| Tekst / achtergrond | Verhouding | Niveau | |
|---|---|---|---|
| Aa | --ink op --bg | 17,31:1 | AAA |
| Aa | --ink op --surface | 18,88:1 | AAA |
| Aa | --ink op --surface-2 | 15,54:1 | AAA |
| Aa | --ink op --sunken | 16,29:1 | AAA |
| Aa | --ink-2 op --bg | 10,57:1 | AAA |
| Aa | --ink-2 op --surface | 11,53:1 | AAA |
| Aa | --ink-2 op --surface-2 | 9,49:1 | AAA |
| Aa | --ink-2 op --sunken | 9,95:1 | AAA |
| Aa | --muted op --bg | 6,11:1 | AA |
| Aa | --muted op --surface | 6,67:1 | AA |
| Aa | --muted op --surface-2 | 5,49:1 | AA |
| Aa | --muted op --sunken | 5,75:1 | AA |
| Aa | wit op --brand | 18,88:1 | AAA |
| Aa | wit op --brand-2 | 13,58:1 | AAA |
| Aa | wit op --brand-ink | 18,88:1 | AAA |
| Aa | --brand op --surface | 18,88:1 | AAA |
| Aa | --brand op --bg | 17,31:1 | AAA |
| Aa | --brand op --brand-tint | 16,55:1 | AAA |
| Aa | --brand-ink op --surface | 18,88:1 | AAA |
| Aa | --brand-ink op --bg | 17,31:1 | AAA |
| Aa | --brand-ink op --brand-tint | 16,55:1 | AAA |
| Aa | wit op --night | 18,88:1 | AAA |
| Aa | --brand-tint op --night | 16,55:1 | AAA |
| Aa | --good op --surface | 5,43:1 | AA |
| Aa | --good op --good-tint | 4,76:1 | AA |
| Aa | wit op --good | 5,43:1 | AA |
| Aa | --danger op --surface | 5,33:1 | AA |
| Aa | --danger op --danger-tint | 4,62:1 | AA |
| Aa | wit op --danger | 5,33:1 | AA |
| Aa | --amber op --surface | 6,25:1 | AA |
| Aa | --amber op --amber-tint | 5,53:1 | AA |
| Aa | wit op --amber | 6,25:1 | AA |
| Aa | --ink op --accent | 12,01:1 | AAA |
AA-drempel voor gewone tekst: 4,5:1. Alle combinaties die de apps gebruiken, halen die drempel.
Commerces près de chez vous
Paiement à la livraisonمتاجر بالقرب منكم
الدفع عند الاستلامRichting 3
Groen licht
Het groen van het voetgangerslicht: de weg is vrij, de bestelling komt eraan. Een frisse, geruststellende identiteit, dicht bij de dagelijkse boodschappen, zonder folklore.
Een boodschappentas met strepen erdoor, zoals een zebrapad.
Kleurenpalet
- Merk
#0A7350--brand - Merk, tekst
#075839--brand-ink - Merk, licht
#DAF1E5--brand-tint - Accent (decor)
#7ED9AE--accent - Hoofdtekst
#0F1A15--ink - Bijtekst
#56635C--muted - Achtergrond
#F3F6F2--bg - Vlak 2
#E4EAE3--surface-2 - Nacht
#0F1A15--night - Succes
#0B6E3A--good - Fout
#C8303A--danger - In afwachting
#845800--amber
Sterke punten
- Roept meteen voeding en versheid op, het gevoel van ‘we zijn vertrokken’.
- Zachte, uitnodigende toon, die past bij kruideniers en groentewinkels.
Zwakke punten
- Het merkgroen lijkt op het groen van ‘bestelling geleverd’: de statussen worden minder leesbaar.
- Groen is al een veelgebruikte kleur bij bezorgapps, na te gaan.
WCAG-contrasten33 combinaties gecontroleerd, minimum 4,63:1, allemaal AA
| Tekst / achtergrond | Verhouding | Niveau | |
|---|---|---|---|
| Aa | --ink op --bg | 16,35:1 | AAA |
| Aa | --ink op --surface | 17,81:1 | AAA |
| Aa | --ink op --surface-2 | 14,57:1 | AAA |
| Aa | --ink op --sunken | 15,56:1 | AAA |
| Aa | --ink-2 op --bg | 9,40:1 | AAA |
| Aa | --ink-2 op --surface | 10,24:1 | AAA |
| Aa | --ink-2 op --surface-2 | 8,37:1 | AAA |
| Aa | --ink-2 op --sunken | 8,95:1 | AAA |
| Aa | --muted op --bg | 5,78:1 | AA |
| Aa | --muted op --surface | 6,30:1 | AA |
| Aa | --muted op --surface-2 | 5,15:1 | AA |
| Aa | --muted op --sunken | 5,50:1 | AA |
| Aa | wit op --brand | 5,86:1 | AA |
| Aa | wit op --brand-2 | 7,20:1 | AAA |
| Aa | wit op --brand-ink | 8,52:1 | AAA |
| Aa | --brand op --surface | 5,86:1 | AA |
| Aa | --brand op --bg | 5,38:1 | AA |
| Aa | --brand op --brand-tint | 4,94:1 | AA |
| Aa | --brand-ink op --surface | 8,52:1 | AAA |
| Aa | --brand-ink op --bg | 7,82:1 | AAA |
| Aa | --brand-ink op --brand-tint | 7,18:1 | AAA |
| Aa | wit op --night | 17,81:1 | AAA |
| Aa | --brand-tint op --night | 15,01:1 | AAA |
| Aa | --good op --surface | 6,35:1 | AA |
| Aa | --good op --good-tint | 5,51:1 | AA |
| Aa | wit op --good | 6,35:1 | AA |
| Aa | --danger op --surface | 5,33:1 | AA |
| Aa | --danger op --danger-tint | 4,63:1 | AA |
| Aa | wit op --danger | 5,33:1 | AA |
| Aa | --amber op --surface | 6,22:1 | AA |
| Aa | --amber op --amber-tint | 5,50:1 | AA |
| Aa | wit op --amber | 6,22:1 | AA |
| Aa | --ink op --accent | 10,54:1 | AAA |
AA-drempel voor gewone tekst: 4,5:1. Alle combinaties die de apps gebruiken, halen die drempel.
Commerces près de chez vous
Paiement à la livraisonمتاجر بالقرب منكم
الدفع عند الاستلامIn één zin
- 1. PassageZwart-witte strepen van het zebrapad en Atlantisch blauw: betrouwbaar, strak, nooit te verwarren met de statussen in de app.
- 2. SignaalZwart, wit en signaalgeel, een gestreepte locatiepin: de meest opvallende, maar de koelste in de app.
- 3. Groen lichtHet groen van het voetgangerslicht, een gestreepte tas: fris en meteen voeding, maar het groen valt samen met ‘geleverd’.
Waarom richting 1
Zebrashop is een nieuw merk, en de klant betaalt contant aan een koerier die hij nog niet kent. Vertrouwen winnen komt dus eerst: het blauw draagt dat vertrouwen, het zwart-wit van het zebrapad geeft het karakter.
In de app valt het blauw met geen enkele status samen (groen voor geleverd, rood voor een fout, amber voor in afwachting), en het heeft de beste contrastmarges. De zebra zit in het symbool, dat sterk genoeg is om alleen als app-icoon te staan.
Welke richting kiezen jullie? Een kort antwoord volstaat: 1, 2 of 3.
Lettertypes: Bricolage Grotesque en Manrope, die de apps al gebruiken. Arabisch: Readex Pro (OFL-licentie), hier geladen zoals in de apps.