Design rationale document. Rabobank.com

Maat: px

Weergave met pagina beginnen:

Download "Design rationale document. Rabobank.com"

Norbert Janssens
6 jaren geleden
Aantal bezoeken:

1 Design rationale document Rabobank.com

2 Inhoudsopgave Inleiding Design values Algemene rationale Styleguide 2

3 Inleiding In 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. 3

4 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. 4

5 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. 5

6 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. 6

Om zo een gelijkwaardige verhouding tussen de bank en de bezoeker van de website

7 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. 7

De bezoekers navigeren daarom vooral via de content.

8 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. 8

9 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. 9

Door slimme hiërarchische keuzes te maken is de website voor elk moment

10 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. 10

Een goed voorbeeld hiervan is de verandering in typografie.

11 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. 11

com daarom een duidelijkere hierarchie aangebracht.

12 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. 12

Onderscheid Er bestaan veel verschillende

13 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. 13

Daarom is de grens opgezocht van wat wel en niet kan.

14 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. 14

15 Styleguide Grid Het 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 headerafbeelding op de homepage. 15

16 Kleuren Er 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. Basiskleuren Steunkleuren Achtergrondkleur 16

17 Typografie Myriad 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 17

18 Grafische elementen HUB element Quote block Vierkante ankeilers Social buttons Primaire buttons Secondaire buttons Tertiare buttons (intern) 18

19 Tertiare buttons (extern) Social feedmagnet element Avatar Iconen pijlers 19

Vergelijkbare documenten

edenspiekermann_ hva Stijlgids HvA responsive website

edenspiekermann_ hva Stijlgids HvA responsive website April 2014 Versie 1.0 HvA, Stijlgids responsive website - Februari 2014 - Versie 1.0 2 Inhoud Introductie 3 Concept webstijl 4 3-koloms grid homepage