Digitaal huisstijlhandboek voor
de Gemeente Enschede

Het digitale huisstijlhandboek omschrijft de randvoorwaarden voor het implementeren van de Gemeente Enschede huisstijl online. Het doel is om zoveel mogelijk eenheid te creëren en richting te geven.

Grofweg is het gebruik van de huisstijl onderverdeeld in drie schillen:
a) pagina’s om te informeren
b) pagina’s om te informeren en overtuigen en
c) pagina’s om te vermarkten of verkopen.

Een nieuw initiatief komt in schil a terecht. Alleen als de communicatiedoelen het vereisen, schuift het initiatief door naar type b of c. Dit digitaal huisstijlhandboek legt beperkingen op in de huisstijl, maar niet in functionaliteit.

Grid

12-kolomns

Er is gekozen voor een veelzijdig (responsive) grid, gebaseerd op 12 kolommen met een maximale contentbreedte van 1060 px op basis van een gemaximaliseerd browserscherm. Dit grid is goed deelbaar (zie onderstaande voorbeelden). Het 12-koloms grid is verplicht in alle schillen. Naast de onderstaande verdeling, mag bepaalde content zoals foto's, video's of maps buiten de kolommen vallen zodat deze content de volle breedte van de browser kan benutten

Type site

A: Pagina’s op enschede.nl
(Schil 1) informeren

B: Subsite
(Schil 1/2) informeren / overtuigen

C: Subsite
(Schil 3) vermarkten of verkopen

Kleurgebruik

Het kleurgebruik is afhankelijk van type site; naar gelang het sitetype worden de vrijheden in kleur groter. Als basis wordt gewerkt met de huisstijlkleuren van Enschede: zwart, rood en drie ondersteunende grijswaarden voor secundaire doeleinden (bijv. als achtergrondtoon)

De kleuren zijn ingedeeld naar de drie schillen zoals die zijn vastgesteld in het bestaande schillenmodel voor print. Hiernaast kun je zien welke kleuren toepasbaar zijn op welk sitetype.

test
test

Steunkleurgebruik
Er kan 1 steunkleur worden gebruikt. Deze steunkleur mag worden toegepast in een subset van 3 gradaties: 75%,50%, 25% van de volle steunkleur

test

Kleurgebruik in een type C site is geheel vrij en naar eigen inzicht te bepalen door de aangenomen vormgever op basis van het desbetreffende project.

Gebruik bij voorkeur de richtlijnen en stijlelementen uit type B.

Typografie

Naar gelang het sitetype worden de typografische vrijheden groter.

Als basis voor de headerteksten geldt primair de huisstijlletter van de Gemeente Enschede:
Caecilia Bold/Bold Italic.
Uitzondering hierop is een type C-site (schil 3). Hier geldt meer vrijheid omdat er dan sprake is van een projectstijl, ontworpen door een extern bureau. Dan is de herkenbaarheid afhankelijk van de door de vormgever bepaalde typografische kaders rondom de projectstijl.

Voor de alineateksten is gekozen voor een alternatief op het lettertype Arial, namelijk de Montserrat. Een tijdloze en veelzijdige leesletter die op het web goed zijn werk doet. Dit lettertype ligt vast voor schil A en B.

HEADERS

Caecilia   76 Bold
Caecilia    76 Bold Italic

ALINEATEKST

Montserrat Light
Montserrat Regular
Montserrat Bold

HEADERS

Caecilia   76 Bold
Caecilia    76 Bold Italic

ALINEATEKST

Montserrat Light
Montserrat Regular
Montserrat Bold

HEADERS

Nader te bepalen aan de hand van ontwerp projectstijl.

ALINEATEKST

Gebruik bij voorkeur de richtlijnen en stijlelementen uit type B.

Stijlelementen

Het gebruik van de vaste stijlelementen is verplicht in type A en B.
De primaire kleur rood mag aangepast worden in een type B site, echter alleen met bovenstaand palet steunkleuren. Gebruik voor een type C site bij voorkeur de richtlijnen en stijlelementen uit type B.

USER INTERFACE ELEMENTEN

Hieronder een overzicht van de user-interface elementen. In het algemeen geldt:

  • alle stijlelementen met een zwarte lijnopbouw mogen ook een witte lijnopbouw hebben (denk aan gebruik over beeld of op kleurondergrond). Daarbij geldt wel dat dit moet gebeuren conform de webrichtlijnen.

