Huisstijlhandboek digitaal van de Bibliotheek. Versie 0.8

Huisstijlhandboek digitaal van de Bibliotheek Versie 0.8

Inhoudsopgave Inleiding

3

6.3 In contentpagina

29

6.4 Covers

30

6.5 ImagePlaceholder

32

Verklarende woordenlijst

4

Basis elementen

5

1. Logo

6

7.1 Media

33

1.1 Beeld

6

7.2 Waardering

34

1.2 Naam

7

7.3 Weergave

35

1.3 Toevoeging vestigingsnaam

8

7.4 Foutmelding

36

1.4 Grootte

9

7.5 Delen

37

1.5 Plaats

10

1.6 Achtergrond

11

2. Kleur

12

7. Iconen

33

Layout en structuur

38

8. Grid

39

2.1 Logo

12

9. Navigatie

40

2.2 Kleurenpalet website

13

9.1 Header

40

2.3 Signaalkleuren

14

9.2 Footer

41

2.4 Achtergrondkleur widgets

15

9.3 Submenu

42

9.4 Tabs

43

9.5 Paginering

44

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

45

10.2 Overzichtspagina’s

46

10.2.1 Nieuws 10.2.2 Thema 10.3 Zoeken

25

6.1 Sfeerfoto’s

25

6.1.1 Binnen plectrum

26

6.1.2 Binnen widget

27

6.2 VOB fotomateriaal

28

|

51

10.4 Detailpagina’s

52

10.4.1 Titeldetail

53

10.4.2 Content en nieuws

54

Versie 0.8

11.1 Direct plaatsbare widgets

58

48 50

|

57

49

10.3.2 Gridview

31-05-2012

11. Basis

47

10.3.1 Listview

10.5 Formulieren

56

45

10.1 Homepage

24

6. Afbeeldingen

Huistijlhandboek digitaal van de Bibliotheek

10. Pagina’s

Widgets

55

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.


|

31-05-2012

|

Versie 0.8

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.


|

31-05-2012

|

Versie 0.8

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

31-05-2012

|

Versie 0.8

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.


|

31-05-2012

|

Versie 0.8

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.

2

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.


3

|

31-05-2012

|

Versie 0.8

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


|

31-05-2012

|

Versie 0.8

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


|

31-05-2012

|

Versie 0.8

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


|

31-05-2012

|

Versie 0.8

11

2. Kleur 2.1 Logo Het logo straalt door de gebruikte kleuren een frisheid, levendigheid en helderheid uit.

Beeldmerk #505450 80 84 80


|

31-05-2012

|

Versie 0.8

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


|

31-05-2012

|

Versie 0.8

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.


|

31-05-2012

|

Versie 0.8

14

2.4 Achtergrondkleur widgets De achtergrondkleur van een widget is wit, met een kleurverloop aan de onderkant.

Kleurverloop


|

31-05-2012

|

Versie 0.8

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


|

31-05-2012

|

Versie 0.8

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

3. Alineatitel • Wordt gebruikt als titel in de alinea’s van detailpagina’s. • Verdana Bold, 13 px, #505450.

2

3


|

31-05-2012

|

Versie 0.8

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

6 Widgettekst • Wordt gebruikt in de alinea’s van widgets en zijkolommen. • Verdana Regular, 12 px, #505450. 7. Secundaire typografie • Wordt gebruikt bij metadata. • Verdana Regular, 11 px, #868686.

4 5

6

7


|

31-05-2012

|

Versie 0.8

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.


|

31-05-2012

|

Versie 0.8

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


|

31-05-2012

|

Versie 0.8

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


|

31-05-2012

|

Versie 0.8

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


|

31-05-2012

|

Versie 0.8

22

4.2 Rechthoek Afbeeldingen hebben rechte hoeken. 10 px

Met uitzondering van • Fotomateriaal in tabbed banner. • Fotomateriaal in footer banner. 10 px

Hoeken widgets • 10 x 10 px.


|

31-05-2012

|

Versie 0.8

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.

Primair

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

Secundair • Normaal: Verdana Regular, 12 px, #505450. • Mouseover: Verdana Regular, 12 px, #FF7320.

Tertiair

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.

Kwartair

Tertiair • Normaal: Verdana Regular, 12 px, #505450. • Mouseover: Verdana Regular, 12 px, #FF7320.

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.


