r de
o
o
V
ol
o
h
c
s

WebsiteHet visitekaartje van de school!

‘Onze software is als een doos met
Legostenen voor het primair onderwijs.’
Stap voor stap bouw je je eigen unieke
website.
Waar het kan doe je het zelf en waar
nodig staan we voor je klaar.

team SchoolsUnited

schoolsunited.eu/website

*3*in de loop van 2021

De opbouw
van dewebsiteVerschillende
weergaven

Het logo vande school

Het logo op
de website

De menubalk

De slider

De sloganvan de school

De opbouw van de website
Een goede website is opgebouwd uit verschillende elementen. Het is niet alleen belangrijk
dat een website er mooi en professioneel uitziet. De website moet ook duidelijk uitstralen
wat voor soort school het is en waar de school voor staat. Bezoekers willen snel voorzienzijn van juiste informatie, het is daarom eveneens belangrijk om informatie op de juiste plek
te plaatsen.

Stappen doorlopen
Als je als school een nieuwe website wilt, denk dan na over een aantal punten. Vraag jezelf af welke
bezoekers de website bezoeken en welke eerste indruk je wilt achterlaten. Denk daarbij aan deuitstraling van de site. Bezoekers kunnen bijvoorbeeld ouders van leerlingen, ouders van potentiële
leerlingen, en (nieuwe) leerkrachten zijn. De homepagina is een goed vertrekpunt om te starten met
ontwerpen.
Onderstaande punten komen aan de orde:
1.
2.
3.
4.
5.
6.
7.

Logoheader (logo, NAW-gegevens, vermelding stichting)
De menubalk
Slider (afbeelding/tekst in één vaste slide of meerdere slides die rouleren)
Slogan of onderwijskreet van de school
Welkomsttekst van de school met eventueel een logo
Indeling door middel van kaders
Footer (ter afsluiting onderaan de website) met bijvoorbeeld: tekst, NAW-gegevens en/of een
afbeelding.

SchoolsUnited begeleidt je tijdens dit traject. Gezamenlijk komen we tot een prachtige website ineen stijl die in lijn is met de school. De digitale identiteit van de school wordt er in hoge mate door
bepaald en tijd en zorg besteden aan een mooie website betaald zichzelf ongetwijfeld dubbel endwars terug.

WelkomswoordIndeling
homepagina

Kaders met
en zonder
modules

De Footer

Foto’sSpecialeelementen

Vervolgpagina
indelenChecklist

1. Logo header
2. Navigatiemenu

3. Slider

4. Slogan

5. Welkomsttekst

6. Indeling kaders

7. Footer

Schetsruimte

De opbouw vande website

Verschillende
weergaven

Het logo vande school

Het logo op
de website

De menubalk

De slider

De sloganvan de school

Verschillende weergaven
5 standen op 3 soorten apparaten
Het is tegenwoordig van belang dat een website goed schaalbaar is, zodat deze goed(staand of liggend) kan worden bekeken op verschillende apparaten zoals de smartphone,tablet, Chromebook, computer en televisie.

Weergave op een computerscherm
Wanneer je de website bekijkt op je computer

WelkomswoordIndeling
homepagina

Kaders met
en zonder
modules

De Footer

Foto’sSpecialeelementen

Vervolgpagina
indelenWeergave op smartphone staand of liggend
Smartphone: de website kan op de smartphone staand of liggend worden weergegeven.

Weergave op tablet staand of liggend
Tablet: de website kan op de tablet staand of liggend worden weergegeven.

Checklist

Schetsruimte

De opbouw vande website

Verschillende
weergaven

Het logo vande school

Het logo op
de website

De menubalk

De slider

De sloganvan de school

Het logo van de school
Het logo is het beeldmerk van de school. Het is een herkenningspunt dat overal terug komt,
zoals op het schoolgebouw, website, briefpapier maar bijvoorbeeld ook op pennen of op
lesmateriaal.

Hoe belangrijk is een logo?
Een goed logo is heel erg belangrijk. Naast dat het logo een grafische uiting is van de school zorgt
het ook voor een stukje uitstraling en beleving. Ook is het belangrijk dat het logo meegaat met de tijd.
Wanneer je een oud logo gebruikt kan dit bijvoorbeeld niet kloppen met de huidige stijl en uitstraling
van de school. Daarom is het van belang het logo van de school up-to-date te houden. Wij denken
indien gewenst graag mee.

