Huisstijlhandboek Internet en intranet. Versie 4.2 Datum Juli 2011

Transcriptie

1 Huisstijlhandboek Internet en intranet Versie 4.2 Datum Juli 2011

2 2 van 97 Colofon Versienummer 4.2 Datum juli 2011 Locatie Ontwerp Studio Dumbar Auteur Project 1 Logo Historie van eerder gepubliceerde versies Versie, uitgavedatum en wijzigingen Versie Oktober 2008 Basisdocument Digitale Middelen (internet, intranet, nieuwsbrief en Powerpoint) Versie 1.1 Maart 2009 Aanpassingen versie 1.0 Basisdocument Digitale Middelen: Grid: marge tussen kolommen is altijd even breed (20px); Positionering subnavigatie: de verticale subnavigatie heeft een vaste gefixeerde positie op de pagina gekregen en schuift niet meer mee naar beneden bij een meerregelige broodkruimel of bij een dossierpagina met zowel dossiertitel als ook paginatitel; Verticale subnavigatie meer dan 5 niveaus diep; Voorbeeld van een meer traditioneel intranet naast het op web 2.0 (Rijksweb) gebaseerde voorbeeld. Versie 1.0 Maart 2009 Addendum op Basisdocument Digitale Middelen (internet, intranet, nieuwsbrief en Powerpoint). Versie 2.0 Juli 2009 Aanvullingen op versie 1.0 Addendum Digitale Middelen: Vormgeving voor Elektronische formulieren, Portalnavigatie en Widgets voor internet. Versie April 2010 Basisdocument en Addendum Digitale Middelen over internet en intranet samengevoegd. Richtlijnen uit Basisdocument en Addendum over nieuwsbrief en Powerpoint verwijderd: deze informatie is in een eigen huisstijlhandboek opgenomen. Algemene redactieslag. Kleuren zijn aangepast, informatie toegevoegd over mouse-over, gekleurde koppen, iconen in kleur en het gebruik van lijnen. Versie December 2010 URL huisstijlsite gewijzigd in Versie Mei 2011 Op pagina 66 illustratie van alle beschikbare iconen gaplaatst. Versie 4.2 Juli 2011 Op pagina 27 wordt in de tekst over De titelbalk ook verwezen naar een uitgebreidere beschrijving op pagina 11 Basis-grid met titelbalk.

3 3 van 97 Inhoudsopgave Colofon 2 Over dit document 4 Logopositionering 5 Favicon 6 Kleurenpalet en contrast internet 7 Kleurenpalet en contrast intranet 9 Grid en layout internet 10 Grid en layout intranet 13 Typografie & link language internet 18 H1, H2 en H3 subkoppen 19 Typografie & link language intranet 22 Verticale subnavigatie internet 23 Verticale subnavigatie intranet 25 Header uitgelicht internet 27 Kleurvarianten van de header 29 Header uitgelicht intranet 31 Basisopzet 32 Voorbeelden intranet, die ook mogelijk zijn voor internet 39 Aanpassen van de startpagina 43 Aanpassen van de startpagina met checkbox mogelijkheid 45 Optionele elementen Achtergondkaders 47 Ankernavigatie 48 Banners internet 49 Banners intranet 50 Digitaal formulier 51 Digitaal formulier - Elementen 53 Elektronisch formulier - Procesindicator 55 Elektronisch formulier - Informatiekader 58 Elektronisch formulier - Dynamische elementen 59 Fotobijschriften 60 Functionele links 61 Grafiek lijndiagram 63 Grafiek staafdiagram 64 Grafiek taartdiagram 65 Iconenset 66 Informatiemeldingen 68 Kalender 69 Kalender intranet 70 Kruimelpad over meerdere regels 71 Lijst zonder filter opties 72 Lijst met filter opties 73 Login formulier 74 Mouse-over kleurvlak 75 Onderscheidingslijnen 76 Opsommingen 77 Organogrammen 78 Portalnavigatie 80 Sitemap 81 Smoelenboek 83 Stelling-/ poll module internet 84 Stelling-/ poll module intranet 85 Stelling-/ poll module neutraal 86 Tabellen 87 Tag Cloud 88 Tekstkader 89 Uitklaplinks internet 90 Uitklaplinks intranet 91 Vraag en antwoord 92 Widget elementen 93 Widget elementen intranet 95 Zoekresultaten 97