Voor de buttonstijlen in een type B site geldt:

  • naast Enschede-rood mag er ook gebruik worden gemaakt van de evt. gekozen steunkleur.

WIDGET (TABJE) IN HEADERSLIDER

De widget in het headerbeeld/slider heeft altijd onderstaande breedte en bestaat uit:

  • een titel die uit het blok loopt over maximaal drie regels
  • een summarytekst van maximaal drie regels
  • een zgn. 'call to action'-button

BUTTONSTYLES

Primaire call to action
Hoverstate
Secundaire call to action
Hoverstate
Primaire cta
Secundaire cta
Hoverstate
Hoverstate

ALT. BUTTONSTYLES

SOCIAL ICONS

De social icons zijn standaard zwart. Bij hover over het het social icon verandert deze in de huisstijlkleur van het desbetreffende sociale platform.

PAGINERING

1 2 3 4 5 ...

Terug naar overzicht On hover

MAPMARKERS

Hieronder een aantal voorbeelden van mapmarkers.

Wat vaststaat is de maat van de marker. Voorkeur gaan uit van het palet steunkleuren, maar hiervan mag worden afgeweken. Een niet bestaande markericon kan op verzoek worden ontworpen.

  • Gemeentelijke locaties
  • Parkeren
  • Bedrijfsverzamelgebouwen
  • Kinderopvang
  • Basisonderwijs
  • Voortgezet onderwijs

WEBRICHTLIJNEN

Een (externe) link op kleur­achter­grond wordt diapositief weergegeven.

Lettergrootte en contrast

FORMULIER ELEMENTEN

Hieronder de stijlelementen voor het opbouwen van een formulier. Bij een formulier kan er nooit sprake zijn van het toepassen van een steunkleur. Zaken als puntgrootte, foutmeldingen, etc. worden vastgelegd in de CSS.

Naam*

Ben van Heijningen

E-mail adres*

ben@ensch

Straatnaam*

Vul hier een juiste straatnaam in

Onderwerp

Selecteer onderwerp
Radiobutton geselecteerd
Radiobutton
Checkbox
Checkbox geselecteerd

Upload hier uw....

Kies uw bestand

Uw bericht*

WIDGETSTYLES

Hieronder 2 widgetvoorbeelden; één met beeld en call-to action, en widget met tekstlinks.

Voor de beeldvariant geldt: titel en alinea­tekst worden afgevangen op het aantal karakters zoals aangegeven in de CSS.

Bij een type B site is het toegestaan om te variëren aan de hand van de aangegeven steun­kleuren.

Zie ook

Fietskaart Enschede e.o.
Veiligheid onderweg.

De fietskrant is verschenen!

De fiets is comfortabel, snel,
milieuvriendelijk en goedkoop.

Bekijk 'm snel

TEKSTBEELD ALINEA

De alineatekst kan worden toegepast in drie varianten/puntgroottes.

  • De karakteristieken van het lettertype (kleur / fontgewicht / puntgrootte / regelafstand) zijn voorgedefiniëerd in het CSS van de gebruikte contentstrook.
  • Als er sprake is van een inleiding dan is deze altijd in het fontgewicht Regular.
  • Teksten bij voorkeur niet afbreken.
  • Het gebruik van underline, cursief en vet dient zoveel mogelijk te worden voorkomen.
    Wil men ergens de aandacht op vestigen dan het liefst een vette tekst gebruiken.
    Cursief kan op sommige schermen minder goed leesbaar zijn, underline brengt verwarring met een link.

Montserrat
17px/26px
Your entrance was good, his was better. i just heard about Evans new position, got no food we got no money and our pets heads are falling; good luck to you Evan backstabber, bastard, i mean baxter. i now issue a new commandment: thou shalt do the dance. we got no food we got no money and our pets heads.

Montserrat
15px/24px
Your entrance was good, his was better. i just heard about Evans new position, got no food we got no money and our pets heads are falling; good luck to you Evan backstabber, bastard, i mean baxter. i now issue a new commandment: thou shalt do the dance. we got no food we got no money and our pets heads.

Montserrat
13px/20px
Your entrance was good, his was better. i just heard about Evans new position, got no food we got no money and our pets heads are falling; good luck to you Evan backstabber, bastard, i mean baxter. i now issue a new commandment: thou shalt do the dance. we got no food we got no money and our pets heads.

VOORBEELD

Headertekst voorbeeld

De fiets is comfortabel, snel, milieuvriendelijk en goedkoop. Door het elektrische fietsen is zelfs tegenwind geen belemmering meer om op de fiets te stappen.