Naar aanleiding van een logo een website vormgeven
Een mooi logo kan aanleiding geven tot de gehele vormgeving van de website. Wanneer wij een logo
ontvangen van de school bekijken wij wat we hieruit kunnen gebruiken. Denk hierbij aan kleur, vormof grafische elementen. Mocht er maar één hoofdkleur worden gebruikt in het logo dan kunnen we ervoor kiezen in overleg met de school om steunkleuren te gebruiken.

Een logo analyseren
Hiernaast laten we zien hoe wij een logo analyseren. We kijken welke kleuren en welk lettertypeer worden gebruikt in het logo. Ook kijken we of er grafische elementen in het logo zitten die weeventueel kunnen gebruiken in illustraties voor de website.

WelkomswoordIndeling
homepagina

Kaders met
en zonder
modules

De Footer

Foto’sSpecialeelementen

Vervolgpagina
indelen

Grafische elementen uit het logo

Waar kan dit toe leiden?
Hieronder hebben we een illustratie ontworpen die is ontstaan vanuit het logo.

Checklist

Schetsruimte

De opbouw vande website

Verschillende
weergaven

Het logo vande school

Het logo op
de website

De menubalk

De slider

De sloganvan de school

Het logo op de website
Het is belangrijk dat het logo van de school duidelijk zichtbaar is op de website.
Er zijn verschillende manieren om het logo weer te geven.

Het logo plaatsen op de website
Bij de meeste websites wordt het logo aan de bovenzijde weergegeven. In ons systeem noemen wij
dit de ‘logo header’. In dit gebied kun je op verschillende manieren het logo weergeven.
Wij geven hier een aantal voorbeelden ter inspiratie.

Het logo, NAW-gegevens en een paar iconen
Hierboven wordt een optie weergegeven die het meest wordt gekozen. Het logo wordt aan de liinkerzijde geplaatst. Het
logo is gelinkt aan de homepagina. Dit betekent dat wanneer je op het logo klikt je weer terug gaat naar de homepagina.
Aan de rechterkant van de header komen de NAW-gegevens van de school. Daarnaast zijn twee iconen geplaatst die
linken naar de schoolapp en het telefoonnummer van de school. Deze iconen kunnen ook worden gelinkt aan bijvoorbeeld
mail of Google Maps.

Het logo met iconen
Hier is voor een optie gekozen waarbij naast het logo alleen maar gebruik wordt gemaakt van iconen

WelkomswoordIndeling
homepagina

Kaders met
en zonder
modules

De Footer

Foto’sSpecialeelementen

Vervolgpagina
indelenChecklist

Schetsruimte

Het logo met grafische illustratie
Hier is het logo verwerkt in een illustratie met daarin de onderwijskreet van de school.

Het logo van de school in verbinding met het logo van de stichting
Wanneer een school onderdeel is van een stichting dan kan het vanuit de stichting wenselijk zijn om het stichtingslogo
ook te plaatsen. Hierboven is ervoor gekozen om een verlooplijn te maken om de logo’s te verbinden.

Het logo in de menubalk
Het logo kan ook worden verwerkt in de menubalk. Hierdoor blijft het logo altijd zichtbaar op de pc en laptop.

De opbouw vande website

Verschillende
weergaven

Het logo vande school

Het logo op
de website

De menubalk

De slider

De sloganvan de school

De menubalk
De menubalk is opgebouwd uit een hoofdmenu en eventueel een submenu. Het hoofdmenu
bestaat uit hoofdmenu-knoppen. Door op een hoofdmenu-knop te klikken ga je direct naarde pagina met daarin de juiste informatie. Wil je onder een hoofdmenu een submenu latenzien dan worden er pagina’s gekoppeld aan de desbetreffende hoofdmenu-knop.

Hoofdmenu
In een hoofdmenu laat je de hoofdcategorieën zien. Bijvoorbeeld: home, onze school, ons onderwijs,
ouders, vacatures en contact. Dit kan per school verschillen. Kies niet te veel hoofdcategorieen. Hou
het simpel. Te veel hoofdcategorieën (knoppen) in de menubalk leiden tot onduidelijkheid.

Submenu
Een submenu bestaat uit één of meerdere pagina’s die onder een hoofdcategorie (knop in
het hoofdmenu) vallen. Denk goed na onder welke categorie je een pagina plaatst. Als je een
hoofdcategorie ‘Onze school’ in de hoofdmenubalk plaatst, dan kunnen submenupagina’s zijn: Visie,
Missie, Ons team, Het bestuur etcetera. Zorg voor een heldere menustructuur, houdt het overzichtelijk
en overspoel bezoekers niet direct met te veel informatie. (Er is zelfs een submenu mogelijk onder het
submenu, voor degene die heel veel informatie op de website kwijt wil).

