Vormgeving websites

Voor websites gelden afwijkende regels voor de toepassing van grid en vormgeving. Hieronder de richtlijnen op een rijtje. De verschillende online elementen vind je ook terug in een Sketch omgeving waar ze klaar staan voor gebruik.

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

Kenmerken:

  • 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 voor mobiel

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 staande tablet Grid liggende tablet

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.

Grid Desktop Small Grid Desktop Small Grid Desktop Small

 

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.

Mobiele footer matrix 1 tot en met 3 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.

Mobiele footer matrix 4 

Desktop footer matrix 4

 

Typografie

Desktop typografieMobiel typografie

 

Elementen

Interactieve elementenInput elementen