Identity Design, Huisstijl Ontwerpen Webdesign voor Drent & Bosker

Projectomschrijving

In december 2016 benaderden Ruud Drent en Wim Bosker mij voor een kennismakingsgesprek. Ze stonden op het punt om hun twee op-zichzelf-staande administratiekantoren samen te voegen tot één kantoor. Administratiekantoor Stulp (Delfzijl) en administratiekantoor Raedthuys (Groningen) zouden samen verder gaan onder één nieuwe bedrijfsnaam met twee vestigingen. En nu was het zaak om door middel van een nieuwe visuele identiteit, website en huisstijl de eenheid en nieuwe uitstraling van het nieuwe kantoor te realiseren.
Na een prettige kennismaking, een goede kop koffie en een weekje beraad tussen de twee eigenaren werd ik aangewezen als de meest geschikte persoon voor deze klus en rond half december werd het project gestart.

Projectdoelstellingen

  • Het ontwikkelen van een unieke visuele identiteit die opvalt tussen de andere administratiekantoren (vooral in de regio).
  • Het creëren van een duidelijke visuele eenheid tussen de voorheen van elkaar gescheiden administratiekantoren.
  • Meedenken over de naamgeving van het nieuwe kantoor en eventuele tekstuele communicatie.
  • Het ontwikkelen van een krachtig logo dat modern oogt maar tevens de persoonlijke noot van het kantoor laat doorschemeren.
  • Het ontwerpen en verzorgen van de nieuwe huisstijl-elementen voor het nieuwe kantoor (visitekaartjes, enveloppen, briefpapier, jaarrapport-omslagen en aanvullend drukwerk.)
  • Het ontwikkelen van een overzichtelijke, bondige one-page website voor het nieuwe kantoor.

Over de klant

Drent & Bosker (de uiteindelijk besloten bedrijfsnaam) is een full-service administratiekantoor met als voornaamste klanten zzp’ers en mkb’ers uit de provincie Groningen.
Sinds de oprichting door Ruud Drent en Wim Bosker is het bedrijf uitgegroeid tot een team van 8 gedreven vakmensen verdeeld over kantoren in Groningen en Delfzijl.
De aanpak van Drent & Bosker kenmerkt zich door een zeer persoonlijke band met de klant. Ondernemers die langskomen worden bij de hand genomen en door het administratieve proces heen geleidt zodat ze grip en zicht houden op hun administratie ook al besteden zij dit uit.

Zwart-wit foto van Ruud Drent en Wim Bosker, opdrachtgevers en directeurs van Drent & Bosker
Zwart-wit foto van Ruud Drent en Wim Bosker, opdrachtgevers en directeurs van Drent & Bosker
Drent & Bosker logo dat langzaam verschijnt tegen een witte achtergrond

Schrijfwijze & logo-ontwikkeling

Tijdens de ontwikkeling van het Drent & Bosker-logo is breed gekeken naar de markt, concurrentie en de optimale schrijfwijze van de bedrijfsnaam.
Omdat de schrijfwijze van het nieuwe bedrijf nog niet vast stond kon er in het logo-design traject iedere mogelijke schrijfwijze worden afgetast. Wél stond vast dat de bedrijfsnaam de twee achternamen zou voeren van de twee oprichters (Ruud Drent & Wim Bosker). Maar of deze gescheiden zouden worden door middel van een plat streepje, een slash, een spatie of zelfs alleen de voorletters zou bevatten was nog niet beslist.

Concepten van het Drent & Bosker logo en de schrijfwijze van de bedrijfsnaam
Vliegens &-tekens (ampersands) in verschillende lettertypes

Na vele try-outs kwam de doorbraak met het &-teken. De streepjes waren nogal strak (ietwat afstandelijk) en scheidden de namen. Ze werkten vooral ‘verdelend’. Het &-teken (ook wel Ampersand genoemd) was vele malen vriendelijker (rondere vormen) en vele malen meer ‘inclusief’ in plaats van de streepjes die veel meer scheidden en ‘buiten sloten’. Deze ‘&’ zegt tevens iets over de teamgeest van Drent & Bosker (samenwerking, twee zij meer dan één, het bundelen van krachten) en kan tevens gebruikt worden richting de klant. Drent & Bosker neemt de klant graag bij de hand en betrekt deze op een persoonlijke wijze bij alle aspecten van de administratie. Zo staat de ‘&’ tevens sterk voor de naam van de klant. Als in: Drent & Bosker & … de klant/naam van de klant’. De bedrijfsnaam voelt op deze manier veel meer als een samenwerking. Een ‘ons kent ons’. Wat de lading precies dekt.
Een leuke bijkomstigheid van het &-teken is dat deze stukken vriendelijker en frivoler oogt dan de andere bekeken tekens. Het is bijna een strikje op een cadeau, wat erg goed werkt om het zakelijke, koude en afstandelijke dat administratiekantoren vaak hebben, wat te doorbreken.

