Site vitrine WordPress — projet « Brigitte »
Reproduire fidèlement une maquette Figma en WordPress, seul et de bout en bout : installation, Elementor, plugins, personnalisation du thème, tests responsive et mise en ligne.
Contexte
Lors de mon parcours en BUT MMI à l'IUT de Toulon, j'ai eu l'opportunité de travailler sur un projet passionnant consistant à créer un site vitrine sur WordPress. Ce projet, nommé « Brigitte », s'inscrivait dans le cadre d'une ressource pédagogique dédiée à l'apprentissage du développement web et de l'utilisation de WordPress.
- Objectif
- Reproduire fidèlement une maquette réalisée sur Figma en utilisant WordPress.
- Durée
- Un semestre
- Équipe
- Projet individuel
Démarche
- Étude de la maquette Figma — la première étape a consisté à analyser la maquette fournie sur Figma. Cette maquette détaillée comprenait toutes les pages et les éléments graphiques nécessaires pour le site vitrine.
- Installation de WordPress — j'ai installé WordPress sur un serveur local, puis configuré les paramètres de base pour démarrer le développement.
- Elementor — ce plugin a été essentiel pour créer des pages de manière visuelle et intuitive. Il m'a permis de reproduire fidèlement la mise en page et les designs de la maquette Figma.
- Autres plugins — j'ai également utilisé d'autres plugins pour ajouter des fonctionnalités spécifiques, comme des formulaires de contact, des galeries d'images, et des optimisations SEO.
- Développement et personnalisation — en utilisant les outils fournis par WordPress et les plugins, j'ai pu personnaliser le thème et les éléments du site pour qu'ils correspondent exactement à la maquette.
- Test et déploiement — après avoir terminé le développement, j'ai effectué plusieurs tests pour m'assurer que le site était fonctionnel et responsive. Ensuite, j'ai déployé le site sur un serveur en ligne.
Résultats
- Développement web — apprentissage et maîtrise de WordPress, y compris l'installation, la configuration et l'utilisation de divers plugins.
- Design et UX — capacité à interpréter et à reproduire une maquette Figma de manière fidèle sur une plateforme de développement web.
- Gestion de projet — planification et exécution du projet du début à la fin, incluant la gestion du temps et des ressources.
Compétences mobilisées
3 apprentissage(s) critique(s) rattaché(s) à cette réalisation. 3 en attente de validation.
Produire des pages Web fluides incluant un balisage sémantique efficace et des interactions simples
Développer À validerJustification à rédiger. Ce rattachement a été proposé d’après l’unité d’enseignement sous laquelle le projet est classé dans le portfolio Word, mais le texte qui l’argumente reste à écrire.
Mettre en ligne une application Web en utilisant une solution d'hébergement standard
Développer À validerJustification à rédiger. Ce rattachement a été proposé d’après l’unité d’enseignement sous laquelle le projet est classé dans le portfolio Word, mais le texte qui l’argumente reste à écrire.
Déployer et personnaliser une application Web en utilisant un CMS ou un framework MVC
Développer À validerJustification à rédiger. Ce rattachement a été proposé d’après l’unité d’enseignement sous laquelle le projet est classé dans le portfolio Word, mais le texte qui l’argumente reste à écrire.
Ma démarche réflexive
Auto-évaluation
Je suis très satisfait du résultat final du projet « Brigitte ». Le site vitrine réalisé est fidèle à la maquette Figma et répond aux attentes initiales. J'ai particulièrement apprécié l'aspect créatif et technique de ce projet, qui m'a permis de développer des compétences précieuses en développement web.
Auto-critique constructive
Même si le projet a été un succès, j'aurais pu explorer davantage les options de personnalisation avancée de WordPress pour rendre le site encore plus unique. De plus, une meilleure gestion des plugins dès le début aurait pu optimiser le processus de développement.
Continuité et développement personnel
Suite à ce projet, j'ai continué à explorer WordPress et ses nombreuses possibilités. J'ai réalisé plusieurs autres sites web pour des projets personnels et pour des clients, en appliquant les compétences acquises lors de la réalisation du projet « Brigitte ». Ce projet a été une expérience extrêmement enrichissante qui a également renforcé ma confiance en ma capacité à gérer des projets de bout en bout, de la conception à la mise en ligne.
