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.