Logo-opbouw & Typografie

Na het aftasten van verschillende schrijfwijzen voor de bedrijfsnaam werd duidelijk dat het ideaal was om de volledige achternamen van Ruud en Wim te gebruiken. In eerste instantie is DB nog overwogen als bedrijfsnaam in verband met het korte en strakke karakter van twee initialen. Alleen bleken de volledig uitgeschreven namen vele malen persoonlijker en unieker.
De DB zou abstracter zijn, wellicht geschikt voor een reclamebureau. Maar met persoonlijk contact hoog in het vaandel zouden de volledige namen vele malen geschikter zijn, vooral gepaard met de eerdergenoemde ‘ampersand’.
Vervolgens is een grote hoeveelheid lettertypes onderzocht om te bepalen welk lettertype het meest geschikt zou zijn.
Een lettertype (zeker voor een logo) heeft een enorme impact. Ieder lettertype heeft zijn eigen karakter en dat beïnvloed vaak de toon en het karakter (althans de perceptie van) het hele bedrijf. Van strak en zakelijk, tot vriendelijk (vaak rondere vormen) tot laagdrempelig en benaderbaar… Een lettertype doet extreem veel als het gaat om ‘toon’.

Het Drent & Bosker-logo in vershillende lettertypes en stijlen
Het nauwkeurig uitlijnen van het Drent & Bosker-logo

De doorbraak kwam bij het strakke en krachtige maar tevens vriendelijke Gotham. Een geliefd lettertype maar tevens uniek genoeg om mee op te vallen.
Na verschillende concepten binnen dit lettertype te hebben bekeken leek de combinatie van de persoonsnamen in Bold (dik-gedrukt) en het &-teken in Light (dun-gedrukt) het beste. Op deze manier knallen de namen van het scherm af en valt er tevens niet te veel aandacht op het &-teken. Want hoewel het teken de identiteit uniek maakt en het (letterlijk) de hoeksteen van de Drenkt & Bosker identiteit is; het blijft een secundair element. Ruud en Wim’s achternamen voeren de boventoon.
De meest ideale schrijfwijze van de bedrijfsnaam bleek de namen boven elkaar te zijn, met een custom ‘tracking’ (horizontale ruimte tussen de letters) om de S en de E, de N en de K en de T en de E exact boven elkaar uit te lijnen. Dit maakt het logo rustiger en vele malen strakker dan de standaard instelling.
Tevens gaf deze custom tracking meer ruimte, rechts naast ‘Drent’ om het &-teken te plaatsen. En omdat de naam Drent exact één letter korter is dan Bosker lijnt het geheel perfect uit. Een prachtig toeval wat leidt tot een logo dat mooi (visueel) in balans is.

Het Drent & Bosker-logo in het zwart op een witte achtergrond
Het Drent & Bosker-logo in het wit op een zwarte achtergrond
Enveloppen in het geel met het Drent & Bosker-logo erop

Logo-schaalbaarheid

