PROJET
Nouveau site web responsive pour une mairie
L’ancien site internet de la commune de Saint-Ouen-Marchefroy datait de la fin des années 1990. Il avait besoin d’une refonte complète : modernisation de son apparence, amélioration de la structure et de la navigation, ainsi qu’une touche d’interactivité pour mieux répondre aux attentes des utilisateurs.
Le site web de Saint-Ouen-Marchefroy a ainsi été entièrement repensé afin d’offrir une expérience plus attractive et conviviale. Il permet à la commune de mettre en valeur à la fois son riche patrimoine et son dynamisme actuel, tout en s’adressant à un public de tous âges. C’est désormais une plateforme idéale pour découvrir la vie locale et interagir avec la commune.
CLIENT
Mairie de Saint-Ouen-Marchefroy
OBJECTIF
Concevoir un site internet :
Fonctionnel et performant,
Clair et bien structuré,
Facile à utiliser pour les visiteurs,
Simple à administrer et à mettre à jour,
Responsive pour une consultation optimale sur ordinateur, tablette et mobile.
OUTILS
CMS, Illustrator, Photoshop
ANNÉE
2023
Navigation fluide et intuitive
La navigation du site a été pensée pour permettre aux visiteurs de trouver rapidement les informations recherchées. L’organisation claire des contenus, les catégories logiques et les accès rapides aux informations essentielles facilitent l’exploration du site et l’accès aux différents services de la commune.
Interface épurée
Le design repose sur une mise en page structurée, un équilibre soigné des espaces blancs et une hiérarchie visuelle efficace. Les icônes et les couleurs mettent en valeur les sections importantes, améliorant ainsi la lisibilité et l’engagement des utilisateurs. L’ensemble offre une expérience intuitive, fonctionnelle et agréable à parcourir.
Typographie
L’association de Raleway et Avenir Light crée une interface à la fois élégante et accessible. Les lignes raffinées de Raleway se marient à la clarté géométrique d’Avenir Light pour offrir une expérience de lecture confortable et contemporaine.
Titre : Raleway
Raleway est une police de caractères (sans-serif) élégante et moderne, caractérisée par un design épuré et raffiné
Raleway Semi-Bold
ABCDEFGHIJKLMNO
PQRSTUVWXYZ
abcdefghijklmnopq
rstuvwxyz
0123456789
!#$%^&*()
Raleway Regular
ABCDEFGHIJKLMNO
PQRSTUVWXYZ
abcdefghijklmnopq
rstuvwxyz
0123456789
!#$%^&*()
TITRE 1 : 54 px
Titre 2 : 40 px
Titre 3 : 36 px
Titre 4 : 30 px
Titre 5 : 26 px
Paragraphe : Avenir Light
Avenir Light est une police sans empattement au design harmonieux et épuré, appréciée pour son apparence contemporaine ainsi que pour son excellente lisibilité.
Avenir Light Bold
ABCDEFGHIJKLMNO
PQRSTUVWXYZ
abcdefghijklmnopq
rstuvwxyz
0123456789
!@#$%^&*()
Avenir Light Regular
ABCDEFGHIJKLMNO
PQRSTUVWXYZ
abcdefghijklmnopq
rstuvwxyz
0123456789
!@#$%^&*()
Paragraph 1 : 18 px
Que ce soit pour des travaux réalisés à l’intérieur de votre habitation, les horaires autorisés pour l’utilisation d’engins bruyants de jardinage et de bricolage ...
Paragraph 2 : 16 px
Que ce soit pour des travaux réalisés à l’intérieur de votre habitation, les horaires autorisés pour l’utilisation d’engins bruyants de jardinage et de bricolage ...
Button : 16 px
Couleurs principales
La palette de couleurs du site est directement inspirée des armoiries de la commune, reflétant l’identité, l’histoire et le patrimoine de Saint-Ouen-Marchefroy.
#993399
Purple
The color representing Saint-Ouen and commemorating Saint Ouen's role as a bishop.
#0066ff
Blue Azur
The shield's blue, a traditional French color, echoes the "Cinq Croix de France" monument's name from the time when Normandy neared English rule.
#33cc66
Green / Sinople
Symbolizing Marchefroy, chosen for its greenery and natural landmarks such as, Les Fougères, Les Houx, and Les Châtaigniers.
#f7b812
Gold
At the heart, the five golden crosses stand as the most significant element, marking the heritage of the commune and the monument between Saint-Ouen and Marchefroy.
#993399
Pourpre
Couleur associée à Saint-Ouen, elle rappelle son rôle d’évêque et son importance dans l’histoire de la commune.
#0066FF
Bleu (Azur)
Présent sur l’écu des armoiries, le bleu est une couleur traditionnelle de l’héraldique française. Il fait également écho au monument des Cinq Croix de France, témoin de l’époque où la Normandie était proche de passer sous domination anglaise.
#33CC66
Vert (Sinople)
Symbole de Marchefroy, cette couleur évoque la richesse naturelle du territoire et ses lieux emblématiques tels que Les Fougères, Les Houx et Les Châtaigniers.
#F7B812
Or
Au centre des armoiries, les cinq croix d’or constituent l’élément le plus emblématique. Elles rappellent l’histoire de la commune ainsi que le monument situé entre Saint-Ouen et Marchefroy.
Blason de Saint-Ouen-Marchefroy
Le blason a été modernisé afin d’améliorer la lisibilité et l'impact visuel. Cette nouvelle version présente des contrastes renforcés, des couleurs plus affirmées, tout en respectant l’héritage historique de la commune.
Before
After
Interactivité du site web
Afin d’améliorer la communication et l’engagement des citoyens, plusieurs fonctionnalités interactives ont été proposées à l’équipe municipale. Celles-ci visent à faciliter les échanges, l’accès à l’information et l’utilisation du site par tous les visiteurs.
Formulaire de contact
Permet aux utilisateurs de contacter facilement la mairie pour toute demande d’information, question ou démarche administrative.
Formulaire de recherche
Offre un accès rapide aux contenus du site en permettant aux visiteurs de trouver facilement les informations recherchées.
Partage sur les réseaux sociaux
Facilite la diffusion des actualités et informations municipales sur les principaux réseaux sociaux, augmentant ainsi la visibilité des communications de la commune.
Accessibilité
Garantit une navigation adaptée aux personnes en situation de handicap grâce à des fonctionnalités favorisant l’inclusion et l’accessibilité numérique pour tous.
Foire aux questions
(FAQ)
Répond aux questions les plus fréquentes des visiteurs et fournit une aide immédiate sur les services, démarches et informations disponibles sur le site.
Formulaire
de sondages
Favorise la participation citoyenne en recueillant les avis, attentes et préférences des habitants dans le cadre de consultations ou de projets municipaux.
Inscription
à la newsletter
Permet aux habitants de recevoir directement par e-mail les dernières actualités, annonces et informations importantes de la mairie.
Formulaire d’avis
et de commentaires
Offre un espace d’expression permettant aux citoyens de partager leurs opinions, suggestions ou commentaires concernant les actualités et les événements de la commune, encourageant ainsi la participation publique.
Calendrier
Permet aux habitants de consulter les événements organisés par la commune, de s’y inscrire ou de confirmer leur participation, favorisant ainsi l’implication de la communauté dans la vie locale.
Interactive Features
Among a range of actual features was proposed to the team, contact and search forms were retained.
FAQ Section
Answers common questions, offering instant support and information to website visitors.
Newsletter
Subscription
Keeps the community updated with the latest news and announcements via email.
Polls and
Surveys Form
Engages the community in decision-making processes by collecting their views and preferences.
Event Calendar
Offers the ability to sign up for events or confirm attendance, keeping the community involved in local happenings.
Contact Form
Allows users to easily reach out to the town hall with inquiries or concerns.
Feedback
and Comments Form
Provides a platform for sharing opinions or leaving comments on events or news, encouraging public participation.
Site Search Form
Enables users to quickly find the information they need on the website.
Accessibility
Ensures the website is navigable and usable by people with disabilities, promoting inclusivity.
Feedback
and Comments Form
Provides a platform for sharing opinions or leaving comments on events or news, encouraging public participation.
Social Media Sharing
Facilitates the dissemination of information through popular social networks, expanding the reach of city hall's communications.
Du concept à la mise en ligne
L’ensemble du processus de création du site web, depuis l’analyse initiale jusqu’à sa mise en ligne, en passant par la conception, la création des contenus, l’optimisation et la formation des utilisateurs.
1
Analyse du projet
Évaluation des besoins, du budget et des objectifs définis par la municipalité afin de déterminer les orientations du projet.
1
1
Analyse des utilisateurs
Étude des profils utilisateurs, de leurs attentes et de leurs besoins afin de concevoir une expérience adaptée à l’ensemble des visiteurs du site.
2
1
Recherche de solutions techniques
Analyse comparative et sélection du CMS ainsi que de la solution d’hébergement les plus adaptés aux exigences du projet.
3
1
Configuration du nom de domaine
Choix du nom de domaine, gestion de son acquisition et paramétrage technique pour assurer l’accessibilité du site.
4
1
Architecture de l’information
Création de l’arborescence du site afin de structurer les contenus de manière claire, cohérente et intuitive.
5
1
Collecte des contenus
Rassemblement des textes, images, documents et informations nécessaires à la création des différentes pages du site.
6
1
Conception de la structure
Définition de l’organisation des contenus, de la hiérarchie de l’information et de la mise en page générale du site.
7
1
Création des maquettes
Réalisation des maquettes graphiques permettant de visualiser l’apparence et l’expérience utilisateur avant le développement.
8
1
Optimisation des contenus
Adaptation, rédaction et harmonisation des textes, intégration des mentions légales et vérification de la cohérence éditoriale.
9
1
Développement et intégration
Création du site web responsive, optimisé pour une consultation fluide sur ordinateur, tablette et smartphone.
10
1
Référencement (SEO)
Optimisation technique et éditoriale du site afin d’améliorer sa visibilité sur les moteurs de recherche et faciliter son indexation.
11
1
Formation et accompagnement
Formation des agents municipaux à l’administration du site et accompagnement technique pour assurer sa gestion et ses mises à jour en toute autonomie.
12
Témoignages
City Hall
of Saint-Ouen-Marchefroy
La Mairie de Saint-Ouen-Marchefroy avait un réel besoin de communiquer avec ses habitants sur le plan des informations mais aussi au niveau des diverses réglementations.
Maria a su dès le début comprendre nos attentes et nous a proposé des solutions efficaces, créatives avec un sens de l'esthétisme qui nous ont donné la plus grande satisfaction. Le site est non seulement performant et beau mais facile d'utilisation pour nos concitoyens. Je recommande vivement Maria pour son excellent travail.
Nous avons eu un réel plaisir à travailler avec Maria. Sa faculté d'écoute, sa rigueur, son professionnalisme ont fait que nous nous sommes sentis en confiance dès le début. La Mairie avait besoin d'un site web attractif et facile à utiliser, l'objectif a été atteint au-delà de nos espérances. Nous sommes extrêmement satisfaits du résultat.
Philippe Dumas
Maire de la Commune de Saint-Ouen-Marchefroy
City Hall
of Saint-Oun-Marchefroy
Maria a construit le site de la mairie. En plus d'être très agréable, réactive et disponible, elle a tout de suite compris nos attentes et a su répondre aux besoins en nous proposant une solution simple, élégante et efficace. Elle a anticipé les problématiques qui nous avaient échappé.
C'est une personne de confiance et pleine de ressources, un profil rare !
Julie Destouches
Collaboratrice. Journaliste, autrice, conférencière, attachée de presse.