Groupe scolaire
Saint-calais (72)
Sainte Marie Frère André
Nouvelle identité visuelle, Site web (Arborescence, Maquettes Figma et Intégration WordPress), Animation Logo, Vidéo de présentation, Dépliant,...
Refonte complète de l'image du groupe scolaire
Animée par le désir de moderniser son image et de créer une présence numérique « vivante », ma démarche a dépassé la simple création d’un site internet.
J’ai entrepris une refonte complète de l’identité visuelle de l’école, visant à la rendre plus dynamique et facilement identifiable. Le résultat ? Un site WordPress sur mesure, conçu pour répondre aux besoins de la communauté scolaire. Il offre un accès clair aux informations essentielles, intégrant des éléments qui facilitent la communication et l’accès aux ressources, comme la boutique de l’école ou les outils pédagogiques.
Cette nouvelle plateforme numérique vise à refléter l’esprit et les valeurs communes du Groupe Scolaire Sainte Marie Frère André.
Découvrez la nouvelle image du Groupe Scolaire "pas à pas"
LOGO & ANIMATION
Parmi les trois propositions de logos, le choix s’est porté sur le logo que j’ai nommé « l’arbre de la Connaissance ».
L’idée de ce logo est venu des arbres du parc de l’école. Outre l’idée de la symbolique de la Nature, de la biodiversité, ils représentent le cycle de la vie (donc l’idée de grandir), l’enracinement (des idées et des connaissances).
Le petit arbre bleu (l’école primaire Sainte Marie) se cache derrière le l’arbre orange (le collège) avec une idée de grand frère protecteur. Leur racines forment un sourire tandis que les bras levés formant ainsi les branches et accentuent le sentiment de joie.
Le papillon symbolise l’évolution des enfant qui arrivent dans un cocon (école) et sont ensuite libérer dans la vie (et volent de leur propres ailes).
A cela viennent s’ajouter les livres (représentent le savoir) et la clé (de la réussite) que l’école délivrent aux élèves de l’école.
Les coloris du logo sont également soigneusement choisis : le bleu (apaisement, stabilité, confiance, loyauté) est associé à l’orange pour le dynamisme de l’école
CHARTE GRAPHIQUE
Voici la charte graphique qui vient accompagner ce logotype « Arbre de la Connaissance » définissant :
- la sémiologie,
- les logotypes enfants,
- ses déclinaisons coloris et monochromes,
- les icones et favicones,
- les exclusions,
- la zone de protection,
- les polices,
- les motifs,
- les règles photographiques,
- quelques templates réseaux sociaux,
- exemple d’utilisation du logo sur quelques textiles personnalisés,
- un peu de papeterie,
- mockup site web responsive
montage vidéo
L’objectif est de présenter le Groupe Scolaire en mettant en lumière ses valeurs fondamentales : entraide, cohésion, éducation par projet et diversité. La devise « Ensemble, la réussite de chacun » doit être au cœur du message.
Pitch : Situé à Saint-Calais (Sarthe, 72), découvrez le groupe scolaire Sainte Marie Frère André où l’excellence académique rencontre l’épanouissement personnel. Offrez à votre enfant les clés d’un parcours éducatif dans la tradition et performant, au cœur d’une communauté dynamique et bienveillante.
dépliant
Voici le dépliant carré de 21×21 cm, conçu pour présenter le Groupe Scolaire Sainte Marie Frère André.
Ce support de communication, imprimé sur un papier couché mat 250g/m² pour une restitution des couleurs optimale et un toucher doux, est une invitation visuelle. Son design moderne et joyeux intègre des motifs graphiques de l’école (papillons, livre, clé, feuille) formant un sourire symbolique. La double page intérieure expose projets de classe et une vue panoramique de la cour, tandis que la couverture arrière offre les coordonnées complètes, QR code et logos.
Ce dépliant reflète la qualité et les valeurs de l’établissement.
arborescence
L’arborescence est la « colonne vertébrale » d’un site web, définissant l’organisation de ses pages et sections. Elle est une étape essentielle pour une expérience utilisateur fluide, permettant aux visiteurs de trouver rapidement l’information.
Pour le site du Groupe Scolaire Sainte Marie Frère André, cette structure hiérarchise le contenu en fonction des besoins des utilisateurs (personas) et des priorités stratégiques de l’établissement. Elle assure un accès clair aux informations essentielles, de la présentation de l’école aux outils pédagogiques, en passant par les espaces dédiés aux parents et élèves.
user flow
Après l’arborescence, le user flow trace les parcours des utilisateurs sur le site. Il est fondamental pour l’UX (User Experience).
Contrairement à l’arborescence qui structure la hiérarchie des contenus, le user flow détaille les chemins empruntés par chaque type de persona pour atteindre un objectif spécifique. Il optimise la navigation en anticipant les interactions, qu’il s’agisse de consulter une information, d’accéder à des outils pédagogiques ou de s’inscrire en ligne. Basé sur les besoins définis des personas, le user flow guide la conception de l’interface pour garantir une expérience utilisateur fluide, logique et efficace.
WIREFRAMES
Les wireframes sont les « squelettes » essentiels de la conception web. Ces esquisses fonctionnelles, créées après la définition des viewports, permettent de visualiser la disposition des éléments d’un site.
Leur rôle est de structurer le contenu, de déterminer le placement des composants pour chaque format d’écran (en « mobile-first » puis desktop) et d’assurer une expérience utilisateur fluide.
Cette étape valide l’ergonomie du site, garantit l’accessibilité des éléments clés et répond aux besoins des personas et du user-flow, le tout avant l’application des détails graphiques des maquettes haute fidélité (étape que je nomme « la mise en couleur »)
UI KIT & Design System
Avant les maquettes haute fidélité, la création d’un UI Kit et d’un Design System est indispensable non seulement pour la cohérence visuelle mais aussi pour l’efficacité technique.
L’UI Kit rassemble tous les composants visuels et interactifs (boutons, icônes, typographies, couleurs hexadécimales, spécifications CSS pour cards, headers, footers), assurant une cohérence visuelle et une standardisation.
Le Design System est une bibliothèque complète de normes et principes de conception, incluant des détails techniques comme les règles de marges (margin/padding) pour Desktop/Mobile, et les tailles de police (font-size/line-height) pour les titres (H1, H2, H3) sur chaque viewport.
Ces outils garantissent la cohérence visuelle et l’adaptabilité ergonomique, simplifiant le développement et assurant l’uniformité technique du projet.
Maquettes Haute fidélité
Les maquettes haute fidélité donnent vie au site en intégrant tous les éléments visuels : logos, typographies, couleurs, motifs de la charte graphique Sainte Marie Frère André, et images. C’est la « mise en couleur » qui reflète l’esthétique et la cohérence avec l’identité du groupe scolaire, tout en respectant l’ergonomie et la responsivité pour tous les formats d’écran.
Une fois validées, ces maquettes deviennent des prototypes interactifs. Ces prototypes simulent la navigation réelle du site en intégrant des liens entre pages, des menus, boutons et formulaires. Ils permettent de tester les parcours utilisateurs, d’identifier les points de friction et de valider l’expérience avant le développement final, assurant un parcours fluide et logique pour l’utilisateur.
Mobile
Desktop
Le projet du Groupe Scolaire Sainte Marie Frère André a été une véritable réussite, dotant l’établissement d’un site web moderne et d’une identité forte, alignée sur les besoins actuels de la communauté éducative. Grâce à une analyse approfondie, une identité visuelle percutante et un parcours utilisateur optimisé, nous avons harmonisé les valeurs traditionnelles de l’école avec les exigences d’un monde connecté. Les étapes d’UX/UI, l’intégration de solutions techniques et la création de supports de communication ont toutes contribué à ce succès. Le site responsive offre une expérience fluide sur tous les appareils, renforçant la présence en ligne de l’école et sa proximité avec ses utilisateurs.
Ce travail global propose une plateforme efficace, intuitive et attrayante pour élèves, parents et personnel. Cependant, les possibilités d’évolution sont vastes pour enrichir encore l’expérience ! On pourrait envisager une partie membre sécurisée dédiée exclusivement aux membres de l’école (enseignants, parents, enfants) pour une communication ciblée. Une communauté intégrée avec messagerie et journal de vie de la classe favoriserait les échanges. Un calendrier scolaire dynamique et des outils pédagogiques avancés (accès aux cours, carnet de notes, gestion des devoirs, supports supplémentaires) pourraient révolutionner le suivi scolaire. Enfin, une boutique privée en ligne pour l’APEL ou l’école faciliterait les transactions.
L’École Sainte Marie Frère André de Saint-Calais (72) dispose désormais des outils nécessaires pour se projeter sereinement dans l’avenir, tout en conservant son identité et ses valeurs fondamentales.
Et si vous avez un projet qui vous trotte dans la tête, n’hésitez pas à me contacter : je suis peut-être la fée numérique qui transformera votre citrouille en carrosse !
