Projet

Client: Ville de Veyrier

Projet: Site internet

Année: 2010-aujourd'hui

Résumé

Mis en place en 2010, le site de la ville de veyrier fût l'occasion pour Vocables de mettre au point son expertise concernant les sites de collectivités publiques déjà expérimentée à l'époque avec le site de Plan-les-Ouates début 2010.
Un site qui se voulait simple pour une commune très étendue. Le mega-menu était alors un atout ergonomique pour la navigation dans ce genre d'arborescence bien fournie.

 

 

Besoins

  • Offrir à l'internaute une information factuelle et pertinente de manière intuitive.
  • Proposer un site convivial et facile d'utilisation
  • Organiser une arborescence peu profonde pour un contenu volumineux 
  • Développer une gestion des pages (CMS) adaptée

 

Solutions

Après avoir créer la nouvelle identité visuelle de la ville, Vocables a conçu un design chaleureux pour le site tout en y apportant une certaine modernité.

La gamme de couleurs utilisée voulait dynamiser un contenu très institutionnel et administratif. La ville n'ayant pas les ressources pour animer pleinement son contenu, les éléments et les fonctionnalités mis en place ont été pensés en commun afin de proposer aux habitants et aux visiteurs les informations essentielles.

L'agenda et le carousel animent la page d'accueil. Dans le menu, une sélection de liens "essentiels" ont été mis en avant et différents blocs sont intelligemment positionnés dans les pages afin d'offrir à l'internaute des accès directs. De plus, en bas de page, une section "Dernières mise à jour" pouvait être placée afin de proposer une certaine vitalité.

 

Le mega-menu: une aide précieuse dans ce dédale de pages.

Bien que maintenant, il ne soit pas adapté à tous les projets, le mega-menu offre un bel aperçu des rubriques.

veyrier_megamenu.jpg

 

Les boîtes en périphérie:

une incitation à compléter son information, des propositions pour aller plus loin ou aux alentours...

veyrier_box.jpg

 

Le bas de page:

longuement peu exploité, l'arrivée de la navigation sur mobile et le responsive web design ont à redonner à cette place un rôle primordial.

 

veyrier_last.jpg

 

 

 

Résultats

Un site équilibré à l'image de la commune.

veyrier_01.jpg

 

veyrier_03.jpg

 

La version responsive du site

Réalisée 5 ans après la première édition du site en 2016. Bien heureusement, notre structure de page a facilité la réorganisation des blocs afin que leurs comportements puisse être assez facilement adaptés pour une lecture des pages sur mobile et tablette.

veyrier_responsive.png

 

Zoning

Le zoning permet de découper la page en autant de zones que nécessaire. Cela permet de positionner les zones de navigation, les contenus, le logo, le pied de page, le moteur de recherche, ou le fil d'Ariane...
Il permet à toute l'équipe de tester les scénarios de pages et de préparer le storyboard tout en donnant des indications de hiérarchie visuelle aux graphistes afin qu'ils en tiennent compte dans leurs maquettes.