Rabobankboerenaard en de internationale uitstraling van de bank. Verhalend Op de .com van een...

Rabobank.com

Design rationaledocument

rabo-designrationale-v12

InhoudsopgaveInleiding

Design values

Algemene rationale

Styleguide

3

4

5

14


InleidingIn dit document zijn de ontwerpuitgangspunten vastgelegd voor de vernieuwde Rabobank.com. Aan de hand van deze uitgangspunten is ontworpen en getoetst. Ze geven bovendien inzicht in de denkprocessen en de keuzes die zijn gemaakt.


Design values

Aan het begin van het scrumproject voor Rabobank.com zijn er vier design values opgesteld. Het eindproduct, de Rabobank.com, moest hieraan voldoen.

Internationaal geladen

De Rabobank is een typisch Nederlandse bank. Nuchter, duidelijk en met een boerenkarakter. Iedereen in Nederland kent de bank zo. Maar in het buitenland is dat anders. Daar wil je naast de Nederlandse roots ook het internationale karakter uitstralen.

Vandaar dat in het design de balans is gezocht tussen de nuchtere Nederlandse boerenaard en de internationale uitstraling van de bank.

Verhalend

Op de .com van een internationale bank moet je inzicht geven in de jaarcijfers, het productaanbod en hoe je contact op kunt nemen.

Maar naast deze harde en koude content tonen verhalen waar de bank voor staat. Verhalen over mensen, binnen of buiten de bank. Mensen die voelen wat de bank teweeg brengt. Mensen die uitstralen wat de Rabobank ook uitstraalt.

Gidsend

De .com bedient zeer uiteenlopende doelgroepen. Van pers tot investeerders. Van grote corporates tot verdwaalde internationale Rabobank klanten. Al deze gebruikers hebben een eigen domein binnen of soms buiten de site. Navigatiestromen zijn, naast de heldere navigatie, afgevangen met een HUB-element. Een opvallend oranje blok op de homepage dat elke doelgroep de goede kant op stuurt.

Flexibel

De term ‘flexibel’ heeft meerdere betekenissen binnen dit project. Allereerst moet de Rabobank.com responsive zijn en zich aanpassen naar verschillende schermformaten. Met flexibel wordt ook de opbouw van de verschillende pagina’s bedoeld. Overzichtspagina’s (bijvoorbeeld Duurzaamheid, Jaarverslagen of Rabo Development) bestaan uit verschillende elementen. Dit geldt ook voor artikelen en statische contentpagina’s. Stakeholders en de redactie kunnen met de elementen zelf een pagina bouwen.


Algemene rationale

De vorige versie van de Rabobank.com is flink onder de loep genomen. De bevindingen zijn samen met de merkwaarden van de Rabobank vertaald naar de algemene design rationale.


Een homepage centraal

Een centraal vertrekpunt dat de rijkheid van de Rabobank toont. Een homepage die in grote visuele blokken laat zien wat er op dit moment speelt binnen de internationale wereld van de bank.


Een persoonlijke en benaderbare bank

Er is voor een benaderbare Tone of Voice gekozen. Om zo een gelijkwaardige verhouding tussen de bank en de bezoeker van de website te creëren. Daarom staat op de homepage bijvoorbeeld een quote. Een quote van of over de Rabobank. Hiermee wordt duidelijk waar de Rabobank voor staat.


Navigeren via content

Er staat veel content op de site. Heel veel content. Dit allemaal in een simpele en heldere navigatie oplossen is een illusie. De bezoekers navigeren daarom vooral via de content. Navigatie of ankeilers worden getoond daar waar ze relevant zijn. Zo houd je altijd een heldere en simpel te gebruiken site.


Magazine look & feel

Een rijke user experience. Dat was het doel. Vandaar dat op contentniveau veel visuele verrijking is toegevoegd. Eigenlijk zoals dat ook in de folders, flyers en magazines van de Rabobank gebeurt. Prachtige foto’s, grote titels, visueel onderscheidende leads, dropcaps en quotes. Allemaal voorbeelden van de visuele verrijking die de site een betere user experience geven.


Responsive

