Pagina’s bouwen en structureren

Het Webplatform Vlaanderen wordt dé referentie voor alle Vlaamse overheidsorganisaties die hun digitale dienstverlening eenvoudiger, beter herkenbaar en optimaal toegankelijk willen maken voor hun klanten en voor de burgers. U vindt er alle technische bouwblokken, voorschriften en richtlijnen die voldoen aan de meest recente digitale en gebruikersstandaarden. Voor toepassingen en applicaties die Webplatform nog niet kan ondersteunen, kunt u gebruikmaken van de webcomponenten.

De webcomponenten worden dan ook beschouwd als een onderdeel van de totaaloplossing Webplatform, en kunnen enkel gebruikt worden indien u nu of in de nabije toekomst met uw informatieve communicatie instapt in Webplatform.

Indien u gebruik wilt maken van de webcomponenten, of bijkomende informatie wenst, kunt u contact opnemen met de servicedesk van Informatie Vlaanderen.

 

De front-end componenten vormen een geheel die vlot onderling te combineren zijn. Door de componenten op de juiste manier samen te gebruiken kunt u heel krachtige interfaces bouwen.

Hoe begint u daar nu aan? Belangrijk is om allereerst stil te staan bij de doelstelling van de pagina, het functionele type van de pagina en het gebruik van de juiste grid.

Bepaal doelstelling en concept van de interface

Vooraleer u start met de componenten, is het nodig om de doelstelling van uw interface te bepalen. Heeft u een webpagina die in hoofdzaak wil informeren of eerder overtuigen? Is het een pagina waar een gebruiker iets kan aanvragen of melden? Of gaat het om een loket waar de gebruiker iets kan opvolgen? 

Een goed uitgewerkt plan voor uw interface helpt u een heel eind op weg. Dit kan onder de vorm van wireframes of een functioneel design. Ook een scherp geformuleerde doelstelling van de pagina en een customer journey (getekend pad van verschillende gebruikers hoe ze in aanraking komen met uw pagina) helpen het concept te verhelderen en vereenvoudigen keuzes over welke componenten te gebruiken.

Informatie Vlaanderen ondersteunt overheden in deze fase rechtstreeks, of via raamovereenkomsten service design en gebruikerstesten. Contacteer ons voor meer informatie.

Doelstelling en concept

Kies paginatype en template

De componenten werken steeds in een template van een gekozen paginatype. Deze template zorgt voor de algemene lay-out van de pagina als geheel. Er zijn twee paginatypes beschikbaar:

  • voor informatieve pagina's
  • voor transactiepagina's

Informatieve pagina's

Informatieve pagina's: om te ontdekken

Op dit soort pagina's ligt de nadruk op het ontdekken van informatie. De gebruiker van de website hoeft nog niet tot een transactie over te gaan, maar informeert zich over de dienstverlening van de overheid of het beleid.

Die informatieve functie kunt u ruim interpreteren: 

  • pagina's waarin geïnformeerd wordt over de dienstverlening in de strikte zin van het woord
  • pagina's waarin beleving belangrijk is om uw doelgroep te overtuigen, denk bijvoorbeeld aan campagnes 
  • pagina's waarin bepaalde beleidsbeslissingen verantwoord worden
  • ... 

In deze paginatemplate maakt u naast de Vlaanderen header ook steeds gebruik van de content header. Voor de invulling van de pagina kan u gebruik maken van de componenten en gedragspatronen.

Transactiepagina's

Transactiepagina's leggen de focus op het voltooien van een actie, zoals een aanvraag van een premie, het indienen van een klacht of het aanvragen van een erkenning. Wat deze template kenmerkt, is de focus op de actie zelf, en deze pagina laat alle randvoorwaarden weg.

Naast de Global header maakt u hier gebruik van de functional header. De functional header is geschikt voor dit soort pagina's omdat het in tegenstelling tot de content header geen achtergrondfoto bevat. Op die manier toont de functional header de gebruiker waar die zich bevindt in de transactie zonder verder af te leiden. 

In het overzicht van de componenten vindt u kant-en-klare formulierelementen om de interface van een formulier en loket te bouwen.

Transactiepagina's

Enkele voorbeelden

Hoe ziet zo'n pagina template eruit? Hieronder vindt u 4 voorbeeldpagina's waarin we de componenten gecombineerd hebben tot krachtige gebruikspatronen.

Met een schaalbare en responsive grid

De grid

Een grid is een onzichtbaar rooster van rijen en kolommen waar de pagina mee gelayout is. Het grid zorgt voor een duidelijke structuur binnen de pagina.

Er is een grid container en grid elementen. De grid container wordt steeds als overkoepelende container gebruikt voor gridelementen en zorgt horizontaal voor een evenredige afstand tussen de elementen in het grid.

Het grid zorgt eveneens voor het responsive gedrag, dat betekent dat de grid bepaalt hoe de pagina reageert op kleine schermen zoals smartphone of tablet, of op heel grote schermen.

 

Componenten gebruiken en aanpassen

Met de juiste paginatemplate en grid bent u klaar om te starten aan de opbouw van de pagina. Hiervoor kan u componenten of gedragspatronen combineren.

De componenten zijn bedoeld voor alle overheden in Vlaanderen. Om dit te ondersteunen zijn er drie stijlen van de componenten en patronen uitgewerkt:

  • componenten op het corporate niveau van Vlaanderen 
    aansluitend op Vlaanderen.be, bedoeld voor sites/applicaties die nauw integreren met Vlaanderen.be of overheid.vlaanderen.be
  • componenten op entiteitsniveau 
    componenten bedoeld ter ondersteuning van de diverse entiteiten van de Vlaamse overheid, conform het merkbeleid. We hopen gauw componenten in de nodige kleurenpaletten van de Vlaamse overheid te kunnen aanbieden. Aarzel in tussentijd niet om ons te contacteren.
  • componenten gestript van opmaak
    gestript van visuele elementen of van lettertype zodat u zelf de merkkleuren van uw overheidsentiteit kan toepassen op de componenten, denk aan een lokaal bestuur of provincie.