Mylène Balesdens

AGENCE & SSII

Accompagnement d’un client dans la conception et la réalisation du MVP d’une plateforme web, en collaboration avec un développeur back-end.Intervention en tant que Design Engineer (UX/UI + développement front-end) afin d’assurer la cohérence entre l’expérience utilisateur, le design et l’implémentation technique.Périmètre de la mission :Analyse du besoin et cadrage du projet (benchmark, réflexion sur les parcours et fonctionnalités clés)Ateliers d’échange avec le client et le développeur back-endConception UX/UI des parcours principaux et création de maquettes responsive sur FigmaMise en place d’un UI Kit / design system légerDéveloppement front-end des interfaces (React/Next.js)Structuration du front-end (composants, styles, architecture) pour garantir performance et maintenabilitéConnexion du front-end au back-end : intégration des API, gestion des formulaires, authentification, affichage dynamique des donnéesCollaboration étroite avec le développeur back-end pour assurer une intégration fluide des fonctionnalitésAjustements UX/UI liés aux contraintes techniques et aux tests fonctionnelsObjectif :Concevoir une interface claire et performante et livrer un front-end fonctionnel connecté au back-end, permettant de tester et exploiter les parcours principaux du MVP.Livrables principaux :Wireframes et maquettes UX/UI (desktop & mobile) sur FigmaUI Kit (composants, couleurs, typographies, formulaires)Interfaces front-end développées et connectées aux API back-endParcours principaux du MVP fonctionnels et testésMéthodologie :Travail en itérations courtes, avec validation à chaque étape (cadrage, design, développement) afin d’aligner en continu les aspects produit, UX et techniques.

AGENCE & SSII

Tâches principalesIntégration des maquettes Figma en respectant la charte graphique (typographies, couleurs, espacements, composants UI)Mise à jour continue de la charte graphique après l’ajout de nouvelles fonctionnalités par les développeursMaintien du Figma à jour si les fonctionnalités évoluent plus vite que les maquettesImplémentation des styles et des composants UI dans un projet AngularUniformisation et gestion des typographies pour garantir la cohérence visuelleValidation des intégrations et suivi des bonnes pratiques en accessibilité et performanceTechnologies utiliséesFramework Front-End : AngularLangages : TypeScript, HTML5, SCSS/CSS3Build & Outils : Yarn, Node.js, WebpackDesign & UI : Figma, Bootstrap, Angular MaterialVersioning : Git (GitHub)

E-COMMERCE

Tâches principalesDécoupage des assets depuis la maquette graphique :Extraction et découpage des éléments visuels à partir des maquettes graphiques fourniesPréparation des assets pour une intégration optimale dans le projet (optimisation des formats et résolutions)Mise en place de l'espace de travail :Configuration de l'environnement de travail selon les préférences du clientMise en place des outils nécessaires pour assurer un flux de travail fluide et une gestion sécurisée des versions et des déploiementsInstallation et configuration du thème sur une multiboutique et multilangue :Installation et configuration du thème sur une plateforme PrestaShop de multiboutique et multilangueAdaptation du thème aux besoins spécifiques de chaque boutique, tout en assurant la cohérence de la présentation et des fonctionnalitésAjustements et modifications des templates (HTML/CSS) :Personnalisation des templates HTML/CSS en fonction de la maquette graphique et du thème existantAccompagnement et conseils en visio :Participation à des réunions en visio avec le client pour discuter des besoins, proposer des solutions adaptées et répondre aux questions techniques tout au long du projetMise en production :Préparation du site pour la mise en production : validation des fonctionnalités et des performances, puis déploiement sur le serveur de productionMaintenance du site :Intégration de nouveaux modules et personnalisation de ces modules pour répondre aux besoins du clientModification et mise à jour des éléments graphiques du site en fonction des besoins du client ou des évolutions de la stratégie visuelleAjustements sur les pages ou fonctionnalités existantes pour améliorer l'esthétique ou l'ergonomieTechnologies utiliséesDécoupage d'assets : Photoshop, Adobe XDDéveloppement : HTML5, CSS3, JavaScriptGestion de version : Git, FTPEnvironnement de travail : Preprod/Prod FTPPlateforme e-commerce : PrestaShop