Stijlgids. richtlijnen bouwblokken Rijksoverheid

Transcriptie

1 Stijlgids richtlijnen bouwblokken Rijksoverheid

2 01 Launchscreen

3 Rijkshuisstijl Bouwstenen - Launchscreen 40 dp 80dp Ministerie van Veiligheid en Justitie 24dp Het Launchscreen is het eerste scherm dat wordt weergegeven. Het doel van dit scherm is om de gebruiker feedback te geven dat de app geladen wordt. Het kan bijvoorbeeld een logo (en/of slogan) bevatten van de instantie of organisatie. Na het launchscreen kan er ook een splashscreen weergegeven worden. Daar kan bijvoorbeeld een animatie of video in zitten, dit om bijvoorbeeld de branding meer te benadrukken. Het is het enige scherm waarin het logo van de betreffende organisatie te zien is. De naam van de organisatie komt op het splashscreen nooit naast het beeldmerk te staan. Op het launchscreen van de app komt de naam van de organisatie als deze gebruikt wordt dus onder het beeldmerk. Ministerie van Veiligheid en Justitie Het woordmerk heeft een fontgrootte van 13 sp en (indien op twee of maximaal drie regels verdeeld) een interlinie van 17 sp.

4 Rijkshuisstijl Bouwstenen - Launchscreen Ministerie van Veiligheid en Justitie Ministerie van Veiligheid en Justitie Metus venenatis mattis Metus venenatis mattis Curabitur a leo at ipsum vehicula euismod Curabitur a leo at ipsum vehicula euismod Metus venenatis mattis Curabitur a leo at ipsum vehicula euismod

5 Rijkshuisstijl Bouwstenen - Launchscreen Ministerie van Veiligheid en Justitie Blijf op de hoogte van uw onderwerpen Informatie Rijksoverheid Blijf op de hoogte van uw onderwerpen Informatie Rijksoverheid Blijf op de hoogte van uw onderwerpen

6 Rijkshuisstijl Bouwstenen - Launchscreen Informatie Rijksoverheid Curabitur a leo at ipsum vehiculg euismod Informatie Rijksoverheid Curabitur a leo at ipsum vehiculg euismod Informatie Rijksoverheid Curabitur a leo at ipsum vehiculg euismod

7 02 Kleurgebruik

8 Rijkshuisstijl Bouwstenen - Kleurgebruik De volgende hoofdkleuren voor de bouwstenen kunnen worden gebruikt: Paars Violet Robijn rood Roze Rood Hoofdkleuren worden gebruikt voor: - Achtergronden - s - Tekst - Iconen Afgeleide kleuren worden in gradaties van 5 stappen gebruikt. Deze kleuren worden gebruikt voor: #42145f #a90061 #ca005d #f092cd - Achtergronden Oranje Donker geel Geel Donker bruin Bruin - Mouse clicks - status Grijs wordt gebruikt voor: - Tekst #e17000 #ffb612 #f9e11e #94710a - Mouse clicks - status Donker groen Groen Mos groen Mint groen Donker blauw #39870c #777c00 #76d2b6 Hemel blauw Licht blauw Grijs #007bc7 #8fcae7 #535353

9 Rijkshuisstijl Bouwstenen - Kleurgebruik Paars Oranje #42145f #552b6d #704e82 #b9a9ba #d4cbcf #e6e2dd #e17000 #e37d17 #e7923b #f0c999 #f3debc #f6ebd3 100% 90% 75% 35% 20% 10% 100% 90% 75% 35% 20% 10% Violet Donker geel #a90061 #b1186f #bd3e84 #dca2bb #e8c7cf #f0e0dd #ffb612 #febd27 #fdc748 #fae29f #f9ecc0 #f9f2d5 100% 90% 75% 35% 20% 10% 100% 90% 75% 35% 20% 10% Robijn rood Geel #ca005d #cf186b #d63e81 #e8a2b9 #efc7cf #f3e0dd #f9e11e #f9e332 #f9e751 #f8f1a3 #f8f4c2 #f8f7d6 100% 90% 75% 35% 20% 10% 100% 90% 75% 35% 20% 10% Roze Donker bruin #f092cd #f19dd2 #f4adda #fad9ee #fce9f5 #fdf4fa # #76473c #8d665d #cab8b4 #e1d6d4 #f0eae9 100% 90% 75% 35% 20% 10% 100% 90% 75% 35% 20% 10% Rood Bruin #d52b1e #d94034 #e06056 #f0b5b0 #f7d5d2 #fbe9e8 #94710a #9e7f22 #af9547 #dacda9 #eae3ce #f4f1e6 100% 90% 75% 35% 20% 10% 100% 90% 75% 35% 20% 10%

