Huisstijl · methodiek
Huisstijl uit meting,
niet uit smaak.
We onderzoeken hoe kleur, typografie en digitale toepassing samenwerken voordat we een visuele richting vastleggen. Eén case loopt van boven tot onder mee: Ontslagspecialist.nl.
Elk contrastgetal op deze pagina wordt in je browser berekend, niet ingetypt.
EQwise · eigen huisstijl
nu gemeten
Voordat we iets over een klantmerk beweren, geldt de regel voor onszelf. Dit is het blauw uit ons eigen logo, met de taak die het wél en niet aankan.
Verhouding tussen de lichtsterkte van twee kleuren, volgens WCAG 2.1. Hoger is meer verschil.
De volgorde
Waarom onderzoek vóór ontwerp komt
Een huisstijl die begint bij een kleurenpalet is een gok met een mooie presentatie eromheen. Je ziet pas of hij werkt als hij ergens op wordt losgelaten. En dan is hij al betaald.
Daarom draaien we de volgorde om. We beginnen bij de mensen die op de site komen en bij het gedrag dat ze daar vertonen. Daaruit volgt welke indruk er moet ontstaan. Pas daarna gaan we vorm geven, en dan niet als keuze maar als hypothese: iets dat je kunt toetsen en dus ook kunt verwerpen.
Dat maakt het gesprek met een klant ook anders. Het gaat niet meer over of je iets mooi vindt, maar over of een richting doet wat hij moet doen. Op de vraag “waarom deze kleur?” hoort een antwoord te passen dat iemand kan narekenen of tegenspreken.
Stap 01 en 02 · doelgroep en persona’s
Voor wie ontwerpen we?
Om te laten zien hoe dit in de praktijk werkt, volgen we één voorbeeld: Ontslagspecialist.nl, een kantoor voor ontslag en arbeidsrecht. Dit is niet de enige manier waarop we werken, maar het is wel de hele route in één caseCase Een uitgewerkt voorbeeld van een klantopdracht, met de situatie, de aanpak en het resultaat..
De vier personaPersona Een uitgewerkte beschrijving van een typische klant, met zijn wensen, vragen en twijfels.’s hieronder bevatten geen woonplaats, geen automerk en geen hobby’s. Alleen eigenschappen die iets veranderen aan de vormgeving: hoe iemand leest, waar hij twijfelt, en wat hij nodig heeft om een volgende stap te zetten. Wat er niet toe doet voor het ontwerp, staat er niet in.
De overvallen werknemer
Heeft onverwacht een ontslagbericht of een vaststellingsovereenkomst gekregen.
- Gedrag
- Scant. Leest niet alles. Zoekt snel een antwoord, onder tijdsdruk.
- Behoefte
- Duidelijkheid, vertrouwen, en weten wat de eerstvolgende stap is.
- Gevolg voor de vorm
- Rust, een sterke hiërarchie, weinig tegelijk in beeld, en een actie die niet te missen is.
De analytische vergelijker
Heeft al informatie verzameld en legt meerdere specialisten naast elkaar.
- Gedrag
- Leest voorwaarden, vergelijkt, controleert of de kennis er echt zit.
- Behoefte
- Deskundigheid, transparantie, en bewijs in plaats van beweringen.
- Gevolg voor de vorm
- Inhoudelijke structuur, een typografische hiërarchie die diepte aankan, weinig decoratie.
De kwetsbare werknemer
Heeft naast het ontslag te maken met conflict, ziekte of langdurige spanning.
- Gedrag
- Zoekt eerst veiligheid. Stelt contact uit. Is gevoelig voor verkoopdruk.
- Behoefte
- Menselijkheid en rust, zonder dat de zekerheid eraf gaat.
- Gevolg voor de vorm
- Zachtere vlakken, rustiger ritme, toegankelijke taal, warmte zonder vrijblijvendheid.
De snelle beslisser
Weet al dat er juridische hulp nodig is en wil door.
- Gedrag
- Doelgericht. Wil direct contact en wil weten wat er daarna gebeurt.
- Behoefte
- Snelheid, duidelijkheid, een korte route.
- Gevolg voor de vorm
- Eén duidelijke actiekleurAccentkleur De opvallende kleur in een huisstijl die de aandacht trekt, bijvoorbeeld voor knoppen., een korte route, zo min mogelijk dat afleidt.
Persona 01 en 04 willen tempo. Persona 03 wil juist geen tempo. Dat is geen tegenstelling die je oplost door er het midden van te nemen. Dat bedient allebei half. Het is een reden om twee ingangen naast elkaar te zetten: een snelle route en een rustige route, allebei zichtbaar.
Stap 03 · merkperceptie
Welke perceptie moet ontstaan?
Tussen de persona’s en de eerste kleur zit een stap die vaak wordt overgeslagen: bepalen welke indruk er überhaupt moet ontstaan. Zonder die stap is elke kleur te verdedigen, en dus geen enkele.
We werken met zes assen. Voor elke as staat een vraag die je aan een ontwerp kunt stellen en waarop je ja of nee kunt antwoorden. Dat is bewust: een as die je niet kunt toetsen, is een mening met een label erop.
Vertrouwen
Voelt deze organisatie veilig genoeg om een belangrijk besluit aan toe te vertrouwen?
AutoriteitAutoriteit Hoeveel vertrouwen zoekmachines en AI in je website hebben.
Straalt de identiteit voldoende kennis en ervaring uit?
Menselijkheid
Blijft de organisatie menselijk wanneer het onderwerp zwaar wordt?
Onderscheid
Is de identiteit herkenbaar tussen vergelijkbare aanbieders?
Helderheid
Helpt de vormgeving om ingewikkelde informatie te begrijpen?
Energie
Zet de identiteit aan tot handelen zonder druk te veroorzaken?
| Perceptie | 01 Overvallen | 02 Vergelijker | 03 Kwetsbaar | 04 Beslisser |
|---|
Wat er uit komt. Vertrouwen en Helderheid staan bij drie van de vier persona’s bovenaan; die twee dragen de basis. Autoriteit is de kernprioriteit van de vergelijker en mag daarom nergens ontbreken. Menselijkheid is geen basis maar een correctie: zonder die correctie wordt een kantoor dat over ontslag gaat al snel kil. Onderscheid is de laagste score in de tabel en tegelijk de reden dat dit vak er overal hetzelfde uitziet. Het is een merkstrategische keuze, geen gebruikersbehoefte. Energie hoort thuis rond de actie, en nergens anders.
Stap 04 · hypothesen
Van perceptie naar visuele hypothese
Een kleur kiezen is iets anders dan een richting toetsen. Bij een keuze hoort een voorkeur; bij een hypothese hoort een verwachting, en die kan onjuist blijken.
We formuleren daarom per perceptie een visuele hypothese. Als we de pagina op deze manier opbouwen, dan verwachten we dat de indruk deze kant op schuift. Daarna zetten we die hypothese in een echte interface en kijken we of het klopt, en wat het kost. Elke richting die iets sterker maakt, maakt namelijk ook iets anders zwakker.
Hypothese A
Koel en beheerst
Eén kleurfamilie over de hele schaal, lage verzadiging in de lichte vlakken. Verwachting: maximaal Vertrouwen en Helderheid.
Hypothese B
Donker en tonaal
Een bijna zwarte dragerDrager De rustige hoofdkleur van een huisstijl die grote vlakken en achtergronden vult. met het accent in dezelfde tint ernaast. Verwachting: maximale Autoriteit.
Hypothese C
Warmer en zachter
De lichte vlakken dragen dezelfde warme tint als het accent. Verwachting: meer Menselijkheid.
Hypothese D
Sterke signaalkleur
Een neutrale drager met één verzadigd accent. Verwachting: meer Onderscheid en Energie.
Stap 05 · kleur
Kleuronderzoek in een echte interface
Kleurstalen naast elkaar zeggen weinig. Een kleur doet pas iets zodra hij een oppervlak krijgt, een frequentie, en iets om zich tegen te verhouden. Daarom staat de hypothese hier in een nagebouwde voorpagina, en niet in een rijtje vierkantjes.
Let bij het wisselen vooral op de donkere velden. Die dragen de pagina en bepalen de toon veel sterker dan het accent, ook al valt het accent meer op.
Koel en beheerst
Eén kleurfamilie over de hele schaal, met lage verzadiging in de lichte vlakken. Daardoor is er weinig kleurverschil tussen de vlakken onderling en valt alle nadruk op de tekst.
Donker en tonaal
De draagkleur ligt vlak bij zwart en het accent staat er in dezelfde kleurfamilie dicht tegenaan. Er is dus nauwelijks kleurverschil om aandacht mee te sturen: hiërarchie moet uit grootte en witruimteWitruimte De lege ruimte tussen tekst, afbeeldingen en andere onderdelen op een pagina. komen.
Warmer en zachter
De lichte vlakken zijn niet neutraal grijs maar dragen dezelfde warme tint als het accent. Daardoor verschuift de hele pagina van toon, ook op plekken waar helemaal geen kleur staat.
Sterke signaalkleur
Twee kleuren, meer niet: een neutrale drager en één verzadigd accent. Het accent is te licht om tekst op wit te dragen. Er is dus een tweede, donkere variant van dezelfde kleur nodig voor knoppen en links.
Alles binnen deze omlijsting hoort bij de case en wisselt mee. Alles erbuiten is de huisstijl van EQwise en verandert niet. De inhoud in het voorbeeld is voorbeeldinhoud: er staan bewust geen prestatiecijfers, tarieven of telefoonnummers van Ontslagspecialist in.
Bekijk de alternatieven die we ook hebben opgezet
Deze drie zijn geen aparte hypothesen maar varianten binnen dezelfde vier. Ze staan hier omdat een richting pas overtuigt als je hem naast een naaste buur hebt gezien.
Het mobiele venster toont de pagina op ware grootte en scrollt binnen zijn eigen kader. Met het toetsenbord bereik je het met de tab-toets en dan de pijltjes. De letters staan hier vast. Zou je kleur en letter tegelijk wisselen, dan weet je achteraf niet welke van de twee het verschil maakte. Dat is de reden dat het typografischTypografie De keuze en opmaak van letters: welk lettertype, hoe groot en met hoeveel ruimte. onderzoek verderop apart staat.
Kleurrollen
Merkkleur is niet hetzelfde als interfacekleur
Een kleur die op een gevel of in een logo werkt, is daarmee nog geen kleur waar tekst op kan staan. Dat is geen smaakverschil maar een meetbaar verschil, en het is de meest voorkomende fout in huisstijlen die zonder digitale toets zijn gemaakt.
We geven daarom niet kleuren maar taken. Elke kleur krijgt een rol, een toepassing, een frequentie en, net zo belangrijk, een lijstje van wat hij niet mag doen. Hieronder staat die rolverdeling voor de hypothese die je hierboven hebt aanstaan.
| Rol | Waarde | Toepassing | Niet voor | Frequentie | Op de grond |
|---|
Het accent
De actiekleur
Stap 06 · typografie
Typografisch onderzoek in twee fasen
Bij letters geldt hetzelfde als bij kleur: verander één ding tegelijk. Wissel je kop en tekst samen, dan zie je een verschil dat je niet kunt toeschrijven.
Daarom onderzoeken we in twee fasen. In fase A houden we de tekstletterTekstletter Het lettertype voor de gewone lopende tekst. vast en vergelijken we alleen de koplettersKopletter Het lettertype dat je gebruikt voor titels en tussenkoppen.; wat je dan ziet veranderen, komt uitsluitend van de kop. In fase B zetten we de gekozen kop vast en vergelijken we de tekstletters op leesritme, x-hoogteX-hoogte De hoogte van de kleine letters, gemeten aan de letter x. en informatiedichtheid. De kleur staat in beide fasen stil, op de hypothese die je hierboven hebt gekozen.
Fase A · kopletter, tekstletter staat vast
Getekend om koppen te dragen: stevige stammen en weinig verschil tussen dik en dun. De hele gewichtsreeks van 400 tot 900 zit in één bestand.
Grotesk met afwijkende details in de a, de g en de R. Iets meer eigen karakter dan een neutrale grotesk, zonder dat de letter zich in een kop opdringt.
De enige kandidaat met een breedte-as. Op 85 wordt dezelfde kop smaller zonder dat de lettergrootte of het gewicht verandert. Dat is precies de knop die je bij lange Nederlandse woorden wilt hebben.
Schreefletter met een as voor optische grootte: op koptekstformaat fijner getekend, op tekstformaat steviger. Compact in de breedte.
Eén gewicht, en alleen een as voor optische grootte. Koppen kunnen dus niet zwaarder worden; nadruk moet uit grootte komen. Die beperking is hier het argument, niet het bezwaar.
Wat de site vandaag gebruikt, maar alleen op het derde kopniveau. De twee grootste kopniveaus vallen terug op de tekstletter.
Fase B · tekstletter, kopletter staat vast
Ontworpen voor schermen. Hoge x-hoogte, en op 15 en 16 pixels blijft het verschil tussen de hoofdletter I, de kleine l en het cijfer 1 zichtbaar.
Neutrale sans zonder as voor optische grootte. Rustig in een lange alinea, met weinig eigen kleur. Dat is een voordeel is zodra de kopletter al karakter heeft.
Schreefletter met een as voor optische grootte. Geeft een lange tekst meer ritme, maar heeft op 16 pixels een lagere x-hoogte dan Inter. Dat is merkbaar in kleine labels.
Steviger schreven, gebouwd voor lang achtereen lezen op scherm. Nadrukkelijker aanwezig dan Source Serif 4, dus meer geschikt als de tekst de hoofdrol speelt.
Sans met open vormen en een korte staart aan de a. Houdt op labelformaat stand, waar veel tekstletters dichtslaan.
Wat de site vandaag gebruikt, en tegelijk de kopletter, omdat de grootste twee kopniveaus geen eigen regel hebben. Grote x-hoogte en een breed letterbeeld.
De kleur in dit vlak is overgenomen uit je keuze in het kleuronderzoek hierboven en staat hier vast. Zo weet je zeker dat een verschil dat je ziet, van de letter komt.
Bekijk de technische details van deze twee letters
Een variabele letter zit in één bestand en heeft assen waarop je een waarde kiest. Dat scheelt laadtijd en geeft ruimte om later bij te sturen zonder een nieuw bestand. Voor de meeste lezers is dit niet nodig; voor wie de stijl straks moet bouwen wel.
| Letter | As | Betekenis | Bereik | Nu |
|---|
Het mobiele venster scrollt binnen zijn eigen kader. Kijk bij het wisselen naar de mobiele kolom, en dan naar de kop en de knoptekst. Daar zit het verschil dat op desktop nog niet zichtbaar is: bij de ene letter past een regel, bij de andere valt hij om.
Stap 07 · digitale toepassing
Waar een letter breekt
Nederlands maakt lange woorden. “Vaststellingsovereenkomst” is 25 tekens en staat in dit vak in vrijwel elke kop. Een letter die daar niet mee omgaat, is voor deze klant onbruikbaar, hoe goed hij verder ook is.
Hieronder staat het specimen van de twee letters die je nu hebt aanstaan. Je ziet losse letterparen waar het karakter in zit, cijfers, valuta- en leestekens, en accenten. Daaronder meten we hoe breed datzelfde woord in elke kandidaat wordt, bij precies dezelfde lettergrootte. Dat getal is geen mening en het is op elk moment na te rekenen.
Kopletter ·
Aa Ee Gg Qq Rr
Cijfers en tekens
0123456789 € % & @ é ë ï
Het woord waar het op stukloopt
vaststellingsovereenkomst
Dezelfde kop op 390 pixels · het woord past niet en breekt af
Een vaststellingsovereenkomst laten nakijken
Tekstletter ·
In een vaststellingsovereenkomst staan afspraken over de einddatum, de vergoeding en de formulering van de reden. Wat er niet in staat, weegt vaak net zo zwaar: een concurrentiebeding dat blijft staan, of een getuigschrift dat niet is geregeld. Wij lezen mee voordat je tekent.
| Kopletter | Gewicht | Breedte bij 40 px | Ten opzichte van de smalste | Past nog bij |
|---|---|---|---|---|
| De letters worden geladen zodra dit onderdeel in beeld komt… | ||||
Waarom dit ertoe doet: op een scherm van 390 pixels blijft er na de kantlijnen … pixels over. Geen enkele kandidaat krijgt dit woord daar op één regel bij een kop van 40 pixels. Dat is de eerste conclusie, en die geldt voor alle zeven. De tweede conclusie is nuttiger: het verschil tussen de smalste en de breedste kandidaat is groot genoeg om de mobiele kopgrootte te bepalen. De laatste kolom zegt precies waar die grens ligt. Kies je een brede letter, dan zakt de mobiele kop een paar stappen, en dat werkt door in het hele verticale ritme van elke pagina.
Er is nog een uitweg, en dat is de reden dat Anek Latin in de reeks staat: die letter heeft een breedte-as. Daarmee maak je dezelfde kop smaller zonder de lettergrootte aan te raken. Dat is geen kunstgreep maar een ontwerpkeuze met een prijs: een smallere letter leest bij lange koppen minder makkelijk. Het is precies het soort afweging dat je vooraf wilt maken en niet halverwege de bouw.
Stap 08 · validatie
Contrast is vier eisen, niet één regel
“Alles moet minimaal 4,5 op 1” is een samenvatting die in de praktijk twee kanten op fout gaat. Hij keurt vlakken af die prima zijn, en laat knoppen door die het niet halen.
De norm maakt onderscheid naar wat iets is. Gewone tekst vraagt 4,5 op 1. Grote tekst, vanaf 24 pixels of vanaf 18,7 pixels als hij vet is, vraagt 3 op 1. Dat komt omdat dikkere vormen bij minder verschil nog leesbaar blijven. Interfaceonderdelen die geen tekst zijn, zoals de rand van een invoerveld, een icoon dat betekenis draagt of een focusring, vragen ook 3 op 1. En kleur die alleen decoratie is en geen informatie draagt, kent helemaal geen eis. Wel geldt de voorwaarde dat er geen informatie in zit die je mist als je hem niet ziet.
| Combinatie | Wat het is | Eis | Gemeten | Oordeel |
|---|
Deze waarden worden berekend uit de kleuren die op dit moment in het proefvlak staan. Wissel je hierboven van hypothese, dan verandert deze tabel mee. Een tabel die niet meewisselt, is binnen een week onwaar.
Uitsluiten
Wat viel af, en waarom
Een sterk ontwerp ontstaat ook door goede ideeeën bewust af te wijzen. Deze richtingen waren geen fouten; ze deden alleen niet wat deze case nodig heeft, en dat is aan te wijzen.
Olijf met signaalrood
De drager en het accent vragen hier allebei aandacht. Het olijfgroen is donker genoeg om hele vlakken te dragen, en het rood haalt met … op wit ruim de eis voor gewone tekst. Twee kleuren die allebei vooraan willen staan, laten geen ruimte over voor één duidelijke actie. In een interface waarin persona 01 en 04 binnen enkele seconden moeten zien waar ze klikken, kost dat de hiërarchie.
Petrol als hoofdrichting
Onderscheidend, en koel zonder het blauw te gebruiken dat dit vak domineert. Het accent haalt echter maar … op de grond. Dat is genoeg voor een vlak, een lijn of een icoon, maar niet voor tekst en niet voor een knoplabel. Er zou een tweede, donkere variant bij moeten. Dan blijft er van het onderscheidende karakter weinig over: wat je het meeste ziet, is dan de donkere variant.
Playfair Display als kopletter
Groot verschil tussen de dikke en de dunne delen van de letter. Op een grote kop is dat precies de aantrekkingskracht. Op mobiel, waar de kop naar 33 pixels zakt, wordt de dunste haarlijn smaller dan één beeldpunt en valt de kop optisch uit elkaar. We verwachtten daarnaast dat deze letter ook de breedste van de reeks zou zijn. Dat bleek niet zo: in de meting hierboven zit hij in de middenmoot. Eén van de twee bezwaren viel dus weg. Het overgebleven bezwaar is op zichzelf genoeg.
Eén familie voor kop en tekst
Er zijn families die zowel een schreefloze als een schreefversie hebben, met dertien variabele assen. Dat klinkt als de veiligste keuze, en technisch is het dat ook. Maar assen die je niet instelt leveren niets op, en wat overblijft is een neutraal letterbeeld zonder eigen kenmerk. Voor deze case is dat een gerichte verzwakking van precies de as die al het laagst scoort: Onderscheid.
De bestaande combinatie
Op de site die er nu staat, is alleen voor de derde kopregel een eigen letter ingesteld. De grootste twee kopniveaus hebben geen eigen regel en vallen daardoor terug op de tekstletter. Feitelijk heeft de site op dit moment dus geen kopletter, alleen een tekstletter in een groter formaat. Dat is geen stijlkeuze geweest, en het verklaart waarom de pagina’s vlak ogen zonder dat iemand kan aanwijzen waarom.
De klant laten samenstellen
De verleiding bij zo’n proefvlak is om er een keuzemenu van te maken: alle paletten, alle letters, kies maar. Dat verplaatst het werk naar de klant en levert een uitkomst op die niemand kan verdedigen. Vergelijken helpt om een richting te begrijpen; de onderbouwing en het advies blijven bij ons.
Zo niet, zo wel
Zes fouten die we bijna overal tegenkomen
Geen van deze fouten is ooit gekozen. Ze ontstaan: door een plugin, een losse tip of een logo dat ook maar knop werd. Daarom zijn ze zo gewoon, en daarom staat bij elke fout de correctie er direct naast.
Drie kleuren, drie betekenissen
Zo nietMerkblauw op koppen en iconen, een oranje knop uit een A/B-test, en de groene WhatsApp-knop die een plugin erbij zette.
Zo welKoppen neutraal, één actiekleur, en WhatsApp als gewone tweede knop. De route blijft, hij schreeuwt alleen niet meer.
Waarom. De bezoeker leert niet wat een kleur betekent. Oranje valt alleen op omdat het nergens anders voorkomt, en de zwevende groene knop wint op mobiel van de actie die je eigenlijk wilt.
Lichtgrijze tekst voor de rust
Zo nietBodytekst in lichtgrijs, omdat zwart “te hard” oogde in het ontwerp.
Zo welDonkere tekst, kortere regels en meer witruimte. Rust komt uit ruimte en regellengte, niet uit minder contrast.
Waarom. Lichtgrijs haalt de eis voor gewone tekst niet. Buiten op een telefoon valt juist de uitleg weg die persona 02 zoekt.
Witte tekst op de logokleur
Zo nietDe knop krijgt de kleur van het logo, want dat is “de merkkleur”.
Zo welDe logokleur blijft voor vlakken en grote koppen. Knoppen en links krijgen een donkere variant uit dezelfde familie.
Waarom. Een logokleur is gekozen om op te vallen, niet om tekst te dragen. Wij liepen er zelf tegenaan: ons logoblauw haalt met witte tekst de eis net niet. Het meetblad bovenaan deze pagina rekent het voor.
Tekst los op een foto
Zo nietWitte kop direct op een lichte foto, omdat het op de ontwerpfoto net leesbaar was.
Zo welDe tekst krijgt een eigen, effen vlak. Zo is het contrast vast, welke foto er ook onder komt.
Waarom. Een foto is overal anders van helderheid, dus het contrast wisselt per woord. Wat op de ontwerpfoto werkt, breekt bij de eerste foto die de klant zelf uploadt.
Alleen kleur als foutmelding
Zo nietHet veld krijgt een rode rand. Verder niets.
Zo welRood mag, want dit is echte status. Maar er staat ook een teken en een zin bij die zegt wat er mis is en hoe het goed moet.
Waarom. Wie rood slecht ziet, ziet hier niets. En ook wie het wel ziet, weet na een rode rand nog niet wát er mis is.
Links die je alleen aan de kleur herkent
Zo nietDonkerblauwe link in lopende tekst, zonder onderstreping, omdat dat “rustiger” oogt.
Zo welDezelfde kleur, met een onderstreping. Kost niets en lost het voor iedereen op.
Waarom. Donkerblauw naast bijna zwart verschilt te weinig in helderheid om zonder onderstreping als link op te vallen, zeker op een telefoon in de zon.
Twijfel? Vier vragen, in deze volgorde
- Draagt de kleur informatie? Nee: dan is het decoratie en telt hij niet mee, zolang niemand iets mist als hij de kleur niet ziet. Ja: dan gelden de vragen hieronder.
- Haalt hij de eis van zijn rol? Gewone tekst 4,5 op 1, grote tekst en interfaceonderdelen 3 op 1. De validatie hierboven rekent het na.
- Concurreert hij met de actie? Tel in het eerste scherm op 390 pixels de kleuren die geen tekst of achtergrond zijn. Meer dan twee: dan moet er een weg, of er is een reden die je kunt opschrijven.
- Welke persona betaalt de prijs? Blijft het twijfel, dan beslist de persona die er het meeste last van heeft. Het besluit gaat met reden bij wat afviel, zodat dezelfde discussie niet over een half jaar terugkomt.
Drie gevallen die steeds terugkomen. Het logo telt niet mee, maar zijn kleur wordt daarmee nog geen interfacekleur. Een illustratie telt niet mee, tot er een knop op staat. En merkkleuren van anderen, zoals WhatsApp-groen of het geel van een reviewwidget, nemen we nooit op in de eigen hiërarchie.
Advies
De richting die we adviseren
Hypothese A, koel en beheerst, met Schibsted Grotesk voor de koppen en Inter voor de tekst. Niet omdat de andere richtingen zwak zijn, maar omdat deze de twee percepties draagt die bij drie van de vier persona’s bovenaan staan.
Wat deze richting doet
Eén kleurfamilie over de hele schaal betekent dat er weinig kleurverschil tussen de vlakken zit en dat alle nadruk op de tekst valt. Dat is precies wat persona 01 nodig heeft, die scant onder tijdsdruk, en wat persona 02 nodig heeft, die diep in de tekst gaat. De donkere draagkleur is donker genoeg om hele velden te dragen zonder dat de tekst erop in de knel komt. De kopletter heeft stevige stammen en weinig verschil tussen dik en dun, dus hij houdt stand op een klein scherm. De tekstletter heeft een hoge x-hoogte, waardoor interfaceteksten van 15 en 16 pixels leesbaar blijven.
Wat deze richting kost
Onderscheid. Dit is ook wat de meeste aanbieders in dit vak doen, en daar helpt geen enkele nuance tegen. Wie deze richting kiest, kiest ervoor om herkenbaar te zijn als categorie in plaats van als kantoor. We bedienen daarmee bewust persona 03 en 04 minder goed op het punt waar zij het meest gevoelig zijn: warmte en tempo. Die twee halen we daarom niet uit de kleur maar uit de opbouw van de pagina. Dat wordt een tweede, rustige ingang naast de snelle, en teksten die niet duwen. Wil je Onderscheid wél uit de kleur halen, dan is hypothese D het gesprek waard. Weet dan wel dat je er een tweede, donkere variant van dezelfde kleur bij nodig hebt om knoppen en links te kunnen maken.
Wat de meting aan dit advies veranderde
We gingen ervan uit dat de kopletter die we adviseren ook een van de smalste zou zijn. Dat is niet zo: in de breedtemeting hierboven is hij juist de breedste van de reeks. Dat is een echte prijs en we laten hem staan, want hij verandert iets aan de teksten en niet aan het ontwerp. Een kop als “Vaststellingsovereenkomst laten nakijken” past op mobiel niet meer op één regel; de uitweg is een kortere kop, niet een kleinere. Voor wie die uitweg niet wil, is Anek Latin het gesprek waard. Het is de enige kandidaat met een breedte-as en met afstand de smalste van de zeven. Dat je dit soort dingen vóór de bouw weet in plaats van erna, is precies waar deze pagina over gaat.
Stap 09 · designsysteem
Van huisstijl naar design tokens
Na goedkeuring worden de visuele keuzes vastgelegd als tokens: namen met een betekenis, in plaats van kleurwaarden die iemand opnieuw moet interpreteren.
Dat is geen administratieve stap. Een kleur die “blauw 2” heet, is over een half jaar door iedereen anders gebruikt. Een kleur die action-primary-bg heet, heeft een taak, en een taak kun je controleren. Hieronder staat het blok voor de instelling die je op dit moment in het proefvlak hebt staan.
Tweede case · beeldmerk en drukwerk
Dezelfde volgorde, een heel ander vak
De case hierboven speelt zich af op een scherm. Deze niet. MHC Weesp, The Magic Bees, wilde een beeldmerk dat werkt op een reclamebord van drie meter langs het veld. Ook op een shirt en op een vaantje van tien centimeter. Dezelfde volgorde, andere natuurkunde.
Wat op een scherm stukloopt op contrast en leesbaarheid, loopt hier stuk op kijkafstand, inkt en licht. Dat maakt de methodiek niet anders: we meten eerst waar het misgaat, en de vorm volgt daaruit. Het verschil is alleen wat er gemeten wordt.
Van raster naar vector
Het uitgangspunt was een raster van 4096 bij 4096 pixels met verlopen, schaduwen en honderden tussenkleuren. Onbruikbaar op drie meter. Getraceerd naar 3.968 losse paden, verlopen platgeslagen, 122 trace-splinters verwijderd, en per kleur samengevoegd. Van 2,2 MB naar 660 kB, en oneindig schaalbaar.
Het palet komt uit de mascotte
Acht vlakke kleuren, niet ernaast gekozen maar er uit teruggebracht. Daardoor delen mascotte, embleem en typografie exact dezelfde tinten. Van elke kleur ligt de HEX, de RGB, de CMYK-richtwaarde en de contrastwaarde vast.
Het materiaal stelt de eisen
Het bord wordt gedrukt op PVC hardschuim van 5 millimeter of op dibond van 3 millimeter, met 5 millimeter afloop rondom. Lijnen zijn minimaal 1 millimeter dik, want dunner valt op afstand weg. Alle tekst wordt vóór het aanleveren omgezet naar lettercontouren. Dat zijn geen details achteraf: ze bepalen wat er in het ontwerp mogelijk is.
Leesafstand als ontwerpeis
Hoe groot moet een letter zijn? Dat is geen smaakvraag maar optica. Een oog met 20/20-zicht onderscheidt geen detail kleiner dan 0,29 millimeter per meter afstand. Daaruit volgt per tekstregel een minimale kophoogte, en daaruit volgt de compositie. Het bord meet 2950 bij 750 millimeter, en binnen die hoogte moeten vier regels passen die elk op een andere afstand nog moeten werken.
| Afstand | Waar dat is | Wat er dan nog leesbaar is |
|---|---|---|
| 10 m | langs de lijn | Alles, tot en met de website en het Instagram-icoon. Honingraat leest als raat. |
| 20 m | overkant van het veld | Naam en bovenregel scherp. Onderregel nog te lezen, het icoon begint vol te lopen. |
| 40 m | vanaf het clubhuis | HOME OF THE MAGIC BEES domineert. Onderregel wordt een streep, honingraat een gloed. |
| 80 m | vanaf de parkeerplaats | Alleen de naam en de bij dragen nog. Precies wat een sponsorbord op die afstand moet doen. |
Zo valt de opbouw vanzelf op zijn plaats. Van de parkeerplaats af zie je alleen de bij en de clubnaam, en de details komen pas als je dichterbij loopt. Eén eerlijkheid hoort erbij, en die staat ook in de simulatie zelf: reken op circa 80 procent van deze afstanden. Strijklicht, vervuiling en beweging halen er altijd iets af. Voor een ander bordformaat wordt de opmaak opnieuw gezet en niet uitgerekt.
Drie kleuren, en waarom niet meer
Het bord draagt er drie. Niet omdat er niet meer beschikbaar waren (de gevectoriseerde mascotte telt er acht), maar omdat een bord op tachtig meter afstand geen nuance kan dragen. Wat op een scherm een tint verschil is, is daar niets.
| Kleur | HEX | CMYK | Contrast op zwart |
|---|---|---|---|
| Zwart | #000000 | 0 / 0 / 0 / 100 | — |
| Goud | #D89600 | 8 / 45 / 100 / 0 | 8,28 op 1 |
| Wit | #F8F8F8 | 0 / 0 / 0 / 0 | 19,77 op 1 |
Eén lettertype voor het hele bord, Oswald SemiBold, in twee groottes. Geen derde stijl. De keuze is beargumenteerd en niet gevoeld: iets lichter dan Anton en Archivo Black, en daarmee dichter bij de letter van het logo. Zo werkt het ook bij de marge. Die is 30 millimeter en niet meer, omdat het bord vlak op maat wordt gesneden en er geen montageprofiel overheen komt. De maat volgt uit het materiaal, niet uit een vuistregel.
En dan het bewijs dat het werkt
Wat deze twee cases naast elkaar laten zien, is dat de volgorde niet aan een vak vastzit. Bij Ontslagspecialist bepaalt de bezoeker en zijn situatie wat de vorm moet doen. Hier bepalen de kijkafstand, de inkt en het materiaal dat. In beide gevallen ligt de eis vast voordat er iets ontworpen wordt, en in beide gevallen is achteraf na te rekenen of eraan voldaan is.
Jouw merk
Zo passen we dezelfde methodiek toe op jouw merk
De cases hierboven zijn arbeidsrecht en een hockeyclub. De volgorde verandert daar niet van, alleen de uitkomst.
Eerst het gedrag
We brengen in kaart wie er komt, met welke vraag, en waar het vertrouwen breekt. Dat levert de functionele persona’s op waar de rest aan hangt.
Dan de perceptie
Welke indruk moet er ontstaan, en welke daarvan is een basis en welke een correctie. Zonder die weging is elke kleur te verdedigen.
Dan pas vorm
Drie tot vier visuele hypothesen, elk in een echte interface, op desktop en op mobiel, met de contrastmeting erbij.
Uitsluiten
We leggen vast wat afvalt en waarom. Dat voorkomt dat dezelfde discussie over een half jaar opnieuw begint.
Adviseren
Eén richting, met wat hij oplevert en wat hij kost. Je krijgt een advies, geen keuzemenu.
Vastleggen
De goedgekeurde richting wordt een tokenset met rollen en regels, zodat de stijl bij de bouw niet opnieuw geïnterpreteerd hoeft te worden.
Volgende stap
Een huisstijl die niet alleen goed oogt, maar klopt
We onderzoeken eerst wat jouw merk moet doen voordat we bepalen hoe het eruit moet zien. In een eerste gesprek kijken we naar je huidige stijl, je doelgroep en de plek waar die twee uit elkaar lopen.
