Design du site Web de la Ville de Genève

Un projet citoyen d'envergure 

C’est avec une excitation non dissimulée que nous avons abordé notre travail de conception et de design pour le projet de refonte du site officiel de la Ville de Genève. Ce nouveau mandat coïncidait en effet avec l’ouverture de nos bureaux à Genève. Nous avions également hâte d’apporter notre expertise sur cette plateforme au service des citoyens genevois.

Image d'ambiance : aperçu du site à gauche et aperçu d'une carte à droite - Antistatique
Image d'ambiance : aperçu des illustrations à gauche et aperçu du logo à droite - Antistatique

L’approche du design dans un grand projet

Antistatique n’est pas le seul intervenant sur ce projet ambitieux. Bien sûr il y a différents départements de la ville. Il y a aussi, en amont, une analyse ergonomique, celle de Telono. Nous avons absorbé les comptes-rendus de tests d’ergonomie du site en ligne à l'époque. Nous avons également intégré les différentes recommandations dans nos travaux pour la nouvelle plateforme. Un site plus moderne, qui répond mieux aux usages actuels et bien sûr aux attentes des visiteurs du site.

Les plans ou l’art du wireframe

Nous comparons souvent le travail de conception d’un site à celui du travail de conception d’un architecte. Pour nous, les wireframes c’est le plan, le squelette d’une page. Cela sert à rendre concrets l’architecture de l’information et l’aménagement de chaque page. On rend visibles la hiérarchie des informations et les composants d’interface. Ces wireframes nous servent également de support pour les tests d’ergonomie. Pour ce projet, nous avons construit l’ensemble des gabarits identifiés sous forme de pages HTML. Cette solution nous a permis notamment de « montrer » les pages « responsive » pendant les réunions du comité de pilotage. Ce livrable facilite la discussion avec les équipes. On se rend mieux compte de la complexité ou de la simplicité des solutions proposées dans les écrans.

Qui dit plan, dit liste des meubles. Nous tenons à jour, en parallèle des wireframes, une liste exhaustive des composants. Son petit nom c’est la « matrice des composants ». La liste des choses à déménager si vous voulez. Quoi, avec quel nom, sous quelle forme, avec quelles informations pour quel affichage : la totale. Ce document va servir à tous pendant les phases du projet.

Le design visuel

La direction artistique et le web design du site

« Genève : vie citoyenne » ou encore « Genève vous informe et vous inspire ». Voici deux accroches qui pourraient résumer notre approche visuelle. Certes le site à la vocation d’un service public d’information, mais Genève est une ville qui bouge, où le tissu social et culturel bouillonne. Comme deux faces d’une même pièce : le site de la Ville de Genève doit proposer ces deux aspects.

Direction artistique: le choix de la typographie, Fira Sans  -Antistatique
Direction artistique: détail de la typographie Fira Sans -Antistatique
Direction artistique: utilisation de la typographie dans l'interface -Antistatique
Direction artistique: la palette de couleurs -Antistatique

Nous avons donc proposé une interface qui sait allier une rigueur de construction avec un je ne sais quoi ravissant. Vous trouverez l’information et nous essaierons de vous charmer au passage !

Encore une fois, nous ne partons pas de zéro. La Ville de Genève possède une charte graphique solide. Nous nous sommes donc assurés que celle-ci perdure en ligne et puisse se prolonger. Vers les réseaux sociaux par exemple. L’ensemble des maquettes, des gabarits, des composants, des interactions, des animations reflète ces intentions de design.

Interface: aperçu du web design de la page d'actualités -Antistatique
Interface: aperçu de divers composants d'interfaces 1/3 -Antistatique
Interface: aperçu de divers composants d'interfaces 2/3 -Antistatique
Interface: aperçu de divers composants d'interfaces 3/3 -Antistatique

Illustrations « made for Geneva »

C’est dans le pied de page qu’on trouve une série d’illustrations sur mesure. Ce paysage illustré, sympathique et engageant permet de montrer des signes reconnaissables de la Ville de Genève aux gens de passage et de proposer une fresque versatile aux habitants. Nous avons décliné une trentaine de ces éléments pour que les équipes de la ville puissent les utiliser à différents endroits du site, composer de nouveaux paysages ou agrémenter un support de communication. Certaines sont même animées. Saurez-vous les retrouver sur le site ?

Illustrations du site de la Ville de Genève : principes de construction -Antistatique
Illustrations du site de la Ville de Genève : exemple pour le MEG (Musée d'Ethnographie de Genève) -Antistatique
Illustrations du site de la Ville de Genève : déclinaisons pour le bâtiment des forces motrices (BFM), l'événement Genève nature, le mur des réformateurs et le pont de la jonction -Antistatique
Illustrations du site de la Ville de Genève : aperçu de l'ensemble des illustrations réalisées -Antistatique

Une collection de pictogrammes pour les plans de la ville

Qui dit ville, dit plan de la ville. La Ville de Genève ne déroge pas à cette règle. Comme ces plans de Genève doivent afficher les nombreux services de la ville, nous avons proposé de charter ces icônes. Le but est d’apporter de la cohérence dans le traitement visuel de l’information, mais aussi de fournir une construction de base pour faire évoluer la collection des pictogrammes. Vous verrez bien sûr un lien entre le travail sur les illustrations et cette collection d’icônes.

Pictogrammes: grille de construction -Antistatique
Pictogrammes: collection complète sur fond clair et sur fond foncé -Antistatique
Pictogrammes: détails sur une partie des pictogrammes -Antistatique
Pictogrammes: exemple d'utilisation sur une carte -Antistatique

La newsletter « Que faire à Genève »

Dans la stratégie de communication des Villes aujourd’hui, la newsletter prend une place importante. C’est en proposant une curation pointue des événements du week-end que Genève se démarque. Nous avons réfléchi à une maquette modulaire pour cette newsletter. Une maquette qui fait le lien entre le nouveau site, sa fraîcheur et votre dose d’information pour vous cultiver et sortir à Genève. Que faire à Genève ? Commencez par vous inscrire à la newsletter !

Aperçu de la mise en page de la newsletter “Que faire à Genève” -Antistatique
Composants d'interface de la newsletter “Que faire à Genève” -Antistatique

Le passage de témoin pour l’implémentation technique

Nous nous sommes assuré que tous ces éléments de design étaient bien documentés, pour que le passage vers les gabarits HTML/CSS se fasse de manière sereine. Nous voulions être sûrs que le travail effectué jusque là se poursuive. Nous avons l’habitude de coder la partie frontend et backend des projets, nous avons donc pu fournir aux équipes de la ville les éléments nécessaires à la poursuite du projet. Nous avons bien évidemment jeté notre œil expert à intervals réguliers !

Ci-dessous, un petit aperçu des quelque 130 maquettes qui ont servi à documenter le design du projet.

Aperçu des 130 maquettes produites pour le projet ! -Antistatique

Le début du « vrai » projet ?

Le nouveau site est en ligne et nous en sommes ravis et fiers. Il est temps pour les Genevois et les autres de s’approprier cette nouvelle plateforme. On dit régulièrement que le projet commence quand le nouveau site est en ligne… Maintenant que les gens y ont accès, il va pouvoir évoluer et grandir. On a un peu l’impression de voir un enfant quitter le nid familial. Bon voyage, mon grand, et à très bientôt !

L’équipe Antistatique