10 Rijkshuisstijl Bouwstenen - Kleurgebruik Donker groen # #3c694b Hemel blauw #5d8369 #b4c5b9 #d4ded7 #e9eeeb #007bc7 #1988cc #409cd5 #a6d1eb #cce5f4 #e5f2f9 100% 90% 75% 35% 20% 10% 100% 90% 75% 35% 20% 10% Groen Licht blauw #39870c #4c9324 #6ba549 #bad5aa #d7e7ce #ebf3e6 #8fcae7 #9acfe9 #abd7ed #d8edf7 #e9f4fa #f4fafd 100% 90% 75% 35% 20% 10% 100% 90% 75% 35% 20% 10% Mos groen Grijs #777c00 # #999d40 #d0d1a6 #e4e5cc #f1f2e5 # # #7e7e7e #c3c3c3 #dddddd #ededed 100% 90% 75% 35% 20% 10% 100% 90% 75% 35% 20% 10% Mint groen #76d2b6 #83d6bd #98ddc8 #cfefe6 #e4f6f0 #f1faf8 100% 90% 75% 35% 20% 10% Donker blauw #01689b #1a77a5 #418eb4 #a6cadc #cce1eb #e5f0f5 100% 90% 75% 35% 20% 10%

11 Rijkshuisstijl Bouwstenen - Kleurgebruik Hoe werkt deze app? Hoe werkt deze app? Hoe werkt deze app? Dialoogvenster Een venster dat tijdelijk wordt afgebeeld als de gebruiker bepaalde informatie moet verstrekken. Veel dialoogvensters bevatten opties die de gebruiker moet kiezen voordat er een bepaalde opdracht kan uitvoeren. WEIGEREN ACCEPTEREN Nieuwsbericht Aenean tempor aliquet diam, ut aliquam odio sollicitudin eu. Maecenas condimentum leo a eros egestas, eget fringilla eros convallis. Fusce ullamcorper Lorem augue ipsum sed bibendum dolor sit finibus. amet, ipiscing elit? consectetur adipiscing elit. Aenean tempor aliquet diam, Pellentesque id ex vel nisl volutpat cursus ut aliquam odio sollicitudin eu. ac eu lorem. Maecenas condimentum leo a eros egestas, eget fringilla eros convallis. Lorem ipsum dolor sit amet, consectetur adipiscing Fusce ullamcorper augue sed elit. Phasellus facilisis, mi vitae convallis lobortis, velit bibendum finibus. nisi dignissim arcu, et hendrerit urna est id libero. Donec venenatis lectus et dignissim pellentesque. Suspendisse sollicitudin WEIGERENfermentum ACCEPTEREN ante laoreet. Algemeen geldt dat er voldoende contrast moet zijn tussen tekst en achtergrond en in de te gebruiken interactieve elementen zoals sliders. informatie

12 03 Lettertype

13 Rijkshuisstijl Bouwstenen - Lettertype Rijksoverheid Sans Web Text Bold 12 sp 15 sp Nam pellentesque sit Nam pellentesque sit Rijksoverheid Sans Web Text Regular 12 sp 15 sp Nam pellentesque sit Nam pellentesque sit Te gebruiken voor koppen, tussenkopjest en bij-informatie (bv. bij iconen in bottom navigation en puplicatiedatum bij artikelen ) 18 sp 22 sp 26 sp Nam pellentesque sit Nam pellentesque sit Nam pellentesque sit Te gebruiken voor koppen, lopende tekst en bij-informatie (bv. bij iconen in bottom navigation en puplicatiedatum bij artikelen ) 18 sp 22 sp 26 sp Nam pellentesque sit Nam pellentesque sit Nam pellentesque sit 30 sp 34 sp Nam pellentesque sit Nam pellentesque 30 sp 34 sp Nam pellentesque sit Nam pellentesque Rijksoverheid Web Serif Bold Alleen te gebruiken introtekstjes, koppen en tussenkopjes 18 sp 22 sp 26 sp 30 sp 34 sp Nam pellentesque sit Nam pellentesque sit Nam pellentesque sit Nam pellentesque sit Nam pellentesque Maatvoering voor fonts is sp: Scale-independent Pixels Dit is een maatvoering gebaseerd op resolutie.

