Vormgeving websites

 

Voor de vormgeving van websites en andere online content werkt de provincie Zuid-Holland met een design system. Hier hebben we een eigen Figma omgeving voor ontwikkeld. Hierboven vind je in een iframe een preview van dit systeem en via onderstaande button kan je er als ontwerper zelf mee aan de slag.

De website zuid-holland.nl is leidend in onze communicatie-aanpak en dus is de provincie terughoudend met het toevoegen van nieuwe websites. Ook omdat websites aan veel wetgevende eisen moeten. Er moet dus een goede reden voor zijn om een aparte website in te richten.

Figma design system PZH

Wil je gebruik maken van de "Library van Provincie Zuid-Holland" in deze Figma omgeving? Klik dan bovenin Figma op 'Share' en voer je eigen e-mailadres in. Als dat is gelukt, dan zie je direct 'PZH Wapenfeiten' terugkomen bij je libraries en kun je hier mee aan de slag.

Voor websites gelden afwijkende regels voor de toepassing van grid en vormgeving. Door de richtlijnen in ons design system te volgen kan je het snel in de praktijk brengen. En voor alle volledigheid vind je hieronder de richtlijnen nog eens op een rijtje.

Logo

  • Het logo is even hoog als de breedte van de DNA-balk.
  • Voor het logo word een minimale hoogte gehanteerd van 80 pixels.
  • Op mobiel word een minimale hoogte gehanteerd van 60 pixels voor het logo, met een negatieve marge aan de linkerzijde van -10 pixels.
  • Wanneer de website in Stijlvak 1, 2 of 3 valt, wordt het logo linksboven. geplaatst
  • Wanneer de website in Stijlvak 4 valt, wordt het logo links in de footer geplaatst.

DNA-balk

  • Bij een mobiel scherm is de DNA-balk 40 pixels breed in Stijlvak 1,2 en 3. In Stijlvak 4 is de DNA-balk 60 pixels breed.
  • Bij een scherm van 768 tot en met 1600 pixels breed is de DNA-balk 80 pixels breed.
  • Bij een scherm vanaf 1600 pixels en breder is de DNA-balk 1/20 deel van de horizontale resolutie breed.
  • De DNA-balk staat altijd tegen de rechterzijde van het venster geplaatst.
  • Op mobiel staat de DNA-balk onder de titel met een marge van 20 pixels op de ondertitel of intro.

Motto

  • Het motto wordt in de footer geplaatst wanneer de website valt in Stijlvak 1 of 2.
  • Valt de website in Stijlvak 3 of 4 dan wordt er geen motto geplaatst.

Grid

  • De marges zijn gelijk aan de breedte van de DNA-balk.
  • Op mobiel zijn de marges de helft (20 pixels) van de breedte van de DNA-balk.
  • De linkerzijde van de eerste kolom staat uitgelijnd met het midden van het wapenschild (wat vertaald in een gelijke waarde als de hoogte van het logo).
  • De ruimte tussen de kolommen is de helft van de breedte van de DNA-balk.

Grid mobiel

  • De DNA-balk heeft een breedte van 40 pixels en staat met een marge van 20 pixels onder de titel van de pagina.
  • Het logo heeft een minimale hoogte van 60 pixels en krijgt links een negatieve marge van -10 pixels. Dit is niet dezelfde hoogte als het grid.
  • De marges zijn de helft (20 pixels) van de breedte van de DNA-balk.

Grid Tablet

  • De DNA-balk heeft een breedte van 80 pixels.
  • Wanneer de resolutie onder de 960 pixels breed is wordt de layout van 4 kolommen gebruikt.
  • Wanneer de resolutie boven de 960 pixels breed is wordt de layout van 6 kolommen gebruikt.
  • Logo heeft een vaste positie
  • Formaat logo (inclusief bounding box): 240 pixels breed bij 80 pixels hoog.

Grid desktop

  • Tot een resolutie van 1600 pixels breed heeft de DNA-balk een breedte van 80 pixels.
  • Wanneer de resolutie groter is dan 1600 pixels breed, heeft de DNA-balk een breedte van 1/20 deel van de horizontale resolutie.
  • Logo heeft een vaste positie
  • Formaat logo (inclusief bounding box) bij resoluties tot 1600 pixels breed: 240 pixels breed bij 80 pixels hoog.
  • Formaat logo (inclusief bounding box) bij resoluties groter dan 1600 pixels breed: 3/20 deel (van de horizontale resolutie) breed en 1/20 deel (van de horizontale resolutie) hoog.

Footer

  • In Stijlvak 1 en twee wordt het motto in de footer geplaatst.
  • In Stijlvak 3 en 4 wordt het motto niet geplaatst.
  • In Stijlvak 4 wordt het logo links in de footer geplaatst.

 Desktop footer matrix 1 tot en met 3

Bij Stijlvak 4 staat de DNA-balk in de footer naast het logo. In het geval van Stijlvak 4 komt het logo niet voor in de header.

 

Desktop footer matrix 4

 

Typografie

We hanteren de richtlijnen zoals omschreven onder Lettertypes voor vormgeving. In de Figma omgeving vind je meer informatie over het toepassen van de lettertypes.

Elementen

Beschikbare elementen in Figma zijn o.a.:

  • Buttons
  • Formulier elementen (invoervelden, zoekbalk, select, dropdown, tekstvlak, radiobuttons, checkboxes, labels, enz.)
  • Breadcrumbs
  • Tabs
  • Tooltips
  • Content cards
  • Navigatie
  • Modal screen
  • Toast melding
  • Iconen
  • Spacing