Hoofdmenu-knoppen met verschillende kleuren.

Hoofdmenu-knoppen in 1 kleur met ronde hoeken.

Hoofdmenu-knoppen in verschillende kleuren met ronde hoeken en een witte achtergrond.

Submenu toont zich wanneer je de muisaanwijzer over de hoofdmenu-knop beweegt.

WelkomswoordIndeling
homepagina

Kaders met
en zonder
modules

De Footer

Foto’sSpecialeelementen

Vervolgpagina
indelenChecklist

Schetsruimte

De slider
De slider bestaat uit een afbeelding of een video en wordt gebruikt om in één oogopslag
meer uitstraling te geven aan de website. Een slider kan bestaan uit één of meerdere slides.

Een statische slider. Hiermee wordt bedoeld dat de foto stil staat, voor wie een rustige uitstraling wil.
In een bewegende slider kunnen er meerdere foto’s gebruikt worden.

Toon een slide met een afbeelding waar een slogan of pakkende tekst overheen geprojecteerd wordt.

Toon een video-opname genomen met een drone in een slide (gebruik hiervoor Vimeo om reclamevrije video’s af tespelen)De opbouw vande website

Verschillende
weergaven

Het logo vande school

Het logo op
de website

De menubalk

De slider

De sloganvan deschool

De slogan van de school
Veel scholen hebben een onderwijskreet. Deze slogan kun je weergeven op de website.

Slogan verwerkt in een logo-header.

Slogan verwerkt in een slide van de slider.

Slogan verwerkt in een kader.

WelkomswoordIndeling
homepagina

Kaders met
en zonder
modules

De Footer

Foto’sSpecialeelementen

Vervolgpagina
indelenChecklist

Schetsruimte

Welkomstwoord
Een welkomstwoord zorgt er voor dat bezoekers van de website zich welkom voelen. Dit
kan onder andere met een korte welkomsttekst.

Een welkomsttekst met daarnaast een afbeelding.

Een welkomsttekst vormgegeven binnen een illustratie.

Een welkomsttekst met daarnaast een filmpje.

De opbouw vande website

Verschillende
weergaven

Het logo vande school

Het logo op
de website

De menubalk

De slider

De sloganvan de school

Indeling homepagina: rijen en kaders.
De homepagina is opgebouwd uit rijen die vervolgens worden ingedeeld in kaders. Kaderszijn er in verschillende varianten. Zo kun je de homepagina op een speelse of juist strakke
manier vormgeven.

Rijen
In de website maak je een aantal rijen aan.
Een rij is een fluid of een content container en
daarbinnen vallen de kaders. Je plaatst kadersin een rij zodat deze bij elkaar blijven wanneer
het beeld wordt geschaald of wordt weergegeven
op verschillende apparaten. Een rij heeft altijd
de breedte van de pagina. Je kunt de rij een
achtergrondkleur geven of er een afbeelding inplaatsen.
Er bestaan twee soorten containers, een fluiden contentcontainer. De fluidcontainer wordt
weergegeven over de hele breedte van desite. De contentcontainer wordt gecentreerd
weergegeven binnen een gebied van maximaal
1200 pixels. Hiernaast op de afbeelding zie
je het verschil. Bij rij 1 gebruiken we een
contentcontainer. Dit betekent dat de kaders ineen container binnen de rode lijn vallen. Bij rij
4 gebruiken we een fluidcontainer. Dit betekent
dat de kaders buiten de rode lijn vallen. Als
een scherm 1200 of minder pixels breed isdan gedragen fluid- en contentcontainer zich

hetzelfde. Een fluidcontainer gebruik je in de
praktijk om elementen ‘uit te laten waaieren’ overde gehele breedte op een pc of laptop.

KadersKaders kun je verschillende breedtes geven. De
kaders vormen in één rij altijd samen een breedte
van 12. Hiernaast in de afbeelding zie je het
verschil. In rij 1 gebruiken we een kader met een
breedte van 12. In rij 3 gebruiken we drie kaders
met een breedte van 4. In rij 8 staan zes kadersvan 2. Het maakt dus niet uit welke combinatie
je maakt, zolang de breedte uitkomt op 12. (Hetsysteem van rijen, containers en kaders die 1/12,
2/12, etc. breed kunnen zijn is gebaseerd op desoftware van WordPress.)

WelkomswoordIndeling
homepagina

Kaders met
en zonder
modules

