Huisstijlhandboek Internet en intranet. Versie 4.2 Datum Juli 2011

Huisstijlhandboek Internet en intranet Versie Datum

4.2 Juli 2011

Huisstijlhandboek Rijksoverheid | Internet en intranet | Versie 4.2 | Juli 2011

2 van 97

Colofon Versienummer 4.2 Datum juli 2011 Locatie http://www.rijkshuisstijl.nl Ontwerp Studio Dumbar Auteur Project 1 Logo Historie van eerder gepubliceerde versies Versie, uitgavedatum en wijzigingen Versie 1.0 - 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 3.0 - 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 4.0 - December 2010 • URL huisstijlsite gewijzigd in www.rijkshuisstijl.nl Versie 4.1 - 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 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


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 http://snook.ca/technical/colour_contrast/colour.html.

4 van 97


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.

75px

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:

44px

-- 940px breed (excl. 8px schaduwrand) -- 956px breed (incl. 8px schaduwrand) Het logo Het beeldmerk is tegen de bovenkant van de contentlaag gepositioneerd en hierin horizontaal gecentreerd. De afmetingen van het beeldmerk zijn: -- 44px breed

470px

-- 75px hoog

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

44px Logopositionering voor internet in de header en de visuele referentie aan het beeldmerk (blauwe blokje) onderaan de contentlaag

25px


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

6 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

7 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

8 van 97


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

Volle kleur Lichtste variant

Contrastkleur

Lichtere variant


10 van 97

Grid en layout internet

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.

29px header (177px)

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.

