Skip to content

Logo

Op de website wordt het logo van de school geplaatst. Het logo staat altijd in beeld in de header van de website, boven iedere pagina. Ook als je naar beneden scrolt blijft het logo zichtbaar. Waar wel rekening mee gehouden dient te worden is dat de header een beperkte hoogte heeft, daarom is het gebruiken van een breedte-logo ideaal.

  • Hoge kwaliteit
  • Breedteversie van het logo
  • Transparant
  • Vectorformaat, indien beschikbaar (.svg)

Kleuren

Er zijn twee basiskleuren te kiezen binnen de website:

  1. Basiskleur voor koppen, kleurfilter over de foto’s bovenin de pagina’s, lichte verkleuring van de tekstblokken (om en om)
  2. Accentkleur voor knoppen, scroll-naar-boven-knop rechtsonder en eventuele kleine accenten

In dit voorbeeld is de basiskleur groen en de accentkleur oranje. De kleur van de tekst is grijs.

Lettertypes

Bij het bouwen van de website kan de school kiezen uit verschillende lettertypes. Er worden twee lettertypes gekozen: 

  1. Lettertype voor koppen & knoppen
  2. Lettertype voor teksten en links

Om een voorbeeld te geven van de lettertypes hebben we een voorbeeldpagina gemaakt waarop de verschillende lettertypes zichtbaar zijn.

Knop- en hoekstijlen

Om de stijl van de knoppen en hoeken van afbeeldingen en andere elementen het beste te laten aansluiten bij de huisstijl van de school is er de keuze om de mate van afronding van de knoppen te selecteren. Zie de voorbeelden van knoppen hieronder en afbeeldingen hiernaast.

Randeffecten

Om de website een dynamischer karakter te geven zijn er (optionele) randeffecten. Deze effecten zorgen ervoor dat de scheidingen tussen verschillende onderdelen van de website geen harde lijnen zijn, maar dynamisch uitziende vormen. 

In deze ontwerpvariant zie je effect 1: Bergen.

Koptekst

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec eros nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel sapien est. Aenean a augue et urna sagittis sodales. Praesent hendrerit nisi tempus ligula porta ornare. Duis a elementum eros, sed euismod nibh. Quisque placerat ultrices sapien, eget imperdiet magna dictum vitae. Curabitur ac lacinia sapien. Integer sodales convallis dolor id cursus.