rij

kader

De Footer

Foto

Specialeelementen

Vervolgpagina
indelenChecklist

Schetsruimte

fluidcontainer

contentcontainerDe opbouw vande website

Verschillende
weergaven

Het logo vande school

Het logo op
de website

De menubalk

De slider

De sloganvan de school

Welkomswoord

Kaders zonder
modules
Kaders zijn op verschillende manieren
in te delen en te vullen. Hiernaast is
gekozen voor een statische website.

Statische homepagina
Een statische homepagina is een pagina
waarin geen interactie zit. Op de website
worden foto’s en iconen gebruikt maar
deze veranderen niet na een paar
seconden.

Wanneer kies je hiervoor?
Sommige scholen kiezen voor een
statische homepagina zodat deze eenrustige uitstraling krijgt. Ook kiezen
scholen voor deze optie als ze niet
frequent met de website bezig willen zijn.
Wanneer je kiest voor een statische
homepagina, zorg er dan voor dat je
sprekende en niet-tijdgebonden beelden
gebruikt.

Indeling
homepagina

Kaders met
en zonder
modules

De Footer

Foto’sSpecialeelementen

Vervolgpagina
indelenChecklist

Schetsruimte

Kaders met
modules
Kaders zijn te vullen met modules die
samen zorgen voor een dynamische
homepagina. Hiernaast laten we zienhoe dit eruit kan zien.

Dynamische website
Wanneer je kiest voor een dynamische
website betekent dit dat er hier en daariets beweegt of dat het vraagt om actie.
Dit kan de aandacht trekken van debezoeker.

Wanneer kies je hiervoor?
Laatste nieuws

Verven ouders en kinderen!

Nieuws uit de groepen

Voorleeswedstrijd groep 8

Als je bijvoorbeeld laatste nieuws,
nieuws uit de groep, kalenderitems ofde nieuwsbrief op de homepagina wilt
weergegeven.

De opbouw vande website

Verschillende
weergaven

Het logo vande school

Het logo op
de website

De menubalk

De slider

De sloganvan de school

De FooterHet afsluiten van een website is belangrijk. Het is goed om na te denken over wat je alslaatste wilt laten zien.

Logo en NAW-gegevens
Vaak wordt er voor gekozen om aan het einde van de pagina nog eens het logo en de NAW-gegevens te vermelden.
Dit wordt vaak gedaan om snel contact te kunnen leggen met de school.

Foto met slogan
Een leuke opvallende foto kan ook worden gebruikt als footer. Hierin wordt ook wel eens de onderwijskreet van de school
vermeld.

IconenEr kan ook worden gekozen voor een aantal iconen onderaan de pagina. Met deze iconen wil je bereiken dat bezoekers
overgaan tot actie. Dit kunnen iconen zijn als inloggen, aanmelden of bijvoorbeeld contact.

WelkomswoordIndeling
homepagina

Kaders met
en zonder
modules

De Footer

Foto’sSpecialeelementen

Vervolgpagina
indelenChecklist

Schetsruimte

Foto’s
Foto’s zeggen meer dan duizend woorden. Met een foto zet je een specifieke sfeer neer. Het maken
van goede foto’s is niet voor iedereen weggelegd. Fotograferen is een vak. Het is belangrijk dat foto’s
o.a. goed belicht en scherp zijn. Zorg dat je als school uniek bent en straal dat ook uit. Stockfoto’s
bepalen niet de sfeer van de school en worden ook vaak gebruikt door andere partijen. Zorg dat je je
als school onderscheid. En let erop dat foto’s die geplaatst worden rechtenvrij zijn.

X
AVG en het delen van beeldmateriaal
Samen met een consultancy-bureau hebben we het boekje ‘AVG en het delen van
beeldmateriaal’ geschreven. Het boekje werkt ondersteunend en haalt ‘de school’uit de ‘AVG angst-modus’ door te kijken naar mogelijkheden binnen de AVG.
Interesse in dit boekje? Stuur dan een e-mail naar support@schoolsunited.eu.

VDe opbouw vande website

Verschillende
weergaven

Het logo vande school

Het logo op
de website

De menubalk

De slider

De sloganvan de school

Speciale elementen
Gebruik speciale elementen als je de website meer wilt laten sprankelen. Door het gebruik
hiervan wordt de site aantrekkelijker voor de bezoeker. Lees meer over speciale elementen
zoals onder andere de ‘Carrousel’.

