Dev Web / CMS
Pourquoi l’erreur 404 ne va jamais aux soirées ? Parce qu’elle ne trouve jamais l’adresse haha........
Site Web - Portfolio
Création et développement de mon portfolio
J’ai décidé de réaliser un portfolio afin de mettre en avant mes projets et les compétences que j’ai acquises tout au long de mon BUT MMI. Ce portfolio me permet de présenter mon savoir-faire en conception, design, développement web, etc…. En plus d’être un support de présentation, il constitue également pour moi un espace d’expérimentation et d’amélioration continue, me permettant de tester de nouvelles techniques et d’affiner mes compétences en web design et en développement.
J’ai conçu et développé mon portfolio en utilisant WordPress et l’extension Elementor, deux outils qui m’ont permis de créer un site à la fois esthétique, fonctionnel et facilement modifiable.
Une direction artistique réfléchie
Avant même de commencer la création du site, j’ai pris le temps de définir une direction artistique (DA) afin de donner à mon portfolio une identité visuelle cohérente et attrayante. Mon objectif était de concevoir un espace agréable à parcourir, qui reflète mon univers tout en mettant en valeur mes projets (de plus, mon portfolio est assorti avec mon CV, pour garder une cohérence esthétique).
Conception du framework
Une fois la direction artistique définie, j’ai élaboré un framework, c’est-à-dire une structure de mise en page qui m’a permis d’organiser efficacement les différents éléments du portfolio (projets, descriptions, images, navigation, etc.) afin de garantir une expérience utilisateur optimale (UX/UI).
Développement avec WordPress et Elementor
Après avoir finalisé la structure du site, je suis passé à la phase de développement en utilisant WordPress et Elementor.
- WordPress est une plateforme puissante et flexible, idéale pour la gestion de contenu et l’optimisation SEO.
- Elementor, en tant que constructeur de pages intuitif, m’a offert une grande liberté de création grâce à son système de glisser-déposer, me permettant de concevoir un site responsive sans avoir à coder intégralement chaque élément.
Pourquoi ces choix ?
J’ai opté pour WordPress et Elementor pour plusieurs raisons :
- Facilité d’utilisation et flexibilité : Elementor permet une personnalisation avancée sans nécessiter de compétences approfondies en développement web.
- Rapidité de mise en place : Grâce à ces outils, j’ai pu concevoir mon portfolio efficacement, en optimisant chaque page selon mes besoins.
- Évolutivité : WordPress offre une multitude de plugins et d’extensions qui permettent d’ajouter des fonctionnalités au site si nécessaire (SEO, animations, formulaires, etc.).
- Adaptabilité mobile : Elementor facilite la création d’un design responsive, essentiel pour garantir une bonne expérience utilisateur sur tous les appareils.
- Optimisation SEO : WordPress propose des outils performants pour améliorer le référencement naturel, un atout pour accroître la visibilité de mon portfolio si je souhaite le mettre en valeur par les moteurs de recherche.
Extensions
Conclusion
Grâce à cette méthodologie et aux outils choisis, j’ai pu concevoir un portfolio à la fois esthétique, fonctionnel et évolutif, mettant en avant mon travail, mes projets dont je suis fier.
Ce projet m’a également permis d’approfondir mes compétences en webdesign et en gestion de contenu sur WordPress.
Site Web - Capture
Capture est un projet de groupe réalisé en troisième année, visant à créer une startup spécialisée dans la production de contenus immersifs complexes pour des objectifs de communication. L’expertise de cette agence repose sur la réalisation de visites virtuelles interactives, de vidéos immersives à 360°, de modélisations 3D et de contenus audiovisuels à haute valeur ajoutée.
Mission :
Notre mission était de développer un site web professionnel pour mettre en avant notre agence, avec la contrainte d’utiliser un thème enfant sur WordPress. J’ai pris en charge la réalisation de ce projet.
Approche Technique et Design :
Avant de commencer le développement, nous avons créé une maquette du site sur Figma pour visualiser notre vision.
Cette étape nous a également permis d’optimiser l’UX/UI pour offrir une navigation fluide et intuitive, en évitant notamment que les utilisateurs aient à cliquer plusieurs fois pour accéder à une information essentielle.
Une bonne UX/UI est essentielle pour une navigation fluide, intuitive et agréable. Elle permet aux utilisateurs de trouver rapidement l’information, améliore leur satisfaction, réduit les frustrations et augmente l’engagement. Un design bien pensé optimise aussi les conversions (achats, inscriptions pour les sites d’achats ou autres) et rend le site accessible à un plus large public !
Une fois la maquette validée, j’ai entamé le développement du site avec WordPress.
Utilisation de WordPress :
WordPress est un CMS apprécié pour sa flexibilité et sa capacité à gérer divers types de contenus. Pour ce projet, j’ai opté pour la création d’un thème enfant basé sur un thème parent simple. En partant d’un thème parent non compatible avec le Full Site Editing (FSE), j’ai développé un thème enfant personnalisé. Cela m’a permis d’ajuster précisément les fichiers de template et la feuille de styles, tout en préservant la structure de base du thème parent. J’ai ainsi pu développer des pages en utilisant du HTML, CSS et PHP.
Types de Posts Personnalisés (Champs ACF) :
Pour valoriser les réalisations de l’agence, j’ai créé un type de post spécifique dédié aux projets de vidéo mapping et vidéo 360°. Chaque réalisation inclut des informations détaillées telles que le nom du projet, son objectif et une galerie d’images, le tout en accord avec la charte graphique de Capture. J’ai également créé un champ ACF permettant de récupérer les publications des articles sur nos réalisations afin des les afficher sur la page d’accueil.
Conception des Pages :
Bien que seule la maquette de la page d’accueil ait été initialement demandée, j’ai conçu un site complet comprenant plusieurs pages pour présenter de manière cohérente l’ensemble des services, produits et réalisations de l’agence. La page d’accueil sert d’introduction impactante, avec un design qui reflète l’aspect innovant et créatif de Capture. Cette page a été réalisée en utilisant du HTML, CSS et PHP.
Conclusion
Ce projet m’a permis de développer des compétences en webdesign, en développement web grâce aux langages HTML, CSS et PHP, en gestion de contenu (CMS) mais aussi en UX/UI, tout en respectant les contraintes techniques et les exigences demandé durant le projet.
Site Web - SAE
Projet :
Lors de ma fin de première année, j’ai travaillé sur un projet visant à concevoir un site web interactif basé sur une source de données. Ce site avait pour objectif de regrouper tous les projets réalisés au cours de la première année (semestre 1 et 2) et d’intégrer un système de filtre permettant de sélectionner les projets appelés « SAE » selon différents critères.
Approche technique et design :
Avant de commencer le développement, j’ai réfléchi à comment je voulais le faire, pour changer de d’habitude et un peu me challenger, j’ai décidé de réaliser le site en « horizontal », comme si c’était un carrousel géant !
J’ai également porté une attention à l’accessibilité, en appliquant des contrastes de couleurs adaptés, une hiérarchie visuelle cohérente et des balises HTML.
Technologies utilisées :
Pour réaliser ce projet, j’ai utilisé plusieurs langages et outils adaptés aux besoins du site :
- HTML : Pour structurer le contenu de manière logique et accessible surtout.
- CSS : Pour le design et les animations.
- JavaScript : Pour dynamiser le site avec des interactions (transitions, gestion d’événements, etc…) et surtout réaliser un système de filtre permettant de filtrer les différents par Semestre mais aussi par U.E
- PHP : Pour gérer les interactions avec la base de données (le PHP permettait de récupérer les différentes présentations que j’avais au préalable enregistré dans une base de données que j’ai créé puis d’afficher les contenus).
- MySQL : Pour stocker et récupérer les données affichées sur le site.
L’utilisation de PHP et MySQL a permis d’intégrer une base de données afin de stocker et d’afficher les informations du site. JavaScript a été utilisé pour enrichir l’interactivité, notamment en permettant le filtrage des projets selon différents critères.
Conception des pages :
J’ai conçu plusieurs pages essentielles pour structurer le contenu de manière efficace :
- Une page d’accueil qui souhaite la bienvenue
- Une page de présentation de moi-même
- Une page galerie qui permet de retrouver les différents projets avec le système de filtre et d’accéder aux différents projets en cliquant dessus
Conclusion :
Ce projet m’a permis d’approfondir mes compétences en développement web, notamment l’intégration d’une base de données et la gestion dynamique du contenu avec PHP et MySQL. J’ai également renforcé mes connaissances en UX/UI, en veillant à concevoir une interface fluide et intuitive pour les utilisateurs.