rabobankboerenaard en de internationale uitstraling van de bank. verhalend op de .com van een...
TRANSCRIPT
Rabobank.com
Design rationaledocument
rabo-designrationale-v12
InhoudsopgaveInleiding
Design values
Algemene rationale
Styleguide
3
4
5
14
rabo-designrationale-v13
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.
rabo-designrationale-v14
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.
rabo-designrationale-v15
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.
rabo-designrationale-v16
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.
rabo-designrationale-v17
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.
rabo-designrationale-v18
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.
rabo-designrationale-v19
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.
rabo-designrationale-v110
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.
rabo-designrationale-v111
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.
rabo-designrationale-v112
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.
rabo-designrationale-v113
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.
rabo-designrationale-v114
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.
rabo-designrationale-v115
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.
rabo-designrationale-v116
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
rabo-designrationale-v117
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
rabo-designrationale-v118
Grafische elementen
HUB element
Quote block
Vierkante ankeilers
Social buttons
Primaire buttons
Secondaire buttons
Tertiare buttons (intern)
rabo-designrationale-v119
Social feedmagnet element
Avatar
Iconen pijlers
Tertiare buttons (extern)