Carrousel
Plaats een roulerende of stilstaande carrousel in de website. Een carrousel bevat foto’s ofnieuwsberichten van de school of van leerlingen en trekt daarmee vaak de aandacht van bezoekers.

Een gehele-breedte-fotoLeuk de website op met een mooie sprekende gehele-breedte-foto. De foto wordt getoond over degehele breedte van de website.

WelkomswoordIndeling
homepagina

Kaders met
en zonder
modules

De Footer

Foto’sSpecialeelementen

Vervolgpagina
indelenChecklist

Schetsruimte

Google Maps
Wat je steeds vaker ziet is een link naar Google Maps welke wordt weergegeven als ‘map’. Bezoekers
kunnen op de map direct de locatie van de school zien. Als de bezoeker op de map (het kaartje) klikt,
dan wordt de bezoeker doorgelinkt naar Google Maps. Als er vanaf de smartphone op de map wordt
geklikt dan start de routebegeleiding naar de school. Het is een gebruiksvriendelijk element dat in de
praktijk wordt gewaardeerd.

Grafisch ontworpen illustratie
Een grafische ontworpen illustratie wordt gebruikt om de schoolwebsite te illustreren komt ten goede
aan de unieke uitstraling van de schoolwebsite. De grafische illustratie wordt ontworpen door een
designer. Bij een grafische illustratie kan bijvoorbeeld het logo van de school als inpiratie dienen.

KnoppenPlaats eventueel knoppen met tekst en/of knoppen met afbeeldingen.

De opbouw vande website

Verschillende
weergaven

Het logo vande school

Het logo op
de website

De menubalk

De slider

De sloganvan de school

Vervolgpagina indelen
Hoe kun je een vervolgpagina indelen?
De indeling van de pagina
Het is belangrijk dat de homepagina goed isingedeeld, toch is ook minstens zo belangrijk dat
vervolgpagina’s overzichtelijk worden ingedeeld voorde lezer. Dit kan eventueel alsvolgt:
Sectie header
Plaatse een foto in de Sectie header.
Hoofdtitel
Geef een hoofdtitel mee zodat de bezoeker weet
waar de informatie op de pagina in hoofzaak overgaat.
Streep onder titel
Onder de hoofdtitel kun je een streep invoegen. Dit
zorgt vooor rust op de pagina.
Subtitels
Gebrtuik subtitels en geef ze eventueel een kleur om
ze op te laten vallen. Zo breng je deelonderwerpen ofargumenten direct onder de aandacht.
Foto’sWe zijn allemaal visueel ingesteld. Foto’s zorgenervoor dat berichten beter worden onthouden, foto’s
versterken het verhaal.

WelkomswoordIndeling
homepagina

Kaders met
en zonder
modules

De Footer

Foto’sSpecialeelementen

Vervolgpagina
indelenChecklist

Schetsruimte

Checklist
Wanneer je besluit om de website te laten veranderen door een designer dan is het goedom onderstaande checklist door te nemen. De checklist bevat punten waar je over na kuntdenken. De checklist wordt doorgenomen met de designer wanneer het designproces voorde school is gestart. Het boekje fungeert daarin als leidraad.

Het ontwerpen van een nieuwe website

o Is de school tevreden over het logo van de school?
o Waar op de website wil ik het logo plaatsen?
o Welke knoppen wil ik gebruiken in de menubalk?
o Wat worden de onderliggende pagina’s?
o Wil je een statische of een roulerende slider?
o Gebruikt de school een slogan en moet deze op de website worden getoond?
o Wordt de website statisch of dynamisch?
o Welke onderwerpen wil ik weergeven in de kaders?
o Worden de kaders gevuld met modules als: inloggen, kalender, nieuwsbrief of laatste nieuws?
o Maak met potlood en gum op de volgende pagina’s een schets van de indeling van dehomepagina, raadpleeg voor ondersteuning het hoofdstuk ‘Indeling hompagina’ .

De volgende bestanden heeft de designer nodig

o Het logo van de school in een hoge resolutie en goede kwaliteit. Het liefst in een .eps bestand.
Lukt dit niet dan is een bestand in .jpg, .pdf of .png ook goed.

o Hoge resolutie en goede kwaliteit foto’s. Let op: een foto in de slider moet minimaal 1920 pixels
breed zijn.

o Foto’s van de schets, gemaakt op de volgende pagina’s.

Mail je bestanden naar: design@schoolsunited.eu

Schetsruimte

bovenkant website

onderkant website

SchoolsUnitedWesterlaan 51		
8011 CA ZWOLLE		

www.schoolsunited.eu
design@schoolsunited.eu