14 Rijkshuisstijl Bouwstenen - Lettertype bijtekst 12 sp, interlinie 18 sp 1 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex turpis, ultrices a purus quis, mattis porta sem. Maecenas volutpat posuere dapibus. Nam nec finibus erat. kop (1) 26 sp, interlinie 32 sp Lorem ipsum dolor sit amet, consectetur adipiscing elit. 2 3 bodytekst 15 sp, interlinie 21 sp Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex turpis, ultrices a purus quis, mattis porta sem. Maecenas volutpat posuere dapibus. Nam nec finibus erat. introtekst 18 sp, interlinie 24 sp 6 kop (2) 30 sp, interlinie 36 sp Lorem ipsum dolor sit amet, consectetur adipiscing elit. 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex turpis, ultrices a purus quis, mattis porta sem. Maecenas volutpat posuere dapibus. Nam nec finibus erat. subkop 22 sp, interlinie 28 sp Lorem ipsum dolor sit amet, consectetur adipiscing elit. 7 kop (3) 34 sp, interlinie 40 sp Lorem ipsum dolor sit amet, consectetur adipiscing elit.

15 Rijkshuisstijl Bouwstenen - Lettertype Combinatie introtekst & bodytekst Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex turpis, ultrices a purus quis, mattis porta sem. Maecenas volutpat posuere dapibus. Nam nec finibus erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex turpis, ultrices a purus quis, mattis porta sem. Maecenas volutpat posuere dapibus. Nam nec finibus erat. 36 dp Combinatie subkop & bodytekst Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex turpis, ultrices a purus quis, mattis porta sem. Maecenas volutpat posuere dapibus. Nam nec finibus erat. 38 dp

16 Rijkshuisstijl Bouwstenen - Lettertype Combinatie kop(1) & bodytekst Combinatie kop(3) & bodytekst Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex turpis, ultrices a purus quis, mattis porta sem. Maecenas volutpat posuere dapibus. Nam nec finibus erat. 40 dp Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex turpis, ultrices a purus quis, mattis porta sem. Maecenas volutpat posuere dapibus. Nam nec finibus erat. 44 dp Combinatie kop(2) & bodytekst Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex turpis, ultrices a purus quis, mattis porta sem. Maecenas volutpat posuere dapibus. Nam nec finibus erat. 42 dp

17 Rijkshuisstijl Bouwstenen - Lettertype Combinatie kop(1) & subkop Combinatie kop(3) & subkop Lorem ipsum dolor sit amet. Maecenas dapibus. 42 dp Lorem ipsum dolor sit amet. Maecenas dapibus. 50 dp Combinatie kop(2) & subkop Lorem ipsum dolor sit amet. Maecenas dapibus. 46 dp

18 Rijkshuisstijl Bouwstenen - Lettertype Combinatie kop(1), introtekst & bodytekst Combinatie kop(3), introtekst & bodytekst Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex turpis, ultrices a purus quis, mattis porta sem. Maecenas volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex turpis, ultrices a purus quis, mattis porta sem. Maecenas volutpat posuere dapibus. 42 dp 36 dp Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in orci a dui aliquam finibus. Proin imperdiet dui in turpis lacinia, sed facilisis nisl tristique. Nunc vel ex eros. Aliquam porta tortor sed lacus vehicula accumsan. Suspendisse laoreet orci id nisi pellentesque, eu sollicitudin felis aliquam. 46 dp Combinatie kop(2), introtekst & bodytekst Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex turpis, ultrices a purus quis, mattis porta sem. Maecenas volutpat posuere dapibus. Nam nec finibus erat. 36 dp Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex turpis, ultrices a purus quis, mattis porta sem. Maecenas volutpat. 44 dp Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex turpis, ultrices a purus quis, mattis porta sem. 36 dp