Een volledig responsive website geoptimaliseerd voor alle formaten. Van grote beeldschermen tot mobiele telefoons. Door slimme hiërarchische keuzes te maken is de website voor elk moment geoptimaliseerd. Of de gebruiker nou achter de computer zit of op een mobiele telefoon snel wat op moet zoeken.


Open en toegankelijk

Als bank wil je openheid en transparantie uitstralen. Ook visueel is dat belangrijk. Inkadering wordt daarom, als het kan, vermeden. Met open en toegankelijk wordt ook duidelijkheid bedoeld. Een goed voorbeeld hiervan is de verandering in typografie. Zo zijn de letters een slag groter gemaakt: voor lopende tekst is de oude 12px lettergrootte naar 17px veranderd. Dit nodigt de gebruiker meer uit om te lezen en vereist minder inspanning.


Focus en hierarchie

Het is belangrijk dat het oog van de gebruiker eenvoudig door de content heen gaat. Waar op de vorige Rabobank.com veel elementen op ‘hetzelfde niveau’ stonden, is op de nieuwe .com daarom een duidelijkere hierarchie aangebracht. Deze uit zich door sprekende fotografie, grote visuele ankeliers op overzichtspagina’s, grotere koppen of een lead boven aan een artikel. Er wordt op elke pagina eigenlijk wel een element flink uitgelicht. Hiervandaan wordt het oog naar de rest van de content geleid.


Onderscheid

Er bestaan veel verschillende soorten content op de Rabobank.com. Om dit begrijpbaar te maken voor de gebruiker, is hier een duidelijk onderscheid in gemaakt. Een persbericht ziet er bijvoorbeeld een stuk droger uit dan een magazine artikel.


Subtiel verassend

Op een grote corporate website als de Rabobank.com is er geen ruimte voor gimmicks. Toch hoeft een corporate website niet perse saai of statisch te zijn. Daarom is de grens opgezocht van wat wel en niet kan. Zo bevat de website subtiele hovers, parallax scrolling achtergrond foto’s en andere animaties. De regel hierbij is dat het zacht en rustig moet bewegen, zodat de verrijking vooral niet de overhand krijgt en subtiel aanwezig blijft.


Styleguide

GridHet grid voor de Rabobank.com bestaat uit 12 kolommen van elk 80 pixels breed, zonder gutter (of gutter van 0px). De 12 kolommen worden gebruikt als een veilig gebied, wat 960 pixels breed is. Dit past dan weer goed binnen 1024 pixels en is dus op desktop en landscape tablet te zien. Buiten dit veilige gebied loopt het grid nog twee kolommen door aan beide kanten. Waar het (esthetisch) kon, zijn elementen die geen tekst bevatten doorgetrokken naar deze buitenste kolommen. Een goed voorbeeld hiervan is de header-afbeelding op de homepage.


KleurenEr is gebruik gemaakt van het vaste kleurenpallet van de Rabobank. De hoofdkleuren oranje en blauw zijn het meest prominent aangebracht, het liefst in combinatie met elkaar om herkenbaarheid van de Rabobank te vergroten. Daarnaast is er gebruik gemaakt van secondaire kleuren uit het pallet, waar de voorkeur vaak uitging naar ‘hemelsblauw’.

BasiskleurenBasiskleuren

Steunkleuren

Achtergrondkleur


TypografieMyriad Pro is de identiteitsbepalende letter van de Rabobank en is overal gebruikt. Voor een meer magazine-achtige look, is er een schreef letter aan toegevoegd: Cambria. Deze komt uit de huisstijl van de Rabobank en werd voorheen alleen nog maar in drukwerk gebruikt. Op de Rabobank.com wordt deze letter gebruikt bij de lead van een artikel en bij functieomschrijvingen van mensen.

h1

h2

h3

h4

Lead

Paragraph

List

Bullets

Hyperlink

Titel met functieomschrijving


Grafische elementen

HUB element

Quote block

Vierkante ankeilers

Social buttons

Primaire buttons

Secondaire buttons

Tertiare buttons (intern)


Social feedmagnet element

Avatar

Iconen pijlers

Tertiare buttons (extern)

Rabobankboerenaard en de internationale uitstraling van de bank. Verhalend Op de .com van een...

Documents

Transcript of Rabobankboerenaard en de internationale uitstraling van de bank. Verhalend Op de .com van een...