The site of the city of Antwerp, Belgiums second largest city, has been around for a while but was never built in accordance with the cities brand guidelines. After a recent revision of those guidelines and the creation of a custom city font, the city council decided therefor to also redesign their web site.
We were asked to work out a new structure and to provide the necessary designs.
Our main focus was to make navigating the site easy and transparent, so together with the UX-team we created a global structure and grid system for all the main page sections and components.
We then created designs for all the page types and components in which each component was assigned a specific colour to clearly identify its use (eg. city map, news, events).
Together with the city’s brand department we designed custom icons for the main site sections and a secondary set for main components.
New brand guidelines for print publications were composed by an external branding agency. We refined their color recommendations to compose two main color sets and a secondary subset for use on subsites and promotional pages.
To assure consistency of style throughout the website and all its subsites, we assembled all rules and recommendations in a digital styleguide divided in chapters regarding for example colors, typography, layout, forms, animations etc…
This styleguide was then made available to the development team and is used for onboarding new developers.
All basic rules were also consolidated in a series of style (scss) files and javascripts components, which were then assembled in a Bower component to be easily integrated in existing and new projects.
After designing and styling all standard page elements, we created designs for all the specific components used throughout the site. A true labour of love, since the collection of standard html components plus all the Angular 2 library components used on antwerpen.be is pretty comprehensive.
Antwerpen.be is a large website with many different sections, pages and a multitude of forms. For most of these we designed specific components and page layouts. One such example is the section for reserving sport locations and equipment.