4 4 van 97 Over dit document Dit document geeft een beschrijving van de toepassing van het rijksbrede-logo en de huisstijl voor internet en intranet. Verplicht Zodra het logo wordt gebruikt op een site, dienen ook eventueel toegevoegde elementen die in dit boek aan de orde komen, te voldoen aan de voorgeschreven regels (tenzij anders aangegeven). Templategenerator en Starters Kit Op de huisstijlwebsite vind je twee tools die kunnen helpen bij het maken van een website die voldoet aan de richtlijnen. Met de Templategenerator is het mogelijk in een middag een nieuwe website op te zetten in Joomla!. Meer nodig dan alleen een basisstylesheet of ga je gebruik maken van een ander content management systeem dan Joomla! of Hippo? De Internet Starters Kit is een HTML/CSS implementatie van de rijkshuisstijl en kan uitstekend dienen als uitgangspunt van frontend code voor websites die aan de (nieuwe) visuele richtlijnen moeten voldoen. Meer informatie en uitleg vind je bij Digitaal > Internet op de huisstijlwebsite. Afmetingen In dit document zijn zoveel mogelijk afmetingen aangegeven. De meeste afmetingen zijn in de header (logopositionering) vastgelegd. Overige maten (zoals bijvoorbeeld afmetingen in content en navigatie) dienen te worden afgeleid uit de originele Photoshop bestanden (gelaagde PSD s). Kleur contrast en helderheid In dit document wordt op meerdere plekken gesproken over het verschil in helderheid (o.a. op de kleurenpaleten contrastpagina s). Alle vermelde waarden voor verschil in helderheid en kleur zijn berekend met de online Colour Contrast Check tool. De tool is te vinden op

5 5 van 97 Logopositionering De basisopbouw van alle internetpagina s is gelaagd. De achtergrondlaag is de gehele ruimte binnen het browservenster en is lichtgrijs. Daar bovenop is een extra laag - de contentlaag - geplaatst die een lichte schaduw op de achtergrondlaag werpt. Deze laag is gecentreerd in het browservenster. De contentlaag De contentlaag staat horizontaal gecentreerd op de achtergrondlaag. De gehele contentlaag inclusief schaduw is geoptimaliseerd voor een minimale schermresolutie van 1024px x 768px en heeft de volgende afmetingen: 940px breed (excl. 8px schaduwrand) 956px breed (incl. 8px schaduwrand) 75px 44px Het logo Het beeldmerk is tegen de bovenkant van de contentlaag gepositioneerd en hierin horizontaal gecentreerd. De afmetingen van het beeldmerk zijn: 44px breed 75px hoog 470px 470px Visuele referentie aan beeldmerk Helemaal onderaan de contentlaag staat altijd een blauw blokje (de visuele referentie aan het beeldmerk). Dit blauwe blokje is (net zoals het beeldmerk) altijd horizontaal gecentreerd en heeft de volgende afmetingen: 44px breed 25px hoog Logopositionering voor internet in de header en de visuele referentie aan het beeldmerk (blauwe blokje) onderaan de contentlaag 25px 44px

6 6 van 97 Favicon De favicon heeft als formaat 16x16px. De achtergrond achter het lint is altijd wit en mag je dus niet transparant maken. Door deze witte rand wordt er een omgeving gecreëerd waarin het lintje bovenin in het midden hangt. Voorbeeld van een browservenster met detailzoom

7 7 van 97 Kleurenpalet en contrast internet Voor internet kan je alle zestien kleuren uit het kleurenpalet kiezen. Een kleur is vrij te kiezen en dus niet te claimen. Per website kan je slechts één kleur kiezen met de daarbij behorende lichtere en lichtste afgeleide tinten (respectievelijk voor de actieve tabs en de titelbalk). De twee grijstinten (onderaan deze pagina) zijn gereserveerd voor de achtergrondlaag en de links op de achtergrondlaag. De blauwtint is de algemene kleur voor tekstlinks. Contrast Voor de leesbaarheid van de tekst is het van belang dat je kiest voor witte of zwarte tekst, afhankelijk van de gekozen kleur uit het kleurenpalet. Aan de linkerkant staan tien kleuren waarop een witte tekst gebruikt dient te worden, aan de rechterkant staan zes kleuren die een zwarte tekst behoeven. Hanteer deze combinaties strikt en wijk er niet van af om slechte leesbaarheid (te weinig contrast, zie drempelwaarde hieronder) voor minder- of slechtzienden te voorkomen. Drempelwaarde De waarden die in de kleurvlakken staan (bijvoorbeeld 223/676), geven respectievelijk het verschil in helderheid en het verschil in kleur weer van de tekstkleur (zwart of wit) op de desbetreffende achtergrond. De twee waarden dienen idealiter boven de voorgeschreven drempelwaarden uit te komen (respectievelijk 125 en 500) om aan de (kleur)contrasteisen van het W3C te voldoen. Alle oorspronkelijke kleuren uit het kleurenpalet zijn zo aangepast dat ze voldoen aan de gestelde contrasteisen van het W3C. Kleurenpalet internet

