Bibliotheek.nl online styleguide november 2016
Index Style basics Logo gebruik....4 Kleur...6 Buttons... 7 Grid / Margins....8 Typografie...9 Componenten Het hoofdmenu.... 13 Catalogus/nbc comp....14 Banners... 15 Boekenviews....16 Aanduiding materiaalsoort 19 TDP header... 21 Formulieren/invoervelden.. 22 Paginering...23 Tabellen...23 Agenda... 24
Style basics Allereerst de basis van de Bibliotheek.nl stijl. Hoe werkt het logo, wat zijn de kleuren, margins en het grid en uiteraard de typografie.
Logo gebruik Het de Bibliotheek logo is dynamisch in gebruik. Afhankelijk van de pagina kan het logo op een andere manier gebruikt worden, of kunnen er onderdelen toegevoegd of weggehaald worden. Basislogo Het basislogo in BNL donkergrijs met het BNL oranje plectrum De margin rondom het logo is minimaal 1x de x-hoogte van het woordmerk Logo op kleur achtergrond Dit is een volledig witte versie van het logo. De pijltjes en stip zijn uit het plectrum gehaald waardoor je de achtergrond kleur er doorheen ziet.
Lokale bibliotheek logo De naam van de lokale Bibliotheek onder de Bibliotheek. In BNL oranje. Corps is 75% van het corps in de Bibliotheek. Deze versie van het logo kan op wit, fotografisch en kleur achtergrond gebruikt worden op de zelfde manier als het basislogo. Wanneer het op een kleur achtergrond staat wordt de lokale naam, net als het basislogo, wit. Minimaal logo Dit is alleen het plectrum. Diapositief. Zonder woordmerk. Deze versie wordt gebruikt op kleine schermen waar geen ruimte is voor de volledige versie van het logo en wanneer het hoofdmenu als volledige balk gebruikt wordt (zie componenten, header)
Kleur Primaire kleuren BNL oranje HEX #ff7320 RGB 255 / 115 / 32 BNL donkergrijs HEX #505450 RGB 80 / 84 / 80 Wit HEX #ffffff RGB 255 / 255 / 255 Grijs HEX #f7f7f7 RGB 247 / 247 / 247
Buttons Het aantal buttonstijlen wat gebruikt wordt is teruggebracht van 4 naar 3. Dit omdat het bij de tertiaire en quartaire stijl niet altijd duidelijk was wanneer welke gebruikt moest worden. Hierdoor werden deze willekeurig door elkaar heen gebruikt. Primair Er kan maximaal 1 primaire button op een pagina zijn. Dit is uiteraard voor de primaire actie op de pagina. Bijvoorbeeld het bestellen van een boek. Tertiair Tertiair is voor alle overige, niet belangrijke buttons die geen inline tekstlink kunnen zijn. Bijvoorbeeld de lees meer buttons. Secundair Secundair kan vaker op een pagina voorkomen. Maar wordt vooral gebruikt voor acties die óók belangrijk zijn. Bijvoorbeeld het aanvragen van een andere versie van een boek, het laden van meer resultaten, of op de oude grid versie van de home het inloggen. Inline tekstlink Inline tekstlinks hebben een underline die op hover oranje wordt. Dit kan in body copy, maar eventueel ook in intro s en zelfs in titels gebruikt worden indien nodig.
Grid / Margins Het grid heeft als basis 1200px met vaste witwaarden aan beide kanten. Homepage lokale bibliotheken 383,5px 383,5px 383,5px 25px 25px witruimte 20px rechts/links witruimte 20px rechts/links witruimte 20px rechts/links Contentdetailpagina s hebben 1 kolom met 220px aan beide kanten en 760px in het midden. Zoekresultaten en contentdetailpagina s Homepage landelijk met een linkermenu hebben 67px aan beide kanten met een witwaarde van 67px om de 2 kolommen te scheiden. 40px 1066px 40px Dit grid wordt gebruikt om de pagina in grote lijnen op te zetten. Afstanden en afmetingen van grote content blokken. De margins binnen een blok (bijvoorbeeld margins tussen items in het menu of magins om een button heen) worden nog wel met vaste afstanden gedaan. Dit omdat je anders met afstanden van 1% op mobiel alles te dicht op elkaar krijgt. Contentdetailpagina 1 kolom 440px 760px 440px Contentdetailpagina 2 kolommen (TDP) 40px 350px 40px 730px 40px Zoekresultatenpagina 40px 255px 40px 865px 40px
Typografie de Bibliothe De online typografie van de Bibliotheek is gebaseerd op de offline typografie. In deze nieuwe online stijl gaan we dus ook het huisstijl font van de Bibliotheek gebruiken (the Mix). Webfont Het huisstijl font the Mix is via de maker van dit font voor een eenmalig bedrag af te kopen voor online gebruik. Zie: http://www. lucasfonts.com/webfonts/ voor meer informatie hierover. Hoe meer stijlen/domeinen je het font voor koopt hoe goedkoper het per font is. Voor de Bibliotheek websites hebben we in principe slechts 2 stijlen van het font nodig. De Semibold Plain en de Bold. zie: http:// www.lucasfonts.com/fonts/themix/themix/styles/ is van ons allemaal Fallback fonts Voor body tekst wordt arial als font gebruikt. Deze wordt niet als webfont geëmbed en zal dus niet op alle devices (vooral Windows) te zien zijn. Ook het huisstijl font the Mix is mogelijk niet altijd te zien, op oudere devices en browsers die niet naar de laatste versie zijn geüpdate. Hier de fallback fonts: AaBbCc the Mix -> Arial (bold) Arial 1234567890 the Mix Semibold / Helvetica Neue Regula
Iets over letters Letters als in typografie H1, the Mix, Semibold, BNL oranje 50-70 px H2, the Mix, Semibold, BNL donkergrijs, 30-40 px De eerste paar regels/alinea van een artikel begint met een iets grotere tekst. Lekker om de aandacht te pakken en vooral ook om even snel in een paar zinnen uit te leggen waar de rest van het artikel eigenlijk over gaat. Intro, Arial bold, BNL donkergrijs, 18-22 px De volgende alinea heeft een titel Gewone broodtekst is ook lekker leesbaar, maar hoeft zeker niet zo groot te zijn als de intro teksten. Dit is eigenlijk de echte content waar alles over gaat. Kan wel heel veel tekst zijn hoor. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. H3, the Mix, Semibold, BNL donkergrijs, 22-24 px Body, Arial, BNL donkergrijs, 16-18 px De standaardversie van het Lorem ipsum stamt uit circa 1500 Bron, Arial, #bbbbbb, 13-15 px Label dat o.a. op de searchresults pagina gebruikt wordt H4, the Mix, Semibold Plain, BNL donkergrijs, 18-20 px De Bibliotheek is van ons allemaal Iemand uit de Bibliotheekwereld Quote, the Mix, Semibold Plain, BNL oranje, 18-20 px Quote bron, the Mix, #bbbbbb, 15-17 px
Grote titels content pagina De grote titels zorgen voor de juiste hoeveelheid aandacht en karakter op een pagina. Je oog blijft hangen en je wilt verder lezen. De titels zijn bedacht in combinatie met een afbeelding naast de titel in de plectrumvorm, dit vormt een eenheid. Uitlijning elementen en typografie De uitlijning van elementen is standaard links behalve bij actiematige pagina s (categoriepagina s, lid worden etc.), dan worden deze gecentreerd weergegeven en worden de titels oranje. Bladspiegel Bij tekstpagina s is gekozen voor een kleinere bladspiegel, omdat 1200px breed tekst lezen niet wenselijk is.
Componenten Op de volgende pagina s staat een zo uitgebreid mogelijke uitleg over alle losse onderdelen van de site. Het hoofdmenu, verschillende soorten blokken content op de collectie pagina, wat voor soort content blokken wel en niet achter elkaar gebruikt kunnen worden en hoe vaak ze maximaal op een pagina mogen staan, paginering etc.
Het hoofdmenu Het standaard hoofdmenu. Het is de bedoeling dat Bibliotheken dit menu, met deze menu items gaan overnemen. Bij search moet de waar bent u naar op zoek tekst volledig leesbaar zijn. Dropdown Wanneer het scherm te klein wordt om zelfs dit volledig te laten zien wordt gekozen voor het kleinste menu waarbij ook de search achter de hamburger komt te zitten en het logo in de meest minimale vorm gebruikt wordt. Mochten Bibliotheken de behoefte hebben om achter de hoofdmenu items nog meer links te plaatsen kan dat door middel van dropdowns. Wanneer je over het item hovert met je muis (of tapt op touch) opent de dropdown.
Catalogus en nbc componenten Collectie hero image Op de categoriepagina begin je altijd met 1 groot uitgelicht item. Bijvoorbeeld een speciale actie, themaweek of een nieuwe service die de Bibliotheek aanbiedt. Dit component bestaat uit 1 grote plaat, een h2 titel, korte intro tekst en een grote primaire button. De tekst en button hebben een margin aan de linkerkant van 10% en lopen op grote schermen tot maximaal 50% door, normale/medium schermen tot 75% en kleine schermen de volledige breedte (met 5% margin)
Banners Titel, tekst en button met een afbeelding op de achtergrond. Bij actiematige pagina s worden de titels oranje. De content kan ook gecentreerd worden bij een actiepagina. Ook kan er gekozen worden voor twee kolommen tekst of een afbeelding naast de tekst.
Boekenviews Standaard rijtje met boeken. Als ze niet meer binnen je viewport passen komen er pijltjes links en rechts in beeld. Onder de pijltjes zit een wit-transparante gradient zodat je duidelijker ziet dat er nog meer boeken komen (Staat niet in design. Zoals oude site) De titel staat altijd gecentreerd. Het is mogelijk om onderin het component een tertiaire button toe te voegen naar het volledige overzicht. Boeken grid Zelfde als de boekenlijst, alleen dan zonder pijltjes, maar op 2 regels.
Videos Zelfde werking als de boekenlijst. Titel gecentreerd, pijltjes wanneer het niet allemaal in beeld past, thumbnail met titel en bron er onder. Mogelijk om een tertiaire button onderin te plaatsen naar het totaal overzicht.
Boeken thema uitgelicht Rijtje boeken op een gekleurde achtergrond. Aan de linkerkant een titel, korte intro tekst en tertiaire button naar het volledige overzicht. Wanneer de boeken niet allemaal in 1 keer in beeld passen kan ook hier een pijltje bij komen om er doorheen te scrollen. In dit geval zit er alleen rechts een pijltje. Het is ook mogelijk om een foto in de achtergrond te gebruiken. Deze is dan maximaal 50% van de totale breedte. Over de foto heen zit een gradient naar de achtergrond kleur. Deze achtergrond/gradient kleur is dan ook de meest voorkomende kleur uit de foto. 2 boeken uitgelicht (categoriepagina) Cover boek, titel item, auteur, korte intro.
Aanduiding materiaalsoort Iconen voor verschillende materialen Hier zie je een overzicht van de huidige iconen die onder andere gebruikt worden op de TDP.
Hoe vaak en welke volgorde Deze NBC en collectie componenten kunnen niet allemaal oneindig vaak en op elke willekeurige manier door elkaar heen gebruikt worden. Hier een paar regels voor het gebruik van deze componenten. Componenten met een fotografische of gekleurde achtergrond (zoals bijvoorbeeld een uitgelichte categorie) kunnen niet direct achter elkaar gebruikt worden. Als er meerdere van op de pagina staan moet er altijd een component zonder achtergrond (zoals bijvoorbeeld het boeken grid) voor en/of na komen. Er mogen niet te veel componenten met fotografische/gekleurde achtergrond op een pagina staan. Voor elk component met foto/ kleur achtergrond moeten 2 componenten zonder achtergrond gebruikt worden. De pagina kan nooit beginnen of eindigen met een foto/kleur component. (de collectie hero is hierop uiteraard de uitzondering. Deze kan juist alleen bovenaan de pagina gebruikt worden) De foto/kleur en geen achtergrond componenten moeten niet om en om gebruikt worden (als in geen, kleur, geen, foto, geen ) Daar moet iets meer afwisseling in zitten door bijvoorbeeld 2 componenten zonder achtergrond achter elkaar te plaatsen. Foto/kleur achtergrond componenten moeten niet te vaak gebruikt worden. Zeker de uitgelichte componenten. Deze raken hun kracht kwijt wanneer ze te vaak voorkomen. Uitgelichte categorieën, thema s en boeken kunnen maximaal 1 keer gebruikt worden op een pagina.
Productpagina (TDP) header Op productpagina s zoals de titeldetail pagina en jeugdpagina s (interactieve animaties, hoorcolleges, etc.) hebben een gekleurde header waar de paginatitel op staat. De kleur van deze header komt van de afbeelding van het product. Hiervoor wordt de meest voorkomende kleur gekozen. Deze wordt met 70% opacity op een BNL donkergrijze achtergrond gezet. Dit zorgt er voor dat de titel altijd leesbaar blijft, zelfs als de meest voorkomende kleur wit is. Wanneer de afbeelding vooral uit wit/grijstinten bestaat en er ergens een klein stukje kleur zit zal deze kleur gekozen worden als meest voorkomende kleur. De afbeelding is 310px. De maximale hoogte van de afbeelding is altijd 1,6x die breedte. Er wordt hierbij dan uitgegaan van een gemiddeld boek met een 2x3 verhouding. Afbeeldingen kunnen niet hoger of breeder dan dat formaat worden. Zelfs als de cover bijvoorbeeld een 2x5 of 2x0.5 verhouding heeft valt de afbeelding nooit buiten het 2x3 vlak. De producttitel staat in principe altijd op 1-2 regels. Het kan voorkomen dat een titel te lang is voor 1 regel doordat de subtitel ook in de titel staat. vb: Ik ben Malala; het verhaal van het meisje dat opkwam voor onderwijs en door de taliban werd neergeschoten. In zo n geval schaalt de tekst automatisch mee om eerst te proberen het toch op 1 regel te houden en vervolgens maximaal op 2 regels. Op groot scherm gaat het font dan van 70 naar minimaal 50pt. Op klein scherm van 50 naar minimaal 30pt. De afbeelding van het boek staat in de hoogte gecentreerd op de onderste rand van het kleurvlak.
conceptafbeeldingen Formulieren en invoervelden Invoervelden nemen de volledige breedte van de content (760px) aan (40px margins aan de zijkanten) met het label in het veld zelf. Een actief veld heeft een kleine dropshadow om de focus duidelijk te laten zien Wanneer een veld verkeerd of niet is ingevuld krijg je een melding onder het veld (op kleinere schermen komt deze er onder) en krijgt het veld een rode rand
Paginering Op overzichtspagina s zoals het nieuwsoverzicht wordt de paginering gebruikt. Er zijn maximaal 10 paginanummers in beeld. Als er meer dan 10 zijn worden de pagina s rondom de huidige selectie getoond en de laatste (paar) pagina s en de pagina s er voor of er tussen worden aangeduid met puntjes. Tabellen Tabellen zijn altijd ruimte vullend. Dwz, 100% binnen de content. Tabellen hebben maximaal 4 kolommen (inclusief de labels kolom) De linker label kolom is altijd 25% van de totale tabel. De overige kolommen vullen automatisch de rest van de ruimte. Op kleine schermen wordt de tabel uit elkaar gehaald en krijg je de informatie per rij te zien. De tabel neemt hier de volledige breedte in. Hierbij is de label kolom altijd 35% van de totale breedte. Naast de standaard tabellen is er ook echt product vergelijkings tabel. Deze wordt bijvoorbeeld gebruikt om de voordelen van een betaald account te laten zien en direct een aanmeld knop aan te bieden. In deze tabel is de informatie gecentreerd ipv links uitgelijnd. Het product wat gepusht wordt krijgt een oranje label en rand met de primaire button onderin. Het andere product krijgt een secundaire button.
Agenda Agendapagina s maken gebruik van een typografisch datumaanduiding in een kader. Bij een uitgelicht agendapunt komt deze aanduiding naast de tekst te staan en komt er een lijst met overige uitgelichte agendapunten in een lijst ernaast te staan die samen het volledige contentvlak bestrijken van 1200px met witruimtes.