FoodLab
- Développer, Exprimer, Comprendre, Concevoir
- Développement Web
- 2ème année BUT MMI
Site vitrine, maquette Figma, WordPress, charte graphique, plugins adaptés, intégration CMS, cohérence visuelle, intégration de la maquette, ergonomie, adaptation responsive, expérience utilisateur, CMS, responsive design
Dans le cadre d’un projet universitaire encadré par Monsieur Errante, j’ai réalisé l’intégration du site vitrine FoodLab à partir d’une maquette Figma fournie. L’objectif principal était de concevoir un site fidèle à la maquette, en utilisant WordPress, tout en respectant une charte graphique précise et en sélectionnant des plugins adaptés aux besoins du projet.
Ce travail avait pour but de me familiariser avec l’intégration CMS, la compréhension d’un cahier des charges graphique et la traduction d’une interface pensée en amont vers un site fonctionnel, responsive et cohérent sur l’ensemble des supports.
Démarche & Tâches réalisées
– Installation de l’environnement WordPress
J’ai débuté le projet par l’installation de WordPress en local, afin de disposer d’un environnement de travail sécurisé et modulable. Cette étape m’a permis de comprendre la structure d’un site WordPress et d’organiser efficacement les contenus avant la phase d’intégration.
– Mise en place de la charte graphique
À partir de la maquette Figma, j’ai défini les typographies, les couleurs principales et les styles graphiques du site FoodLab. Cette phase était essentielle pour garantir une cohérence visuelle entre la maquette initiale et le rendu final sur le CMS.
– Intégration de la maquette sur WordPress
J’ai ensuite procédé à l’intégration de la maquette sur WordPress, d’abord en version desktop puis mobile, en utilisant des plugins adaptés afin de recréer fidèlement les sections prévues : structure des pages, blocs de contenus, hiérarchie visuelle et éléments graphiques.
Chaque section a été ajustée avec précision pour respecter les proportions, les espacements et l’ergonomie définis dans la maquette.
– Adaptation responsive
Une attention particulière a été portée à l’adaptation responsive, afin d’assurer une navigation fluide et une bonne lisibilité des contenus sur smartphone et tablette. Les ajustements ont été réalisés directement dans WordPress, dans une logique d’expérience utilisateur cohérente sur tous les supports.
– Posture réflexive
Ce projet m’a permis de mieux comprendre le passage d’une maquette graphique à un site web fonctionnel, ainsi que les contraintes liées à l’utilisation d’un CMS. J’ai appris à analyser une maquette avec rigueur, à respecter une charte graphique existante et à sélectionner les outils les plus pertinents pour obtenir un rendu fidèle, sans coder intégralement le site.
Il m’a également sensibilisée à l’importance de l’organisation des contenus et de la cohérence graphique dans un projet web professionnel.
La réalisation du site FoodLab a constitué une expérience formatrice, me permettant de renforcer mes compétences en intégration WordPress, en lecture de maquettes Figma et en responsive design.
Ce projet représente une étape clé dans mon apprentissage des CMS et m’encourage à approfondir mes compétences sur WordPress, notamment en matière de personnalisation, d’optimisation et de choix d’extensions adaptées à différents types de projets web.
COMPÉTENCES MMI
Développer une solution web simple à l’aide d’un CMS
Exprimer un contenu à travers une interface web fidèle à une maquette
Comprendre les besoins d’un commanditaire et les usages des utilisateurs
Concevoir une interface cohérente et responsive à partir d’une charte graphique
APPRENTISSAGES CRITIQUES
AC24.01 – Produire des pages et applications Web responsives
AC24.03 – Intégrer, produire ou développer des interactions riches ou des dispositifs interactifs
AC22.01 – Co-concevoir un produit ou un service (proposition de valeur, fonctionnalités…)
AC22.02 – Produire une recommandation ergonomique à partir des tests utilisateurs (sur système fonctionnel, prototype ou maquette interactive)
AC23.03 – Imaginer, écrire et scénariser en vue d’une communication multimédia ou transmédia
AC23.05 – Réaliser, composer et produire pour une communication plurimédia
AC21.04 – Identifier et décrire les parcours client à partir d’enquêtes de terrain
