GC-Crustacés
GC Crustacés, entreprise basée à Saint-Malo spécialisée dans la sélection et la distribution de coquillages et crustacés, souhaitait moderniser sa présence digitale. L’enjeu était de concevoir un site vitrine capable de s’adresser à la fois aux professionnels (restaurateurs, poissonniers) et aux particuliers, en reflétant les valeurs de l’entreprise : fraîcheur, traçabilité et savoir-faire artisanal. J’ai réalisé l’intégralité du site, de la structure technique à l’intégration des contenus.
DIRECTION ARTISTIQUE
L’identité visuelle du site a été pensée pour évoquer l’univers marin avec élégance et sobriété :
Typographie : Un choix de polices modernes qui assurent une lisibilité optimale du catalogue produits.
Palette de couleurs : Un contraste entre des tons profonds (bleu marine, noir) et la clarté des fonds blancs pour mettre en valeur les photographies haute définition des produits.
Iconographie : Utilisation de pictogrammes épurés pour illustrer les engagements (Livraison, Traçabilité, Qualité) et faciliter la lecture rapide des services.
CONCEPTION ET DÉVELOPPEMENT WEB
En tant que responsable unique du développement, j’ai mis en place une architecture robuste sous WordPress :
- Architecture de l’information : Organisation d’un catalogue produit riche (vivants, cuits, coquillages, crustacés) permettant une navigation intuitive entre les différentes catégories.
- Performance et SEO : Optimisation technique du site pour garantir un temps de chargement rapide, essentiel pour l’expérience utilisateur et le référencement local.
- Responsive Design : Développement d’une interface parfaitement adaptée aux mobiles pour les professionnels passant commande en déplacement.
VIDÉO DE PRÉSENTATION
Vous pouvez voir ci-contre un enregistrement d’écran de la home page lors de la livraison du site web.
Compétences développées
Développement WordPress Intégral : Maîtrise de la chaîne complète de production, de l’installation du CMS à la configuration des templates de pages.
Gestion de Catalogue B2B : Structuration de données complexes pour présenter une large gamme de produits de la mer de manière claire et hiérarchisée.
Conformité et Sécurité : Mise en place des mentions légales, politiques de confidentialité et outils de gestion des données personnelles (RGPD).
Optimisation : Optimisation du poids des images pour un rendu visuel premium sans sacrifier la vitesse.
La Cabane du Naissain
Speaky – Une application pour apprendre une langue
Speaky – Une application pour apprendre une langue
Mai – Juin 2024
Speaky est une plateforme web conçue en binôme pour désacraliser l’apprentissage des langues grâce à la « gamification ». Ce site permet aux utilisateurs de tester leurs connaissances à travers des quiz variés : vocabulaire, compréhension orale, traduction et expression écrite. L’objectif est de motiver l’apprenant grâce à un système de défis et de suivi de progression.
DIRECTION ARTISTIQUE
Nous avons imaginé une identité visuelle ludique pour rendre l’apprentissage agréable. La mascotte, un petit renard, guide l’utilisateur à travers l’interface. Nous avons opté pour une palette de couleurs vives et chaleureuses (orange, jaune, bleu canard) et des éléments graphiques arrondis (boutons, champ de texte) pour créer un univers convivial, rappelant celui des jeux mobiles.
CONCEPTION ET DÉVELOPPEMENT WEB
Le site a été pensé et développé à deux, avec une approche Mobile First pour garantir une accessibilité totale sur tous les supports, comme en témoignent les versions tablette et mobile. Nous avons collaboré sur la mise en place d’une architecture complexe permettant l’affichage dynamique de tout le contenu (questions, défis) via une base de données relationnelle. Le système gère intégralement les comptes utilisateurs, de l’inscription sécurisée au suivi des scores en temps réel.
Compétences développées
Travail Collaboratif : Gestion de projet en équipe, répartition des tâches et coordination du développement.
Conception UI/UX Ludique : Création d’une interface utilisateur engageante centrée sur la « gamification » et la mascotte.
Gestion de Base de Données (SQL) : Conception conjointe et interfaçage d’une BDD pour stocker questions, utilisateurs et résultats.
Développement Dynamique (PHP) : Création de scripts pour générer le contenu des pages à la volée selon la langue et le niveau.
Intégration Responsive : Adaptation fluide du layout pour une expérience optimale sur mobile, tablette et desktop.
L’hydro – Musée Maritime de Saint-Malo
En vue de l’ouverture du futur musée maritime de Saint-Malo prévue pour 2028, la Ville a souhaité créer un site internet dédié. Ce site doit accompagner l’ensemble du projet. Il doit notamment présenter le projet architectural mené par l’Atelier Philippe Prost et Designers Unit, suivre l’avancée du chantier, valoriser la programmation culturelle et intégrer un portail des collections développé avec Webmuseo.
Par ailleurs, le musée s’installe dans l’ancienne École nationale supérieure maritime (« L’Hydro ») et proposera un parcours mêlant histoire maritime, patrimoine local et enjeux environnementaux.
DIRECTION ARTISTIQUE
La direction artistique et l’identité visuelle du projet ont été conçues par Pollen Studio. En effet, l’agence a développé une identité sobre et contemporaine, inspirée de l’histoire maritime de Saint-Malo. Typographie, crochets graphiques et palette colorée structurent l’univers visuel du musée. Ces éléments ont ainsi guidé toute l’intégration du site web.
CONCEPTION ET DÉVELOPPEMENT WEB
La responsable du pôle direction artistique d’Indigo Communication a réalisé les maquettes du site. Elle s’est basée sur la charte graphique de Pollen Studio pour imaginer une interface claire et contemporaine. Elle est adaptée aux contenus riches du futur musée.
Indigo Communication était déjà chargée de la refonte du site municipal. La Ville leur a donc confié la conception de ce nouveau site.
J’ai ensuite assuré l’intégration et le développement complet du site WordPress. Mon travail a consisté à créer les gabarits de pages. J’ai également intégré fidèlement les maquettes sous WordPress/Elementor. De plus, j’ai développé des interactions sur mesure pour améliorer la navigation et l’expérience utilisateur.
VIDÉO DE PRÉSENTATION
Vous pouvez voir ci-contre un enregistrement d’écran de la home page lors de la livraison du site web.
Compétences développées
Développement JavaScript avancé : J’ai conçu et géré les menus interactifs avec sous-menus. Cela intègre des comportements complexes (ouverture/fermeture et classes CSS dynamiques). Ainsi, j’ai mis en place des interactions au survol pour améliorer l’expérience utilisateur.
Création d’interactions utilisateur optimisées : J’ai développé un système modale. Il est doté d’une barre de recherche intégrée. Ce système permet de filtrer les contenus (pages, articles, custom post types) et d’afficher des résultats enrichis pour faciliter la navigation.
Utilisation de jQuery pour enrichir l’expérience : J’ai créé un script dynamique. Il ajoute des éléments visuels qui signalent le type ou la catégorie de chaque résultat. De cette manière, la clarté et la lisibilité des pages de résultats sont améliorées.
MasterClasse
MasterClasse – Simplifier l’orientation étudiante
Octobre – Décembre 2024
Face à la complexité des plateformes existantes, souvent jugées incomplètes ou difficiles d’accès, nous avons imaginé MasterClasse. Ce projet, réalisé en équipe de cinq étudiants sur une période de trois mois, a pour but de centraliser les informations sur les cursus en France. L’objectif était de proposer une application web fiable et ludique pour simplifier la recherche de Master
DIRECTION ARTISTIQUE
L’identité visuelle a été définie suite à des entretiens utilisateurs pour correspondre à leurs attentes mentales du monde universitaire.
Palette chromatique : Nous avons retenu le bleu à l’unanimité, couleur évoquant la confiance et le professionnalisme. La charte associe un bleu marine profond à un bleu ciel (« baby blue ») pour le contraste, rehaussée par des touches de jaune pour apporter du dynamisme et du « peps » à l’interface.
Inspirations : Le design s’inspire de la modernité de plateformes comme Study Match et de l’accessibilité visuelle de MonMaster.
Accessibilité : Une attention particulière a été portée aux contrastes pour garantir la lisibilité, point qui a fait l’objet d’ajustements durant le projet.
CONCEPTION ET DÉVELOPPEMENT WEB
La conception s’est appuyée sur une phase de recherche utilisateur approfondie (interviews et benchmark) pour définir les besoins réels des étudiants. Pour l’interface, nous avons appliqué la loi de Jakob (familiarité des usages) et la loi de Fitt (accessibilité des zones de clic) afin de garantir une prise en main immédiate. L’identité visuelle repose sur une association de bleu marine et bleu ciel, évoquant la confiance et le professionnalisme, rehaussée par des touches de jaune pour apporter du dynamisme.
VIDÉO DE PRÉSENTATION
Vous pouvez voir ci-contre un enregistrement d’écran de la home page lors de la livraison du site web.
Compétences développées
Développement JavaScript avancé : J’ai conçu et géré les menus interactifs avec sous-menus. Cela intègre des comportements complexes (ouverture/fermeture et classes CSS dynamiques). Ainsi, j’ai mis en place des interactions au survol pour améliorer l’expérience utilisateur.
Création d’interactions utilisateur optimisées : J’ai développé un système modale. Il est doté d’une barre de recherche intégrée. Ce système permet de filtrer les contenus (pages, articles, custom post types) et d’afficher des résultats enrichis pour faciliter la navigation.
Utilisation de jQuery pour enrichir l’expérience : J’ai créé un script dynamique. Il ajoute des éléments visuels qui signalent le type ou la catégorie de chaque résultat. De cette manière, la clarté et la lisibilité des pages de résultats sont améliorées.