8 8 van 97 Contrastkleuren Voor een dossierpagina waarbij op het contentvlak van de pagina veelal sprake is van een dossiernaam als ook van een paginatitel, kan voor de dossiernaam de gekozen volle kleur van de internetsite gebruikt worden of bij onvoldoende zichtbaarheid een contrastkleur. Dit geldt ook voor achtergrondkaders. Op deze pagina is voor elk van de zestien kleuren de best passende constrastkleur weergegeven. Je mag ook kiezen voor een andere combinatie. Contrastkleurenpalet internet

9 9 van 97 Kleurenpalet en contrast intranet Voor intranet is slechts de hiernaast getoonde kleur te gebruiken (de volle kleur) met de daarbij behorende lichtere en lichtste variant (respectievelijk voor de actieve tabs en de titelbalk). Dit om een duidelijk onderscheid te maken tussen internet- en intranetpagina s. Contrast Voor de leesbaarheid van tekst is een duidelijk contrast van belang. Stem je keus voor witte of zwarte tekst hierop af, afhankelijk van de gekozen (ondergrond-) kleur. Voor intranet zijn er twee kleuren waarop een witte tekst toegepast dient te worden, en twee kleuren die een zwarte tekst behoeven. Hanteer deze combinaties en wijker niet van af om slechte leesbaarheid (te weinig contrast, zie drempelwaarde hieronder) te voorkomen voor minder- of slechtzienden. Drempelwaarde De waarden die in de kleurvlakken staan (bijvoorbeeld 197/563), geven respectievelijk het verschil in helderheid en het verschil in kleur weer van de tekstkleur (zwart of wit) op de desbetreffende achtergrond. De twee waarden dienen idealiter boven de voorgeschreven drempelwaarden uit te komen (respectievelijk 125 en 500) om aan de (kleur)contrast eisen van het W3C te voldoen. De beschikbare kleuren voor intranet voldoen aan de gestelde contrasteisen van het W3C. Volle kleur Lichtste variant Contrastkleur Lichtere variant Contrastkleur Het is toegestaan om de contrastkleur te gebruiken voor dossiertitels en in zijn lichtste variant voor de achtergrondkaders op homepagina s en subhomepagina s. De lichte variant kan onder andere worden gekozen voor tabellen, formulieren etc. Zie verderop in dit document. Het advies is om eerst de websitekleur en neutraal grijs te proberen, voordat je kiest voor de contrastkleur. Kleurenpalet intranet