Een ander speerpunt is het verbeteren van de voorzieningen voor de fietser. Op deze site is alle relevante fietsinformatie verzameld. Of u nu in Enschede woont, werkt, de stad bezoekt, ondernemer bent of benieuwd bent wat de gemeente Enschede doet om het fietsen te bevorderen. Of u nu in Enschede woont, werkt, de stad bezoekt, ondernemer bent of benieuwd bent wat de gemeente Enschede doet om het fietsen te bevorderen.

Subkoptekst

  • Opsomming unordered
  • Opsomming unordered
  • Opsomming unordered

Subkoptekst

  1. Opsomming ordered
  2. Opsomming ordered
  3. Opsomming ordered

TITELTEKSTEN

Titelteksten zijn te gebruiken in drie fontgroottes; Large, Medium en Small.

  • De karakteristieken van titels (kleur / fontgewicht / puntgrootte / regelafstand) zijn voorgedefiniëerd in het CSS van de gebruikte contentstrook.
  • De titeltekst in de widget op de voorpagina heeft een eigen fontgrootte; ook deze is voorgedefiniëerd.
  • Bij een schil-2 site is het toegestaan om te variëren aan de hand van de aangegeven steunkleuren.

Caecilia LT 75 Bold Italic, 40 px

Slidertitel

{ Headertekst over bannerbeeld }

Caecilia LT 75 Bold

Title large, 30px

Title medium, 25px

Title small, 20px

Montserrat Bold

Subtitle large, 17px

Subtitle small, 15px

Indeling van de website

Homepage: boven de vouw ('above the fold')

Begrijpen wat 'boven de vouw' betekent is een belangrijk onderdeel in webdesign. Je wilt er zeker van zijn dat de website zo is ontworpen, dat de beste en meest aansprekende onderdelen direct getoond worden. Zo worden de bezoekers verleidt om verder naar beneden te scrollen naar de inhoud 'onder de vouw'. Als de informatie boven de vouw saai of misleidend is, dan is de kans groot dat mensen de website verlaten zonder te scrollen naar de rest van de inhoud. Vooralsnog gaan we uit van een minimum schermresolutie van 1024x768px. Bij een lagere schermresolutie wordt het onvoorspelbaar hoe de site zich gaat gedragen ivm responsiveness.

Primaire onderdelen boven de vouw:

  1. het 'Enschede' menu
  2. het hoofdmenu (OPM. het zoekmenu is optioneel)
  3. toegankelijkheidsonderdelen (lettergrootte/hoog contrast/talen)

Voor secundaire onderdelen boven de vouw in schil a en b is er de mogelijkheid om te kiezen uit een aantal vaste stijlelementen:

  • Foto- of videostrook; dit element mag browserwide geplaatst worden of in twee of meerdere kolommen van het grid (zie vb hiernaast).
  • Contentstrook artikel met foto, headertekst + summary + optioneel call to action-button, zie Stramien: Home
  • Contentstrook Headertekst + summary gecentreerd + optioneel call to action-button, zie Stramien: Home
  • Widget vierkant met afgesneden hoek ('tabje') + headertekst + summary + optioneel call to action-button, zie Stramien: Home
  • Tegelstramien, zie Stramien: Tegelstramien

Onder de vouw

'Onder de vouw' kan men, geleid door de content en het doel van de site, naar eigen inzicht gebruik maken van de zgn. contentstroken. Hiervan zijn een aantal basisstroken aanwezig, zie stramien



Vervolgpagina

Vaste onderdelen zijn:

  1. het 'Enschede' menu
  2. het hoofdmenu
  3. toegankelijkheidsonderdelen (lettergrootte/hoog contrast/talen)
  4. Kruimelaar (m.u.v. een tegeltemplate als vervolgpagina)

Een vervolgpagina zal, naast de vaste onderdelen, vaak beginnen met een headerbeeld, gevolgd door een standaard contentveld (tekstveld) en eventueel een submenu en widget(s). Ook hier geldt: geleid door de content en het doel van de site, kan men naar eigen inzicht gebruik maken van zgn. contentstroken. Hiervan zijn een aantal basisstroken aanwezig, zie stramien

Bottom

Elke site heeft altijd een bottom, met daarin een aantal naar eigen inzicht te bepalen onderdelen. Denk dan aan bijv.: Sitemap / Contactgegevens / Twitterfeed / Snel naar: / Social icons...