Schaalbaarheid (hoe een design werkt op groot en klein formaat) is een heel belangrijk onderdeel bij logo-design. Een logo werkt over het algemeen prima op groter formaat maar zodra het kleiner geschaald wordt en er details beginnen weg te vallen verliezen veel logo’s hun leesbaarheid, herkenbaarheid en charme. Mede hierom is het extreem belangrijk om een logo clean en simpel te houden, ongeacht welk (omvangrijk) verhaal erachter schuil gaat. Voor Drent & Bosker zijn er in principe drie schrijfwijzen:

  • Er is het standaard logo van de namen boven elkaar met het &-teken achter Drent.
  • Er is een versie van de namen naast elkaar, voor op verschillende media waarin dat optimaal zou zijn (bijvoorbeeld brede maar minder hoge (landschapsmodus) situaties.
  • En er is een variant van alleen de initialen waar de ruimte voor de totale bedrijfsnaam (bijvoorbeeld in het website/favicon) extreem beperkt is.

Logo-schaalbaarheid

Schaalbaarheid (hoe een design werkt op groot en klein formaat) is een heel belangrijk onderdeel bij logo-design. Een logo werkt over het algemeen prima op groter formaat maar zodra het kleiner geschaald wordt en er details beginnen weg te vallen verliezen veel logo’s hun leesbaarheid, herkenbaarheid en charme. Mede hierom is het extreem belangrijk om een logo clean en simpel te houden, ongeacht welk (omvangrijk) verhaal erachter schuil gaat. Voor Drent & Bosker zijn er in principe drie schrijfwijzen:

  • Er is het standaard logo van de namen boven elkaar met het &-teken achter Drent.
  • Er is een versie van de namen naast elkaar op verschillende media waarin dat optimaal zou zijn (bijvoorbeeld brede maar minder hoge (landschapsmodus) situaties.
  • En er is een variant van alleen de initialen waar de ruimte voor de totale bedrijfsnaam (bijvoorbeeld in het website/favicon) extreem beperkt is.
De schaalbaarheid van het Drent & Bosker logo weergegeven in een trechtervorm
Logo-schaalbaarheid horizontaal weergegeven, van het volledige logo tot het D&B-icoon

Kleurgebruik

Het kleurgebruik voor Drent & Bosker is inmiddels duidelijk. Deze portfolio-case toont namelijk exact die kleuren. Te beginnen met een frisse geeltint voor de warmte.
Deze kleur (überhaupt ‘warme kleuren’) bleek vrijwel ongebruikt binnen de administratieve branche en was daardoor uiterst uniek en opvallend. Tevens is het een warme tint, wat erg goed past bij het ‘persoonlijk-betrokken / huiskamergevoel’ dat Drent & Bosker beoogt binnen de band met de klant. Bereikbaar. Benaderbaar… Met korte lijnen en informeel contact. Geel is hier uiterst geschikt voor. Ook is het een positieve tint. Het is (innen de kleurenpsychologie bekend als de kleur van de zon, zomer, luchtigheid (niet zwaar op de hand), optimisme, evenwicht, creativiteit en werklust.
Het geel wordt in balans gehouden (zodat het design niet té frivool en losjes wordt) door ongebroken zwart, wit en af en toe een lichte grijstint.
Wit voor het overzicht en de optimale leesbaarheid daar waar meer tekst gewenst is. En zwart voornamelijk voor een zo groot mogelijk contrast met het geel en wit en als meer ‘zakelijke’ tegenhanger voor de geeltint.
Gezamenlijk vormt dit een combinatie van kleuren die vooralsnog uniek lijkt in de administratieve branche.

Vier kleurvlakken (geel, wit, zwart en een grijs verloop) die de kleuren van de visuele identiteit van Drent & Bosker bepalen
Vier kleurvlakken (geel, wit, zwart en een grijs verloop) die de kleuren van de visuele identiteit van Drent & Bosker bepalen
Alle ontwerpen van het huisstijl drukwerk voor Drent & Bosker
Een conceptposter/advertentie voor Drent & Bosker met slogan

Visual Identity Book & Huisstijl Ontwerp

Na het ontwikkelen van het logo en het bepalen van de kleurencombinatie voor Drent & Bosker is de visuele identiteit beschreven in een zogenaamd ‘Identity Book’. Dit boekje omschrijft de visuele identiteit en beschrijft hoe de verschillende elementen van deze identiteit (het logo in verschillende afmetingen, kleuren, lettertypes, fotobewerkingen etc.) toegepast dienen te worden. Tevens vertelt het boekje over de afwegingen en beslissingen die geleid hebben naar de identiteit zelf. Kortom, een antwoord op de vraag; wat is het verhaal achter dit ontwerp?
Wanneer een dergelijke boekje klaar is vloeien de andere te ontwerpen producten zoals het drukwerk en de website hier zeer natuurlijk en moeiteloos uit voort. Het visuele ‘DNA’ van het bedrijf is immers bepaald en als door die bril naar de rest van het project gekeken wordt, worden veel van de daaropvolgende beslissingen vanzelfsprekend. Vooral daarom is het goed uitdenken van de visuele identiteit (identity design) van een bedrijf als eerste stap enorm waardevol.
Verspreid over deze case-pagina zijn een aantal gedrukte huisstijl producten te zien die zijn ontworpen nadat de identiteit was vastgesteld. Zoals visitekaartjes, enveloppen, briefpapier, relatiegeschenken en natuurlijk de website.

Het omslag van het boekje dat de visuele identiteit van Drent & Bosker omschrijft
De introductiepagina van het identity book van Drent & Bosker

Webdesign

Na het ontwerpen van de visuele identiteit van Drent & Bosker was het zaak om de website aan te pakken. De oude website was inmiddels zeer gedateerd en hoewel deze wel ‘responsive’ was (zichzelf aanpassend aan smartphones en tablets) was een redesign vrij dringend. Tevens luidde de bestaande website nog de naam van één van de twee administratiekantoren. Namelijk die van administratiekantoor Stulp. (Het kantoor Raedthuys had nog geen eigen website.
De voornaamste taak was om een zeer beknopte en overzichtelijke website te ontwerpen die zou dienen als een verzorgd online visitekaartje voor de klanten. Een wervende of informerende functie had aanzienlijk minder prioriteit omdat het kantoor door haar persoonlijke betrokkenheid ontzettend veel klandizie via-via bereikt. En voor de vraagstukken van informatieve aard staan de werknemers van Drent & Bosker de klant het liefst persoonlijk te woord.
Het hoofddoel van de site was het snel beschikbaar maken van de belangrijkste informatie (contactinformatie en een basic ‘wat wij doen’ omschrijving) en het wekken van een transparante en persoonlijke indruk.

Ook was het natuurlijk van belang om de nieuwe visuele identiteit aan de wereld te tonen via de website en bestaande klanten kennis te laten maken met het nieuwe imago van het kantoor. Binnen deze portfolio case zijn al enkele shots van de website te zien. En hieronder staat een voor/na afbeelding waarbij door te slepen met de grijze cirkel eenvoudig een ‘before and after’ verschil te zien is tussen de oude (links) en de nieuwe website (rechts).
Het eindresultaat is een beknopte, frisse en strakke website die is ingedeeld in 6 korte, logische secties (Welkom, Wat, Hoe, Wie, Waarom en Contact). De site maakt effectief gebruik van strakke typografie en grote koppen (wat goed aansluit op het logo) omdat deze de website erg snel ‘scanbaar’ maken voor de bezoeker.
Daarnaast opent de website met een foto van beide bedrijfseigenaren alsof ze de bezoeker welkom heten bij de voordeur. Dit om een zo persoonlijk mogelijke indruk te wekken.

Webdesign

Na het ontwerpen van de visuele identiteit van Drent & Bosker was het zaak om de website aan te pakken. De oude website was inmiddels zeer gedateerd en hoewel deze wel ‘responsive’ was (zichzelf aanpassend aan smartphones en tablets) was een redesign vrij dringend. Tevens luidde de bestaande website nog de naam van één van de twee administratiekantoren. Namelijk die van administratiekantoor Stulp. Het kantoor Raedthuys (te Groningen) had nog geen website.
De voornaamste taak was om een zeer beknopte en overzichtelijke website te ontwerpen die zou dienen als een verzorgd online visitekaartje voor de klanten. Een wervende of informerende functie had aanzienlijk minder prioriteit omdat het kantoor door haar persoonlijke betrokkenheid ontzettend veel klandizie via-via bereikt. En voor de vraagstukken van informatieve aard staan de werknemers van Drent & Bosker het liefst de klant persoonlijk te woord.
Het hoofddoel van de site was het snel beschikbaar maken van de belangrijkste informatie (contactinformatie en een basic ‘wat wij doen’ omschrijving) en het wekken van een transparante en persoonlijke indruk.
Ook was het natuurlijk van belang om de nieuwe visuele identiteit te tonen binnen de website om herkenbaarheid te wekken, een verzorgde nieuwe indruk te wekken en bestaande klanten kennis te laten maken met het nieuwe imago van het administratiekantoor. Binnen deze portfolio case zijn al enkele shots van de website te zien. En hieronder staat een voor/na afbeelding waarbij door te slepen met de grijze cirkel eenvoudig een ‘before and after’ verschil te zien is tussen de oude (links) en de nieuwe website (rechts).
Het eindresultaat is een beknopte, frisse en strakke website die is ingedeeld in 6 korte, logische secties (Welkom, Wat, Hoe, Wie, Waarom en Contact). De site maakt effectief gebruik van strakke typografie en grote koppen (wat goed aansluit op het logo) omdat deze de website erg snel ‘scanbaar’ maken voor de ogen.
De site opent met een foto van beide bedrijfseigenaren alsof ze de bezoeker welkom heten bij de voordeur. Dit om een zo persoonlijk mogelijke indruk te wekken.

Vliegende (gele) iconen/favicons met het D&B-monogram op een grijze achtergrond

Nawoord

Dit project werd afgerond in het eerste kwartaal van 2017 en besloeg om en nabij de 80-100 uur aan werk mijnerzijds (incl. enkele later toegevoegde producten zoals een fraaie “Wij hebben een nieuwe naam”-kaart voor de bestaande klanten).
Foto’s en teksten (waar in overleg nog het één en ander door mij aan veranderd is) werden aangeleverd door de klant zelf en er is (zoals altijd) veelvuldig tussentijds overleg geweest om de voortgang en ideeën te bespreken.
Het eindresultaat is een strakke, uiterst verzorgde en frisse visuele identiteit voor het administratiekantoor welke die zeer uniek oogt in deze branche.

Projectdetails

Klant: Drent & Bosker
Diensten: Identity Design, Webdesign, Huisstijl Ontwerp, Logo Ontwerp, Consultancy
Datum oplevering: medio 2017
Website: drentbosker.nl

Deel dit project via