Huisstijlhandboek digitaal van de Bibliotheek Versie 0.8
Inhoudsopgave Inleiding 3 Verklarende woordenlijst 4 Basis elementen 5 1. Logo 6 1.1 Beeld 6 1.2 Naam 7 1.3 Toevoeging vestigingsnaam 8 1.4 Grootte 9 1.5 Plaats 10 1.6 Achtergrond 11 2. Kleur 12 2.1 Logo 12 2.2 Kleurenpalet website 13 2.3 Signaalkleuren 14 2.4 Achtergrondkleur widgets 15 3. Typografie 16 4. Vormen 19 4.1 Plectrum 19 4.1.1 Tweevoudig 20 4.1.2 Drievoudig 21 4.1.3 Aanwending 22 4.2 Rechthoek 23 5. Knoppen 24 6. Afbeeldingen 25 6.1 Sfeerfoto s 25 6.1.1 Binnen plectrum 26 6.1.2 Binnen widget 27 6.2 VOB fotomateriaal 28 6.3 In contentpagina 29 6.4 Covers 30 6.5 ImagePlaceholder 32 7. Iconen 33 7.1 Media 33 7.2 Waardering 34 7.3 Weergave 35 7.4 Foutmelding 36 7.5 Delen 37 Layout en structuur 38 8. Grid 39 9. Navigatie 40 9.1 Header 40 9.2 Footer 41 9.3 Submenu 42 9.4 Tabs 43 9.5 Paginering 44 10. Pagina s 45 10.1 Homepage 45 10.2 Overzichtspagina s 46 10.2.1 Nieuws 47 10.2.2 Thema 48 10.3 Zoeken 49 10.3.1 Listview 50 10.3.2 Gridview 51 10.4 Detailpagina s 52 10.4.1 Titeldetail 53 10.4.2 Content en nieuws 54 10.5 Formulieren 55 Widgets 56 11. Basis 57 11.1 Direct plaatsbare widgets 58 2
Inleiding Dit huistijlhandboek laat zien hoe de huisstijl van de Bibliotheek online wordt toegepast. De richtlijnen en specificaties dienen ter ondersteuning van de ontwikkeling van alle nieuwe digitale media uitingen. De webstijl zoals gespecificeerd in dit document is gebaseerd op de visuele identiteit van de Bibliotheek die in 2009 is geïntroduceerd. De richtlijnen voor deze visuele identiteit zijn vastgelegd in meerdere documenten. De website s van de Bibliotheek dienen te voldoen aan de webrichtlijnen die te vinden zijn op webrichtlijnen.nl. Deze richtlijnen gaan over het ontwerpen, bouwen en beheren van websites. Ze zijn gebaseerd op internationale standaarden voor kwaliteit en toegankelijkheid. En op in de praktijk beproefde oplossingen van professionals. Ze zijn een handig instrument om te waarborgen dat de website voor iedereen werkt en op moderne wijze is gebouwd. Er is ook Front-End documentatie aanwezig. Vraag uw contactpersoon bij Stichting Bibliotheek.nl naar meer informatie. 3
Verklarende woordenlijst Corpsgrootte De grootte van het gebruikte lettertype. In dit document wordt naast de corpsgrootte soms ook de interlinie (regelafstand) vermeldt. Bijvoorbeeld 12/18 px. #... Een coderingssysteem voor het definiëren van kleuren op beeldschermen. De code bestaat uit 6 getallen, cijfers of een combinatie van beiden en wordt vooraf gegaan door #. Oranje is bijvoorbeeld #FF7320. Widget Contentblokken binnen de website die je los kunt beheren. Omkadering... Tooltip Een informatieve tekst, welke verschijnt als de gebruiker de cursor over een item laat gaan. 4
Basis elementen
1. Logo 1.1 Beeld Er is sprake van een woordbeeld en een vignet. Deze twee elementen vormen samen het logo. Online wordt alleen gebruik gemaakt van het horizontale logo. Deze versie neemt minder ruimte in op het scherm waardoor extra ruimte voor de content van de pagina wordt gecreëerd. Het gebruik van het compacte logo voor de website is niet toegestaan. Woordbeeld Vignet 6
1.2 Naam Het woordmerk (naam) heeft een specifieke woordcombinatie. Specificaties Het lidwoord de moet altijd worden gebruikt in combinatie met Bibliotheek in het logo. Het lidwoord de wordt altijd in kleine letters weergegeven. Bibliotheek begint altijd met een hoofdletter in het logo. 7
1.3 Toevoeging vestigingsnaam Aan het horizontale logo kan een vestigingsnaam worden toegevoegd. De vestigingsnaam wordt onder het vignet en/of onder het woordbeeld geplaatst. Andere varianten zijn niet toegestaan. 1 Om het logo op het beeldscherm goed tot zijn recht te laten komen en goed in verhouding met de rest van het schermontwerp te tonen, is gekozen voor deze weergave. Korte vestigingsnaam [1] 4 of minder tekens. Rechts uitlijnen met woordbeeld. Normale lengte vestigingsnaam [2] 5-14 tekens. Rechts uitlijnen met vignet. Lange vestigingsnaam [3] 15 en meer tekens. Rechts uitlijnen met vignet, niet langer dan ruimte tussen vignet en linkerzijde woordbeeld. Bij langere namen mag de corpsgrootte verkleind worden. 2 3 8
1.4 Grootte Er is een vaste grootte van het logo vastgesteld, gebaseerd op de meest optimale leesbaarheid van de bezoekers van de website. Logo zonder toevoeging [1] 228 x 60 px. Logo met toevoeging [2] 228 x 81 px. 1 2 9
1.5 Plaats Het logo linksboven schept onmiddellijk duidelijkheid en herkenbaarheid voor de gebruiker op welke website en op welke vestigingssite de gebruiker zich bevindt. De eenheid tussen de verschillende websites van de Bibliotheek wordt hierdoor benadrukt. 20 px Het logo wordt op een standaard locatie binnen de website geplaatst [1], namelijk aan de linker bovenzijde van het scherm. Het logo dient op alle pagina s binnen de website op deze locatie zichtbaar te zijn. 20 px 10 px Min. 80 px 1 10
1.6 Achtergrond Specificaties Het logo als beeldmerk kent een witte (#FFFFFF) [1] of lichtgrijze kleur (#EFEFEF) [2] als achtergrond. Het gebruik van een radiaal verloop van #EFEFEF naar #FFFFFF is ook toegestaan. [3] Gebruik van het logo op een gekleurde achtergrond [3] of diapositief [4] is niet toegestaan. 1 2 3 4 5 11
2. Kleur 2.1 Logo Het logo straalt door de gebruikte kleuren een frisheid, levendigheid en helderheid uit. Beeldmerk #505450 80 84 80 Vignet #FF7320 255 115 32 Vignet #FBBD8E 251 189 142 Vignet #FFFFFF 255 255 255 12
2.2 Kleurenpalet website Orange Titels (H1 en H2). Primaire navigatie (hoofdnavigatie en knoppen). Actieve elementen (tabs, ratings). OffBlack Alle typografie behalve de uitzonderingen. MediumGrey Secundaire typografie (publicatiedata, naam auteur). LightGrey Toegepast bij scheidingslijnen. Orange #FF7320 255 115 32 OffBlack #505450 80 84 80 MediumGrey #868686 134 134 134 LightGrey #D0D0D0 208 208 208 13
2.3 Signaalkleuren Specificaties Begeleidende tekst en icoontje bij een niet of verkeerd ingevuld veld. Kleur foutmelding: #FF0000. 14
2.4 Achtergrondkleur widgets De achtergrondkleur van een widget is wit, met een kleurverloop aan de onderkant. Kleurverloop 15
3. Typografie De basistypografie kent 5 niveaus 1. Paginatitel 2. Alineatitel 3. Broodtekst 4. Widgettitel/paginatitel detailpagina 5. Widgetalineatitel 6. Widgettekst 7. Secundaire typografie Zomerhuis met zwembad Verdana Regular, 24 px, #ff7320 Mini Etalage - Aanwinsten Verdana Regular, 18 px, #ff7320 Verfijnen op resultaten Verdana Bold, 15 px, #505450 Voortgang BNL in eerste kwartaal 2012 Verdana Bold, 13 px, #505450 Bibliotheek collectie Verdana Bold, 12 px, #505450 J.K. Rowling Verdana Regular, 11 px, #868686 16
1. Paginatitel Wordt per pagina maximaal één keer gebruikt. Wordt gebruikt als aanhef voor het belangrijkste onderdeel in de pagina. Doorgaans is dit de kop van de contentkolom. Verdana Regular, 24 px, #FF7320. 2. Broodtekst Wordt gebruikt in de alinea s van detailpagina s. Verdana Regular, 13 px, #505450. 3. Alineatitel Wordt gebruikt als titel in de alinea s van detailpagina s. Verdana Bold, 13 px, #505450. 1 2 3 17
4. Widgettitel/paginatitel detailpagina Wordt gebruikt als aanhef voor alle elementen die één trap minder belangrijk zijn dan de paginatitel. Verdana Regular, 18 px, #FF7320. 5. Widgetalineatitel Wordt gebruikt in de alineatitels van widgets en zijkolommen. Verdana Bold, 12 px, #505450. 6 Widgettekst Wordt gebruikt in de alinea s van widgets en zijkolommen. Verdana Regular, 12 px, #505450. 4 7. Secundaire typografie Wordt gebruikt bij metadata. Verdana Regular, 11 px, #868686. 4 5 6 7 18
4. Vormen 4.1 Plectrum Het plectrum kent verschillende verschijningsvormen, welke al dan niet in combinatie met elkaar kunnen worden gebruikt. Het kan worden gebruikt voor versiering of voor het verschaffen van een boodschap. Specificaties De inhoud kan zijn een kleur, foto, tekst of patroon. Het plectrum kan op willekeurige wijze worden gekanteld. #FF7320 en #505450 kunnen in combinatie worden gebruikt. 19
4.1.1 Tweevoudig Specificaties Binnen een combinatie van twee plectra mag er slechts één foto worden gebruikt. [1] #FF7320 en #505450 kunnen in combinatie worden gebruikt. [2] De plectra mogen willekeurig op de foto worden geplaatst. [3] Meerdere plectra mogen niet gecentreerd worden. Op de website kan een combinatie van twee plectra worden getoond. Ook kan een combinatie van twee plectra worden gebruikt bij een (sfeer)foto. 1 2 3 20
4.1.2 Drievoudig Specificaties Het plectrum kan op elke willekeurige wijze worden gekanteld of afgesneden. Er mag slechts één foto worden gebruikt. Binnen een combinatie mogen of alleen kleuren- of zwartwitfoto s worden gebruikt. Meerdere plectra mogen niet gecentreerd worden. 1 2 21
4.1.3 Aanwending Het plectrum kan binnen de website op verschillende manieren worden gebruikt. Bijvoorbeeld binnen een widget [1], of in de footer [2]. 1 2 22
4.2 Rechthoek Afbeeldingen hebben rechte hoeken. Met uitzondering van Fotomateriaal in tabbed banner. Fotomateriaal in footer banner. 10 px Hoeken widgets 10 x 10 px. 10 px 23
5. Knoppen Knoppen die onderdeel zijn van een proces worden rechts uitgelijnd. Knoppen die geen onderdeel zijn van een proces worden links uitgelijnd. Primair Verdana Regular, 12 px, #FFFFFF. In elke pagina kan er slechts eenmaal gebruik worden gemaakt van de primaire knop. Deze knop is gereserveerd voor de belangrijkste actie in de pagina. Secundair Normaal: Verdana Regular, 12 px, #505450. Mouseover: Verdana Regular, 12 px, #FF7320. De secundaire knop wordt toegepast als procesknop bij een secundair formulier. Als er in de pagina al een ander element staat dat de primaire knop bevat. Tertiair Normaal: Verdana Regular, 12 px, #505450. Mouseover: Verdana Regular, 12 px, #FF7320. Primair Secundair Tertiair Kwartair Tekstlink De tertiaire knop wordt gebruikt voor links en acties die belangrijker zijn dan de kwartaire knop. Kwartair Normaal: Verdana Regular, onderstreept, 12 px, #505450. Mouseover: Verdana Regular, onderstreept, 12 px, #FF7320. Tekstlink Normaal: Verdana Regular, onderstreept, 13 px, #505450. Mouseover: Verdana Regular, onderstreept, 13 px, #FF7320. 24
6. Afbeeldingen 6.1 Sfeerfoto s Binnen de website worden foto s gebruikt voor het creëren van een bepaalde sfeer. De foto s hebben in principe geen inhoudelijke functie, maar dienen wel uit te stralen waar de Bibliotheek voor staat: de mens staat centraal. Specificaties Scherpe beelden, scherptediepte is toegestaan. Mensgericht (dus alleen mensen). Niet geposeerd. Fris en helder. Rustige achtergrond. Link met de Bibliotheek of lezen. Kleur. De huisstijl van de Bibliotheek is gericht op de mens, dit moet door de foto s worden ondersteund of versterkt. 25
6.1.1 Binnen plectrum Specificaties Inzoomen op persoon/personen. Inzoomen op gezicht met boek zichtbaar. Zo min mogelijk achtergrond. Passend bij onderwerp. Vormvullend. Een sfeerfoto kan worden geplaatst in een plectrum, al dan niet in combinatie met één of meerdere andere plectra. 26
6.1.2 Binnen widget Binnen widgets wordt een uitsnede van de plectrum gebruikt voor afbeeldingen. 27
6.2 VOB fotomateriaal Er is een aantal rechtenvrije sfeerfoto s beschikbaar. Deze kunnen worden gedownload via landelijkehuisstijl.nl, onder huisstijldatabase. 28
6.3 In contentpagina Intro afbeelding [1] 384 px breed. Eenmalig rechts bovenaan de pagina. Content afbeelding [2] 200 px breed. Links uitgelijnd. Content afbeelding uitgevuld [3] 640 px breed. 1 2 3 29
6.4 Covers Cover afbeeldingen hebben elk hun eigen maatverhoudingen. In de breedte van elke afbeelding is een standaardisatie aangebracht, de hoogte wordt bij te grote afmetingen afgekapt. 1 Afhankelijk van de positie is hiervan een aantal thumbnail formaten bruikbaar. Indien er een afbeelding ontbreekt wordt de ImagePlaceholder (concept) [1] gebruikt. 2 Covers hebben een verhouding van 2 / (max.) 3. Cover list [2] 40 x max. 64 px. Uitlijning onderzijde. 3 Cover volledig [3] 80 x max. 128 px. Uitlijning bovenzijde. Cover [4] 180 x max. 288 px. Uitlijning bovenzijde. 4 30
Cover etalage [3] 120 x max. 192 px. 3 3 31
6.5 ImagePlaceholder Geen afbeelding (Concept) [1] Wordt gebruikt indien een afbeelding van het specifieke mediatype ontbreekt. Afbeeldingsgrootte is afhankelijk van het mediatype. Bij CD s wordt deze bijvoorbeeld vierkant. Geen afbeelding [2] Wordt gebruikt indien een afbeelding van een nieuwsbericht ontbreekt. 200 x 150 px. 1 2 32
7. Iconen 7.1 Media De media iconen worden uitsluitend gebruikt op de zoekresultatenpagina. Specificaties #868686. 16 x 16 px. 16 px 16 px CD-Rom Artikel Bladmuziek Boek Beeld Audio Games Speelleermateriaal Video 33
7.2 Waardering Concept Uitgelicht widget titel [1] #FFFFFF, met #505450 voor aanduiding waardering. 16 x 16 px. Titel detail [2] #868686, met #FF7320 voor aanduiding waardering. 16 x 16 px. 1 2 34
7.3 Weergave Deze iconen worden gebruikt om de weergave van de zoekresultaten aan te passen in gridview [1] en listview [2]. 1 2 35
7.4 Foutmelding Specificaties Validatie van invulvelden (waarschuwing). Icoon is 16 x 16 px. 36
7.5 Delen Er zijn vier manieren om een contentpagina te delen. Hyves Facebook Twitter LinkedIn Deze functionaliteit kan desgewenst worden uitgebreid met eigen wensen. 37
Layout en structuur
8. Grid Specificaties Het grid is gebaseerd op 45 kolommen van 20 px. Het grid is flexibel en kan voor grotere monitoren groter schalen. Minimale breedte: 900 px. Maximale breedte: 1200 px. De 220 px zijkolom heeft een vaste breedte. 900 px Indien een nieuwe website ontwikkeld zal worden, dient een 3 koloms grid te worden aangehouden. 594 px 286 px 286 px 286 px 286 px Homepage 660 px 220 px 220 px 660 px Content- en overzichtspagina s 39
9. Navigatie 9.1 Header Binnen de website kan op diverse manieren worden genavigeerd. De verschillende navigatieknoppen hebben allen een ander uiterlijk, zodat deze knoppen en hun functionaliteit duidelijk zijn te herkennen. Specificaties Maak bondige kopjes. Algemene terminologie (geen jargon). 20 px Logo [1] 60 px hoog. Marge bovenzijde: 20 px. [3] Marge onderzijde: 10 px. [4] Uitlijning linkerzijde gelijk met de typografie van de hoofdnavigatie: 20 px van de linkerzijde. Hoofdnavigatie [2] 40 px hoog. Verdana Regular, kapitaal, 15 px, #FFFFFF. 3 4 1 2 40
9.2 Footer Sfeerbeeld [1] Combinatie van 3 plectra. Kolommen [2] Maximaal 4 kolommen. Bij 3 of minder kolommen dezelfde breedtes handhaven (niet uitvullen). Afzonderlijke links [3] Titel: Verdana Bold, 15/27 px, #FFFFFF. Links: Verdana Regular, 12/27 px, #FFFFFF. 2 Afgesneden plectrum [4] Het plectrum is aan de onderkant afgesneden. Additionele links [5] Verdana Regular, 11 px, #868686. 5 1 3 4 41
9.3 Submenu Paginatitel [1] Verdana Bold, onderstreept, 15 px, #505450. Hoofdniveau [2] Verdana Regular, 13/21 px, #505450. Mouseover: #FF7320. Gestippelde scheidingslijn, #D0D0D0. 1 Subniveau [3] Verdana Regular, 13/21 px, #505450. Mouseover: #FF7320. Scheidingslijn, #D0D0D0. Actief item [4] Verdana Regular, 13/21 px, #505450. Achtergrond: 23 px hoog, #FF7320. 4 3 2 42
9.4 Tabs Actief [1] Verdana Regular, 12 px, #FF7320. Inactief [2] Verdana Regular, 12 px, #505450. Mouseover [2] Verdana Regular, 12 px, #FF7320. 1 2 15 px 15 px 3 43
9.5 Paginering Binnen widgets en contentpagina s wordt gebruik gemaakt van paginering indien er meerdere pagina s binnen een onderdeel vallen. Inactief [1] Verdana Regular, 12 px, #505450. Links [2] Verdana Regular, 12 px, #D0D0D0. 1 Actief [3] Verdana Bold, 12 px, #FFFFFF. Mouse over [4] Onderstreept (met uitzondering van pijltje). #FF7320. 2 3 4 44
10. Pagina s 10.1 Homepage 1 900 px Specificaties Header. [1] De schatkamer (carrousel met titels). [2] Tabbed banner (carrousel met banners). [3] Widgets. [4] Footer. [5] 2 594 px 286 px 3 286 px 286 px 286 px 4 5 45
10.2 Overzichtspagina s 46
10.2.1 Nieuws 1 Specificaties Header. [1] Footer. [4] Rechterkolom kan worden gebruikt om nog andere elementen te plaatsen. [3] Nieuws item [2] Afbeelding: 200 x 150 px. Titel: Verdana Bold, onderstreept, 13/18 px, #505450. Publicatiedatum: Verdana Regular, 11 px, #868686. Broodtekst: Verdana Bold, 13/18 px, #505450. 660 px 220 px Paginering [5] Gecentreerd. 2 3 2 4 47
10.2.2 Thema Achtergrondafbeelding geopend thema [1] 1100 x 265 px. Hoekcurve: 10 px. 2 1 Titel van het geopende thema [2] Verdana Bold, 30 px, #FFFFFF, slagschaduw. 3 Beschrijving van het geopende dossier [3] Titel: Verdana Regular, 24 px, #FF7320. Afbeelding: 100 x 75 px. Broodtekst: Verdana Regular, 13/21 px, #505450. Carrousel met gerelateerde titels (dossierbrowser XXL). 286 px 286 px 286 px Widgets [4] 4 48
10.3 Zoeken 49
10.3.1 Listview Concept Iconen: grid en list view [1] Rechts uitgelijnd. 22 x 22 px. 1 Zoekresultaat [2] Paginatitel: Verdana Regular, 18 px, #FF7320. Titel: Verdana Bold, onderstreept, 13/18 px, #505450. Auteur: Verdana Regular, 11 px, #868686. Broodtekst: Verdana Bold, 13/18 px, #505450. 220 px 660 px Paginering [3] Gecentreerd. 2 3 50
10.3.2 Gridview Concept Iconen: grid en list view [1] Rechts uitgelijnd. 22 x 22 px. 1 Zoekresultaat [2] Paginatitel: Verdana Regular, 18 px, #FF7320. Titel: Verdana Bold, onderstreept, 13/18 px, #FF7320. Auteur: Verdana Regular, 11 px, #868686. 220 px 660 px Paginering [3] Gecentreerd. 2 3 51
10.4 Detailpagina s 52
10.4.1 Titeldetail Typografie Paginatitel: Verdana Regular, 18 px, #FF7320. Subtitel: Verdana Regular, 11 px, #868686. Beschrijving: Verdana Bold, 15 px, #505450. Broodtekst: Verdana Regular, 13/21 px, #505450. 660 px 220 px 53
10.4.2 Content en nieuws Voor zowel de content- als nieuwsdetailpagina s wordt dezelfde template gebruikt. Typografie Paginatitel: Verdana Regular, 24 px, #FF7320. Introtekst: Verdana Bold, 15 px, #505450. Paragraaftitel: Verdana Bold, 15 px, #505450. Broodtekst: Verdana Regular, 13/21 px, #505450. 220 px 660 px 1 Intro afbeelding [1] 384 px breed. Eenmalig rechts bovenaan de pagina. 2 Content afbeelding [2] 200 px breed. Links uitgelijnd. Content afbeelding uitgevuld [3] 640 px breed. 3 54
10.5 Formulieren Specificaties Paginatitel: Verdana Regular, 24 px, #FF7320. Titel: Verdana Bold, 15 px, #505450. Label: Verdana Regular, 12/18 px, #505450. Invoerveld: Verdana Regular, 12/18 px, #505450. Broodtekst: Verdana Regular, 13/21 px, #505450. Foutmelding: #FF0000. 220 px 660 px 55
Widgets
11. Basis Specificaties Curve hoeken: 10 x 10 px. Titel: Verdana Regular, 18 px, #FF7320. Subtitel: Verdana Bold, onderstreept, 12/16 px, #505450. Broodtekst: Verdana Regular, 12/16 px, #505450. Achtergrondkleur widget: #FFFFFF. Kader: Slagschaduw (binnenste lijn #DDDDDD, buitenste lijn #EEEEEE). 20 px marge tussen widgets. 10 px 10 px 20 px Kleurverloop 20 px 57
11.1 Direct plaatsbare widgets Direct plaatsbare widgets zijn identiek aan de reguliere widgets met als verschil de hoekige kaders. Kleurverloop 58