Bouwstenen
Kleur
Gemeente Delft huisstijl heeft een primair kleurenpalet van Delfts Blauw in drie vaste kleuren en wit. Delfts Blauw speelt de hoofdrol in alle communicatiemiddelen.
Naast de vier basiskleuren kan er één extra accentkleur aan dit palet worden toegevoegd. De accentkleur is vrij te kiezen en kan gebruikt worden om communicatiemiddelen, projecten of thema's een eigen gezicht te geven. Alle kleuren worden in principe gebruikt in de volle verzadiging, maar kunnen voor speciale effecten zoals hovers of bijschriften ook in tinten gebruikt worden. We werken in stappen van 10%, m.u.v. 80%, 60% en 40%. Denk hierbij aan de webrichtlijnen voor leesbaarheid.
Er zijn een aantal vuistregels:
- Gebruik altijd de volle kleur en maak geen kleurverlopen
- Zet geen kleuren met transparantie over elkaar heen. Hierdoor ontstaan nieuwe onwenselijke kleuren. Het toepassen van transparantie is alleen toegestaan over een foto.
- Houd bij het kiezen van een accentkleur rekening met de webrichtlijnen voor toegankelijheid.
- Diensten, projecten en thema’s kunnen een ‘eigen’ kleur kiezen. Deze keuze sluit gebruik door anderen niet uit.
- Kleurtinten of het gebruik van meer dan één extra kleur is alleen toegestaan om de toegankelijkheid van informatie te verbeteren of als de user experience er om vraagt. Dit is het geval bij complexe tabellen/grafieken met veel variabelen of om de status van een element aan te geven, zoals hover of visited.
- Zwart wordt allen gebruikt voor tekst
Huisstijlkleuren online
rgb(146,182,214) | rgb(0,108,180) #006CB4 | rgb(0,36,76) #00244c | + 10% #000000 | rgb(57,71,80) #394750 | |||||||||||||||
Licht Blauw | rgb(163,203,238) #A3CBEE |
Delft Blauw | rgb(0,120,200) #0078C8 |
Donker Blauw | rgb(0,40,85) #002855 |
Accent | 100% |
Grijs | rgb(64,79,89) #404f59 | ||||||||||
rgb(172,208,239) | rgb(25,133,205) rgba(0,120,200,0.9) #1985CD | rgb(25,61,102) rgba(0,40,85,0.9) #193D66 | 90% | rgb(83,96,105) | |||||||||||||||
| rgb(190,218,243) rgba(163,203,238,0.7) #BEDAF3 | rgb(76,160,216) rgba(0,120,200,0.7) #4CA0D8 | rgb(76,104,136) rgba(0,40,85,0.7) #4C6888 | 70% | rgb(121,131,138) rgba(64,79,89,0.7) #79838A | |||||||||||||||
| rgb(209,229,246) rgba(163,203,238,0.5) #D1E5F6 | rgb(127,187,227) rgba(0,120,200,0.5) #7FBBE3 | rgb(127,147,170) rgba(0,40,85,0.5) #7F93AA | 50% | rgb(159,167,172) rgba(64,79,89,0.5) #9FA7AC | |||||||||||||||
| rgb(227,239,249) rgba(163,203,238,0.3) #E3EFF9 | rgb(178,214,238) rgba(0,120,200,0.3) #B2D6EE | rgb(178,190,204) | 30% | rgb(197,202,205) rgba(64,79,89,0.3) #C5CACD | |||||||||||||||
| rgb(236,244,251) rgba(163,203,238,0.2) #ECF4FB | rgb(204,228,244) rgba(0,120,200,0.2) #CCE4F4 | rgb(204,212,221) rgba(0,40,85,0.2) #CCD4DD | 20% | rgb(216,219,221) rgba(64,79,89,0.2) #D8DBDD | |||||||||||||||
| rgb(245,249,253) rgba(163,203,238,0.1) #F5F9FD | rgb(229,241,249) rgba(0,120,200,0.1) #E5F1F9 | rgb(229,233,238) rgba(0,40,85,0.1) #E5E9EE | 10% | rgb(235,237,238) rgba(64,79,89,0.1) #EBEDEE | |||||||||||||||
Wit | rgb(255,255,255) #ffffff |
Zwart | rgb(27,27,27) #1b1b1b | ||||||||||||||||
Leesbaarheid online
AA toegankelijkheid van content refereert naar de 3 niveaus van website toegankelijkheid (A, AA en AAA) zoals die op Europees niveau zijn afgesproken in de Web Content Accessibility Guidelines (WCAG 2.0). Doel van de WCAG 2.0 webrichtlijnen is iedereen toegang te verschaffen tot online informatie en dienstverlening van goede kwaliteit. WCAG 2.0 is een overheidsstandaard.
Grid
Het grid van vierkante tegels, hierna 'tegelgrid', vormt de basis van een juiste toepassing van de huisstijl van gemeente Delft. Het tegelgrid wordt voor het webontwerp ingezet zoals gebruikelijk is bij een responsive 960-grid. Het tegelgrid heeft alleen een kleiner kolomwit – het voegwit – dat blank moeten blijven wanneer gebruikt als tussenruimte.
Er zijn een aantal uitgangspunten voor een juiste toepassing van het grid:
- De maat van één tegel is altijd de helft van het logo, minus een half voegwit. Zie verder bij Maatvoering.
- De aanbeveling is om het grid gecentreerd te gebruiken. Voor brede ontwerpen kunnen er links en rechts meer tegelkolommen ingezet worden.
- Gebruik het grid voor het plaatsen van kolommen zoals een midden- en zijkolom op tekstpagina’s. Regio’s en elementen als een headerfoto kunnen doorgetrokken worden totdat ze helemaal aflopend zijn.
- Laat de maatvoering van elementen zoveel mogelijk voortvloeien uit tegelgrid. Ter illustratie: een titelbalk van een modalwindow kan bijvoorbeeld een halve tegel hoog zijn. Image pagers van een slideshow zijn bijvoorbeeld vierkant.
Rekenvoorbeeld:
Breedte logo = 100%
Breedte 1 tegel binnen logo = 48.25%
Breedte 1 voegwit binnen logo = 3.5%
Bij een logo van 230px komen deze maten neer op:
Breedte 1 tegel = plusminus 111px
Breedte 1 voegwit = plusminus 8px
Deze absolute maten kunnen binnen het geheel van het ontwerp weer omgezet worden naar relatieve maten.
Regio's
We werken met regio's die zich zoveel mogelijk houden aan de vaste tegelmaten. Er zijn drie situaties mogelijk:
- Regio’s met een vaste hoeveelheid content zoals de header en footer hebben een vaste hoogte gerelateerd aan het tegelgrid.
- Kan de hoogte vastgezet worden, maar is een hele tegelmaat te groot? Werk dan met halve tegelmaten.
- Regio’s met een redactionele invulling hebben geen vaste hoogte omdat dit afhankelijk is van de content.
Voegwit tussen de regio's
Plaats de regio's op het tegelgrid en zorg ervoor dat het voegwit tussen de tegels 'wit' blijft. Het voegwit tussen regio’s of bijvoorbeeld een blokkenoverzicht mag nooit ingevuld worden met kleur (bijvoorbeeld bij een hover of als lijn).
Voorbeeld correct gebruik voegwit en hover. Bij een hover veranderen er bijvoorbeeld kleuren, maar het toegepaste voegwit tussen de blokken blijft intact.
Voorbeeld incorrect gebruik voegwit en hover.
In dit voorbeeld gaat het kleurvlak over het wit heen dat hier wordt toegepast als voegwit tussen de blokken. Dit mag niet.
Voorbeeld incorrect gebruik voegwit. In dit voorbeeld is het voegwit ingekleurd. Dit mag niet.
Teksten in regio's
Zorg dat teksten elkaar niet ‘raken’ in regio’s. Kleurvlakken, blokken en inline beeld staan op het grid. Tekst binnen deze elementen bevat een padding van ten minste twee keer het voegwit.
Vormentaal
De vormentaal in de huisstijl van gemeente Delft is gebaseerd op het tegelgrid. Vierkante tegels met voegwit zorgen voor verbinding tussen de redactionele elementen. De vierkante tegelvormen raken elkaar waar mogelijk, ze zijn dus letterlijk het verbindende element.
- De maatvoering van de tegels volgt het onderliggende tegelgrid.
- Tegels kunnen toegepast worden in het primaire kleurenpalet of in een accentkleur.
- Tussen de tegels is altijd voegwit zichtbaar.
Voorbeeld: strook over gehele breedte met testimonial en blokjes. Voorbeeld verbindende blokjes.
Voorbeeld: titel in transparant vlak over fotografie heen en regio eronder. Voorbeeld: verbindend transparant blokje op fotografie.