19 Rijkshuisstijl Bouwstenen - Lettertype Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoe werkt deze app? Donec a sagittis Aenean tempor aliquet diam, ut aliquam odio sollicitudin eu. Maecenas condimentum leo a eros egestas, eget fringilla eros convallis. Fusce ullamcorper augue sed bibendum finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tekst in de toolbar Hoe werkt deze app? Hoe werkt deze app? Lorem ipsum dolor sit amet, consectetur adipiscing elit? Nieuwsbericht Aenean tempor aliquet diam, ut aliquam odio sollicitudin eu. Maecenas condimentum leo a eros egestas, eget fringilla eros convallis. Fusce ullamcorper augue sed bibendum finibus. ipiscing elit? Aenean tempor aliquet diam, ut aliquam odio sollicitudin eu. Maecenas condimentum leo a eros egestas, eget fringilla eros convallis. Fusce ullamcorper augue sed bibendum finibus. Tekst in een dialoogvenster BUTTON BUTTON Tekst bij iconen in de bottom navigation Pellentesque id ex vel nisl volutpat cursus ac eu lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis, mi vitae convallis lobortis, velit nisi dignissim arcu, et hendrerit urna est id libero. Donec venenatis lectus et dignissim pellentesque. Suspendisse sollicitudin fermentum ante laoreet. informatie

20 Rijkshuisstijl Bouwstenen - Lettertype 16 sp Rijksoverheid Sans Web Text Bold BUTTON 14 sp RIJKSOVERHEID SANS WEB TEXT BOLD Fontgrootte voor buttons variëren van 14 sp voor de onderkast versie en 16 sp voor de kapitaal variant. Voor beide buttons moet de Rijksoverheid sans text bold gebruikt worden. Donec a sagittis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a sagittis 24 dp 24 dp Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nieuwsbericht Curabitur a leo at ipsum vehicula euismod. Phasellus id sapien nisi. Integer ipsum tortor, placerat non faucibus in, tempor eget lorem. Cras id libero ut odio commodo pretium. Vivamus ullamcorper tempor cursus. Phasellus non elementum erat, vel maximus. 16 dp 24 dp 24 dp Nieuwsbericht Curabitur a leo at ipsum vehicula euismod. Phasellus id sapien nisi. Integer ipsum tortor, placerat non faucibus in, tempor eget lorem. Cras id libero ut odio commodo pretium. Vivamus ullamcorper tempor cursus. Phasellus non elementum erat, vel maximus. 16 dp Vestibulum rutrum convallis Aenean tempor aliquet diam, ut aliquam odio sollicitudin eu. Maecenas condimentum leo a eros egestas, eget fringilla eros convallis. Fusce Vestibulum rutrum convallis Aenean tempor aliquet diam, ut aliquam odio sollicitudin eu. Maecenas condimentum leo a eros egestas, eget fringilla eros convallis. Fusce Voorbeeld van een nieuwsartikel. 15 sp is de minimale grootte voor lopende teksten i.v.m. leesbaarheid. De pubicatiedatum is 12sp groot. Woorden in kapitaal worden alleen in buttons gebruikt. Lopende tekst 15 pt, kop en subkop in Rijksoverheid serif bold Lopende tekst 15 pt, kop en subkop in Rijksoverheid sans text bold

21 04 Navigatie

22 Rijkshuisstijl Bouwstenen - Toolbar/primaire navigatie 20 dp Donec a sagittis 24 dp 56 dp Toolbar navigatie met aan de linkerkant een hamburger button of een terug actie. Rechts kunnen extra functionaliteiten zoals een zoekfunctie, extra opties en/of instellingen komen te staan. 24 dp24 dp24 dp 16 dp 12 dp 16 dp 72dp Donec a sagittis 48 dp Titel Onderwerp Donec a sagittis 56 dp Header Onderwerp Donec a sagittis Titel Onderwerp Nieuwsbericht Titel Onderwerp Nieuwsbericht Titel Onderwerp Aenean tempor aliquet diam, ut aliquam odio sollicitudin eu. Maecenas condimentum leo a eros egestas, Titel eget Onderwerp fringilla eros convallis. Fusce Aenean tempor Titel Onderwerp aliquet diam, ut aliquam odio sollicitudin eu. Maecenas condimentum leo a eros egestas, Titel eget Onderwerp fringilla eros convallis. Fusce Een hamburger menu met onderwerpen die van links het beeld inkomt. Door buiten het menu te klikken verdwijnt het hamburger menu weer. De statusbalk blijft eroverheen staan. Ook is een layover zichtbaar over de inhoud van de app. Iconen naast een onderwerp zijn niet verplicht, in geval van het weglaten komt de tekst op de plek v.h. icoon. Een hamburger menu met een header boven de onderwerpen.