|

31-05-2012

|

Versie 0.8

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.


|

31-05-2012

|

Versie 0.8

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.


|

31-05-2012

|

Versie 0.8

26

6.1.2 Binnen widget Binnen widgets wordt een uitsnede van de plectrum gebruikt voor afbeeldingen.


|

31-05-2012

|

Versie 0.8

27

6.2 VOB fotomateriaal Er is een aantal rechtenvrije sfeerfoto’s beschikbaar. Deze kunnen worden gedownload via landelijkehuisstijl.nl, onder huisstijldatabase.


|

31-05-2012

|

Versie 0.8

28

6.3 In contentpagina Intro afbeelding [1] • 384 px breed. • Eenmalig rechts bovenaan de pagina. Content afbeelding [2] • 200 px breed. • Links uitgelijnd.

1

Content afbeelding uitgevuld [3] • 640 px breed.

2

3


|

31-05-2012

|

Versie 0.8

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


|

31-05-2012

|

Versie 0.8

30

Cover etalage [3] • 120 x max. 192 px.

3

3


|

31-05-2012

|

Versie 0.8

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


|

31-05-2012

|

Versie 0.8

2

32

7. Iconen 7.1 Media De media iconen worden uitsluitend gebruikt op de zoekresultatenpagina.

16 px

Specificaties • #868686. • 16 x 16 px. 16 px


|

31-05-2012

|

CD-Rom

Artikel

Bladmuziek

Boek

Audio

Games

Speelleermateriaal

Video

Versie 0.8

Beeld

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


|

31-05-2012

|

Versie 0.8

34

7.3 Weergave Deze iconen worden gebruikt om de weergave van de zoekresultaten aan te passen in gridview [1] en listview [2].

1


|

31-05-2012

2

|

Versie 0.8

35

7.4 Foutmelding Specificaties • Validatie van invulvelden (waarschuwing). • Icoon is 16 x 16 px.


|

31-05-2012

|

Versie 0.8

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.


|

31-05-2012

|

Versie 0.8

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


|

31-05-2012

|

Versie 0.8

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.

3 4

1 2

Hoofdnavigatie [2] • 40 px hoog. • Verdana Regular, kapitaal, 15 px, #FFFFFF.


|

31-05-2012

|

Versie 0.8

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.

1


|

31-05-2012

|

Versie 0.8

3

5

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


|

31-05-2012

|

Versie 0.8

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


|

31-05-2012

|

Versie 0.8

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.

1

Links [2] • Verdana Regular, 12 px, #D0D0D0. Actief [3] • Verdana Bold, 12 px, #FFFFFF. Mouse over [4] • Onderstreept (met uitzondering van pijltje). • #FF7320.

2


|

31-05-2012

|

Versie 0.8

3

4

44

10. Pagina’s 900 px

10.1 Homepage

1

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


|

31-05-2012

|

Versie 0.8

45

10.2 Overzichtspagina’s


|

31-05-2012

|

Versie 0.8

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


|

31-05-2012

|

Versie 0.8

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


|

31-05-2012

|

Versie 0.8

48

10.3 Zoeken


|

31-05-2012

|

Versie 0.8

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


|

31-05-2012

|

Versie 0.8

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


|

31-05-2012

|

Versie 0.8

51

10.4 Detailpagina’s


|

31-05-2012

|

Versie 0.8

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


|

31-05-2012

|

Versie 0.8

220 px

53

10.4.2 Content en nieuws Voor zowel de content- als nieuwsdetailpagina’s wordt dezelfde template gebruikt. 1

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

Intro afbeelding [1] • 384 px breed. • Eenmalig rechts bovenaan de pagina.

660 px

2

Content afbeelding [2] • 200 px breed. • Links uitgelijnd. 3

Content afbeelding uitgevuld [3] • 640 px breed.


|

31-05-2012

|

Versie 0.8

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


|

31-05-2012

|

Versie 0.8

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

20 px

10 px

Kleurverloop 20 px


|

31-05-2012

|

Versie 0.8

57

11.1 Direct plaatsbare widgets Direct plaatsbare widgets zijn identiek aan de reguliere widgets met als verschil de hoekige kaders.

Kleurverloop


|

31-05-2012

|

Versie 0.8

58

Huisstijlhandboek digitaal van de Bibliotheek. Versie 0.8

Recommend Documents