1px border (#535353) 75px 147px

1px border (#535353)

12px

12px

60px topnavigatie (incl. navigatierand)

174px

58px

40px

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

24px

20px 56px

50px 25px Afmeting basis-grid

44px

auto


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.

29px 1px border (#535353)

header (207px)

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.

11 van 97

75px 177px 30px


12px

titelbalk 12px


174px

40px

De totale hoogte van de internet header met titelbalk is 207px.

8px

8px auto

auto

940px

24px

20px 56px

50px Afmetingen basis-grid met titelbalk internet

56px

25px

44px


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.

Maximaal beschikbare horizontale ruimte voor tabs (hoofdnavigatie)

688px


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

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.

29px 1px border (#535353)

header (207px)

De totale hoogte van de intranet header (inclusief de ‘naam intranet’ balk) is 207px.

75px 177px 30px


12px

titelbalk 12px


174px

40px

Eventuele footer content dient boven deze 50px witruimte te staan. Disclaimer en Privacy informatie kan je plaatsen op de lichtgrijze achtergrondlaag.

8px

8px De totale contentlaag staat altijd gecentreerd in het browservenster.

auto

auto

940px

24px

20px 56px

50px 25px Afmeting basis-grid intranet.

56px

44px


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

14 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

15 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

16 van 97


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

17 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

18 van 97


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 #000000 H2: Verdana regular 16px #000000 H3: Verdana bold 11 px #000000

Internet, intranet en neutraal


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.

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

21 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

22 van 97


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

Level 0

Level 1

Level 2

Level 3

Level 4

Level 5


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

24 van 97

Level 2

Level 3

Level 6

Level 7

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

Overzicht subnavigatie van 7 levels diep

Level 4


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

Level 0

Level 1

Level 2

Level 3

Level 4

Level 5


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

26 van 97

Level 2

Level 3

Level 6

Level 7

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

Overzicht subnavigatie van 7 levels diep

Level 4


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.

27 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 www.prinsjesdag2008.nl. Als je klikt op het logo dan linkt het logo naar de homepage van www.prinsjesdag2008.nl en niet naar www.rijksoverheid.nl.

Voorbeeld van een 4-regelige afzender. Verticale witruimte tussen beeldmerk en gekleurde balk is 26px in plaats van de standaard 12px

28 van 97


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.

#673327 / #d1c1be

#ffb612 / #ffe9b7

#ca005d / # efb2ce

#f9e11e / #fdf6bb

#d52b1e / #f2bfbb

#94710a / #dfd4b5

#317000 / #f6d4b2

#777c00 / #d6d7b2

Let verder op het gebruik van de tekstkleur (wit of zwart) afhankelijk van de gekozen kleur (zie ook kleurenpalet en contrast).

Verschillende kleurvarianten van de header


Kleurvarianten van de header Deze pagina toont de internetheader in de overige acht kleuren uit het kleurenpalet, wederom gerangschikt op kleurtint.

Vervolg van de verschillende kleurvarianten van de header

30 van 97

#275937 / #becdc3

#007bc7 / #b2d7ee

#39870c / #c3dbb6

#42145f / #c6b8cf

#76d2b6 / #d6f1e9

#a90061 / #e5b2cf

#8fcae7 / #ddeff8

#f092cd / #faded0


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.

31 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

32 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

33 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

34 van 97


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


Pagina met lijst De getoonde horizontale separatielijnen bovenen 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

36 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

37 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

38 van 97


Voorbeelden intranet, die ook mogelijk zijn voor internet Standaard homepagina De visuele invulling van de content is een vormgevingsvoorstel gebaseerd op een standaard intranet website. Afmetingen (margins en paddings), kleuren, lijndiktes, etcetera 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. Dat betekent dus niet dat iedere homepagina er op deze manier uit moet zien met deze hoofdnavigatie tabs en met dit soort content.

Intranet - Homepagina

39 van 97


Geavanceerde homepagina De visuele invulling van de content is een vormgevingsvoorstel gebaseerd op een web 2.0-achtige omgeving van het Rijksweb. De Ingelogd als... en Uitloggen link zijn geplaatst aan de linkerkant bovenaan de pagina op de achtergrondlaag (altijd in deze volgorde). De rechterkant is bestemd voor Contact en Help (in deze volgorde). Uiteraard geldt hier net als bij het internet dat deze links alleen getoond worden indien van toepassing. Afmetingen (margins en paddings), kleuren, lijndiktes, etcetera 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. Op deze pagina bijvoorbeeld worden zogenoemde portlets vormgegeven. Dat betekent dus niet dat iedere homepagina er op deze manier uit moet zien met deze hoofdnavigatie tabs en met portlets. De volgende pagina’s tonen andere type pagina’s met andere vormgevingselementen die je kunt gebruiken.

Intranet - Homepagina.

40 van 97


Categoriepagina Voorbeeld van een intranetcategoriepagina. De Personeel tab (hoofdnavigatie) is nu actief/geselecteerd. Dit is ook zichtbaar in de broodkruimel.

Intranet - Categoriepagina

41 van 97


Contentpagina Voorbeeld van een intranet contentpagina. De actieve link in de subnavigatie wordt aangeduid middels een gekleurde achtergrond (#deebe3). 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 #deebe3 nu #eef4f6 (zie ook Kleurenpalet en contrast). De geselecteerde/actieve subpagina’s springen 10px in en krijgen de kleur #deebe3 (in het hiernaast getoonde voorbeeld is dat ‘Werken bij de overheid’). Aan de rechterkant op de pagina staat een voorbeeld van een drop-down menu. Drop-down menu’s, input fields (op de zoekfunctionaliteit na), radio buttons, check boxes, etc. dienen standaard HTML elementen te zijn en niet gestijld te worden. De look is dan afhankelijk van de platform-browser combinatie waarop de pagina wordt bekeken (het drop-down menu in het hiernaast getoonde voorbeeld heeft de standaard Safari look).

Intranet - Contentpagina

42 van 97


Aanpassen van de startpagina De hiernaast geplaatste afbeelding is een vormgevingsvoorstel van het Rijksweb. De opzet zoals hier getoond is een voorbeeld en geeft aan hoe verschillende elementen worden vormgegeven. Op deze pagina bijvoorbeeld worden zogenoemde portlets vormgegeven. Dat betekent dus niet dat iedere homepagina er op deze manier uit moet zien met deze hoofdnavigatie tabs en met portlets. Het belangrijkste verschil tussen internet en intranet zit in de interactiviteit van de pagina. Een intranet homepage is relatief meer interactief dan die van internet; elke box in het voorbeeld kan worden gewijzigd en verplaatst en is inklapbaar. Elke box bestaat uit een header en een pixelrand om zijn content heen. Deze staan beide in het licht blauw (#deebe3). Mochten de boxen nog een onderverdeling hebben, dan kun je deze separeren met een achtergrondkleur, hiervoor gebruiken we het lichtste blauw (#eef4f2), hiernaast te zien bij SZW | Overzicht nieuws en Nu.nl.

43 van 97


Hier is te zien hoe een extra menu tevoorschijn komt na het klikken op Maak je eigen startpagina. Je kunt een selectie maken uit verschillende onderdelen waarvan je wilt dat ze zichtbaar zijn op de homepage. In dit voorbeeld zie je een situatie waarin meerdere tabbladen beschikbaar zijn (content, widgets, rss feeds). In het geval dat er geen tabs beschikbaar zijn, kan je deze kopjes weglaten. Daardoor komt het geheel eronder een stukje omhoog. Onderaan zie je een duidelijk onderscheid tussen de optie Annuleren en Opslaan. Dit is zo ontworpen om de kans dat de gebruiker per ongeluk op annuleren klikt zo klein mogelijk te houden.

44 van 97


Aanpassen startpagina met checkbox mogelijkheid Op sommige pagina’s is het voor een gebruiker mogelijk te kiezen welke blokken wel of niet worden weergegeven. Sommige blokken zijn verplicht; in dit voorbeeld is dat bijvoorbeeld Rijksbreed nieuws. Als een blok verplicht is, wordt dit aangegeven door een ‘slot’ icoon in de opties. Niet verplichte blokken kunnen aan en uit worden gezet door de gebruiker. Alle geselecteerde blokken krijgen een lichtblauwe achtergrondkleur, niet geselecteerde blokken zijn wit. Nieuwe items kunnen een extra accent krijgen door het plaatsen van een Nieuw tag. Dit vlak heeft als achtergrond de groene kleur uit het kleurenpalet (#39870c).

45 van 97


46 van 97

Optionele elementen


Achtergrondkaders Bij het gebruik van achtergrondkaders hoort een aantal richtlijnen. -- Een achtergrondkader kan nooit een volle kleur hebben. -- een kader staat altijd in de lichtste websitekleur of in neutraal grijs. -- Kaders worden gebruikt om elementen te clusteren of om elementen te highlighten. -- Mocht er een situatie zijn waarin een bepaald visueel element extra aandacht moet krijgen, dan mag je gebruik maken van de lichte websitekleur. -- Zodra er een grote afbeelding aanwezig is, kan het nodig zijn een lichte achtergrondkleur te gebruiken om zo de pagina weer in balans te brengen. Voorbeelden -- In de afbeelding linksboven staat een afbeelding waarbij zowel een clustering van elementen gewenst is, als een visuele ondersteuning om de content naast de afbeelding in balans te brengen. -- In de afbeelding linksonder staat een tabel die de lichtste achtergrondkleur heeft, maar de rowheaders krijgen extra accent door een lichte achtergrondkleur. -- Rechtsboven is een lichte websitekleur gebruikt in plaats vaneen lichtste variant om extra nadruk te leggen op de 5. Contrastkleuren -- Het is toegestaan om de gekozen contrastkleur te gebruiken voor de achtergrondkaders op homepagina’s en subhomepagina’s. Probeer eerste de websitekleur en neutraal grijs, voordat je de contrastkleur gebruikt -- De contrastkleur voor achtergrondkaders bestaat alleen in de lichtste variant.

47 van 97


Ankernavigatie Een ankernavigatie wordt met name gebruikt bij contentpagina’s. De ankerlijst opmaak is lettertype Verdana, 11 pixels groot en altijd onderstreept. In de opmaak kun je gebruik maken van nummering en bullets. Zie voor meer informatie Vraag en antwoord met nummer van dit document. Indien je meer wilt weten over bezochte links en rollovers kijk dan bij Link language in dit document. De link Naar boven staat altijd onderaan de pagina onder de paragraaf tekst. De links in de lijst hebben geen pijl ervoor staan en springen ook niet in.

48 van 97


49 van 97

Banners internet Bekijk voor banners op externe sites het Huisstijlhandboek Internet banners. Algemene opmerkingen -- Een banner heeft een vaste maat (h x br) en hoort in een kolom te staan die dezelfde breedte heeft. -- Let op dat bij het gebruik van veel banners het effect verloren gaat, gebruik dus maximaal 5 banners in één rij. -- Er staat bij voorkeur een vierkante foto aan de linkerkant. -- De gehele banner is een link (dus niet alleen de tekst) -- Er is geen roll-over state voor een banner (behalve dat de cursor verandert). -- De tekst staat altijd in de Verdana 11px. Deze kan zowel regular als bold zijn en mag maximaal 3 regels lang zijn. De tekst staat altijd verticaal gecentreerd en links uitgelijnd. Volle kleuren

Internetspecifieke opmerkingen -- De banner mag iedere volle kleur hebben, behalve de gekozen volle hoofdkleur voor de website waar de banner op geplaatst wordt (15 opties in totaal dus). -- De banner mag de lichtere en/of lichtste afgeleide kleur hebben van de gekozen volle hoofdkleur van de website waar de banner op geplaatst wordt (2 opties dus). Je mag geen combinaties met de hoofdkleuren maken. -- De afgeleide lichtere en lichtste kleuren mag je daarentegen wel meer dan één keer gebruiken op één en dezelfde pagina. -- Er mag nooit meer dan één banner dezelfde volle kleur hebben op één en dezelfde pagina. Homepagina / landindingspagina -- Banners mag je nooit in combinatie met de zogenaamde tong op de homepagina gebruiken. Contentpagina -- Op contentpagina’s met subnavigatie staan de banners altijd in de meest rechtse (de vierde) kolom.

Internet

Verzameling van opties


Banners intranet Intranetspecifieke opmerkingen -- In de banners mag je de volgende drie rijksbrede blauwtinten naar keus inzetten. Van donker naar licht: #4d85a2, #a8cad2 en #deebe3. Homepagina / landindingspagina -- Banners mag je nooit in combinatie met de zogenaamde tong op de homepagina gebruiken. Contentpagina -- Op contentpagina’s met subnavigatie staan de banners altijd in de meest rechtse (de vierde) kolom.

Intranet met banners

50 van 97


51 van 97

Digitaal formulier Een formulier gebruik je voor registraties of vragen en antwoorden. Elk formulier is opbouwd uit velden, waarbij elk veld een uniek label heeft. Een formulier bestaat uit een of meerdere secties, zoals bijvoorbeeld het vraag en antwoord formulier. Dit formulier is onderverdeeld in header, toelichting, vraagstelling en persoonsgegevens. De secties worden gescheiden door een witruimte. Elke sectie bestaat uit een of meerdere velden die gescheiden worden door een witte lijn van 1px. De header van de pagina is de H1 variant van de subkoppen. De koppen in de secties zijn de H3 variant van de subkoppen. De labels van de velden starten altijd met een hoofdletter en hebben dezelfde opmaak als de broodtekst. De velden hebben altijd de dezelfde breedte. Intranet

De achtergrondkleur van de secties in het formulier is altijd de lichtste kleur van het gekozen kleurenschema. Het kader van een veld is altijd zwart.

Internet

Neutraal


52 van 97

Indien een verplicht veld verkeerd of niet wordt ingevuld, zal de kadering en het label van het veld van zwart in rood veranderen. Ook verschijnt er een foutmelding (met een icoon), die aangeeft welke velden verkeerd of niet zijn ingevuld. De kleur van de kadering en de labels van de error velden zijn altijd de volle rode kleur. De box van de foutmelding maakt gebruik van de lichtere rode kleur van het kleurenschema.

Intranet Internet


Digitaal formulier - Elementen Op deze pagina staan voorbeelden van formulierelementen. Indien mogelijk wordt de huisstijl toegepast, maar standaard browser formulierelementen zijn ook acceptabel. De rechter kolom van deze pagina laat de standaard formulierelementen zien van Internet Explorer en Safari.

53 van 97


Op deze pagina worden de toepassingsmogelijkheden uitgelegd van de buttons en invoervelden. Je kunt buttons primair of secundair gebruiken. Primair houdt in dat er een visuele nadruk op ligt. Secundair houdt in dat er geen visuele focus nodig is. Een primaire button maak je altijd op zoals de broodtekst maar dan in bold. Een secundaire button maak je altijd op zoals de broodtekst. De kadering van een button is altijd zwart, tenzij hij disabled is. De achtergrondkleur van een button is altijd wit zodra hij op een gekleurde achtergrond staat en heeft een blauwe achtergrondkleur (#deebe3) zodra hij op een witte achtergrond staat. In het Photoshopbestand is meer informatie te vinden over kleurgebruik en lettertypes. Zoals het voorbeeld laat zien zijn de invoervelden op twee manieren toe te passen: horizontaal of verticaal. De asterix(*) wordt gebruikt om aan te geven dat een veld verplicht is en ingevuld dient te worden.

54 van 97


55 van 97

Elektronisch formulier - Procesindicator In de situatie van een formulier met meerdere stappen gebruiken we een procesindicator boven het formulier. Deze procesindicator heeft dezelfde breedte als het formulier. Mocht dat niet voldoende zijn, dan kun je de volledige breedte gebruiken. Volledige titels Er bestaan twee varianten van de procesindicator. Een variant met volledig uitgeschreven titels en een variant met nummers. De uitgeschreven stappen kun je alleen gebruiken als hiervoor ook voldoende ruimte beschikbaar is in de breedte. Achtergrondkleur Het is toegestaan om de lichtste variant van de gekozen kleur te gebruiken als achtergrond voor de elektronische formulieren. Om de procesindicator en andere dynamische elementen maximaal tot hun recht te laten komen, is het raadzaam het neutrale grijs te gebruiken. Zeker als de gekozen website kleur geel, rood of een andere kleur heeft die kan gaan spelen of vloeken met de gele elementen in het formulier. Weergave van stappen De huidige stap in de indicator wordt altijd aangegeven met de volle gele kleur (#f9e11e) als achtergrond. Stappen die nog genomen moeten worden hebben altijd het neutrale grijs als achtergrond. Zie linker afbeelding. Zodra de gebruiker in de tweede of hogere stap zit van het proces zullen de ingevulde stappen altijd de lichtere gele achtergrondkleur krijgen (#fdf6bb). Zie rechter- en onderste afbeelding.

Procesindicator met volledige titels - stap 1

Uitvergroting van de procesindicator

Procesindicator met volledige titels - stap 2


Volledige titels Hiernaast zie je een aantal voorbeelden van de procesindicator. In de bovenste groep staan voorbeelden van de procesindicator met volledig uitgeschreven titels. Genummerde procesindicator In de tweede variant wordt alleen de volledige titel van de huidige stap weergegeven, de vorige en volgende stappen staan als nummers weergegeven. Deze variant is goed bruikbaar zodra er gebrek aan ruimte in de breedte is. Ruimteverdeling De vuistregel voor de verdeling van de ruimte per stap is als volgt: de actieve stap krijgt genoeg ruimte voor een volledige titel. De resterende ruimte wordt verdeeld over de resterende stappen. De enige uitzonderingen hierop zijn situaties waarin er maar twee of drie stappen bestaan. Dan wordt de ruimte, die gelijk is aan de breedte van het formulier, evenredig verdeeld over de stappen.

56 van 97

Procesindicator met volledige titels Twee stappen

Drie stappen

Vijf stappen Volledige breedte

Genummerde procesindicator Vijf stappen

Zeven stappen

Procesindicator volledig ingevuld Vijf stappen Volledige breedte Zeven stappen Volledige breedte


57 van 97

Tweede laag navigatie procesindicator In sommige situaties is het mogelijk dat een stap uit een aantal substapjes bestaat. Hiervoor kun je een tweede laag van de procesindicator toevoegen. Het geselecteerde item staat bold en in het zwart weergegeven. Pagina’s die nog niet bezocht zijn, staan in het grijs. Op de tweede afbeelding zitten we op stap 3. Hierbij is te zien dat de vorige stappen klikbaar zijn geworden en als links worden weergegeven. Het is dus mogelijk om snel naar een vorige stap terug te navigeren door hierop te klikken.

Beginstatus tweede laag navigatie

Tweede laag navigatie op stap 3


Elektronisch formulier - Informatiekader Actief invoerveld Zodra een gebruiker een invoerveld heeft geselecteerd, krijgt dit veld de donkere neutrale grijs of de lichtere gekozen kleur als achtergrondkleur. Informatiekader Bij sommige vragen is extra uitleg noodzakelijk. Hiervoor kun je het informatiekader gebruiken. Dit kader bevat een korte uitleg over de desbetreffende vraag. Het heeft de lichte gele kleur als achtergrond (#fdf6bb) en verschijnt alleen zodra er op de ‘?’ knop wordt geklikt. Met de ‘x’ knop kan dit kader weer gesloten worden.

Internetpagina met informatiekader

58 van 97


59 van 97

Elektronisch formulier - Dynamische elementen In dit voorbeeld zie je een vraag waarbij een extra vraag noodzakelijk is (toestemming van ouders). In dit soort situaties kunnen extra vragen tevoorschijn komen. In dit geval heeft de bezoeker een leeftijd van onder de 18 jaar ingevuld. Hierdoor worden er extra vragen ingeladen en schuift het formulier open om deze extra vragen te vertonen. Deze extra vragen krijgen de lichtere gele achtergrondkleur (#fdf6bb). Hierdoor komen ze extra naar voren zodat de bezoeker deze niet over het hoofd zal zien tussen de andere vragen.

Dynamisch formulier

Dynamisch formulier met extra vraag


60 van 97

Fotobijschriften Fotobijschriften worden toegepast zoals weergegeven op deze pagina. De opmaak van het bijschrift heeft geen eigen verticale spatiëring en maakt gebruik van de volgende kleur (#767676) en het lettertype Verdana, grootte 11px.


Internet


61 van 97

Functionele links Als je op een pagina een functionele link wilt plaatsen, (bijvoorbeeld Printen), dan komt deze in de footer onderaan de pagina. De voorbeelden tonen de mogelijkheden voor één of meer links; ze worden verdeeld over meerdere rijen in twee kolommen. De afgebeelde iconen kun je terugvinden in de iconenset.

Intranet - 1 rij

Neutraal - 1 rij

Internet - 2 rijen

Intranet - 2 rijen

Neutraal - 2 rijen

Internet - 3 rijen

Intranet - 3 rijen

Neutraal - 3 rijen

Internet


62 van 97

Je kunt de functionele links ook aan de rechterzijde op een pagina plaatsen in plaats van in een footer. In dat geval wordt er slechts één regel gebruikt.

Intranet (ingezoomd)

Neutraal (ingezoomd)

Internet


63 van 97

Grafiek lijndiagram In het huisstijlhandboek staat per websitekleur een bijhorend palet aan kleuren voor tabellen en grafieken. Bij het gebruik van grafieken en diagrammen hebben de bijbehorende tabellen een grijze achtergrondkleur. Dit om de nuance tussen de tabellen en de grafieken groter te maken. Hierdoor komen de gebruikte kleuren beter tot hun recht. Dit voorkomt tevens dat de kleurvlakjes in de legenda gaan vloeken met de achtergrondkleur (zie de blauwe, gele en groene vlakjes in het voorbeeld hiernaast).

Intranet en neutraal

Internet


64 van 97

Grafiek staafdiagram Hiervoor gelden dezelfde opmerkingen als voor de lijndiagram.

Intranet en neutraal

Internet


65 van 97

Grafiek taartdiagram Hiervoor gelden dezelfde opmerkingen als voor de lijndiagram.


Internet


Iconenset Hiernaast staat het volledige overzicht van de iconenset. Deze is ingericht in vier kolommen. In de eerste kolom staat het standaard icoon. In de tweede staat een alternatief. In de derde en vierde kolom is een praktijk situatie getoond. Hier kun je het icoon in een context zien en het gedrag bij rollovers. Iconen kennen geen hoverstatus en veranderen niet van kleur. Ze krijgen ook geen underline bij een rollover.

66 van 97


67 van 97

Iconen van externe software mogen in hun originele vorm worden weergegeven. Ze mogen dan dus ook kleur bevatten. Zo mag de W in het Word-icoon blauw blijven en mag je in het PDF-icoon rood gebruiken. Het gaat hier dus niet om de huisstijliconen. Een nadeel van het gebruik van de originele iconen is dat de fabrikant van de software ervoor kan kiezen het icoon te wijzigen. Zorg ook daarom altijd voor duidelijke benamingen bij de iconen. Gebruik de huisstijl iconen en de gekleurde varianten niet door elkaar.

Iconen in de huisstijlvariant

Iconen in hun originele kleur


Informatiemeldingen Op sommige pagina’s kun je gebruik maken van een informatiebox om extra content te tonen. De informatiebox gebruikt de lichtere gele kleur (#fef1bc) en wordt altijd getoond met het informatie icoontje dat de volle gele achtergrondkleur (#fbd326) heeft.

Internet en intranet

68 van 97


Kalender Bij het gebruik van kalenders op internet kun je kiezen uit neutraal grijs of de lichtere variant van de internetkleuren.

69 van 97


Kalender intranet Bij het gebruik van kalenders op intranet kun je kiezen uit neutraal grijs of de lichtere variant van de intranetkleur.

70 van 97


Kruimelpad over meerdere regels Indien het kruimelpad te lang is en meer dan een regel nodig heeft verschuift de content naar beneden. De subnavigatie plaats je altijd 40 px onder het menu. Het kruimelpad loopt door tot aan het einde van de rechterkolom. Je kunt het kruimelpad door laten lopen tot en met de gekozen pagina of tot het niveau daarvoor.

71 van 97


72 van 97

Lijst zonder filter opties Deze pagina gebruik je als er veel content items getoond moeten worden, zoals een dossierpagina of een Zoekresultaatpagina. Voor meer informatie over de visuele presentaties van links, zie Link language in dit boek. -- Een onbezochte paginalink is altijd blauw en onderstreept. -- Een bezochte link is altijd grijs en onderstreept. -- Een actieve paginalink is zwart, bold en niet onderstreept. Een lijn onder en boven de nummering van het aantal pagina’s is grijs of heeft de volle kleur van het gekozen kleurenschema. De lijn wordt alleen toegepast op Lijstpagina’s of Zoek-resultatenpagina’s. Deze lijn is 3px. Intranet

Internet Neutraal


73 van 97

Lijst met filter opties De filterfunctie maakt gebruik van de opmaak van een formulier. De achtergrondkleur is grijs of de lichtste kleur van het gekozen kleurenschema. De secties van de filterfunctie worden gescheiden door een witte lijn die 1px is. Voor meer informatie zie Formulieren.

Intranet

Internet

Neutraal


Login formulier Op deze pagina wordt een voorbeeld gegeven van een login-formulier, dat verschijnt als er op een (deel van de) site moet worden ingelogd. Indien een verplicht veld verkeerd of niet ingevuld wordt zal de kadering en het label van het veld van zwart in rood veranderen. Ook verschijnt er een foutmeldingsbox met een icoon, dat aangeeft welke velden verkeerd of niet zijn ingevuld. De kadering en de labels van de velden hebben altijd de volle rode kleur. De tabel maakt gebruik van de lichtere rode kleur van het kleurenschema.

74 van 97


Mouse-over kleurvlak Gebruik een mouse-over met een kleurvlak bij voorkeur enkel (link)lijsten en tabellen. Als je voor voor duidelijk zichtbaar clickable titels (blauw/underline) en een ‘lees verder’ linkje zorgt aan het einde van nieuwsitem, is een mouse-over kleurvlak niet nodig. Gebruik bij voorkeur de lichtste neutrale grijs voor het mouse-over kleurvlak in lijsten en tabellen.

75 van 97


Onderscheidslijnen Onderscheidslijnen zijn te gebruiken, mits je ze op dezelfde manier gebruikt als bij een lijstpagina (bovenen onderaan de linklijst). Dus de rollover met grijze achtergrond kan je hier ook gebruiken.

76 van 97


77 van 97

Opsommingen Hier staan twee voorbeelden van opsommingen. Genummerde lijst Als je gebruik maakt van meer dan één nummer in de nummering, hou er dan rekening mee dat de uitlijning van regels die inspringen gelijk blijft. Bullet list Als je gebruik maakt van bullets zijn deze vierkant en springt de regel in. Advies: maak gebruik van een stylesheet voor het toepassen van de vierkante bullets op de pagina {list-style:square}.

Bullet list - Internet, intranet en neutraal

Genummerde lijst - Internet, intranet en neutraal


78 van 97

Organogrammen Een organogram wordt voornamelijk toegepast om een systematische weergave van een organisatie te geven. Een organogram maakt gebruik van de lichtste kleur als achtergrondkleur en de volle kleur als omkadering. Pas wit toe als achtergrondkleur van een cel in het organogram. Tekst in het organogram is altijd gecentreerd en is gelijk aan de opmaak van de broodtekst.

Intranet

Internet

Neutraal


79 van 97

Kleine organogrammen plaats je in de twee middelste kolommen. Afbeeldingen en andere elementen die in de rechterkolom voorkomen, kun je combineren met een organogram.

Intranet

Internet Neutraal


Portalnavigatie Sommige sites zijn ingedeeld in meerdere secties, waarbij elke sectie zijn eigen links in de topnavigatie heeft. In deze situatie is het mogelijk om de links in de topnavigatie te gebruiken als portalingangen en een extra navigatiebalk eronder te gebruiken om de topnavigatielinks te plaatsen. Deze methode is alleen toegestaan bij portals en mag dus niet als subnavigatie worden gebruikt.

80 van 97


81 van 97

Sitemap Een sitemap is een overzichtspagina. Dit is een samenvatting van alle pagina’s die de site bevat in een lijstweergave en hij is functioneel onderverdeeld. De lijstweergave is actief; dit houdt in dat je kunt doorklikken naar de desbetreffende pagina. Er zijn twee mogelijke weergaven van de sitemap. De onderverdeling van bijgaand voorbeeld is als volgt: -- Het eerste niveau is de topnavigatie, deze wordt weergeven in bold en is onderstreept. -- Het tweede niveau (subnavigatie) zijn de pagina’s die onder de topnavigatie vallen, deze worden onderstreept weergegeven. -- Het derde niveau zijn de pagina’s die onder het tweede niveau (subnavigatie) vallen, deze worden weergeven door middel van pijlen. Optioneel kunnen linklijsten aan de rechterzijde worden gebruikt om bepaalde links uit te lichten. Voor de sitemap is het toegestaan om de verticale subnavigatie weg te laten en de hele pagina te gebruiken. De hele pagina is immers één groot navigatie-element.


Internet


De onderverdeling van dit tweede voorbeeld is als volgt: -- Het eerste niveau is de topnavigatie, deze wordt weergeven in bold en is onderstreept. -- Het tweede niveau (subnavigatie) zijn de pagina’s die onder de topnavigatie vallen, deze springen iets in en worden ook in bold en ondersteept weergegeven. -- Het derde niveau zijn de pagina’s die onder het tweede niveau (subnavigatie) vallen, deze worden weergeven door regular en onderstreept weergegeven. De navigatie is verbonden met verticale lijnen. Optioneel kunnen linklijsten aan de rechterzijde worden gebruikt om bepaalde links uit te lichten. Voor de sitemap is het toegestaan om de verticale subnavigatie weg te laten en de hele pagina te gebruiken. De hele pagina is immers één groot navigatie-element.

Internet

82 van 97


83 van 97

Smoelenboek Deze opmaak pas je bijvoorbeeld toe om een overzicht te geven van alle werknemers. De afbeeldingen zijn altijd vierkant en de werknemersinfo is maximaal één kolom breed. De afbeeldingen zijn van gelijke grootte. De naam van de werknemer wordt getoond in bold en de onderliggende info heeft de opmaak van de broodtekst. De opmaak maakt uiteraard gebruik van het grid. Je mag maximaal twee kolommen naast elkaar gebruiken. De pagina biedt de functionaliteit om door te linken naar het e-mailadres van de werknemer of, indien van toepassing, naar de website van de werknemer.


Internet


Stelling-/ poll module internet De stelling- of pollmodule gebruik je om een vraag aan de bezoeker te stellen. Deze meerkeuze vragen bestaan uit radiobuttons en hebben in principe geen verzendbutton. De vraag wordt immers ingediend zodra men op één van de radiobuttons klikt. Hieruit volgt direct een resultaat of tussenstand. Deze module bestaat in twee vormen. De twee linkerafbeeldingen laten de variant zien met alleen een kader. Op de rechterafbeelding staat de variant met de titel in een header met daaronder de uitslag. Deze heeft geen header maar alleen een kader.

84 van 97


Stelling-/ poll module intranet De stelling- of pollmodule gebruik je om een vraag aan de bezoeker te stellen. Deze meerkeuze vragen bestaan uit radiobuttons en hebben in principe geen verzendbutton. De vraag wordt immers ingediend zodra men op één van de radiobuttons klikt. Hieruit volgt direct een resultaat of tussenstand. Deze module bestaat in twee vormen. De twee linkerafbeeldingen laten de variant zien met alleen een kader. Op de rechterafbeelding staat de variant met de titel in een header met daaronder de uitslag. Deze heeft geen header maar alleen een kader.

85 van 97


Stelling-/ poll module neutraal De neutrale stijl kun je uiteraard voor internet en voor intranet gebruiken. Verder gelden hier dezelfde opmerkingen als bij Stelling-/ poll module internet.

86 van 97


87 van 97

Tabellen Een tabel wordt gebruikt voor het tonen van feitelijke informatie en georganiseerde data. Een tabel bestaat uit rijen en kolommen. Elke rij en elke kolom is onderverdeeld in meerdere cellen. De huisstijl determineert dat de eerste rij en de eerste kolom een lichte achtergrondkleur hebben, in tegenstelling tot de anderen. Deze hebben de lichtste achtergrondkleur. De eerste rij en kolom van een tabel worden gebruikt als header. De cellen van een tabel worden gescheiden door een witte lijn ter dikte van 1px met kleurcode #ffffff. De tekstopmaak in een tabel verschilt niet van de broodtekstopmaak. Ga voor meer informatie hierover naar Link language.

Intranet

Zorg bij het plaatsen van een tabel dat je voldoende ruimte boven en onder vrijlaat. Dit zorgt voor een rustige opmaak van de pagina. Op deze pagina tref je een aantal voorbeelden aangaande het kleurgebruik aan. De kleurkeuze dient te rijmen met het kleurenschema van de website met uitzondering van de grijze achtergrondkleur die in elk kleurenschema toepasbaar is.

Internet Neutraal


Tag Cloud Een tag cloud kan in groot en klein formaat voorkomen. Groot formaat Hiernaast staat een voorbeeld van een grote tag cloud; deze is zowel links als rechts gejustificeerd, zonder gebruik van koppeltekens. Klein formaat Bij een kleine versie wordt de omlijning weergegeven en is de paragraaf links uitgelijnd. De tekstgroottes variëren van 10 tot 14 px. Let er op dat sommige tag cloud engines automatisch een tekstgrootte meegeven, in sommige gevallen moet je die dan aanpassen. Kleurgebruik Optioneel is het verduidelijken van de tag cloud door verschillende blauwtinten te gebruiken voor kleine en grote tekst. De kleine is dan lichter van kleur. Hiervoor zijn de rijksoverheid blauwtinten voor intranet gebruikt. Filterfunctie Voor een lange lijst items kan gekozen worden voor het toevoegen van een filter boven de tag cloud. Hiervoor gelden dezelfde regels als bij de linklijst met filter.

88 van 97


89 van 97

Tekstkader Tekstkaders worden bijvoorbeeld gebruikt wanneer teksten worden geciteerd uit andere documenten (verslag, rapport, onderzoek, boek etc). Het kader is grijs of de volle kleur van het gekozen kleurenschema en heeft een dikte van twee pixels. De tekst binnen het kaderheeft altijd een afstand van 10 pixels vanaf deze omkadering.

Intranet

Internet

Neutraal


90 van 97

Uitklaplinks internet Op deze pagina wordt het gedrag van uitklaplinks uiteengezet. -- Het eerste beeld (links) laat zien hoe de uitklaplinks zich gedragen als de pagina voor het eerst is ingeladen. -- Het tweede beeld (rechtsboven) laat zien dat de kleur verandert wanneer je met je muis over de link gaat. -- Het derde beeld (rechtsonder) laat de contentbox zien wanneer erop geklikt is. Uitklaplinks worden gebruikt om optionele content op de pagina te tonen. De gebruiker dient op de link te klikken om de content te bekijken. De achtergrondkleur van de uitklaplink verandert in de lichtste kleur. Wanneer de contentbox open is, wijst het pijltje van de uitklaplink naar beneden. Het kader van de contentbox is 1px in de kleur grijs.

Rollover

Idle state

Clicked


91 van 97

Uitklaplinks intranet Hiervoor gelden dezelfde regels als Uitklaplinks internet, maar hier maak je gebruik van de lichtere en lichtste blauwtint van het intranet.

Rollover

Idle state

Clicked


92 van 97

Vraag en antwoord Lijstversie Een vraag en antwoord pagina maakt gebruik van een ankernavigatie. De vraag is altijd bold en het antwoord heeft de typografie van de broodtekst. Er bestaat geen extra spatiëring tussen de vraag en het antwoord. De vraag wordt gesteld in de ankernavigatie en herhaald in de “vraag en antwoord” sectie op de pagina. De vraag in de “vraag en antwoord” sectie is de H3 variant van de subkoppen. Met het oog op de gebruiksvriendelijkheid is het raadzaam om een Naar boven link te plaatsen achter een Vraag en antwoord sectie. Genummerde versie Als je nummering toepast in de ankernavigatie, hou dan met het volgende rekening; -- Laat de nummering terugkomen in de vraag bij de desbetreffende antwoord. -- Zodra er meer regels nodig zijn bij de ankernavigatielinks, laat deze dan inspringen. -- Laat het antwoord op de vraag nooit inspringen. Hierdoor oogt de tekst de stuk rustiger. Internet, intranet en neutraal

Internet


Widget elementen Een widget kan een groot aantal functionaliteiten bezitten en specifiek gedrag. In principe bestaat een widget uit een box met outline en een header met inklappijltje, titel en Wijzig button. Het formaat kan wijzigen naar aanleiding van de inhoud en de indeling van de pagina (aantal kolommen). Hiernaast zie je een viertal widgets met een aantal voorbeelden van inhoud. -- Tekst -- Afbeeldingen -- Linklijst -- Functionele links

93 van 97


Hiernaast staan van boven naar onder vier states van een bepaalde widget. -- Ingeklapt -- Open -- Verslepen van widget -- Extra wijzigopties na klik op wijzig button Kleurgebruik Van links naar rechts staan de vier mogelijkheden. -- Lichtste gekozen kleur -- Lichtere gekozen kleur -- Lichtste contrastkleur -- Lichtere contrastkleur

94 van 97

Lichtste gekozen kleur

Lichtere gekozen kleur

Lichtste contrastkleur

Lichtere contrastkleur


Widget elementen intranet Op de volgende twee pagina’s zie je een volledig overzicht van de verschillende states van een specifiek voor het Rijksweb ontwikkelde widget.

1.

Op deze pagina zie je zes verschillende situaties.

2.

1. Een lege widget. 2. Het verslepen van een ingeklapte widget waarbij geheel rechts de onderliggende ondergrond te zien is. 3. Het verslepen van een opengeklapte widget waarbij geheel rechts de onderliggende ondergrond te zien is. 4. De idle en hover state van de wijzig button. 5. Zodra je op wijzig klikt kun je links toevoegen, hierbij zie je geheel rechts een foutmelding. 6. Toevoeging van een link, die je onderaan ziet verschijnen in de widget.

3.

4. 5.

6.

95 van 97


1. In deze drie afbeeldingen van links naar rechts zie je hoe een link wordt gewijzigd. 2. In deze twee afbeeldingen wordt de link Nu.nl wederom gewijzigd, ook zijn er op de rechter afbeelding extra opties zichtbaar die tevens ingeklapt kunnen worden. 3. Hier zie je een aantal hover states van een titelbalk met min/plus buttons. Deze krijgen bij een rollover een witte achtergrond. 4. In deze drie afbeeldingen zie je hoe het aantal vertoonde links vanuit Nu.nl veranderd kunnen worden.

1.

3. 4.

96 van 97

2.


97 van 97

Zoekresultaten Een zoekresultaatpagina heeft veel weg van de lijstpagina zoals elders in dit document omschreven. Boven- en onderaan staat een lijn, die kan zowel in de gekozen websitekleur als in het grijs staan. De gevonden resultaten staan genummerd waardoor de tekst per item inspringt. Naast het nummer staat een klikbare titel. Daaronder staat een stukje broodtekst waarin een deel van het artikel te lezen is. Als het gaat om een citaat uit een geheel, begint en eindigt deze met puntjes. Onder elk item kun je metagegevens plaatsen. Deze kunnen klikbaar zijn.

Intranet

Internet

Neutraal

Huisstijlhandboek Internet en intranet. Versie 4.2 Datum Juli 2011

Recommend Documents