23 Rijkshuisstijl Bouwstenen - Accordeonmenu (lijstweergave) Een accordeonmenu is een lijstweergave van onderwerpen. Bij het aanklikken van een onderwerp klapt er een submenu open. Titel Onderwerp Nieuwsbericht Aenean tempor aliquet diam, ut aliquam odio Titel Onderwerp sollicitudin eu. Maecenas condimentum leo a eros egestas, eget fringilla eros convallis. Fusce ullamcorper Titel augue Onderwerp sed bibendum finibus. ipiscing elit? Titel Onderwerp Pellentesque id ex vel nisl volutpat cursus ac eu lorem. Titel Onderwerp Lorem ipsum dolor sit amet, consectetur adipiscing Titel elit. Phasellus Onderwerp facilisis, mi vitae convallis lobortis, velit nisi dignissim arcu, et hendrerit urna est id libero. Donec venenatis lectus et dignissim Titel Onderwerp pellentesque. Suspendisse sollicitudin fermentum ante laoreet. Titel Onderwerp Titel Onderwerp Titel Onderwerp informatie Titel Onderwerp Nieuwsbericht Aenean tempor aliquet diam, ut aliquam odio Titel Onderwerp sollicitudin eu. Maecenas condimentum leo a eros egestas, eget fringilla eros convallis. Fusce ullamcorper Titel augue Onderwerp sed bibendum finibus. ipiscing elit? Titel Onderwerp Pellentesque id ex vel nisl volutpat cursus ac eu lorem. Sub onderwerp Lorem ipsum dolor sit amet, consectetur adipiscing Sub elit. Phasellus onderwerp facilisis, mi vitae convallis lobortis, velit nisi dignissim arcu, et hendrerit urna est id libero. Sub Donec onderwerp venenatis lectus et dignissim pellentesque. Suspendisse sollicitudin fermentum ante laoreet. Titel Onderwerp Titel Onderwerp Titel Onderwerp informatie

24 Rijkshuisstijl Bouwstenen - Bottom navigation Donec a sagittis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nieuwsbericht dp 24 dp 24 dp Een bottom navigation bestaat uit minimaal 3 en maximaal 5 acties. De hoogte is 56 dp en als er iconen gebruikt worden, moeten die binnen de afmeting van 24x24 dp blijven. Bottom navigation acties worden getoond als iconen, en moeten gebruikt worden voor content die geschikt is om met iconen weer te geven. Het icoon moet voor zichzelf spreken. Deze acties openen geen menu s of popups, maar tonen direct de bijbehorende contentpagina. Curabitur a leo at ipsum vehicula euismod. Phasellus id sapien nisi. Integer ipsum tortor, placerat non faucibus in, tempor eget lorem. Cras id libero ut odio commodo pretium. Vivamus ullamcorper tempor cursus. Phasellus non elementum erat, vel maximus. 6 dp 6 dp 10 dp inactieve actie actieve actie Home Contact informatie 8 dp 56 dp Vestibulum rutrum convallis Aenean tempor aliquet diam, ut aliquam odio sollicitudin eu. Maecenas condimentum leo a eros egestas, eget fringilla eros convallis. Fusce ullamcorper augue sed bibendum finibus. ipiscing elit?ante laoreet. 6 dp 6 dp 10 dp 12 sp 13 sp Een bottom navigation met 3 acties: altijd een combinatie van tekst en iconen tonen. Tekst (omschrijving) moet kort zijn en op 1 regel passen. actieve actie informatie 8 dp 56 dp informatie 56 dp 13 sp Een bottom navigation met 4 of 5 acties: inactieve acties alleen als iconen laten zien.