10 10 van 97 Grid en layout internet Basis-grid Het oorspronkelijke basis-grid van vier gelijke kolommen van 208px is verder verfijnd naar een grid van 12 gelijke kolommen van 56px breed. Hierop plaats je de informatie van de pagina. Je kunt de kolommen samentrekken om verder te variëren (zie Grid variaties). De marge tussen de kolommen is 20px. De totale hoogte van de internet header is 177px. Tussen de content van de pagina en de visuele referentie aan het beeldmerk is altijd 50px witruimte gereserveerd voor een rustige afsluiting van de pagina. header (177px) 1px border (#535353) 60px topnavigatie (incl. navigatierand) 29px 147px 40px 75px 1px border (#535353) 12px 12px 174px 58px Eventuele footer content dient boven deze 50px witruimte te staan. Disclaimer en Privacy informatie kun je plaatsen op de lichtgrijze achtergrondlaag. 8px 8px De totale contentlaag staat altijd gecentreerd in het browservenster. auto 940px auto 24px 20px 56px 50px 44px Afmeting basis-grid 25px

11 11 van 97 Basis-grid met titelbalk De titelbalk (30px hoog) is bedoeld voor sites waarvan de titel niet is opgenomen in de afzenderstructuur naast het beeldmerk in de header. Of voor sites waarvan de website een titel heeft die anders is dan de naam van de afzender naast het beeldmerk. Sites van onderdelen die als dochter of kleindochter (zie afzenderstructuur) worden getypeerd, gebruiken de titelbalk dus niet. Voorbeeld: De corporate site van een ministerie maakt geen gebruik van de titelbalk, want de naam van het ministerie is al opgenomen in de afzender naast het beeldmerk. De site met als titel Prinsjesdag 2008 maakt wel gebruik van de titelbalk, want de afzender naast het beeldmerk is geen Prinsjesdag maar Rijksoverheid. header (207px) 1px border (#535353) 30px titelbalk 60px topnavigatie (incl. navigatierand) 29px 177px 40px 75px 12px 12px 174px 1px border (#535353) 56px De totale hoogte van de internet header met titelbalk is 207px. 8px 8px auto auto 940px 24px 20px 56px 50px 44px Afmetingen basis-grid met titelbalk internet 25px

12 12 van 97 Maximaal aantal tabs (hoofdnavigatie) Het maximale aantal tabs kan niet in aantallen worden gedefinieerd, want het is afhankelijk van de lengte van de tekst op het tabblad. Er kan wel een uitspraak worden gedaan over de maximale breedte die alle tabs gezamenlijk mogen innemen: die is namelijk 688px. Bijvoorbeeld als de breedte van vijf tabs gezamenlijk 582px is en een eventuele zesde tab is 112px breed (inclusief witruimte aan de linkerkant van de tab), dan kan deze zesde tab niet worden toegevoegd, want inclusief de zesde tab zou de totale breedte 694px bedragen en dat is een overschrijding van 6px. 688px Maximaal beschikbare horizontale ruimte voor tabs (hoofdnavigatie)

13 13 van 97 Grid en layout intranet Het basis-grid van intranet is hetzelfde als van het internet met de toevoeging van de naam intranet balk (zie ook Basis-grid met titelbalk). De totale hoogte van de intranet header (inclusief de naam intranet balk) is 207px. Als het intranet een eigen naam heeft (bijvoorbeeld: Rijksweb, Vera, IntrAZ, BZK-intranet, DJI Vangnet, etc.) dan biedt de naam intranet balk hiervoor ruimte. Tussen de content van de pagina en de visuele referentie aan het beeldmerk is altijd 50px witruimte gereserveerd voor een rustige afsluiting van de pagina. header (207px) 1px border (#535353) 30px titelbalk 60px topnavigatie (incl. navigatierand) 29px 177px 75px 12px 12px 174px 1px border (#535353) 56px Eventuele footer content dient boven deze 50px witruimte te staan. Disclaimer en Privacy informatie kan je plaatsen op de lichtgrijze achtergrondlaag. De totale contentlaag staat altijd gecentreerd in het browservenster. auto 8px 40px 8px auto 940px 24px 20px 56px 50px 44px Afmeting basis-grid intranet. 25px

14 14 van 97 Grid variaties Het voorbeeld hiernaast toont een kolomcombinatie van 2 / 1 / 1. Mogelijke kolomcombinaties voor internet zijn: 2 / 2 2 / 1 / 1 1 / 2 / 1 1 / 1 / 2 3 / 1 1 / 3 Alle andere mogelijkheden die binnen het 12 kolomsgrid passen zijn mogelijk. Grid variatie 2 / 1 / 1

15 15 van 97 Grid variatie In sommige gevallen kan het wenselijk zijn een foto of een belangrijke boodschap over alle vier de kolommen heen te plaatsen. Deze foto of boodschap plaats je altijd in het contentvlak (op het grid) en dus nooit erboven. Onder de foto of boodschap is weer elke kolomvariatie (beschreven op de vorige pagina) mogelijk. Het getoonde voorbeeld hiernaast heeft de 1 / 1 / 1 / 1 variatie. Grid variatie waarbij 4 kolommen zijn samengevoegd

16 16 van 97 Grid variaties Daarnaast kun je ook nog de volgende grid variaties gebruiken (zie voorbeeld volgende pagina): 1 / 1,5 / 1,5 1,5 / 1,5 / 1 Het hier getoonde voorbeeld toont een kolomcombinatie van 1 / 2 / 1. Grid variatie 1 / 2 / 1

17 17 van 97 Grid variatie Het voorbeeld hiernaast toont een 1 / 1,5 / 1,5 grid variatie.

18 18 van 97 Typografie & link language internet Het standaard lettertype is Verdana met uitzondering van de Paginatitel, Dossiernaam, Rubriek en Topnavigatie. Deze uitzonderingen zijn uitgevoerd in het lettertype Arial o.a. voor een betere scanbaarheid. Aan de linkerkant de typografie en aan de rechterkant de link language voor internet

19 19 van 97 H1, H2 en H3 subkoppen Op deze pagina staan voorbeelden die laten zien hoe wordt omgegaan met headers. Er bestaan drie soorten headers; H1, H2, H3. H1: Arial regular 22px # H2: Verdana regular 16px # H3: Verdana bold 11 px # Internet, intranet en neutraal

20 20 van 97 Het is ook mogelijk koppen weer te geven in kleur. Kies uit de 10 voor tekst geschikte communicatiekleuren. Dit zijn de kleuren uit het kleurenpalet met witte tekst erop. Zie Kleurpalet en contrast. Deze koppen zijn niet klikbaar. Gebruik geen contrast en volkleur door elkaar. Gebruik deze kleur consistent over de hele website en niet op de ene pagina wel en de ander niet.

21 21 van 97 Het is ook mogelijk koppen weer te geven in de contrastkleur. Zie voor meer informatie Kleurenpalet en contrast. Gebruik deze kleur consistent over de hele website en niet op de ene pagina wel en de ander niet.

22 22 van 97 Typografie & link language intranet Het standaard lettertype is Verdana met uitzondering van de Naam intranet, Paginatitel en Topnavigatie. Deze uitzonderingen zijn uitgevoerd in het lettertype Arial o.a. voor een betere scanbaarheid. Het is ook mogelijk gebruik te maken van Deja Vu. Dit is een vrij te gebruiken lettertype, waar geen licentie voor nodig is. Aan de linkerkant de typografie en aan de rechterkant de link language voor intranet

23 23 van 97 Verticale subnavigatie internet De subnavigatie heeft een gefixeerde positie op de pagina. De afstand tussen de onderkant van de topnavigatie en de bovenkant van de achtergrondkleur van de eerste link is altijd 40px. Level 0 Level 1 Level 2 Level 3 Level 4 Level 5 Level 0 In deze status is alleen een lijst van hoofdcategoriën zichtbaar. Level 1 Indien een geselecteerd menu-item in de subnavigatie subpagina s heeft, klapt het pijltje van het desbetreffende menu-item naar beneden en wordt de achtergrondkleur #ffe9b7. Level 2 tot level 5 Indien een geselecteerd menu-item in de subnavigatie subpagina s heeft, klapt het pijltje van het desbetreffende menu-item naar beneden en wordt de achtergrondkleur in plaats van #ffe9b7 nu #fff4dc (zie ook kleurenpalet en contrast), hierdoor worden de geopende levels extra geaccentueerd en blijft de subnavigatie overzichtelijk bij diepere levels. De geselecteerde/actieve subpagina s springen 10px in en krijgen de kleur #ffe9b7. 5 levels diep is tevens het maximale niveau dat deze subnavigatie kan bevatten. Hoverstatus Zodra de gebruiker met de cursor over één van de links uit de subnavigatie gaat, krijgt deze een #ffe9b7 achtergrondkleur. Overzicht verschillende levels subnavigatie

24 24 van 97 7 Levels Als een internetsite meer dan 5 levels in de navigatie heeft, wordt een andere methode gebruikt voor de subnavigatie. Hiervoor worden de overige links van de vorige levels weg gelaten. Alleen de gekozen links blijven staan. Door deze opstapeling is het mogelijk om dieper te gaan dan de standaard 5 levels. Het is niet mogelijk om tussen een 5 level subnavigatie en een 7 level navigatie te switchen. Level 1 Level 2 Level 3 Level 4 Diepste level Zodra het diepste level is bereikt - bijvoorbeeld Over E-services bij level 7 - zul je geen verschil zien ten opzichte van level 6. Natuurlijk veranderen het kruimelpad en de paginatitel wel, waardoor duidelijk is waar de bezoeker zich bevindt. Level 5 Level 6 Level 7 Overzicht subnavigatie van 7 levels diep

25 25 van 97 Verticale subnavigatie intranet De subnavigatie heeft een gefixeerde positie op de pagina. De afstand tussen de onderkant van de topnavigatie en de bovenkant van de achtergrondkleur van de eerste link is altijd 40px. Level 0 Level 1 Level 2 Level 3 Level 4 Level 5 Level 0 In deze status is alleen een lijst van hoofdcategorieën zichtbaar. Level 1 tot level 5 Indien een geselecteerd menu-item in de subnavigatie subpagina s heeft, klapt het pijltje van het desbetreffende menuitem naar beneden en wordt de achtergrondkleur in plaats van #deebe3 nu #eef4f6 (zie ook Kleurenpalet en contrast), hierdoor worden de geopende levels extra geaccentueerd en blijft de subnavigatie overzichtelijk bij diepere levels. De geselecteerde/actieve subpagina s springen 10px in en krijgen de kleur #deebe3. Het maximale niveau van deze subnavigatie is 5 levels. Hoverstatus Zodra de gebruiker met de cursor over één van de links uit de subnavigatie gaat zal deze een #deebe3 achtergrondkleur krijgen. Overzicht verschillende levels subnavigatie

26 26 van 97 7 Levels In sommige intranetten bestaan er situaties van maar liefst 14 levels diep. Hiervoor laten we de overige links van de vorige levels weg. Alleen de gekozen links blijven staan. Door deze opstapeling is het mogelijk om dieper te gaan dan de standaard 5 levels. Het is niet mogelijk om tussen een 5 level-subnavigatie en een 7 levelnavigatie te switchen. Level 1 Level 2 Level 3 Level 4 Diepste level Zodra het diepste level bereikt is, bijvoorbeeld Over E-services bij level 7, zul je geen verschil zien ten opzichte van level 6. Natuurlijk veranderen het kruimelpad en paginatitel wel, waardoor duidelijk is waar de bezoeker zich bevindt. Level 5 Level 6 Level 7 Overzicht subnavigatie van 7 levels diep

27 27 van 97 Header uitgelicht internet Alle internetheaders bestaan in de basis uit een wit vlak met het logo, de topnavigatie in een vrij te kiezen kleur (plus afgeleide kleuren) en de (functionele) links in de achtergrondlaag. (Functionele) links in achtergrondlaag De (functionele) links staan altijd bovenaan (boven het logovlak) op de achtergrondlaag. Indien de desbetreffende links aanwezig zijn, staan deze altijd in de hier getoonde volgorde. Aan de linkerkant staan RSS en Tekstgrootte, terwijl aan de rechterkant (in deze volgorde) Abonneren, Engels (en/of andere talen) en Help staan gegroepeerd. Overige, hier niet getoonde links, kunnen aan de rechterof linkerkant worden toegevoegd (altijd rechts van Tekstgrootte en links van Contact), afhankelijk van het soort link (per link dient een logische beslissing gemaakt te worden). Net zoals alle andere navigatielinks, beginnen de links in de achtergrondlaag met een hoofdletter. Het logovlak Het logovlak is 87 pixels hoog. Het beeldmerk staat hierin horizontaal gecentreerd. De volledige breedte is gereserveerd voor het logo. Er mogen dus geen andere elementen worden geplaatst in het logovlak. De titelbalk De titelbalk is bedoeld voor sites die niet als organisatieonderdeel in de afzenderstructuur zijn opgenomen. De titelbalk is 30px hoog en krijgt altijd de lichtste afgeleide tint van de gekozen volle kleur. Zie ook pagina 11 Basisgrid met titelbalk. De topnavigatie De topnavigatie bestaat uit eenvoudig vormgegeven tabs. De actieve tab krijgt de afgeleide lichtere tint van de gekozen kleur en loopt door in een 10px hoge rand die de volledige breedte van de header beslaat. De tekstkleur op de actieve tab is altijd zwart. De titel van iedere tab (Home, Actueel etc.) is vrij in te vullen. De omschrijving en volgorde van de tabs, zoals hiernaast getoond, worden veelal gebruikt op de huidige corporate websites van de departementen.

28 28 van 97 4-regelige afzender Het basisprincipe van een 2- of 3-regelig afzender geldt voor 95% van alle uitwerkingen. In de uitzonderlijke gevallen waar een 4-regelig afzenderschap vereist is, gezien de lengte van de afzendernaam, is de verticale witruimte tussen het logo en de gekleurde (hoofdnavigatie) balk 26px in plaats van de standaard 12px (zie Grid en layout) om zo voldoende ruimte te maken voor de vierde afzenderregel. Logo klikbaar Het logo (beeldmerk plus woordmerk) is in z n geheel klikbaar op alle pagina s behalve de homepagina en linkt altijd (terug) naar de homepagina van de betreffende website. Bijvoorbeeld het logo is Rijksoverheid en de website is Als je klikt op het logo dan linkt het logo naar de homepage van en niet naar Voorbeeld van een 4-regelige afzender. Verticale witruimte tussen beeldmerk en gekleurde balk is 26px in plaats van de standaard 12px

29 29 van 97 Kleurvarianten van de header Kleurvarianten van de header Deze pagina toont de internetheader in eerste acht van de in totaal zestien verschillende kleuren uit het kleurenpalet, gerangschikt op kleurtint. Per website kies je slechts één kleur. # / #d1c1be #ffb612 / #ffe9b7 Let verder op het gebruik van de tekstkleur (wit of zwart) afhankelijk van de gekozen kleur (zie ook kleurenpalet en contrast). #ca005d / # efb2ce #f9e11e / #fdf6bb #d52b1e / #f2bfbb #94710a / #dfd4b5 # / #f6d4b2 #777c00 / #d6d7b2 Verschillende kleurvarianten van de header

30 30 van 97 Kleurvarianten van de header Deze pagina toont de internetheader in de overige acht kleuren uit het kleurenpalet, wederom gerangschikt op kleurtint. # / #becdc3 #007bc7 / #b2d7ee #39870c / #c3dbb6 #42145f / #c6b8cf #76d2b6 / #d6f1e9 #a90061 / #e5b2cf #8fcae7 / #ddeff8 #f092cd / #faded0 Vervolg van de verschillende kleurvarianten van de header

31 31 van 97 Header uitgelicht intranet De intranetheader bestaat in de basis uit een wit vlak met het logo, de topnavigatie, de naam intranet balk en de (functionele) links in de achtergrondlaag. Zie verder Internet voor een voorbeeld van een 4-regelige afzender en uitleg over de klikbaarheid van het logo. (Functionele) links in achtergrondlaag De (functionele) links staan altijd bovenaan (boven het logovlak) op de achtergrondlaag. Indien de desbetreffende links aanwezig zijn, staan deze altijd in de hier getoonde volgorde. Aan de linkerkant staan RSS, Tekstgrootte, Ingelogd als... en Uitloggen. Aan de rechterkant staan (in deze volgorde) Help en Contact. Overige, hier niet getoonde links, kunnen aan de rechterof linkerkant worden toegevoegd (altijd rechts van Uitloggen en links van Contact), afhankelijk van het soort link (per link dient een logische beslissing gemaakt te worden). Net zoals alle andere navigatielinks, beginnen de links in de achtergrondlaag met een hoofdletter. Het logovlak Het logovlak is 87 pixels hoog met het logo horizontaal gecentreerd. De volledige breedte is gereserveerd voor het logo. Er mogen dus geen andere elementen in het logovlak staan. Naam intranet balk De naam intranet balk is - indien van toepassing - bedoeld voor het vermelden van de naam van het intranet (bijvoorbeeld: Rijksweb, Vera, IntrAZ, BZK-intranet, DJI Vangnet, etc.). De titelbalk is 30px hoog en heeft de lichtblauwe intranet kleur (#deebe3). De topnavigatie De topnavigatie bestaat uit eenvoudig vormgegeven tabs. De actieve tab heeft de lichtblauwe intranet kleur en loopt door in een 10px hoge rand die de volledige breedte van de header beslaat. De titel van iedere tab (Home, Personeel etc.) is vrij in te vullen.

32 32 van 97 Basisopzet Homepagina Voorbeeld van een opzet voor een homepagina in een van de mogelijke kleuren (#ffb612). De indeling van de hier getoonde homepagina (en vervolgpagina s) is gebaseerd op de aangeleverde leadmedia, soms aangevuld met een aantal verbeteringen uit het usabilityonderzoek van de Stijlgids. Deze verbeteringen zijn o.a.: De positie van een aantal secundaire navigatie links. De meeste links zijn nu op de zogenaamde (lichtgrijze) achtergrondlaag geplaatst. De links die gerelateerd zijn aan zoeken (Sitemap en Uitgebreid zoeken) zijn direct onder de zoekfunctionaliteit geplaatst. De pijltjes die gebruikt worden voor het aanduiden van links (in een linklijst) zijn nu voor de link geplaatst in plaats van erachter. Dit komt de scanbaarheid ten goede. Afmetingen (margins en paddings), kleuren, lijndiktes, etc. die niet in dit boek staan, zijn gedefinieerd in de Photoshop bestanden (gelaagde PSD s). De opzet zoals hier getoond is een voorbeeld en geeft aan hoe verschillende elementen worden vormgegeven. Bijvoorbeeld hoe een linklijst eruit ziet met externe links of met interne links en hoe je een foto van een minister en/of staatssecretaris plaatst. Dat betekent dus niet dat iedere homepagina er op deze manier uit moet zien met deze hoofdnavigatie tabs. Dat hangt geheel af van de content die je wilt tonen. Internet - homepagina met tekst over twee kolommen

33 33 van 97 Homepagina met grote foto Voorbeeld van een homepagina met plaatsing van een optionele foto over een breedte van twee (grid) kolommen bovenaan de nieuwssectie. De breedte en hoogte van de getoonde foto is 436px bij 148px. Dit is geen verplicht formaat. Het formaat van een foto moet wel altijd passen binnen het grid en binnen de voor de rijksbrede huisstijl geldende fotorichtlijnen. Internet - homepagina met een foto over twee kolommen

34 34 van 97 Homepagina met tong De tong is bedoeld als plaats om onderwerpen in op te nemen en uit te lichten. Internet - homepagina met tong

35 35 van 97 Contentpagina De subnavigatie staat altijd in de eerste kolom en heeft een gefixeerde positie op de pagina. De afstand tussen de onderkant van de topnavigatie en de bovenkant van de achtergrondkleur van de eerste link is altijd 40px (zie rode lijnen op de afbeelding). Voor de aanduiding van de actieve link in de subnavigatie gebruik je de lichtere (middelste) tint van de gekozen kleur. Indien een geselecteerd menu-item in de subnavigatie subpagina s heeft, klapt het pijltje van het desbetreffende menu-item naar beneden. De subpagina s springen 10px in. 40px 22px Internet - Contentpagina

36 36 van 97 Pagina met lijst De getoonde horizontale separatielijnen boven- en onderaan de lijst hebben altijd de gekozen volle kleur en zijn 3px dik. De titels in de lijst zijn blauw, vet en onderstreept om te benadrukken dat het hier ook om links gaat (dat ze klikbaar zijn). Blauw (#154273) is de algemene kleur voor tekstlinks. De datum bij elk artikel staat volledig uitgeschreven. Internet - Pagina met lijst

37 37 van 97 Dossierpagina Op een dossierpagina verschuift de content van de pagina een stukje naar beneden, zodat tussen de header en de content ruimte ontstaat voor de naam van het desbetreffende dossier. De kleur van de dossiernaam krijgt óf de gekozen volle kleur óf bij onvoldoende zichtbaarheid de gekozen contrastkleur (zie ook Contrastkleuren). De dossiernaam herhaalt zich in de subnavigatie (geplaatst bovenaan de subnavigatie) en heeft de lichtste tint van de gekozen volle kleur. De geselecteerde/actieve subpagina s krijgen de lichtere tint van de gekozen volle kleur (in het hiernaast getoonde voorbeeld is dat Paginatitel ). Internet - Dossierpagina

38 38 van 97 Visuele verwijzing aan beeldmerk Ter afsluiting staat aan de onderkant van de pagina, op de contentlaag, het blauwe blokje (de visuele referentie aan het beeldmerk). Dit staat altijd horizontaal gecentreerd (zie ook Logopositionering). Het voorbeeld hiernaast toont een internetpagina waarop helemaal naar beneden is gescrold. Tussen de content van de pagina en de visuele referentie is altijd 50px witruimte gereserveerd voor een rustige afsluiting van de pagina. Internet pagina naar beneden gescrold. Visuele verwijzing aan het beeldmerk (blauwe blokje) is nu zichtbaar