Design du site internet - ville-geneve.ch

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.

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.

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.

« 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.

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.

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 ?

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.

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 !

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.

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 !