25 Rijkshuisstijl Bouwstenen - Bottom navigation Niet actieve acties: 35% van de gebruikte hoofdkleur informatie Home Contact informatie Titel in een vetgedrukte variant met 5 iconen Titel in een regular variant met 3 iconen 35% van de gebruikte hoofdkleur informatie Home informatie informatie informatie Home informatie informatie informatie Home informatie informatie informatie Home informatie informatie informatie Home informatie informatie

26 Rijkshuisstijl Bouwstenen - s BUTTON TYPES - standard types of buttons Flat Een flat button heeft geen eigen achtergrondkleur en komt niet omhoog indien ingedrukt. Ze worden voornamelijk in dialoogvensters, pop-ups en in footers gebruikt Weigeren Accepteren WEIGEREN ACCEPTEREN Raised Raised buttons voegen een extra dimensie toe en benadrukken functies in een drukke ruimte. Weigeren Accepteren WEIGEREN ACCEPTEREN

27 Rijkshuisstijl Bouwstenen - s FLAT BUTTON Een flat button heeft geen eigen achtergrondkleur en komt niet omhoog indien ingedrukt. button hoogte 36 dp 16 dp 16 touch target 48 dp Weigeren Accepteren 8 dp Flat buttons zijn text-only buttons. Ze kunnen bijvoorbeeld worden gebruikt in dialoogvensters en formulieren. normaal Weigeren Accepteren 100% van de gebruikte hoofdkleur klik Weigeren Accepteren 20% achtergrondkleur van de gebruikte hoofdkleur Bij het aanklikken van de button licht de achtergrondkleur even op. inactief Weigeren Accepteren 35 % van de gebruikte hoofdkleur Bij deze optie zal er eerst een veld ingevuld moeten worden voordat de inactieve knop actief wordt.

28 Rijkshuisstijl Bouwstenen - s FLAT BUTTON - voorbeelden dialoogvensters met flat buttons Dialoogvenster Een venster dat tijdelijk wordt afgebeeld als de gebruiker bepaalde informatie moet verstrekken. Veel dialoogvensters bevatten opties die de gebruiker moet kiezen voordat er een bepaalde opdracht kan uitvoeren. Dialoogvenster Een venster dat tijdelijk wordt afgebeeld als de gebruiker bepaalde informatie moet verstrekken. Veel dialoogvensters bevatten opties die de gebruiker moet kiezen voordat er een bepaalde opdracht kan uitvoeren. Dialoogvenster Een venster dat tijdelijk wordt afgebeeld als de gebruiker bepaalde informatie moet verstrekken. Veel dialoogvensters bevatten opties die de gebruiker moet kiezen voordat er een bepaalde opdracht kan uitvoeren. Hemelsblauw # 007bc7 Donkerblauw # 01689b Oranje # e17000 Weigeren Accepteren Weigeren Accepteren Weigeren Accepteren Dialoogvenster Dialoogvenster Dialoogvenster Een venster dat tijdelijk wordt afgebeeld als de gebruiker bepaalde informatie moet verstrekken. Veel dialoogvensters bevatten opties die de gebruiker moet kiezen voordat er een bepaalde opdracht kan uitvoeren. Een venster dat tijdelijk wordt afgebeeld als de gebruiker bepaalde informatie moet verstrekken. Veel dialoogvensters bevatten opties die de gebruiker moet kiezen voordat er een bepaalde opdracht kan uitvoeren. Een venster dat tijdelijk wordt afgebeeld als de gebruiker bepaalde informatie moet verstrekken. Veel dialoogvensters bevatten opties die de gebruiker moet kiezen voordat er een bepaalde opdracht kan uitvoeren. Weigeren Accepteren Weigeren Accepteren Weigeren Accepteren Het gekleurde vlak is alleen te zien bij het aanklikken van de button.

