De site van de stad Antwerpen bestaat al een hele tijd maar werd niet gebouwd volgens de richtlijnen van de huisstijl van de stad. Na een recente herwerking van die richtlijnen en de creatie van een eigen lettertype voor de stad, werd daarom besloten om de site ook een nieuw design te geven.
Wij werden gevraagd om hiervoor een nieuwe structuur uit te werken en de nodige designs aan te leveren.
Onze belangrijkste doelstelling was om de navigatie doorheen de site zo transparant en eenvoudig mogelijk te maken. Samen met het UX-team creëerden we daarom een globale structuur waarin alle secties en componenten werden ingepast.
We maakten vervolgens ontwerpen voor al de belangrijkste pagina types en componenten waarbij elk component een specifieke kleur werd toegewezen (bijv. stadsplattegrond, nieuws, evenementen).
Samen met de huisstijl afdeling van de stad hebben we aangepaste pictogrammen voor de belangrijkste secties van de site ontworpen en een secundaire set voor alle hoofdcomponenten.
Een extern brand agency stelde een selectie kleuren samen voor alle gedrukte communicatie. Op basis van hun kleuraanbevelingen hebben we die selectie verfijnd om twee hoofdkleurensets en een secundaire subset samen te stellen voor gebruik op subsites en promotiepagina’s.
Om de consistentie te verzekeren van de nieuwe stijl over de hele website en al haar subsites heen, hebben we alle regels en aanbevelingen verzameld in een digitale stijlgids, verdeeld in hoofdstukken over o.m. kleuren, typografie, lay-out, formulieren, animaties enz …
Deze gids werd beschikbaar gesteld aan alle interne en externe ontwikkelingsteam en wordt ook gebruikt voor het inwerken van nieuwe ontwikkelaars.
Alle basisregels werden ook geconsolideerd in een reeks stijl-bestanden en javascript-componenten, die vervolgens werden samengevoegd in een Bower-component om eenvoudig te worden geïntegreerd in bestaande en nieuwe projecten.
Na het ontwerpen van alle standaardpagina-elementen, hebben we ook ontwerpen gemaakt voor alle specifieke componenten die op de site worden gebruikt. Een flinke klus, want de verzameling standaard componenten + alle Angular 2-bibliotheekcomponenten die op antwerpen.be worden gebruikt, is behoorlijk uitgebreid.
Antwerpen.be is een grote website met veel verschillende secties, pagina’s en een veelvoud aan formulieren. Voor de meesten hebben we specifieke componenten en pagina lay-outs ontworpen. Een voorbeeld hiervan is het gedeelte voor het reserveren van sportlocaties en -uitrusting.