29 Rijkshuisstijl Bouwstenen - s FLAT BUTTON - voorbeelden gekleurde dialoogvensters met flat buttons Dialoogvenster Een venster dat tijdelijk wordt afgebeeld als de gebruiker bepaalde informatie moet verstrekken. Veel dialoogvensters bevatten opties die de gebruiker moet kiezen voordat er een bepaalde opdracht kan uitvoeren. Dialoogvenster Een venster dat tijdelijk wordt afgebeeld als de gebruiker bepaalde informatie moet verstrekken. Veel dialoogvensters bevatten opties die de gebruiker moet kiezen voordat er een bepaalde opdracht kan uitvoeren. Dialoogvenster Een venster dat tijdelijk wordt afgebeeld als de gebruiker bepaalde informatie moet verstrekken. Veel dialoogvensters bevatten opties die de gebruiker moet kiezen voordat er een bepaalde opdracht kan uitvoeren. Hemelsblauw # 007bc7 Donkerblauw # 01689b Oranje # e17000 Weigeren Accepteren Weigeren Accepteren Weigeren Accepteren Dialoogvenster Dialoogvenster Dialoogvenster Een venster dat tijdelijk wordt afgebeeld als de gebruiker bepaalde informatie moet verstrekken. Veel dialoogvensters bevatten opties die de gebruiker moet kiezen voordat er een bepaalde opdracht kan uitvoeren. Een venster dat tijdelijk wordt afgebeeld als de gebruiker bepaalde informatie moet verstrekken. Veel dialoogvensters bevatten opties die de gebruiker moet kiezen voordat er een bepaalde opdracht kan uitvoeren. Een venster dat tijdelijk wordt afgebeeld als de gebruiker bepaalde informatie moet verstrekken. Veel dialoogvensters bevatten opties die de gebruiker moet kiezen voordat er een bepaalde opdracht kan uitvoeren. Weigeren Accepteren Weigeren Accepteren Weigeren Accepteren Het gekleurde vlak is alleen te zien bij het aanklikken van de button.

30 Rijkshuisstijl Bouwstenen - s FLAT BUTTON - voorbeelden gekleurde dialoogvensters met flat buttons, waarin de tekst in kapitalen staat Dialoogvenster Een venster dat tijdelijk wordt afgebeeld als de gebruiker bepaalde informatie moet verstrekken. Veel dialoogvensters bevatten opties die de gebruiker moet kiezen voordat er een bepaalde opdracht kan uitvoeren. Dialoogvenster Een venster dat tijdelijk wordt afgebeeld als de gebruiker bepaalde informatie moet verstrekken. Veel dialoogvensters bevatten opties die de gebruiker moet kiezen voordat er een bepaalde opdracht kan uitvoeren. Dialoogvenster Een venster dat tijdelijk wordt afgebeeld als de gebruiker bepaalde informatie moet verstrekken. Veel dialoogvensters bevatten opties die de gebruiker moet kiezen voordat er een bepaalde opdracht kan uitvoeren. Donkerblauw 03 #e5f0f5 Donkerblauw # 01689b Donkerblauw # cce1eb Hemelsblauw 03 # e5f2f9 Hemelsblauw # 007bc7 Hemelsblauw # cce5f4 WEIGEREN ACCEPTEREN WEIGEREN ACCEPTEREN WEIGEREN ACCEPTEREN Oranje 03 #f6ebd3 Donkerblauw # 01689b Oranje # e17000 Dialoogvenster Dialoogvenster Dialoogvenster Oranje #f3debc Een venster dat tijdelijk wordt afgebeeld als de gebruiker bepaalde informatie moet verstrekken. Veel dialoogvensters bevatten opties die de gebruiker moet kiezen voordat er een bepaalde opdracht kan uitvoeren. Een venster dat tijdelijk wordt afgebeeld als de gebruiker bepaalde informatie moet verstrekken. Veel dialoogvensters bevatten opties die de gebruiker moet kiezen voordat er een bepaalde opdracht kan uitvoeren. Een venster dat tijdelijk wordt afgebeeld als de gebruiker bepaalde informatie moet verstrekken. Veel dialoogvensters bevatten opties die de gebruiker moet kiezen voordat er een bepaalde opdracht kan uitvoeren. WEIGEREN ACCEPTEREN WEIGEREN ACCEPTEREN WEIGEREN ACCEPTEREN Het gekleurde vlak is alleen te zien bij het aanklikken van de button.

31 Rijkshuisstijl Bouwstenen - s RAISED BUTTON Raised buttons zijn rechthoekig. Bij het indrukken komen ze iets omhoog (2dp). button hoogte 36 dp 16 dp 16 touch target 48 dp Weigeren Accepteren 8 dp Raised buttons voegen een extra dimensie toe aan voornamelijk strakke layout en benadrukken functies in een drukke ruimte. normaal klik Bij het aanklikken van de button komt deze iets omhoog (2dp). inactief 20% achtergrondkleur van de gebruikte hoofdkleur, 35% van de tekstkleur. Bij deze optie zal er eerst een veld ingevuld moeten worden voordat de inactieve knop actief wordt.

32 Rijkshuisstijl Bouwstenen - s RAISED BUTTON - voorbeelden Donec a sagittis Lorem ipsum dolor sit amet, consectetur adipiscing elit? Niet actieve buttons Nieuwsbericht Niet actieve buttons Vestibulum rutrum convallis cursus. Integer Aenean porttitor tempor rutrum aliquet augue, diam, quis ut commodo aliquam odio velit sollicitudin pharetra maximus. eu. Maecenas Vivamus condimentum nec lectus leo dolor. a eros Curabitur egestas, a leo eget at fringilla ipsum eros vehicula convallis. euismod. Fusce ullamcorper Phasellus id augue sapien sed nisi. bibendum Integer finibus. ipsum tortor, ipiscing elit? placerat non faucibus in, tempor eget lorem. Cras id libero ut odio commodo pretium. Vivamus Pellentesque ullamcorper tempor id ex cursus. vel nisl Phasellus volutpat non cursus ac eu lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis, mi vitae convallis lobortis, velit nisi dignissim arcu, et hendrerit urna est id libero. Donec venenatis lectus et dignissim pellentesque. Suspendisse sollicitudin fermentum ante laoreet. Raised buttons moeten een achtergrondkleur hebben. Ghostbuttons zorgen ervoor dat tekst en omlijning een schaduw krijgen en onduidelijk worden. informatie

33 Rijkshuisstijl Bouwstenen - Slider SLIDERS Sliders worden gebruikt om instellingen aan te passen zoals bv. volume, schermhelderheid en schaling. Normaal Klik

34 Rijkshuisstijl Bouwstenen - Selection controls Er zijn drie type selectie buttons Checkboxes Hiermee kun je een meerdere opties kiezen. CHECKBOXES Radio buttons Hiermee kun je een enkele optie kiezen. Switches Hiermee kun je een selectie aan of uit schakelen. Het laat de status zien van een enkele optie. on off on off on off on off RADIOBUTTONS on off on off on off on off SWITCH on off on off on off

35 05 Popup venster

36 Rijkshuisstijl Bouwstenen - Popup venster Popups komen bovenop de app content te liggen en worden weggeklikt door een keuze aan te klikken. Nieuwsbericht Aenean tempor aliquet diam, ut aliquam odio sollicitudin eu. Maecenas condimentum leo a eros egestas, eget fringilla eros convallis. Fusce ullamcorper Lorem augue ipsum sed bibendum dolor sit finibus. amet, ipiscing elit? consectetur adipiscing elit. Aenean tempor aliquet diam, Pellentesque id ex vel nisl volutpat cursus ut aliquam odio sollicitudin eu. ac eu lorem. Maecenas condimentum leo a eros egestas, eget fringilla eros convallis. Lorem ipsum dolor sit amet, consectetur adipiscing Fusce ullamcorper augue sed elit. Phasellus facilisis, mi vitae convallis lobortis, velit bibendum finibus. nisi dignissim arcu, et hendrerit urna est id libero. Donec venenatis lectus et dignissim pellentesque. WEIGEREN ACCEPTEREN Suspendisse sollicitudin fermentum ante laoreet. informatie

37 Rijkshuisstijl Bouwstenen - scroll Nieuwsbericht Aenean tempor aliquet diam, ut aliquam odio sollicitudin eu. Maecenas condimentum leo a eros egestas, eget fringilla eros convallis. Fusce ullamcorper augue sed bibendum finibus. ipiscing elit? Een scrollbalk is niet stijlbaar binnen de applicatie. Dit wordt op systeemniveau geregeld (Android). Pellentesque id ex vel nisl volutpat cursus ac eu lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis, mi vitae convallis lobortis, velit nisi dignissim arcu, et hendrerit urna est id libero. Donec venenatis lectus et dignissim pellentesque. Suspendisse sollicitudin fermentum ante laoreet. informatie

38 07 Mock ups

39 Rijkshuisstijl Bouwstenen - Mock up

40 Rijkshuisstijl Bouwstenen - Mock up

41 Rijkshuisstijl Bouwstenen - Mock up